Foundations

Tokens

The canonical Folio v1.2 token set. Swatches below render from the live CSS variables -- toggle the theme and they remap automatically. Never hardcode a hex value; always reference the token utility.

Color

Every color token, grouped by role -- backgrounds, text, borders, feedback, and chart series.

Backgrounds

Surface fills, from the main canvas to brand and feedback tints.

background.default

bg-background

Main page / app background

light #FFFFFFdark #0F1117

background.subtle

bg-muted

Sidebars, off-white surfaces

light #F9FAFBdark #141820

background.secondary

bg-secondary

Secondary surfaces, hover states

light #F3F4F6dark #1F2937

background.primary-subtle

bg-primary-subtle

Brand-tinted surfaces

light #EFEDFDdark #1A1733

background.accent

bg-accent

Hover and highlight surfaces

light #F3F4F6dark #1E1B4B

background.primary

bg-primary

Primary brand fills, buttons

light #5D4EE7dark #7C6FF7

background.inverse

bg-inverse

Dark surfaces

light #0F1117dark #F9FAFB

background.danger

bg-destructive-subtle

Error background tints

light #FEF2F2dark #450A0A

background.success

bg-success-subtle

Success background tints

light #F0FDF4dark #052E16

background.warning

bg-warning-subtle

Warning background tints

light #FFFBEBdark #451A03

background.info

bg-info-subtle

Info background tints

light #EFF6FFdark #172554

Text

Foreground colors for copy, labels, and states.

text.default

text-foreground

Body text, primary content

light #0F1117dark #F9FAFB

text.subtle

text-muted-foreground

Secondary text, placeholders

light #6B7280dark #9CA3AF

text.primary

text-primary

Brand text, links, active labels

light #5D4EE7dark #7C6FF7

text.inverse

text-inverse

Text on dark / filled backgrounds

light #FFFFFFdark #0F1117

text.disabled

text-disabled

Disabled text only

light #D1D5DBdark #4B5563

text.danger

text-destructive

Error messages

light #B91C1Cdark #F87171

text.success

text-success

Success messages

light #15803Ddark #4ADE80

text.warning

text-warning

Warning messages

light #B45309dark #FBBF24

text.info

text-info

Info messages

light #1D4ED8dark #60A5FA

Borders

Outlines, separators, and focus rings.

border.default

border-border

Standard borders, input outlines

light #E5E7EBdark #374151

border.subtle

border-border-subtle

Light separators

light #F3F4F6dark #1F2937

border.strong

border-border-strong

Emphasized borders

light #9CA3AFdark #6B7280

border.primary

border-primary

Focused / active inputs

light #5D4EE7dark #7C6FF7

border.danger

border-destructive

Error state borders

light #EF4444dark #F87171

border.success

border-success

Valid / success borders

light #15803Ddark #4ADE80

border.warning

border-warning

Warning state borders

light #B45309dark #FBBF24

border.info

border-info

Info state borders

light #3B82F6dark #60A5FA

Feedback

Canonical status colors — use these for every status state.

feedback.info

bg-info

All info states

light #3B82F6dark #60A5FA

feedback.success

bg-success

All success states

light #15803Ddark #4ADE80

feedback.warning

bg-warning

All warning states

light #B45309dark #FBBF24

feedback.danger

bg-destructive

All error / destructive states

light #EF4444dark #F87171

Chart

Data series colors for charts. Use in order, from chart-1 to chart-10. The values are the same in light and dark. Never use feedback or primary tokens for neutral data series.

chart.1

var(--color-chart-1)

First data series

light #7C6FF7dark #7C6FF7

chart.2

var(--color-chart-2)

Second data series

light #38BDF8dark #38BDF8

chart.3

var(--color-chart-3)

Third data series

light #34D399dark #34D399

chart.4

var(--color-chart-4)

Fourth data series

light #FB923Cdark #FB923C

chart.5

var(--color-chart-5)

Fifth data series

light #EC4899dark #EC4899

chart.6

var(--color-chart-6)

Sixth data series

light #2A9D90dark #2A9D90

chart.7

var(--color-chart-7)

Seventh data series

light #16A249dark #16A249

chart.8

var(--color-chart-8)

Eighth data series

light #E963A6dark #E963A6

chart.9

var(--color-chart-9)

Ninth data series

light #A855F7dark #A855F7

chart.10

var(--color-chart-10)

Tenth data series

light #2E4C6Bdark #2E4C6B

Radius

Six steps. rounded-lg (8px) is the default.

rounded-none

0px

rounded-sm

4px

rounded-lg

8px

rounded-xl

12px

rounded-2xl

16px

rounded-full

9999px

Spacing

4px base unit. Never use arbitrary px values in inline styles.

p-1

4px

p-2

8px

p-3

12px

p-4

16px

p-6

24px

p-8

32px

p-12

48px

p-16

64px

Type Scale

Geist for all UI and body copy. Geist Mono for code and technical values only.

Largest display texttext-large · 20px · Regular

Section headers and leadstext-lead · 18px · Semibold

Card and component titlestext-title · 16px · Medium

Body and paragraph copytext-body · 16px · Regular

Secondary and muted copytext-small · 14px · Medium

Helper and description copytext-description · 14px · Regular

Captions, labels, metadatatext-caption · 12px · Regular

Compact form labelstext-label · 12px · Medium

400 · Regular

500 · Medium

600 · Semibold

700 · Bold

font-family: Geist Mono -- 0123456789 { } => const x = 42;

Geist is self-hosted via the geist package (Vercel's official build), not the Google font. Download Geist →

Values mirror folio-tokens.css. Adding a token is a MINOR bump; changing a value is a PATCH or MINOR.