Docs / Tokens

Design Tokens

Real swatches, real values. No mystery hex codes hiding in components.

↗ if it ships, it should exist here.

Colors

Paper Surfaces

paper

base#F5F0E8

paper.base

--color-paper-base

light#FAF8F3

paper.light

--color-paper-light

aged#EDE4D0

paper.aged

--color-paper-aged

cream#FFF9F0

paper.cream

--color-paper-cream

Ink Scale

ink

black#1A1209

ink.black

--color-ink-black

dark#2C2416

ink.dark

--color-ink-dark

medium#5C4F3A

ink.medium

--color-ink-medium

light#9B8E7A

ink.light

--color-ink-light

faint#C8BFB0

ink.faint

--color-ink-faint

Accent Colors

accent

yellow#F2C94C

accent.yellow

--color-accent-yellow

red#E05A4D

accent.red

--color-accent-red

green#4CAF7D

accent.green

--color-accent-green

blue#4A90D9

accent.blue

--color-accent-blue

orange#E8833A

accent.orange

--color-accent-orange

Shadows

lift-1

3px 3px 0px #1A1209

lift-2

5px 5px 0px #1A1209

lift-3

8px 8px 0px #1A1209

lift-4

12px 12px 0px #1A1209

accent

4px 4px 0px #F2C94C

soft

4px 4px 0px rgba(26,18,9,0.15)

Typography

Display

Paper headings should feel printed and deliberate.

var(--font-display)

Body

Body copy stays calm, readable, and editorial.

var(--font-body)

Mono

TOKEN_LABEL v1.2.0 STATUS: STABLE

var(--font-mono)

Handwritten

↗ leave room for human notes.

var(--font-handwritten)

Motion

duration.fast120ms

duration.base200ms

duration.slow350ms

easing.paper

cubic-bezier(0.16, 1, 0.3, 1)

easing.bounce

cubic-bezier(0.34, 1.56, 0.64, 1)