Colors
Neutral ladder, semantic roles, no literals
Every color in the product is one of these tokens, defined once for light and dark in packages/ui/src/theme.css. Utilities are bg-, text-, border-, ring- plus the token name.
Neutral
The elevation ladder. Canvas → subtle (field fills) → filled cards → hover → active → raised → overlay.
| Light | Dark | Token | Utility | Light value | Dark value |
|---|---|---|---|---|---|
| --background | bg-background | #ffffff | #080808 | ||
| --foreground | bg-foreground | #191c1f | #f5f5f5 | ||
| --surface-subtle | bg-surface-subtle | #fafafa | #0b0b0b | ||
| --surface | bg-surface | #f6f6f6 | #111111 | ||
| --surface-hover | bg-surface-hover | #eeeeee | #191919 | ||
| --surface-active | bg-surface-active | #e5e5e5 | #202020 | ||
| --surface-raised | bg-surface-raised | #ffffff | #141414 | ||
| --surface-overlay | bg-surface-overlay | #ffffff | #161616 | ||
| --muted-foreground | bg-muted-foreground | #70757b | #929292 | ||
| --placeholder | bg-placeholder | #9aa0a6 | #656565 |
Borders
Subtle between filled surfaces, default for structure, strong for hover/selection.
| Light | Dark | Token | Utility | Light value | Dark value |
|---|---|---|---|---|---|
| --border-subtle | bg-border-subtle | #ededed | #1d1d1d | ||
| --border | bg-border | #d8d8d8 | #292929 | ||
| --border-strong | bg-border-strong | #b8b8b8 | #3a3a3a | ||
| --ring | bg-ring | #191c1f | #b8b8b8 | ||
| --input | bg-input | #d8d8d8 | #292929 |
Semantic
Each role has a strong fill (+ -foreground, shown as text on that fill), a text color, and a soft callout pair (-surface + -border).
| Light | Dark | Token | Utility | Light value | Dark value |
|---|---|---|---|---|---|
| --destructive | bg-destructive | #dc3545 | #df656b | ||
| Aa | Aa | --destructive-foreground | text-destructive-foreground | #ffffff | #130507 |
| --destructive-surface | bg-destructive-surface | #fff1f2 | #211113 | ||
| --destructive-border | bg-destructive-border | #fecdd3 | #4b2428 | ||
| --success | bg-success | #008f68 | #42b991 | ||
| Aa | Aa | --success-foreground | text-success-foreground | #ffffff | #03120d |
| --success-surface | bg-success-surface | #edf9f5 | #0d1b16 | ||
| --success-border | bg-success-border | #b9e7d8 | #204638 | ||
| --warning | bg-warning | #a97800 | #c99a3b | ||
| Aa | Aa | --warning-foreground | text-warning-foreground | #ffffff | #181006 |
| --warning-surface | bg-warning-surface | #fff8e6 | #1d180d | ||
| --warning-border | bg-warning-border | #eed79b | #493a1d | ||
| --info | bg-info | #276ef1 | #6f96e8 | ||
| Aa | Aa | --info-foreground | text-info-foreground | #ffffff | #061022 |
| --info-surface | bg-info-surface | #eef4ff | #101725 | ||
| --info-border | bg-info-border | #c6d8ff | #283b62 | ||
| --brand | bg-brand | #276ef1 | #6f96e8 | ||
| Aa | Aa | --brand-foreground | text-brand-foreground | #ffffff | #061022 |
| --brand-surface | bg-brand-surface | #eef4ff | #101725 | ||
| --brand-border | bg-brand-border | #c6d8ff | #283b62 |
Categorical
Labels and data series that need to be told apart without meaning success/failure.
| Light | Dark | Token | Utility | Light value | Dark value |
|---|---|---|---|---|---|
| --teal | bg-teal | #008f68 | #42b991 | ||
| Aa | Aa | --teal-foreground | text-teal-foreground | #ffffff | #03120d |
| --violet | bg-violet | #7c5ce5 | #9482df | ||
| Aa | Aa | --violet-foreground | text-violet-foreground | #ffffff | #0d071d |
| --link | bg-link | #1f63da | #7b9fe6 | ||
| Aa | Aa | --link-foreground | text-link-foreground | #ffffff | #061022 |
| --pink | bg-pink | #d92d5b | #df7184 | ||
| Aa | Aa | --pink-foreground | text-pink-foreground | #ffffff | #1d060d |
| --brown | bg-brown | #876257 | #ad887d | ||
| Aa | Aa | --brown-foreground | text-brown-foreground | #ffffff | #160c09 |
shadcn aliases
Names the shadcn primitives expect; they alias onto the ladder above so the kit needs no re-theming.
| Light | Dark | Token | Utility | Light value | Dark value |
|---|---|---|---|---|---|
| Aa | Aa | --accent-foreground | text-accent-foreground | #1f2226 | #f5f5f5 |
| --accent | bg-accent | #eeeeee | #191919 | ||
| --skeleton | bg-skeleton | #e8e8e8 | #1d1d1d | ||
| --muted | bg-muted | #f6f6f6 | #111111 | ||
| Aa | Aa | --secondary-foreground | text-secondary-foreground | #1f2226 | #f5f5f5 |
| --secondary | bg-secondary | #f1f1f1 | #151515 | ||
| Aa | Aa | --primary-foreground | text-primary-foreground | #ffffff | #080808 |
| --primary | bg-primary | #191c1f | #f5f5f5 | ||
| Aa | Aa | --popover-foreground | text-popover-foreground | #191c1f | #f5f5f5 |
| --popover | bg-popover | #ffffff | #161616 | ||
| Aa | Aa | --card-foreground | text-card-foreground | #191c1f | #f5f5f5 |
| --card | bg-card | #ffffff | #141414 |
Charts
Ordered series colors.
| Light | Dark | Token | Utility | Light value | Dark value |
|---|---|---|---|---|---|
| --chart-5 | bg-chart-5 | #d92d5b | #ff6681 | ||
| --chart-4 | bg-chart-4 | #7c5ce5 | #a38aff | ||
| --chart-3 | bg-chart-3 | #a97800 | #e4b13a | ||
| --chart-2 | bg-chart-2 | #276ef1 | #70a0ff | ||
| --chart-1 | bg-chart-1 | #008f68 | #35c99b |
Editor canvas
Selection and component chrome on the email editor canvas (fixed hue on both themes).
| Light | Dark | Token | Utility | Light value | Dark value |
|---|---|---|---|---|---|
| --editor-accent | bg-editor-accent | #276ef1 | #276ef1 | ||
| Aa | Aa | --editor-accent-foreground | text-editor-accent-foreground | #ffffff | #ffffff |
| --editor-accent-strong | bg-editor-accent-strong | #1a56d4 | #1a56d4 | ||
| --editor-component | bg-editor-component | #7c3aed | #7c3aed | ||
| Aa | Aa | --editor-component-foreground | text-editor-component-foreground | #ffffff | #ffffff |
| --editor-component-strong | bg-editor-component-strong | #6d20c5 | #6d20c5 |