The Fable design system

Tokens & components

A cloth-bound heritage children's-book identity — fern-green covers, cream endpapers, marigold foil. Everything below is built from the same tokens.

Colour

Brand & accent

#1f4b3f

Brand / Fern

--brand

#163a30

Brand ink

--brand-ink

#e29a2e

Accent / Marigold

--accent

#b6771a

Accent ink

--accent-ink

#bf4f6b

Berry

--berry

#5c86a8

Sky

--sky

Neutrals

#f1ecdd

Background

--bg

#fbf7ef

Surface

--surface

#f5efe1

Surface sunken

--surface-sunken

#e3ddca

Border

--border

#24312b

Text

--text

#5c6862

Muted

--text-muted

Semantic

#3f8f5f

Success

--success

#e29a2e

Warning

--warning

#c24a45

Danger

--danger

#5c86a8

Info

--info

Typography

Display · Fredoka

Title · Fredoka semibold

Body · Nunito — the quick brown fox jumps over the lazy dog.

Small / muted · supporting copy and hints.

Eyebrow · uppercase label

Radius & elevation

Radius

r-sm

r-lg

r-xl

Elevation

e-1

e-2

e-3

Buttons

Variants

Sizes

States

Badges, alerts & status

Badges

BrandReadyCreatingFailedDraft

Spinner

Working…

Heads up

Informational context for the reader.

Saved

Your changes are safe.

Some images failed

Use Regenerate on those pages to retry.

Blocked

This request isn't suitable for a children's book.

Form controls

Text inputWith a helpful hint.SelectTextarea

Checkbox option

Signature — book-spine cards

Fern spine

A gilded edge, like a book on a shelf — the system's recurring motif.

Marigold spine

A gilded edge, like a book on a shelf — the system's recurring motif.

Berry spine

A gilded edge, like a book on a shelf — the system's recurring motif.