Foundations

Design tokens

Semantic roles, one Aback Blue ramp, a compact type scale, and square geometry. These are the values components read.

Semantic color

Each role resolves to a light and a dark value. The two halves of a swatch show the same role in each theme.

Canvasbg-background

#ffffff / #0a0a0a--background

Surfacebg-card

#ffffff / #171717--card

Mutedbg-muted

#f5f5f5 / #262626--muted

Inktext-foreground

#0a0a0a / #fafafa--foreground

Mutetext-muted-foreground

#737373 / #a1a1a1--muted-foreground

Actionbg-primary

#171717 / #e5e5e5--primary

On actiontext-primary-foreground

#fafafa / #171717--primary-foreground

Hairlineborder-border

#e5e5e5 / white 10%--border

Separatorborder-separator

#d7d7d7 / white 15%--separator

Inputborder-input

#e5e5e5 / white 15%--input

Linktext-link

#005d95 / #33b7ff--link

Brand icontext-brand-icon

#007cc7 / #33b7ff--brand-icon

Brand chipbg-brand-chip

#ccedff / #001f32--brand-chip

Brand washbg-brand-wash

#e6f6ff / primary-900 30%--brand-wash

Brand fillbg-brand-fill

#005d95 / #33b7ff--brand-fill

On brand filltext-on-brand-fill

#ffffff / #000f19--on-brand-fill

Focus ringring-focus-ring

#007cc7 / #33b7ff--focus-ring

Destructivebg-destructive

#e7000b / #ff6467--destructive

Successtext-success

#008236 / #05df72--success

Warningtext-warning

#bb4d00 / #fbbf24--warning

Dangertext-danger

#c10007 / #ff6467--danger

Aback Blue ramp

One hue, eleven steps. 500 is the anchor. 700 carries light text links and brand fills, and 400 carries those roles in dark.

#e6f6ff

Active wash, selected rows

100

#ccedff

Icon chips, active tool rows

200

#99dbff

Tinted borders, callouts

300

#66c9ff

Hover borders, dark link hover

400

#33b7ff

Dark links, icons, focus

500

#009bf9

Brand anchor, accents, progress

600

#007cc7

Brand icons, light focus ring

700

#005d95

Light links, brand fill

800

#003e63

Link and brand hover

900

#001f32

Dark icon chips

950

#000f19

Text on brand fill in dark

Typography

Geist Sans for the interface and prose, Geist Mono for code and data. Readable content never drops below 12px; 10 and 11 are reserved for uppercase labels.

The building blocksdisplay-lg · 36 / 40, 700

Page titleheading-xl · 30 / 36, 700

Article sectionheading-lg · 24 / 32, 700

Free-standing sectionheading-md · 20 / 28, 600

Card titleheading-sm · 18 / 28, 600

Item titletitle-md · 16 / 24, 500

Page descriptionbody-lg · 16 / 24, 400

Default interface textbody-md · 14 / 20, 400

Meta, captions, helper textbody-sm · 12 / 16, 400

Option groupeyebrow · 12 / 16, 500

Column titleoverline · 11 / 16, 600

Group headermicro-caps · 10 / 12, 700

const aback = true;code · 14 / 20, 400

Spacing and layout

A 4px base unit. Page blocks use 24px, marketing sections use 32px, and controls share a 36px height.

Control xs

24px

Control sm

32px

Control md

36px

Control lg

40px

Shape

Every radius is zero: cards, controls, avatars, dialogs, status dots, and switches. The only rounded element is the native scrollbar thumb.

Card

border-radius: 0

Control

border-radius: 0

Dialog

border-radius: 0