Colors

Every colour token, per theme, with what it is for.

Cynco UI is neutral by design: grey surfaces and four steps of text, with one blue (primary, #0077e6) doing the pointing. Reach for colour only when it carries meaning, and never let hue alone carry it.

Each token is a CSS variable and a Tailwind colour: var(--card) is bg-card. Swatches are rendered live with each theme's variables; switch themes with class="dark" or data-theme on any element. 177 tokens.

Token

LightDarkModernModern dark

Text

Four steps of text, each with a purpose, plus placeholder.

foreground
Primary text and icons on background, card and interactive-secondary.

#121212 Light
#ddd Dark
#121212 Modern
#ddd Modern dark
muted-foreground
Secondary text: body copy, form text and labels (text-body, text-form-label) on background and card.

#444 Light
#ccc Dark
#444 Modern
#ccc Modern dark
tertiary-foreground
Tertiary text, the most-used text colour: captions, table cells, breadcrumbs, descriptions on background and card.

#666 Light
#999 Dark
#666 Modern
#999 Modern dark
subtle
Quiet metadata text and icons (text-body-secondary), search hints. About 4.35:1 on background in Light and 3.98:1 in Dark, just under 4.5:1, so keep it to non-essential metadata and icons.

#6e6e6e Light
#919191 Dark
#6e6e6e Modern
#919191 Modern dark
placeholder
Input placeholder text and disabled checkbox labels (2.3:1 Light, 3.2:1 Dark) — placeholder, never content.

#737373 Light
#909090 Dark
#737373 Modern
#909090 Modern dark

Surfaces

The page, the app chrome around it, cards and raised controls.

background
Page background of the main content area (bg-background); body default.

#fafaf9 Light
#161616 Dark
#ffffff Modern
#0a0a0a Modern dark
outer-background
App chrome behind the main content panel: sidebar area, mobile top bar.

#f5f5f4 Light
#121212 Dark
#fafaf9 Modern
#000000 Modern dark
interactive-secondary
Fill of secondary buttons, inputs, selects and chips — the raised control surface.

#fff Light
#1d1d1d Dark
#fff Modern
#141414 Modern dark
interactive-secondary-hover
Hover/open fill for interactive-secondary controls.

#fcfaff Light
#292929 Dark
#fcfaff Modern
#1e1e1e Modern dark
muted
Muted fills: skeletons, badges, inline code, quiet chips.

#f2f2f2 Light
#1c1c1d Dark
#f2f2f2 Modern
#111111 Modern dark
input-background
Fill of long text inputs and the metadata editor.

#ffffff Light
#1d1d1d Dark
#ffffff Modern
#111111 Modern dark
card
Card and inline panel surface, toasts.

#f8f8f7 Light
#121212 Dark
#fafaf9 Modern
#050505 Modern dark
card-foreground
Text on card (shadcn slot).

oklch(0.141 0.005 Light
oklch(0.985 0 0) Dark
oklch(0.141 0.005 Modern
oklch(0.985 0 0) Modern dark

Primary

The one accent. Reach for it only for the main action, selection and focus.

sandbox
Sandbox or demo-company cues only (banner, badge). Purple, #8838ff.

#7429dd Light
#7429dd Dark
#7429dd Modern
#7429dd Modern dark
primary
The one accent (#0077e6): primary button, selection, active borders, links, chart series 1, ::selection. Text on it is primary-foreground.

#0067d1 Light
#0074e3 Dark
#0067d1 Modern
#0074e3 Modern dark
primary-foreground
Text and icons on primary fills (primary buttons).

#ffffff Light
#ffffff Dark
#ffffff Modern
#ffffff Modern dark
primary-text

var(--primary) Light
#2f92ff Dark
var(--primary) Modern
#2f92ff Modern dark
hover-primary
Hover fill for selectable rows and checkboxes (a faint primary tint in light).

#f5fbff Light
var(--interactive- Dark
#f5fbff Modern
var(--interactive- Modern dark
active-primary
Selected/open fill for selects and appearance options.

#e8f5ff Light
#292929 Dark
#e8f5ff Modern
#1e1e1e Modern dark
radio-group-hover-primary
Hover fill for radio-group area items.

#f5fbff Light
var(--interactive- Dark
#f5fbff Modern
var(--interactive- Modern dark
ring
Focus outline colour (outline-ring/50 on every element).

oklch(0.63 0.015 2 Light
oklch(0.52 0.017 2 Dark
oklch(0.63 0.015 2 Modern
oklch(0.52 0.017 2 Modern dark
color-primary-btn-hover
Primary button hover fill.

#1a88ef Light
#1a88ef Dark
#1a88ef Modern
#1a88ef Modern dark
color-primary-btn-active
Primary button pressed fill.

#006bcf Light
#006bcf Dark
#006bcf Modern
#006bcf Modern dark
color-muted-hover
Hover tint for muted, primary-tinted controls.

#f2ebff Light
#f2ebff Dark
#f2ebff Modern
#f2ebff Modern dark
color-muted-active
Pressed tint for muted, primary-tinted controls.

#f2e9ff Light
#f2e9ff Dark
#f2e9ff Modern
#f2e9ff Modern dark
color-focus
Focus accent (violet) used by form focus effects.

rgba(0, 119, 230, Light
rgba(0, 119, 230, Dark
rgba(0, 119, 230, Modern
rgba(0, 119, 230, Modern dark
sandbox-text

#7429dd Light
#b98aff Dark
#7429dd Modern
#b98aff Modern dark
sandbox-foreground

#ffffff Light
#ffffff Dark
#ffffff Modern
#ffffff Modern dark

Borders and inputs

Hairlines everywhere by default; inputs get their own border colour.

border
Default 1px border for every element (* { border-border }): cards, inputs, dividers.

#e5e5e5 Light
#222222 Dark
#e5e5e5 Modern
#181818 Modern dark
border-sheet
Border of side sheets.

#eaeae9 Light
#eaeae9 Dark
#eaeae9 Modern
#eaeae9 Modern dark
border-table
Table outer border.

#e5e5e5 Light
#e5e5e5 Dark
#e5e5e5 Modern
#e5e5e5 Modern dark
card-border
Border of card-style containers (border-base).

#d1d1d1 Light
#d1d1d1 Dark
#d1d1d1 Modern
#d1d1d1 Modern dark
input
Input and select borders (input-base); also Tailwind border-input.

#8b8b8b Light
#686868 Dark
#8b8b8b Modern
#686868 Modern dark
switch-thumb-on
Switch thumb when the switch is on (sits on primary).

#ffffff Light
#161616 Dark
#ffffff Modern
#161616 Modern dark
icon1
Neutral icon grey (legacy, defined in :root).

#888 Light
#888 Dark
#888 Modern
#888 Modern dark
input-border-hover
Input and select border on hover.

rgba(18, 18, 18, 0 Light
rgba(221, 221, 221 Dark
rgba(18, 18, 18, 0 Modern
rgba(221, 221, 221 Modern dark
input-border-focus
Input and select border on focus and while open (foreground at 28%).

rgba(18, 18, 18, 0 Light
rgba(221, 221, 221 Dark
rgba(18, 18, 18, 0 Modern
rgba(221, 221, 221 Modern dark
scrollbar-thumb
Scrollbar thumb on every scroll area (foreground at 20%).

rgba(18, 18, 18, 0 Light
rgba(221, 221, 221 Dark
rgba(18, 18, 18, 0 Modern
rgba(221, 221, 221 Modern dark

Overlays

Popovers, menus, selects and dialogs.

overlay
Surface of popovers, dropdown menus, selects and rich tooltips.

#ffffff Light
#1a1a1a Dark
#ffffff Modern
#1a1a1a Modern dark
overlay-dialog
Surface of dialogs.

#ffffff Light
#171717 Dark
#ffffff Modern
#171717 Modern dark
overlay-border
Border of popovers and menus on overlay.

#e5e5e5 Light
#2a2a2a Dark
#e5e5e5 Modern
#2a2a2a Modern dark
overlay-separator
Separators and search-input dividers inside overlays.

#efefef Light
#262626 Dark
#efefef Modern
#262626 Modern dark
overlay-hover
Row hover inside menus and option lists (translucent).

rgb(0 0 0 / 0.045) Light
rgb(255 255 255 / Dark
rgb(0 0 0 / 0.045) Modern
rgb(255 255 255 / Modern dark
overlay-hover-ring

var(--input) Light
#777777 Dark
var(--input) Modern
#777777 Modern dark
overlay-backdrop

rgb(0 0 0 / 0.5) Light
rgb(0 0 0 / 0.8) Dark
rgb(0 0 0 / 0.5) Modern
rgb(0 0 0 / 0.6) Modern dark
overlay-veil

rgb(255 255 255 / Light
rgb(0 0 0 / 0.7) Dark
rgb(255 255 255 / Modern
rgb(0 0 0 / 0.6) Modern dark
overlay-dim

rgb(0 0 0 / 0.5) Light
rgb(0 0 0 / 0.6) Dark
rgb(0 0 0 / 0.5) Modern
rgb(0 0 0 / 0.6) Modern dark

Tables

A recessed tray holds a raised surface; rows divide with hairlines.

table-tray
Tray behind tables — the recessed band holding toolbar and table surface.

#f3f3f2 Light
#111111 Dark
var(--card) Modern
var(--card) Modern dark
table-tray-border
Border of the table tray.

#e7e7e5 Light
#1f1f1f Dark
var(--border) Modern
var(--border) Modern dark
table-surface
The table body surface inside the tray.

#ffffff Light
#191919 Dark
var(--interactive- Modern
var(--interactive- Modern dark
table-surface-border
Border of the table surface.

#e5e5e5 Light
#262626 Dark
var(--border) Modern
var(--border) Modern dark
table-row-divider
Hairline between table rows.

#efefee Light
#232323 Dark
var(--border) Modern
var(--border) Modern dark
table-row-hover
Table row hover fill.

#fafaf9 Light
#1e1e1e Dark
var(--interactive- Modern
var(--interactive- Modern dark
color-table-hover
Legacy table row hover.

#f3f3f3 Light
#f3f3f3 Dark
#f3f3f3 Modern
#f3f3f3 Modern dark

Errors and warnings

destructive is a fill; red text uses error-text, which reads in every theme.

destructive
Destructive button fill and error borders. Light #e40000 is 4.7:1 on background; dark themes use a deep red fill (oklch 0.396) under white text and destructive-foreground for error text.

#e40000 Light
oklch(0.396 0.141 Dark
#e40000 Modern
oklch(0.396 0.141 Modern dark
destructive-hover
Destructive button hover fill.

#c30000 Light
#c30000 Dark
#c30000 Modern
#c30000 Modern dark
destructive-foreground
Text on destructive fills. Dark theme value is a light red used as error text on dark grounds.

#fafaf9 Light
oklch(0.637 0.237 Dark
#fafaf9 Modern
oklch(0.637 0.237 Modern dark
destructive-border
Border of destructive buttons.

#940000 Light
#940000 Dark
#940000 Modern
#940000 Modern dark
error-text
Error and negative-amount text (text-error-text): 4.6:1 or better on background and card in Light, 6.5:1 in Dark. Use destructive only for fills.

#cc0000 Light
#f87171 Dark
#cc0000 Modern
#f87171 Modern dark
color-yellow-50
Warning ramp, lightest wash.

#fefce8 Light
#fefce8 Dark
#fefce8 Modern
#fefce8 Modern dark
color-yellow-100
Warning ramp: badge/banner wash.

#fdedd3 Light
#fdedd3 Dark
#fdedd3 Modern
#fdedd3 Modern dark
color-yellow-200
Warning ramp.

#fbdba7 Light
#fbdba7 Dark
#fbdba7 Modern
#fbdba7 Modern dark
color-yellow-300
Warning ramp.

#f9c97c Light
#f9c97c Dark
#f9c97c Modern
#f9c97c Modern dark
color-yellow-400
Warning ramp.

#f7b750 Light
#f7b750 Dark
#f7b750 Modern
#f7b750 Modern dark
color-yellow-500
Warning ramp: status accent.

#f5a524 Light
#f5a524 Dark
#f5a524 Modern
#f5a524 Modern dark
color-yellow-600
Warning ramp: text on yellow washes.

#c4841d Light
#c4841d Dark
#c4841d Modern
#c4841d Modern dark
color-yellow-700
Warning ramp: strong text on light washes.

#936316 Light
#936316 Dark
#936316 Modern
#936316 Modern dark
color-yellow-800
Warning ramp.

#62420e Light
#62420e Dark
#62420e Modern
#62420e Modern dark
color-yellow-900
Warning ramp, darkest.

#312107 Light
#312107 Dark
#312107 Modern
#312107 Modern dark
color-error-light
Error wash behind destructive icon buttons.

#fee1e1 Light
#fee1e1 Dark
#fee1e1 Modern
#fee1e1 Modern dark

Status

The squares inside StatusChip. The label stays neutral; hue lives only in the square.

status-green
StatusChip green square. Active, paid, success. Reference value: the chip hard-codes this hex, so editing it here does not change the component.

#30a46c Light
#30a46c Dark
#30a46c Modern
#30a46c Modern dark
status-green-glyph
Glyph drawn on the status-green square: white in light themes, #0e1c15 in dark. Reference value, hard-coded in StatusChip.

#ffffff Light
#0e1c15 Dark
#ffffff Modern
#0e1c15 Modern dark
status-blue
StatusChip blue square. Sent, info, in progress. Reference value: the chip hard-codes this hex, so editing it here does not change the component.

#3e8bd9 Light
#3e8bd9 Dark
#3e8bd9 Modern
#3e8bd9 Modern dark
status-blue-glyph
Glyph drawn on the status-blue square: white in light themes, #0c1726 in dark. Reference value, hard-coded in StatusChip.

#ffffff Light
#0c1726 Dark
#ffffff Modern
#0c1726 Modern dark
status-red
StatusChip red square. Rejected, failed, void. Reference value: the chip hard-codes this hex, so editing it here does not change the component.

#e5484d Light
#e5484d Dark
#e5484d Modern
#e5484d Modern dark
status-red-glyph
Glyph drawn on the status-red square: white in light themes, #2a0c0d in dark. Reference value, hard-coded in StatusChip.

#ffffff Light
#2a0c0d Dark
#ffffff Modern
#2a0c0d Modern dark
status-orange
StatusChip orange square. Expiring, attention. Reference value: the chip hard-codes this hex, so editing it here does not change the component.

#e8742c Light
#e8742c Dark
#e8742c Modern
#e8742c Modern dark
status-orange-glyph
Glyph drawn on the status-orange square: white in light themes, #2a1405 in dark. Reference value, hard-coded in StatusChip.

#ffffff Light
#2a1405 Dark
#ffffff Modern
#2a1405 Modern dark
status-amber
StatusChip amber square. Overdue, warning. Reference value: the chip hard-codes this hex, so editing it here does not change the component.

#e5a21f Light
#e5a21f Dark
#e5a21f Modern
#e5a21f Modern dark
status-amber-glyph
Glyph drawn on the status-amber square: white in light themes, #2a1c05 in dark. Reference value, hard-coded in StatusChip.

#2a1c05 Light
#2a1c05 Dark
#2a1c05 Modern
#2a1c05 Modern dark
status-green-text

#18794e Light
#3dd68c Dark
#18794e Modern
#3dd68c Modern dark
status-amber-text

#a35a00 Light
#ffc53d Dark
#a35a00 Modern
#ffc53d Modern dark
status-orange-text

#b54500 Light
#ff8b3e Dark
#b54500 Modern
#ff8b3e Modern dark
status-yellow
StatusChip yellow square. Pending. Reference value: the chip hard-codes this hex, so editing it here does not change the component.

#e2b93b Light
#e2b93b Dark
#e2b93b Modern
#e2b93b Modern dark
status-yellow-glyph
Glyph drawn on the status-yellow square: white in light themes, #261f06 in dark. Reference value, hard-coded in StatusChip.

#261f06 Light
#261f06 Dark
#261f06 Modern
#261f06 Modern dark
status-purple
StatusChip purple square. Scheduled, brand states. Reference value: the chip hard-codes this hex, so editing it here does not change the component.

#9a6bff Light
#9a6bff Dark
#9a6bff Modern
#9a6bff Modern dark
status-purple-glyph
Glyph drawn on the status-purple square: white in light themes, #1a0f33 in dark. Reference value, hard-coded in StatusChip.

#ffffff Light
#1a0f33 Dark
#ffffff Modern
#1a0f33 Modern dark
status-pink
StatusChip pink square. Promotions, special cases. Reference value: the chip hard-codes this hex, so editing it here does not change the component.

#d6409f Light
#d6409f Dark
#d6409f Modern
#d6409f Modern dark
status-pink-glyph
Glyph drawn on the status-pink square: white in light themes, #2a0c1e in dark. Reference value, hard-coded in StatusChip.

#ffffff Light
#2a0c1e Dark
#ffffff Modern
#2a0c1e Modern dark
status-fuchsia
StatusChip fuchsia square. Custom states. Reference value: the chip hard-codes this hex, so editing it here does not change the component.

#c050d8 Light
#c050d8 Dark
#c050d8 Modern
#c050d8 Modern dark
status-fuchsia-glyph
Glyph drawn on the status-fuchsia square: white in light themes, #240c2a in dark. Reference value, hard-coded in StatusChip.

#ffffff Light
#240c2a Dark
#ffffff Modern
#240c2a Modern dark
status-neutral
StatusChip neutral square. Paused, draft, unknown. Reference value: the chip hard-codes this hex, so editing it here does not change the component.

#8a8a8a Light
#8a8a8a Dark
#8a8a8a Modern
#8a8a8a Modern dark
status-neutral-glyph
Glyph drawn on the status-neutral square: white in light themes, #161616 in dark. Reference value, hard-coded in StatusChip.

#ffffff Light
#161616 Dark
#ffffff Modern
#161616 Modern dark

Charts

Categorical series in a fixed, colour-blind-validated order, and a sequential ramp.

chart-1
Sequential chart ramp step 1 (aliases primary).

var(--primary) Light
var(--primary) Dark
var(--primary) Modern
var(--primary) Modern dark
chart-2
Sequential chart ramp step 2 (blue to purple).

#0f70e9 Light
#0f70e9 Dark
#0f70e9 Modern
#0f70e9 Modern dark
chart-3
Sequential chart ramp step 3 (blue to purple).

#1e69ec Light
#1e69ec Dark
#1e69ec Modern
#1e69ec Modern dark
chart-4
Sequential chart ramp step 4 (blue to purple).

#2d62ee Light
#2d62ee Dark
#2d62ee Modern
#2d62ee Modern dark
chart-5
Sequential chart ramp step 5 (blue to purple).

#3c5bf1 Light
#3c5bf1 Dark
#3c5bf1 Modern
#3c5bf1 Modern dark
chart-6
Sequential chart ramp step 6 (blue to purple).

#4c54f4 Light
#4c54f4 Dark
#4c54f4 Modern
#4c54f4 Modern dark
chart-7
Sequential chart ramp step 7 (blue to purple).

#5b4df7 Light
#5b4df7 Dark
#5b4df7 Modern
#5b4df7 Modern dark
chart-8
Sequential chart ramp step 8 (blue to purple).

#6a46f9 Light
#6a46f9 Dark
#6a46f9 Modern
#6a46f9 Modern dark
chart-9
Sequential chart ramp step 9 (blue to purple).

#793ffc Light
#793ffc Dark
#793ffc Modern
#793ffc Modern dark
chart-10
Sequential chart ramp step 10 (blue to purple).

#8838ff Light
#8838ff Dark
#8838ff Modern
#8838ff Modern dark
chart-grid-stroke
Chart grid lines and axis rules.

#d1d1d190 Light
#262626 Dark
#d1d1d190 Modern
#1a1a1a Modern dark
chart-series-1
Categorical chart series slot 1 (blue). Order is colour-blind-validated: never reorder or skip.

#0077e6 Light
#2b95f5 Dark
#0077e6 Modern
#2b95f5 Modern dark
chart-series-2
Categorical chart series slot 2 (orange). Order is colour-blind-validated: never reorder or skip.

#eb6834 Light
#d95926 Dark
#eb6834 Modern
#d95926 Modern dark
chart-series-3
Categorical chart series slot 3 (green). Order is colour-blind-validated: never reorder or skip.

#1baf7a Light
#199e70 Dark
#1baf7a Modern
#199e70 Modern dark
chart-series-4
Categorical chart series slot 4 (amber). Order is colour-blind-validated: never reorder or skip.

#eda100 Light
#c98500 Dark
#eda100 Modern
#c98500 Modern dark
chart-series-5
Categorical chart series slot 5 (pink). Order is colour-blind-validated: never reorder or skip.

#e87ba4 Light
#d55181 Dark
#e87ba4 Modern
#d55181 Modern dark
chart-series-6
Categorical chart series slot 6 (deep green). Order is colour-blind-validated: never reorder or skip.

#008300 Light
#008300 Dark
#008300 Modern
#008300 Modern dark
chart-series-7
Categorical chart series slot 7 (purple). Order is colour-blind-validated: never reorder or skip.

#8838ff Light
#9c5aff Dark
#8838ff Modern
#9c5aff Modern dark
chart-series-8
Categorical chart series slot 8 (red). Order is colour-blind-validated: never reorder or skip.

#e34948 Light
#e66767 Dark
#e34948 Modern
#e66767 Modern dark

Panel button

The tactile tiles used for big choices in onboarding.

color-panel-icon-background
Icon well behind panel-button icons.

#e0f2ff Light
#e0f2ff Dark
#e0f2ff Modern
#e0f2ff Modern dark
panel-selected-bg
Selected PanelButton fill.

#f0f9ff Light
#f0f9ff Dark
#f0f9ff Modern
#f0f9ff Modern dark
panel-selected-border
Selected PanelButton border.

#7dccff Light
#7dccff Dark
#7dccff Modern
#7dccff Modern dark
panel-unselected-bg
Unselected PanelButton fill.

#ffffff Light
#ffffff Dark
#ffffff Modern
#ffffff Modern dark
panel-unselected-border
Unselected PanelButton border.

rgb(229 231 235) Light
rgb(229 231 235) Dark
rgb(229 231 235) Modern
rgb(229 231 235) Modern dark
panel-unselected-border-hover
Unselected PanelButton border on hover; also the seams.

rgb(209 213 219) Light
rgb(209 213 219) Dark
rgb(209 213 219) Modern
rgb(209 213 219) Modern dark
panel-screw-selected
Screw dots on a selected PanelButton.

#bfe5ff Light
#bfe5ff Dark
#bfe5ff Modern
#bfe5ff Modern dark
panel-screw-unselected
Screw dots on an unselected PanelButton.

rgb(229 231 235) Light
rgb(229 231 235) Dark
rgb(229 231 235) Modern
rgb(229 231 235) Modern dark
panel-icon-selected-bg
Icon well, selected.

#e0f2ff Light
#e0f2ff Dark
#e0f2ff Modern
#e0f2ff Modern dark
panel-icon-selected-border
Icon well border, selected.

#9dd8ff Light
#9dd8ff Dark
#9dd8ff Modern
#9dd8ff Modern dark
panel-icon-unselected-bg
Icon well, unselected.

rgb(249 250 251) Light
rgb(249 250 251) Dark
rgb(249 250 251) Modern
rgb(249 250 251) Modern dark
panel-icon-unselected-border
Icon well border, unselected.

rgb(209 213 219) Light
rgb(209 213 219) Dark
rgb(209 213 219) Modern
rgb(209 213 219) Modern dark
panel-icon-selected
Icon colour, selected.

#0069cc Light
#0069cc Dark
#0069cc Modern
#0069cc Modern dark
panel-icon-unselected
Icon colour, unselected.

rgb(75 85 99) Light
rgb(75 85 99) Dark
rgb(75 85 99) Modern
rgb(75 85 99) Modern dark

Compatibility and palette

shadcn slots kept for compatibility, and the Tailwind palette steps components use directly.

focus-ring

var(--primary) Light
var(--primary) Dark
var(--primary) Modern
var(--primary) Modern dark
popover
shadcn popover slot — used by chart tooltips and analytics graphs.

oklch(1 0 0) Light
oklch(0.141 0.005 Dark
oklch(1 0 0) Modern
oklch(0.141 0.005 Modern dark
popover-foreground
Text on popover.

oklch(0.141 0.005 Light
#ffffff Dark
oklch(0.141 0.005 Modern
#ffffff Modern dark
secondary
shadcn secondary fill: chat panels, decision cards.

oklch(0.967 0.001 Light
oklch(0.274 0.006 Dark
oklch(0.967 0.001 Modern
oklch(0.274 0.006 Modern dark
secondary-foreground
Text on secondary.

oklch(0.21 0.006 2 Light
oklch(0.985 0 0) Dark
oklch(0.21 0.006 2 Modern
oklch(0.985 0 0) Modern dark
accent
shadcn accent fill — value chips, mobile top bar hover, menu highlight.

oklch(0.967 0.001 Light
oklch(0.274 0.006 Dark
oklch(0.967 0.001 Modern
oklch(0.274 0.006 Modern dark
accent-foreground
Text on accent.

oklch(0.21 0.006 2 Light
oklch(0.985 0 0) Dark
oklch(0.21 0.006 2 Modern
oklch(0.985 0 0) Modern dark
sidebar
shadcn sidebar slot (canvas cards).

oklch(0.985 0 0) Light
oklch(0.21 0.006 2 Dark
oklch(0.985 0 0) Modern
oklch(0.21 0.006 2 Modern dark
sidebar-foreground
Text on sidebar.

oklch(0.141 0.005 Light
oklch(0.985 0 0) Dark
oklch(0.141 0.005 Modern
oklch(0.985 0 0) Modern dark
sidebar-primary
Primary accent inside the sidebar slot.

oklch(0.21 0.006 2 Light
oklch(0.488 0.243 Dark
oklch(0.21 0.006 2 Modern
oklch(0.488 0.243 Modern dark
sidebar-primary-foreground
Text on sidebar-primary.

oklch(0.985 0 0) Light
oklch(0.985 0 0) Dark
oklch(0.985 0 0) Modern
oklch(0.985 0 0) Modern dark
sidebar-accent
Hover/active fill in the sidebar slot.

oklch(0.967 0.001 Light
oklch(0.274 0.006 Dark
oklch(0.967 0.001 Modern
oklch(0.274 0.006 Modern dark
sidebar-accent-foreground
Text on sidebar-accent.

oklch(0.21 0.006 2 Light
oklch(0.985 0 0) Dark
oklch(0.21 0.006 2 Modern
oklch(0.985 0 0) Modern dark
sidebar-border
Sidebar slot border.

oklch(0.92 0.004 2 Light
oklch(0.274 0.006 Dark
oklch(0.92 0.004 2 Modern
oklch(0.274 0.006 Modern dark
sidebar-ring
Sidebar slot focus ring.

oklch(0.63 0.015 2 Light
oklch(0.52 0.017 2 Dark
oklch(0.63 0.015 2 Modern
oklch(0.52 0.017 2 Modern dark
color-code-background
Code block background (defined; Shiki sets its own).

#1e1e1e Light
#1e1e1e Dark
#1e1e1e Modern
#1e1e1e Modern dark
color-code-tabs
Code-group tab strip.

#2d2d2d Light
#2d2d2d Dark
#2d2d2d Modern
#2d2d2d Modern dark
color-code-bg
Alias of the code background (legacy name).

#1e1e1e Light
#1e1e1e Dark
#1e1e1e Modern
#1e1e1e Modern dark
color-code-tabs-active
Active code-group tab.

#3c3c3c Light
#3c3c3c Dark
#3c3c3c Modern
#3c3c3c Modern dark
color-light-purple
Faint purple wash.

#f9f5ff Light
#f9f5ff Dark
#f9f5ff Modern
#f9f5ff Modern dark
color-gray-light
Light grey wash.

#fafafa Light
#fafafa Dark
#fafafa Modern
#fafafa Modern dark
color-gray-medium
Medium grey wash.

#eeeeee Light
#eeeeee Dark
#eeeeee Modern
#eeeeee Modern dark
color-purple-dark
Deeper brand purple.

#8231ff Light
#8231ff Dark
#8231ff Modern
#8231ff Modern dark
color-purple-medium
Mid purple — shortcut-button key caps.

#b07aff Light
#b07aff Dark
#b07aff Modern
#b07aff Modern dark
color-purple-stripe
Indigo-purple stripe accent.

#665cff Light
#665cff Dark
#665cff Modern
#665cff Modern dark
color-purple-gradient
Purple gradient stop.

#6f47ff Light
#6f47ff Dark
#6f47ff Modern
#6f47ff Modern dark
color-zinc-50
Tailwind palette zinc-50, used by components: Badge default text, tag chips, tabs in dark.

oklch(0.985 0 0) Light
oklch(0.985 0 0) Dark
oklch(0.985 0 0) Modern
oklch(0.985 0 0) Modern dark
color-zinc-100
Tailwind palette zinc-100, used by components: Badge secondary fill.

oklch(0.967 0.001 Light
oklch(0.967 0.001 Dark
oklch(0.967 0.001 Modern
oklch(0.967 0.001 Modern dark
color-zinc-200
Tailwind palette zinc-200, used by components: Badge border.

oklch(0.92 0.004 2 Light
oklch(0.92 0.004 2 Dark
oklch(0.92 0.004 2 Modern
oklch(0.92 0.004 2 Modern dark
color-zinc-300
Tailwind palette zinc-300, used by components: Neutral chrome in tag inputs.

oklch(0.871 0.006 Light
oklch(0.871 0.006 Dark
oklch(0.871 0.006 Modern
oklch(0.871 0.006 Modern dark
color-zinc-400
Tailwind palette zinc-400, used by components: Neutral icons.

oklch(0.705 0.015 Light
oklch(0.705 0.015 Dark
oklch(0.705 0.015 Modern
oklch(0.705 0.015 Modern dark
color-zinc-500
Tailwind palette zinc-500, used by components: Alert default tint (at 4% fill, 15% border).

oklch(0.552 0.016 Light
oklch(0.552 0.016 Dark
oklch(0.552 0.016 Modern
oklch(0.552 0.016 Modern dark
color-zinc-600
Tailwind palette zinc-600, used by components: Neutral text in dark chips.

oklch(0.442 0.017 Light
oklch(0.442 0.017 Dark
oklch(0.442 0.017 Modern
oklch(0.442 0.017 Modern dark
color-zinc-800
Tailwind palette zinc-800, used by components: Badge secondary fill in dark.

oklch(0.274 0.006 Light
oklch(0.274 0.006 Dark
oklch(0.274 0.006 Modern
oklch(0.274 0.006 Modern dark
color-zinc-900
Tailwind palette zinc-900, used by components: Badge default fill.

oklch(0.21 0.006 2 Light
oklch(0.21 0.006 2 Dark
oklch(0.21 0.006 2 Modern
oklch(0.21 0.006 2 Modern dark
color-zinc-950
Tailwind palette zinc-950, used by components: Deepest neutral in chips.

oklch(0.141 0.005 Light
oklch(0.141 0.005 Dark
oklch(0.141 0.005 Modern
oklch(0.141 0.005 Modern dark
color-neutral-200
Tailwind palette neutral-200, used by components: PanelButton seams in light.

oklch(0.922 0 0) Light
oklch(0.922 0 0) Dark
oklch(0.922 0 0) Modern
oklch(0.922 0 0) Modern dark
color-neutral-800
Tailwind palette neutral-800, used by components: PanelButton seams in dark.

oklch(0.269 0 0) Light
oklch(0.269 0 0) Dark
oklch(0.269 0 0) Modern
oklch(0.269 0 0) Modern dark
color-stone-200
Tailwind palette stone-200, used by components: Warm neutral border.

oklch(0.923 0.003 Light
oklch(0.923 0.003 Dark
oklch(0.923 0.003 Modern
oklch(0.923 0.003 Modern dark
color-violet-200
Tailwind palette violet-200, used by components: PanelButton selected ring.

oklch(0.894 0.057 Light
oklch(0.894 0.057 Dark
oklch(0.894 0.057 Modern
oklch(0.894 0.057 Modern dark
color-violet-600
Tailwind palette violet-600, used by components: PanelButton selected icon.

oklch(0.541 0.281 Light
oklch(0.541 0.281 Dark
oklch(0.541 0.281 Modern
oklch(0.541 0.281 Modern dark
color-violet-800
Tailwind palette violet-800, used by components: PanelButton selected, dark.

oklch(0.432 0.232 Light
oklch(0.432 0.232 Dark
oklch(0.432 0.232 Modern
oklch(0.432 0.232 Modern dark
color-red-400
Tailwind palette red-400, used by components: Destructive menu item text in dark.

oklch(0.704 0.191 Light
oklch(0.704 0.191 Dark
oklch(0.704 0.191 Modern
oklch(0.704 0.191 Modern dark
color-red-500
Tailwind palette red-500, used by components: Alert destructive tint, destructive menu items.

oklch(0.637 0.237 Light
oklch(0.637 0.237 Dark
oklch(0.637 0.237 Modern
oklch(0.637 0.237 Modern dark
color-red-600
Tailwind palette red-600, used by components: Destructive menu item text in light.

oklch(0.577 0.245 Light
oklch(0.577 0.245 Dark
oklch(0.577 0.245 Modern
oklch(0.577 0.245 Modern dark
color-blue-400
Tailwind palette blue-400, used by components: BetaBadge text in dark.

oklch(0.707 0.165 Light
oklch(0.707 0.165 Dark
oklch(0.707 0.165 Modern
oklch(0.707 0.165 Modern dark
color-blue-500
Tailwind palette blue-500, used by components: BetaBadge tint.

oklch(0.623 0.214 Light
oklch(0.623 0.214 Dark
oklch(0.623 0.214 Modern
oklch(0.623 0.214 Modern dark
color-blue-600
Tailwind palette blue-600, used by components: BetaBadge text.

oklch(0.546 0.245 Light
oklch(0.546 0.245 Dark
oklch(0.546 0.245 Modern
oklch(0.546 0.245 Modern dark
color-sky-500
Tailwind palette sky-500, used by components: Alert note tint.

oklch(0.685 0.169 Light
oklch(0.685 0.169 Dark
oklch(0.685 0.169 Modern
oklch(0.685 0.169 Modern dark
color-emerald-500
Tailwind palette emerald-500, used by components: Alert success tint.

oklch(0.696 0.17 1 Light
oklch(0.696 0.17 1 Dark
oklch(0.696 0.17 1 Modern
oklch(0.696 0.17 1 Modern dark
color-amber-500
Tailwind palette amber-500, used by components: Alert warning tint.

oklch(0.769 0.188 Light
oklch(0.769 0.188 Dark
oklch(0.769 0.188 Modern
oklch(0.769 0.188 Modern dark