Media Kit
The Media Kit provides official Ethereum Identity Kit logos and branding assets. These assets are available in both light and dark mode variations to ensure optimal visibility across different themes and backgrounds.
Logos
Our official logos are available in both standalone and text variants. Choose the appropriate version based on your needs and the background color of your application.
| Mode | Type | Preview | Download |
|---|---|---|---|
| Light | Logo with Text |  | PNG / SVG |
| Light | Logo |  | PNG / SVG |
| Dark | Logo |  | PNG / SVG |
| Dark | Logo with Text |  | PNG / SVG |
Powered By Badges
If you’re integrating Ethereum Identity Kit into your application, you can showcase this using our “Powered By” badges. These badges come in different styles to match your application’s design.
| Mode | Type | Preview | Download |
|---|---|---|---|
| Light | Logo with Text |  | PNG / SVG |
| Light | Rounded Inner Text |  | PNG / SVG |
| Light | Rounded Outer Text |  | PNG / SVG |
| Dark | Logo with Text |  | PNG / SVG |
| Dark | Rounded Inner Text |  | PNG / SVG |
| Dark | Rounded Outer Text |  | PNG / SVG |
Theme
Ethereum Identity Kit uses native CSS for styling. You can customize the theme of Ethereum identity kit by overriding the default root values.
Colors
| Category | Variable Name | Color Value |
|---|---|---|
| Text Colors | ||
--ethereum-identity-kit-text-primary | #000000 | |
--ethereum-identity-kit-text-primary-dark | #ffffff | |
--ethereum-identity-kit-text-neutral | #555555 | |
--ethereum-identity-kit-text-neutral-dark | #aaaaaa | |
--ethereum-identity-kit-text-light | #ffffff | |
--ethereum-identity-kit-text-light-dark | #ffffff | |
| Primary Colors | ||
--ethereum-identity-kit-primary | #ffe066 | |
--ethereum-identity-kit-primary-hover | #fde583 | |
| Link Colors | ||
--ethereum-identity-kit-link | #0059ff | |
--ethereum-identity-kit-link-dark | #4dabff | |
--ethereum-identity-kit-link-selected | #0056b3 | |
--ethereum-identity-kit-link-selected-dark | #66b3ff | |
--ethereum-identity-kit-link-hover | #0047cc | |
--ethereum-identity-kit-link-hover-dark | #3399ff | |
| Neutral Colors | ||
--ethereum-identity-kit-neutral | #ffffff | |
--ethereum-identity-kit-neutral-dark | #2d2d2d | |
--ethereum-identity-kit-neutral-hover | #d0d0d0 | |
--ethereum-identity-kit-neutral-hover-dark | #3d3d3d | |
--ethereum-identity-kit-neutral-light | #f4f4f4 | |
--ethereum-identity-kit-neutral-light-dark | #444444 | |
| Background Colors | ||
--ethereum-identity-kit-background | #ffffff | |
--ethereum-identity-kit-background-dark | #333333 | |
--ethereum-identity-kit-background-overlay | rgba(0, 0, 0, 0.5) | |
--ethereum-identity-kit-background-overlay-dark | rgba(0, 0, 0, 0.7) | |
| Status Colors | ||
--ethereum-identity-kit-deletion | #ff7c7c | |
--ethereum-identity-kit-restriction | #ef4444 | |
--ethereum-identity-kit-restriction-hover | #ef444433 | |
--ethereum-identity-kit-success | #49de80 | |
--ethereum-identity-kit-indexing-bar | #24ad57 | |
| Shadow Colors | ||
--ethereum-identity-kit-shadow-small | 0 2px 4px rgba(0, 0, 0, 0.1) | |
--ethereum-identity-kit-shadow-small-dark | 0 2px 4px rgba(255, 255, 255, 0.2) | |
--ethereum-identity-kit-shadow-medium | 0 2px 6px rgba(0, 0, 0, 0.1) | |
--ethereum-identity-kit-shadow-medium-dark | 0 2px 6px rgba(255, 255, 255, 0.2) | |
--ethereum-identity-kit-shadow-large | 0 2px 12px rgba(0, 0, 0, 0.1) | |
--ethereum-identity-kit-shadow-large-dark | 0 2px 12px rgba(255, 255, 255, 0.2) | |
| Social Colors | ||
--ethereum-identity-kit-social-twitter | rgb(0, 89, 255) | |
--ethereum-identity-kit-social-twitter-dark | rgb(96, 165, 250) | |
--ethereum-identity-kit-social-github | #333333 | |
--ethereum-identity-kit-social-github-dark | #666666 | |
--ethereum-identity-kit-social-discord | rgb(37, 99, 235) | |
--ethereum-identity-kit-social-discord-dark | rgb(147, 197, 253) |