Design system

Colors

Apple's quiet grays with one blue accent. Semantic colors flip in dark sections, so components never pick a raw color.

Showing the light theme.Showing the dark theme. Switch the theme in the header to see the other values.

Text

Words and icons. Start with label and step down for less important text.

text-label

#1d1d1f#f5f5f7

Primary text.

text-label-secondary

#6e6e73#86868b

Secondary text, intros, the muted first line of two-tone headlines.

text-label-tertiary

#86868b#6e6e73

Footnotes and reassurance lines.

text-link

#0066cc#2997ff

Inline text links.

text-primary-text

#0c99ff#0c99ff

The accent as text on light surfaces. Case studies with a light brand color swap in a darker shade.

Backgrounds

Page, section and card fills. Gray sections use surface-secondary; cards sit on surface.

bg-surface

#ffffff#000000

Page and card background.

bg-surface-secondary

#f5f5f7#1d1d1f

Gray sections, tiles and media frames.

bg-surface-tertiary

#e8e8ed#2c2c2e

Pressed and inactive fills.

bg-secondary

#e8e8ed#333336

Secondary buttons and the segmented control track.

Borders

Hairlines. Cards use the separator at 70%: border-separator/70.

border-separator

#d2d2d7#424245

Hairlines and card borders (usually at /70).

border-separator-strong

#86868b#6e6e73

Emphasized dividers.

Accent

The one blue: the main button, active states and links that act like buttons.

bg-primary

#0c99ff#0c99ff

The accent: primary buttons, active states, focus.

Hover

Hover fills, so the button keeps its color family.

hover:bg-primary-hover

#0a8ae6#0a8ae6

Hover state of the accent.

hover:bg-secondary-hover

color-mix(in oklch, #e8e8ed, #1d1d1f 6%)color-mix(in oklch, #e8e8ed, #1d1d1f 6%)

Hover state of secondary buttons.

hover:bg-destructive-hover

color-mix(in oklch, #e30000, #000000 10%)color-mix(in oklch, #e30000, #000000 10%)

Hover state of destructive buttons.

Focus

Keyboard focus rings, e.g. focus-visible:ring-3 ring-ring/40.

ring-ring

#0c99ff#2997ff

Focus ring.

Status

Errors and destructive actions.

text-destructive

#e30000#ff453a

Errors and destructive actions.

Modes

Wrap any block in a mode's class and every color above flips inside it. The site itself is light; dark sections and branded cards use the other modes.

.theme-light

Sell the work, not the hours.

Text, hairlines and the accent all follow the mode.

The light values again, for a light block inside a dark section or the dark theme of /design.

.theme-dark

Sell the work, not the hours.

Text, hairlines and the accent all follow the mode.

Dark sections (Section tone="dark") and the dark theme of /design. Every semantic color flips.

.theme-primary

Sell the work, not the hours.

Text, hairlines and the accent all follow the mode.

Blocks filled with the accent, e.g. a branded testimonial. White text and hairlines on top.

System colors

Apple's HIG system colors, for status, plan accents and charts.

system-blue

#007aff

system-green

#34c759

system-red

#ff3b30

system-orange

#ff9500

system-yellow

#ffcc00

system-indigo

#5856d6

system-purple

#af52de

system-pink

#ff2d55

system-teal

#30b0c7

system-cyan

#32ade6

system-mint

#00c7be

system-brown

#a2845e

system-gray

#8e8e93

system-gray-2

#aeaeb2

system-gray-3

#c7c7cc

system-gray-4

#d1d1d6

system-gray-5

#e5e5ea

system-gray-6

#f2f2f7

Palette

The raw values the colors above point at. Never used directly in components.

palette.white

#ffffff

palette.black

#000000

palette.gray.50

#f5f5f7

palette.gray.100

#e8e8ed

palette.gray.200

#d2d2d7

palette.gray.400

#86868b

palette.gray.500

#6e6e73

palette.gray.700

#424245

palette.gray.750

#333336

palette.gray.800

#2c2c2e

palette.gray.900

#1d1d1f

palette.blue.400

#2997ff

palette.blue.500

#0c99ff

Epicuts blue

palette.blue.600

#0a8ae6

palette.blue.700

#0066cc

palette.red.400

#ff453a

palette.red.600

#e30000