Token styleguide — Grand Wildlife Zoo

Color — both Acts side by side

--bg-deep #060b08

--bg-emerald #0a1410

--bg-jade #1b2a22

--gold-leaf #c4a052

--gold-light #d9b66a

--gold-shadow #8a6f35

--ink-cream #e8d39a

--ink-bright #f0e4c0

Semantic aliases

--color-bg background

--color-bg-elevated background, raised

--color-bg-sunken background, recessed

--color-fg foreground

--color-fg-strong foreground, strong

--color-fg-muted foreground, muted

--color-accent accent

--color-accent-deep accent, deep

--color-accent-shade accent, shaded

--color-rule rule line

--color-border border

--paper-warm #f5ecd6

--paper-aged #e8dcbe

--ink-deep #3a2a14

--ink-muted #7a6240

--moss #87a96b

--leaf #b4d3a0

--forest #5e7a48

--pin #b94a30

Semantic aliases

--color-bg background

--color-bg-elevated background, raised

--color-bg-sunken background, recessed

--color-fg foreground

--color-fg-strong foreground, strong

--color-fg-muted foreground, muted

--color-accent accent

--color-accent-deep accent, deep

--color-accent-shade accent, shaded

--color-rule rule line

--color-border border

Typography

Self-hosted variable fonts from /fonts/. Latin subset only.

--font-display Display — Cinzel

GRAND WILDLIFE ZOO

--font-italic Italic — Cormorant Garamond

A mission-driven finale of the zoo journey.

--font-body Body — Source Serif 4

The Conservation Center transforms the visit into a lasting conservation message.

--font-label Label — Inter

CONSERVE · INSPIRE · CONNECT

Type scale

--text-xs

The quick brown fox

--text-sm

The quick brown fox

--text-base

The quick brown fox

--text-md

The quick brown fox

--text-lg

The quick brown fox

--text-xl

The quick brown fox

--text-2xl

The quick brown fox

--text-3xl

The quick brown fox

--text-4xl

The quick brown fox

--text-5xl

The quick brown fox

Spacing scale

--space-0

--space-1

--space-2

--space-3

--space-4

--space-5

--space-6

--space-7

--space-8

--space-9

--space-10

Radius

--radius-none

--radius-sm

--radius-md

--radius-lg

--radius-pill

Shadows

--shadow-soft

--shadow-lifted

--shadow-glow

--shadow-inset-rule

--shadow-soft

--shadow-lifted

--shadow-glow

--shadow-inset-rule

Durations & easings

Live demo of each duration token. All collapse to 0ms under prefers-reduced-motion.

--dur-fast

--dur-base

--dur-slow

--dur-cinema

--dur-finale