Product colors

TokenLightDark

--background
Page background (kit cream; kit ink in dark).
43 26% 95%
231 8% 18%
--foreground
Default text color.
231 8% 18%
43 26% 95%
--surface
Panels and cards: a lighter cream than the page in light mode.
43 26% 97%
231 6% 20%
--surface-raised
Text fields (.input) and menus and popovers (.float-surface).
0 0% 100%
231 6% 20%
--surface-hover
Row and control hover fill.
43 20% 92%
231 7% 26%
--surface-sunken
Recessed areas: wells, the rail, tracks.
43 20% 92%
231 8% 15%
--muted
Muted fill for quiet chips and placeholders.
43 20% 92%
231 7% 26%
--muted-foreground
Secondary text, 4.5:1 or more on sunken surfaces.
231 6% 38%
43 8% 70%
--border
Default border and divider.
40 12% 84%
231 7% 28%
--border-strong
Stronger border for controls and emphasis.
40 9% 78%
231 6% 36%
--input
Text field border.
40 12% 84%
231 6% 34%
--ring
Focus ring (the kit's focus language: ring-foreground).
231 8% 18%
43 26% 95%
--primary
Primary action fill (kit lime, the same in dark).
78 51% 64%
78 51% 64%
--primary-foreground
Text and icons on primary.
231 8% 18%
231 8% 18%
--secondary
Secondary action fill.
43 20% 92%
231 7% 26%
--secondary-foreground
Text and icons on secondary.
231 8% 18%
43 26% 95%
--accent
Accent (kit teal, darkened or lightened for AA text).
181 30% 32%
181 35% 64%
--accent-foreground
Text and icons on accent.
0 0% 100%
231 8% 18%
--destructive
Danger: delete, errors.
356 65% 46%
356 85% 77%
--destructive-foreground
Text and icons on destructive.
0 0% 100%
231 8% 18%
--success
Success, 4.5:1 or more as text on cream and sunken.
142 71% 27%
142 65% 52%
--success-foreground
Text and icons on success.
0 0% 100%
231 8% 18%
--warning
Warning, 4.5:1 or more as text.
38 92% 29%
38 92% 55%
--warning-foreground
Text and icons on warning.
0 0% 100%
231 8% 18%
--info
Information, 4.5:1 or more as text.
217 91% 45%
217 85% 74%
--info-foreground
Text and icons on info.
0 0% 100%
231 8% 18%
--paper
Resume paper background (light palette; the dark one is `.paper[data-scheme='dark']`).
0 0% 100%
0 0% 100%
--paper-ink
Resume paper text.
222 14% 11%
222 14% 11%
--paper-rule
Resume paper rules and dividers.
220 13% 88%
220 13% 88%
--paper-soft
Resume paper secondary text.
220 9% 46%
220 9% 46%
--paper-width
Resume page width (A4, 210mm).
210mm
210mm
--paper-height
Resume page height (A4, 297mm).
297mm
297mm
--z-sticky
Sticky headers and toolbars.
20
20
--z-sidebar
The app sidebar.
30
30
--z-phone-nav
The phone bottom bar.
40
40
--z-tooltip
Tooltips: above page content, toolbars, sticky headers and the sidebar.
75
75
--z-dialog
Dialogs.
80
80
--z-popover
Popovers, menus and lists.
90
90
--z-sheet
Bottom sheets and full-screen sheets.
90
90
--z-toast
Toasts.
95
95
--z-tooltip-overlay
A tooltip whose control is inside a dialog, popover, menu or sheet.
110
110