Foundation — design tokens

The colour palette, typography scale, spacing scale, and radius scale committed in the UX Design Specification §"Visual Design Foundation". Concrete hex values are Iteration 1 starting commitments — the architect + designer confirm or adjust at iteration setup.

Colour palette

Brand-layer colours (primary / secondary / accent / neutral) are shared across the museum and tool registers. Base-layer colours (background tints, borders) diverge per register — these are the museum theme values.

--color-primary
#2c3e6b
Primary — museum-hall slate blue. CTAs, active states, links, focus rings.
--color-secondary
#9a8f7e
Secondary — warm stone. Subtle highlights, hover backgrounds.
--color-accent
#7a3a3a
Accent — muted oxblood. Sparingly, for status indicators that demand attention.
--color-neutral
#3a3f47
Neutral — slate grey. Body text on light backgrounds, dividers.
--color-base-100
#f7f3ec
Base — warm cream. Background of public-discovery surfaces.
--color-base-200
#efe9de
Base-200 — darker cream. Nested surfaces, card backgrounds.
--color-base-300
#dcd3c2
Base-300 — borders, hairline dividers.
--color-base-content
#2a2823
Base-content — deep slate body text, near-black with warmth.

Status colours

Desaturated, museum-tone status palette. No candy red-greens. Every use of status colour also carries a text label or icon (WCAG 1.4.1 — never colour-only signalling).

Info Success Warning Error
--color-{info|success|warning|error} desaturated, museum-tone

Typography scale (museum register)

Source Sans 3 across all sizes. Italics for scientific binomials. Monospace stack for identifiers and coordinates.

text-display 3rem / 1.1 / 600
Switzerland's heritage
text-hero 2.25rem / 1.15 / 600
Limestone with coral fossil
text-section 1.5rem / 1.25 / 600
Constituent parts
h3 1.25rem / 1.3 / 500
Specimen overview
body 1.0625rem / 1.6 / 400
Body text in the museum register reads at 17 pixels with 1.6 line height. Comfortable reading at desktop and tablet sizes.
body-sm 0.9375rem / 1.5 / 400
Captions, secondary information, list-row metadata.
meta 0.8125rem / 1.4 / 400
Audit timestamps, language tags, low-attention metadata.
text-display / text-hero / text-section / ...

Spacing scale

Base unit 4px. The museum register applies multiples more generously (gap-12 to gap-24 between major page sections); the tool register applies them tighter. Same scale, different application.

gap-1 / p-1
0.25rem · 4px
gap-2 / p-2
0.5rem · 8px
gap-3 / p-3
0.75rem · 12px
gap-4 / p-4
1rem · 16px
gap-6 / p-6
1.5rem · 24px
gap-8 / p-8
2rem · 32px
gap-12 / p-12
3rem · 48px
gap-16 / p-16
4rem · 64px
gap-24 / p-24
6rem · 96px
Tailwind spacing scale

Radius scale

Restrained radii. Same values apply across both registers; radius is part of the shared brand layer.

no radius
0
rounded-selector
0.25rem · 4px
rounded-field
0.375rem · 6px
rounded-box
0.5rem · 8px
--radius-*