Tokens
Color
79 color tokens, each shown with its value in all three themes. Reference them in
CSS as var(--color-…). These are generated directly from the Zetta spec.
| Token | Light | Dark | Accessibility |
|---|---|---|---|
--color-brand | #b6d600 | #b6d600 | #ffffff |
--color-brand-hover | rgba(182, 214, 0, 0.85) | rgba(182, 214, 0, 0.85) | #f5f5f5 |
--color-brand-active | rgba(182, 214, 0, 0.70) | rgba(182, 214, 0, 0.70) | #e5e5e5 |
--color-brand-text | #0a0a31 | #0a0a31 | #000000 |
--color-brand-bg | #f0fcd4 | #1a2c00 | #000000 |
--color-primary | #5155C6 | #818cf8 | #ffffff |
--color-primary-hover | rgba(81, 85, 198, 0.85) | rgba(129, 140, 248, 0.85) | #f5f5f5 |
--color-primary-active | rgba(81, 85, 198, 0.92) | rgba(129, 140, 248, 0.70) | #e5e5e5 |
--color-primary-text | #ffffff | #1e1b4b | #000000 |
--color-primary-bg | #eef2ff | #1e1b4b | #000000 |
--color-ai | #9d46e5 | #c084fc | #ffffff |
--color-ai-hover | rgba(157, 70, 229, 0.85) | rgba(192, 132, 252, 0.85) | #f5f5f5 |
--color-ai-active | rgba(157, 70, 229, 0.70) | rgba(192, 132, 252, 0.70) | #e5e5e5 |
--color-ai-text | #ffffff | #1a0533 | #000000 |
--color-ai-bg | #f5eeff | #1a0533 | #000000 |
--color-on-danger | #ffffff | #450a0a | #000000 |
--color-success | #10b981 | #34d399 | #ffffff |
--color-success-text | #065f46 | #a7f3d0 | #ffffff |
--color-success-bg | #d1fae5 | #064e3b | #000000 |
--color-warning | #f59e0b | #fbbf24 | #ffffff |
--color-warning-text | #78350f | #fde047 | #ffffff |
--color-warning-bg | #fef3c7 | #78350f | #000000 |
--color-danger | #ef4444 | #f87171 | #ffffff |
--color-danger-text | #991b1b | #ffb3b3 | #ffffff |
--color-danger-bg | #fee2e2 | #7f1d1d | #000000 |
--color-danger-solid | #dc2626 | #f87171 | #ffffff |
--color-danger-solid-hover | #b91c1c | #fca5a5 | #f5f5f5 |
--color-danger-solid-active | #991b1b | #fecaca | #e5e5e5 |
--color-info | #3b82f6 | #60a5fa | #ffffff |
--color-info-text | #1e3a8a | #bfdbfe | #ffffff |
--color-info-bg | #dbeafe | #1e3a8a | #000000 |
--color-canvas | #f8fafc | #1d2125 | #000000 |
--color-surface-card | #ffffff | #22272e | #000000 |
--color-surface-header | #ffffff | #1d2125 | #000000 |
--color-surface-sidebar | #f8fafc | #161b22 | #000000 |
--color-surface-table-header | #f3f4f6 | #2a3140 | #000000 |
--color-surface-tab-bg | #f1f5f9 | #1e2530 | #000000 |
--color-surface-tab-active | #ffffff | #252d3a | #000000 |
--color-surface-muted | #f4f4f5 | #2d333b | #111111 |
--color-surface-secondary | #e4e4e7 | #353c46 | #1a1a1a |
--color-surface-pressed | #d4d4d8 | #454f59 | #262626 |
--color-overlay | rgba(0, 0, 0, 0.5) | rgba(0, 0, 0, 0.70) | rgba(0, 0, 0, 0.85) |
--color-accent | #f4f4f5 | #2d333b | #0a0a0a |
--color-popover | #ffffff | #22272e | #000000 |
--color-popover-foreground | #0a0a0a | #ffffff | #ffffff |
--color-ink | #0a0a0a | #ffffff | #ffffff |
--color-body | #111827 | #e2e8f0 | #ffffff |
--color-muted | #374151 | #94a3b8 | #bdbdbd |
--color-ink-subtle | #374151 | #94a3b8 | #bdbdbd |
--color-placeholder | #6b7280 | #64748b | #8c8c8c |
--color-hairline | #e5e7eb | #454f59 | #404040 |
--color-border-strong | #d0d5dd | #5c6773 | #ffffff |
--color-border-focus | #b6d600 | #b6d600 | #ffffff |
--color-border-announcement | #18181b | #ffffff | #ffffff |
--color-disabled-bg | #f5f5f5 | #1f2937 | #1a1a1a |
--color-disabled-text | #9ca3af | #6b7280 | #666666 |
--color-disabled-border | #e5e5e5 | #374151 | #404040 |
--color-badge-neutral-text | #0a0a0a | #ffffff | #ffffff |
--color-skeleton-bg | #e5e7eb | #2d333b | #111111 |
--color-skeleton-shimmer | #f3f4f6 | #374151 | #262626 |
--color-spinner-track | #e5e7eb | #374151 | #1a1a1a |
--color-spinner-line | #b6d600 | #b6d600 | #ffffff |
--color-component-border-color | #e5e7eb | #454f59 | #ffffff |
--color-selected-border-color | #5155C6 | #818cf8 | #ffffff |
--color-hover-bg | #f4f4f5 | #2d333b | #ffffff |
--color-hover-text | #0a0a0a | #ffffff | #000000 |
--color-status-icon-success | #10b981 | #34d399 | check_circle |
--color-status-icon-warning | #f59e0b | #fbbf24 | warning |
--color-status-icon-danger | #ef4444 | #f87171 | error |
--color-status-icon-info | #3b82f6 | #60a5fa | info |
--color-status-icon-neutral | #374151 | #94a3b8 | radio_button_unchecked |
--color-chart-1 | #537ABB | #789FDF | #ffffff |
--color-chart-2 | #008C9A | #39B1BE | #d9d9d9 |
--color-chart-3 | #A16F21 | #C69450 | #B0B0B0 |
--color-chart-4 | #AF5C73 | #D58297 | #8A8A8A |
--color-chart-5 | #856AB2 | #A88FD6 | #666666 |
--color-scrollbar-track | #f1f5f9 | #1e2530 | #000000 |
--color-scrollbar-thumb | #cbd1d8 | #3a4150 | #808080 |
--color-scrollbar-thumb-hover | #aeb4bd | #4b5563 | #ffffff |