Colors

Rendered live from src/registry/style/base.css, the file the shadcn registry is generated from. Primary is the logo blue (#00549b).

Semantic tokens

Use these in components. They switch automatically in dark mode. Click a swatch to copy its variable.

Surfaces · Page, card and popover surfaces with their text. Elevation order: background < card < popover.

--background

Light #f1f6fa
Dark #17181a

--foreground

Light #29323d
Dark #b6bbc3

--card

Light #f5f8fa
Dark #1d1e1f

--card-foreground

Light #13171c
Dark #f5f7fa

--popover

Light #ffffff
Dark #2e2f30

--popover-foreground

Light #1b2328
Dark #e2e4e5

Actions · Buttons and emphasis: primary, secondary, accent, destructive.

--primary

Logo blue

Light #00549b
Dark #6da5e5

--primary-foreground

Light #ffffff
Dark #050b12

--secondary

Light #dce3e9
Dark #2e363e

--secondary-foreground

Light #464e53
Dark #f5f7fa

--accent

Light #dce3e9
Dark #424447

--accent-foreground

Light #1b2328
Dark #eef2f5

--destructive

AA as text, also on a /10 tint

Light #ba2b2b
Dark #ff7e76

--destructive-foreground

Light #ffffff
Dark #050b12

Status · Approval states. Use as text/icons, as a /10 tint behind that text, or as a solid fill with its foreground.

--success

Approved, complete

Light #21763c
Dark #62c37a

--success-foreground

Light #ffffff
Dark #050b12

--warning

Pending, needs attention

Light #915c08
Dark #eeb154

--warning-foreground

Light #ffffff
Dark #050b12

--info

Neutral notice

Light #006c9d
Dark #5eb6e6

--info-foreground

Light #ffffff
Dark #050b12

Content · Subdued surfaces and secondary text.

--muted

Light #dee6ed
Dark #252628

--muted-foreground

AA (4.5:1) on every surface

Light #5d6773
Dark #9ea6ac

Form · Borders, inputs and focus rings.

--border

Decorative dividers only

Light #d6d9dd
Dark #383b3e

--input

Control borders, 3:1

Light #848a90
Dark #6e7276

--ring

Light #3e80c7
Dark #6da5e5

Sidebar · Navigation sidebar surfaces.

--sidebar

Light #eef2f5
Dark #17181a

--sidebar-foreground

Light #3b3c3e
Dark #b6bbc3

--sidebar-primary

Light #00549b
Dark #6da5e5

--sidebar-primary-foreground

Light #fbfbfb
Dark #050b12

--sidebar-accent

Light #d4e4f6
Dark #2e363e

--sidebar-accent-foreground

Light #012a52
Dark #f5f7fa

--sidebar-border

Light #dadee3
Dark #383b3e

--sidebar-ring

Light #3e80c7
Dark #6da5e5

Charts · Data-visualization series. Distinct hues, alternating lightness, each 3:1 against surfaces. Always pair with labels or markers.

--chart-1

Light #00549b
Dark #6da5e5

--chart-2

Light #ba7917
Dark #fac871

--chart-3

Light #703396
Dark #a86fcf

--chart-4

Light #14938d
Dark #77e0d3

--chart-5

Light #b6322b
Dark #ea6c5a

Status

Approval states use the status tokens three ways: as text with a /10 tint behind it (badges, alerts), as a solid fill with its foreground (primary emphasis), or as plain text and icons. Never rely on color alone: always pair it with a label or icon.

ApprovedApproved--success
PendingPending--warning
DraftDraft--info
RejectedRejected--destructive

Contrast check

WCAG ratios computed from the resolved values. Text needs 4.5:1 (AA); UI components and chart colors need 3:1. The same pairs run in CI (pnpm tokens:check), so a failing value can't be merged.

PairNeedsLightDark
foreground on backgroundText · 4.5:111.93:1 · AAA9.21:1 · AAA
foreground on cardText · 4.5:112.17:1 · AAA8.65:1 · AAA
foreground on popoverText · 4.5:112.98:1 · AAA6.95:1 · Pass
card-foreground on cardText · 4.5:116.89:1 · AAA15.56:1 · AAA
popover-foreground on popoverText · 4.5:115.94:1 · AAA10.51:1 · AAA
primary-foreground on primaryText · 4.5:17.66:1 · AAA7.69:1 · AAA
secondary-foreground on secondaryText · 4.5:16.55:1 · Pass11.42:1 · AAA
accent-foreground on accentText · 4.5:112.30:1 · AAA8.68:1 · AAA
muted-foreground on backgroundText · 4.5:15.27:1 · Pass7.18:1 · AAA
muted-foreground on cardText · 4.5:15.38:1 · Pass6.75:1 · Pass
muted-foreground on popoverText · 4.5:15.74:1 · Pass5.42:1 · Pass
muted-foreground on mutedText · 4.5:14.55:1 · Pass6.12:1 · Pass
muted-foreground on sidebarText · 4.5:15.10:1 · Pass7.18:1 · AAA
primary on backgroundText · 4.5:17.04:1 · AAA6.91:1 · Pass
destructive-foreground on destructiveText · 4.5:16.04:1 · Pass7.99:1 · AAA
destructive on backgroundText · 4.5:15.55:1 · Pass7.17:1 · AAA
destructive on cardText · 4.5:15.67:1 · Pass6.74:1 · Pass
destructive on popoverText · 4.5:16.04:1 · Pass5.41:1 · Pass
destructive on destructive/10 over cardText · 4.5:14.85:1 · Pass5.76:1 · Pass
destructive on destructive/10 over popoverText · 4.5:15.16:1 · Pass4.61:1 · Pass
success-foreground on successText · 4.5:15.67:1 · Pass9.07:1 · AAA
success on backgroundText · 4.5:15.22:1 · Pass8.14:1 · AAA
success on cardText · 4.5:15.32:1 · Pass7.65:1 · AAA
success on popoverText · 4.5:15.67:1 · Pass6.15:1 · Pass
success on success/10 over cardText · 4.5:14.65:1 · Pass6.40:1 · Pass
success on success/10 over popoverText · 4.5:14.94:1 · Pass5.11:1 · Pass
warning-foreground on warningText · 4.5:15.65:1 · Pass10.42:1 · AAA
warning on backgroundText · 4.5:15.19:1 · Pass9.35:1 · AAA
warning on cardText · 4.5:15.29:1 · Pass8.79:1 · AAA
warning on popoverText · 4.5:15.65:1 · Pass7.06:1 · AAA
warning on warning/10 over cardText · 4.5:14.63:1 · Pass7.22:1 · AAA
warning on warning/10 over popoverText · 4.5:14.92:1 · Pass5.75:1 · Pass
info-foreground on infoText · 4.5:15.78:1 · Pass8.75:1 · AAA
info on backgroundText · 4.5:15.31:1 · Pass7.85:1 · AAA
info on cardText · 4.5:15.42:1 · Pass7.38:1 · AAA
info on popoverText · 4.5:15.78:1 · Pass5.93:1 · Pass
info on info/10 over cardText · 4.5:14.70:1 · Pass6.19:1 · Pass
info on info/10 over popoverText · 4.5:15.00:1 · Pass4.95:1 · Pass
destructive on destructive/10 (dark /20) over cardText · 4.5:14.85:1 · Pass4.77:1 · Pass
sidebar-foreground on sidebarText · 4.5:19.76:1 · AAA9.21:1 · AAA
sidebar-primary-foreground on sidebar-primaryText · 4.5:17.40:1 · AAA7.69:1 · AAA
sidebar-accent-foreground on sidebar-accentText · 4.5:111.16:1 · AAA11.42:1 · AAA
ring on backgroundUI / graphics · 3:13.77:1 · Pass6.91:1 · Pass
ring on cardUI / graphics · 3:13.85:1 · Pass6.49:1 · Pass
input on backgroundUI / graphics · 3:13.21:1 · Pass3.67:1 · Pass
input on cardUI / graphics · 3:13.28:1 · Pass3.44:1 · Pass
sidebar-primary on sidebarUI / graphics · 3:16.80:1 · Pass6.91:1 · Pass
chart-1 on backgroundUI / graphics · 3:17.04:1 · Pass6.91:1 · Pass
chart-1 on cardUI / graphics · 3:17.18:1 · Pass6.49:1 · Pass
chart-2 on backgroundUI / graphics · 3:13.30:1 · Pass11.50:1 · Pass
chart-2 on cardUI / graphics · 3:13.37:1 · Pass10.80:1 · Pass
chart-3 on backgroundUI / graphics · 3:17.43:1 · Pass4.95:1 · Pass
chart-3 on cardUI / graphics · 3:17.58:1 · Pass4.65:1 · Pass
chart-4 on backgroundUI / graphics · 3:13.46:1 · Pass11.33:1 · Pass
chart-4 on cardUI / graphics · 3:13.52:1 · Pass10.64:1 · Pass
chart-5 on backgroundUI / graphics · 3:15.52:1 · Pass5.75:1 · Pass
chart-5 on cardUI / graphics · 3:15.63:1 · Pass5.41:1 · Pass

Shape & elevation

Shape · Corner radius and base letter-spacing.

--radius

lg tier; the rest of the scale is derived

0.5rem
--tracking-base

Latin only; Ethiopic text resets to normal

-0.01em

Elevation · Three steps. In dark mode surface lightness carries elevation; shadows only reinforce it.

--elevation-sm

Raised in place: active tab, inset panel

0 1px 2px 0 hsl(220 30% 15% / 0.06), 0 1px 3px 0 hsl(220 30% 15% / 0.08)
dark: 0 1px 2px 0 hsl(0 0% 0% / 0.4)
--elevation-md

Floating: menus, popovers, tooltips

0 2px 4px -1px hsl(220 30% 15% / 0.08), 0 4px 8px -2px hsl(220 30% 15% / 0.1)
dark: 0 4px 8px -2px hsl(0 0% 0% / 0.5)
--elevation-lg

Overlays: sheets, dialogs, toasts

0 4px 6px -2px hsl(220 30% 15% / 0.08), 0 12px 24px -4px hsl(220 30% 15% / 0.14)
dark: 0 12px 24px -4px hsl(0 0% 0% / 0.6)