Color
Color not only defines our brand but is also crucial in creating consistent experiences across products and platforms.
Color anatomy
Color anatomy dissects the essential roles and psychological impacts of different hues within our design language. Vibrant colors breathe life into the interface, signaling important actions and guiding users with visual cues. On the other hand, neutral tones provide a subtle backdrop, ensuring content readability and conveying operational states without unnecessary distraction.
Brand
| Name | Value | Preview |
|---|---|---|
| brand-50 | #faf5ff | |
| brand-100 | #f3e8ff | |
| brand-200 | #e9d5ff | |
| brand-300 | #d8b4fe | |
| brand-400 | #c084fc | |
| brand-500 | #a855f7 | |
| brand-600 | #9333ea | |
| brand-700 | #7e22ce | |
| brand-800 | #6b21a8 | |
| brand-900 | #581c87 | |
| brand-950 | #3b0764 |
Neutral color
| Name | Value | Preview |
|---|---|---|
| neutral-0 | #ffffff | |
| neutral-50 | #fbfbfb | |
| neutral-100 | #f4f4f5 | |
| neutral-200 | #e9eaec | |
| neutral-300 | #cfd1d4 | |
| neutral-400 | #b4b6bb | |
| neutral-500 | #96989c | |
| neutral-600 | #75777c | |
| neutral-700 | #5c5e63 | |
| neutral-800 | #3e4044 | |
| neutral-900 | #313337 | |
| neutral-950 | #232529 | |
| neutral-1000 | #1b1d21 |
Red
| Name | Value | Preview |
|---|---|---|
| red-50 | #fef2f2 | |
| red-100 | #fee2e2 | |
| red-200 | #fecaca | |
| red-300 | #fca5a5 | |
| red-400 | #f87171 | |
| red-500 | #ef4444 | |
| red-600 | #dc2626 | |
| red-700 | #b91c1c | |
| red-800 | #991b1b | |
| red-900 | #7f1d1d | |
| red-950 | #450a0a |
Amber
| Name | Value | Preview |
|---|---|---|
| amber-50 | #fffbeb | |
| amber-100 | #fef3c7 | |
| amber-200 | #fde68a | |
| amber-300 | #fcd34d | |
| amber-400 | #fbbf24 | |
| amber-500 | #f59e0b | |
| amber-600 | #d97706 | |
| amber-700 | #b45309 | |
| amber-800 | #92400e | |
| amber-900 | #78350f | |
| amber-950 | #451a03 |
Emerald
| Name | Value | Preview |
|---|---|---|
| emerald-50 | #ecfdf5 | |
| emerald-100 | #d1fae5 | |
| emerald-200 | #a7f3d0 | |
| emerald-300 | #6ee7b7 | |
| emerald-400 | #34d399 | |
| emerald-500 | #10b981 | |
| emerald-600 | #059669 | |
| emerald-700 | #047857 | |
| emerald-800 | #065f46 | |
| emerald-900 | #064e3b | |
| emerald-950 | #022c22 |
Teal
| Name | Value | Preview |
|---|---|---|
| teal-50 | #f0fdfa | |
| teal-100 | #ccfbf1 | |
| teal-200 | #99f6e4 | |
| teal-300 | #5eead4 | |
| teal-400 | #2dd4bf | |
| teal-500 | #14b8a6 | |
| teal-600 | #0d9488 | |
| teal-700 | #0f766e | |
| teal-800 | #115e59 | |
| teal-900 | #134e4a | |
| teal-950 | #042f2e |
Cyan
| Name | Value | Preview |
|---|---|---|
| cyan-50 | #ecfeff | |
| cyan-100 | #cffafe | |
| cyan-200 | #a5f3fc | |
| cyan-300 | #67e8f9 | |
| cyan-400 | #22d3ee | |
| cyan-500 | #06b6d4 | |
| cyan-600 | #0891b2 | |
| cyan-700 | #0e7490 | |
| cyan-800 | #155e75 | |
| cyan-900 | #164e63 | |
| cyan-950 | #083344 |
Blue
| Name | Value | Preview |
|---|---|---|
| blue-50 | #eff6ff | |
| blue-100 | #dbeafe | |
| blue-200 | #bfdbfe | |
| blue-300 | #93c5fd | |
| blue-400 | #60a5fa | |
| blue-500 | #3b82f6 | |
| blue-600 | #2563eb | |
| blue-700 | #1d4ed8 | |
| blue-800 | #1e40af | |
| blue-900 | #1e3a8a | |
| blue-950 | #172554 |
Violet
| Name | Value | Preview |
|---|---|---|
| violet-50 | #f5f3ff | |
| violet-100 | #ede9fe | |
| violet-200 | #ddd6fe | |
| violet-300 | #c4b5fd | |
| violet-400 | #a78bfa | |
| violet-500 | #8b5cf6 | |
| violet-600 | #7c3aed | |
| violet-700 | #6d28d9 | |
| violet-800 | #5b21b6 | |
| violet-900 | #4c1d95 | |
| violet-950 | #2e1065 |
Fuchsia
| Name | Value | Preview |
|---|---|---|
| fuchsia-50 | #fdf4ff | |
| fuchsia-100 | #fae8ff | |
| fuchsia-200 | #f5d0fe | |
| fuchsia-300 | #f0abfc | |
| fuchsia-400 | #e879f9 | |
| fuchsia-500 | #d946ef | |
| fuchsia-600 | #c026d3 | |
| fuchsia-700 | #a21caf | |
| fuchsia-800 | #86198f | |
| fuchsia-900 | #701a75 | |
| fuchsia-950 | #4a044e |
Color roles
Color roles describe the intention behind the color. They are constructed using some colors from the palette and are applied using design tokens. This means rather than choosing a certain shade or value, you'll choose a design token to apply colors.
| Name | Token | Preview |
|---|---|---|
| brand | color-brand-[] | |
| neutral | color-neutral-[] | |
| danger | color-red-[] | |
| warning | color-amber-[] |
- Brand: use for primary actions or elements that represent and convey our brand identity.
- Neutral: use for standard text and less prominent user interface components, like secondary buttons or navigational elements.
- Danger: use for user interface elements that signify danger or critical error conditions.
- Warning: use for user interface elements that signal caution to avoid potential mistakes or errors.