# Color

> Primitives are the atoms. Components consume only the semantic tokens below, never a primitive or a hex. The brand shifts per theme. Everything else is shared.

The values live in `app/globals.css`. The page shows them resolved for the theme you are in.

## Neutrals · zinc

| Primitive | Hex | Use |
| --- | --- | --- |
| zinc-950 | #09090B | bg.canvas |
| zinc-900 | #18181B | bg.surface, small fills |
| zinc-800 | #27272A | border.subtle |
| zinc-700 | #3F3F46 | border.strong |
| zinc-500 | #71717A | a reference; light fg.muted is #68686F |
| zinc-400 | #A1A1AA | fg.secondary |
| zinc-200 | #E4E4E7 | text on dark |
| zinc-50 | #FAFAFA | fg.primary |

## Accents

| Primitive | Hex | Use |
| --- | --- | --- |
| violet-500 | #7C6BFF | entrepta brand |
| violet-400 | #9B8EFF | brand hover |
| indigo-400 | #818CF8 | status.info |
| emerald-500 | #10B981 | status.success |
| emerald-400 | #34D399 | soft success fg |
| amber-500 | #F59E0B | status.warning |
| rose-500 | #F43F5E | status.error |

## Surfaces

Cards sit on --bg-card, a hair above the canvas and defined by their border. Anything that covers the page, and code, sits on --bg-overlay. Fields sit on --bg-field. A zinc-900 area reads as a field of gray, so no component paints one.

- `--bg-canvas`: the page
- `--bg-card`: cards, a hair above the canvas
- `--bg-card-hover`: a card under the pointer
- `--bg-overlay`: menus, tooltips, code, dialogs, the palette, toasts
- `--bg-field`: inputs, textareas, the box of a checkbox or switch
- `--bg-surface`: zinc-900: small fills only, never an area

## Finish

Every surface has the same finish: near black underneath, the .sheen class for a brand glow in the top-left corner, and --edge-light, a line of light on the top edge, which --shadow-card and --shadow-overlay already carry. Put both on a surface of your own.

- `--sheen-tint`: the brand glow in a corner, 9% dark and 4% light
- `--bg-surface-brand`: the tint a highlighted row takes

## Text and borders

- `--fg-primary`: titles and body text
- `--fg-secondary`: supporting text
- `--fg-muted`: metadata, timestamps
- `--border-subtle`: card and divider borders
- `--border-strong`: inputs, hover borders

## Brand

Every theme sets the brand and its two inks. The rest is mixed from --fg-brand with color-mix, so it follows any theme on its own. Switch the theme with the button in the corner and these repaint.

- `--fg-brand`: fills, borders, glyphs, text 24px and up
- `--fg-brand-hover`: the fill on hover
- `--fg-brand-text`: brand-colored text below 24px
- `--fg-on-brand`: text on a brand fill
- `--bg-surface-brand`: the tint: soft badges, selected items
- `--border-brand`: 35% of the brand
- `--border-brand-strong`: 60%, a featured card on hover
- `--fg-brand-glow`: 50%, pulses and glows

## Inks

Each ink on what it actually sits on, measured for the theme and mode you are in. The floors are what the contrast test enforces in all twelve combinations.

| Ink | On | Floor | Where |
| --- | --- | --- | --- |
| `--fg-on-brand` | `--fg-brand` | 4.5:1 | text on a brand fill |
| `--fg-brand-text` | `--bg-canvas` | 4.5:1 | brand text on the page |
| `--fg-brand-text` | `--bg-card` | 4.5:1 | brand text on a card |
| `--fg-brand-text` | `--bg-surface-brand` over `--bg-canvas` | 5:1 | brand text on the tint |
| `--fg-primary` | `--bg-canvas` | 4.5:1 | body text |
| `--fg-secondary` | `--bg-card` | 4.5:1 | secondary text on a card |
| `--fg-muted` | `--bg-canvas` | 4.5:1 | metadata on the page |
| `--fg-muted` | `--bg-card` | 4.5:1 | metadata on a card |
| `--fg-muted` | `--bg-overlay` | 4.5:1 | metadata in a dialog |
| `--status-success-fg` | `--status-success-soft` over `--bg-canvas` | 4.5:1 | a soft success badge |
| `--status-error-fg` | `--bg-card` | 4.5:1 | a field error on a card |

## Chart palette

No fixed color. Each series is the brand's hue, turned in steps of 45°, at one lightness per mode that clears 3:1 on a card. Switch the theme and the palette follows. A result above or below zero uses the status colors and a sign instead.

- `--chart-1`: the brand's hue
- `--chart-2`: the brand's hue turned 45°
- `--chart-3`: the brand's hue turned 90°
- `--chart-4`: the brand's hue turned 135°
- `--chart-5`: the brand's hue turned 180°
- `--chart-6`: the brand's hue turned 225°
- `--chart-7`: the brand's hue turned 270°
- `--chart-8`: the brand's hue turned 315°
- `--chart-grid`: horizontal grid lines only
- `--chart-axis`: axis labels

## Status

- `--status-success`: synced, shipped
- `--status-warning`: stale, partial
- `--status-error`: error, denied
- `--status-info`: loading, syncing