Story 1.6 Token Showcase

Design Tokens and Accessibility Foundation

This route exposes the semantic palette, typography rhythm, spacing scale, breakpoint wrappers, focus treatment, and screen-reader helpers that later UI stories will inherit.

Semantic Color Palette

Each role ships with readable foreground pairings and soft surfaces so feature teams can stay inside contrast-safe boundaries without inventing new colors.

Primary Deep Navy
Token--color-primary-deep-navyValue#102542

Primary action and heading color with high-contrast light foreground pairing.

Teal Accent
Token--color-accent-tealValue#0F8B8D

Accent and focus-adjacent color paired with dark outlines for non-color focus cues.

Emerald Success
Token--color-success-emeraldValue#1F7A4F

Success state token with a light foreground and soft background companion.

Amber Warning
Token--color-warning-amberValue#8C5A00

Warning role tuned for readable dark-on-amber messaging surfaces.

Crimson Error
Token--color-error-crimsonValue#A33147

Error and destructive feedback token with contrast-safe foreground support.

Slate Neutral Scale
Token--color-slate-050 ... --color-slate-900ValueNeutral steps

Neutral scale for text, borders, and layered surfaces across the app shell.

Typography Scale

Headings, body copy, dense metadata, and explanation panels all come from CSS custom properties so later routes can stay visually consistent.

Designed for decisive first impressions.

Display

--font-size-display / --line-height-display

Section hierarchy stays readable at every breakpoint.

Heading L

--font-size-h1 / --line-height-heading

Useful for cards, panels, and route-level headings.

Heading M

--font-size-h2 / --line-height-heading

Core application copy uses the body scale for comfortable long-form reading.

Body

--font-size-body / --line-height-body

Dense text supports captions, chips, and compact metadata.

Dense

--font-size-dense / --line-height-dense

Explanation panels can breathe with a slightly larger size and looser rhythm.

Explanation

--font-size-explanation / --line-height-explanation

Spacing and Breakpoints

Spacing is anchored to the 8px unit, and responsive wrappers shift from single-column to tablet and desktop multi-column layouts at the documented breakpoints.

Space 1

8px

Space 2

16px

Space 3

24px

Space 4

32px

Space 5

40px

Space 6

48px

320-767px

Mobile

Single-column content with compact spacing and preserved touch targets.

768-1023px

Tablet

Two-column responsive wrappers balance density and readability.

1024px+

Desktop

Multi-column layouts and wider panels expose richer comparison surfaces.

Accessibility Primitives

The global focus ring combines an outline, offset, and halo. Shared helpers provide a visually-hidden utility and a reusable live region for status messaging.

Focus and Touch Targets

Focus Accent Link

Tab into these controls to inspect the default ring and minimum 44x44 hit area.

ARIA Live Region

Press the button to update the shared polite live region.

Reduced Motion

The floating orb animates in standard mode and becomes static when `prefers-reduced-motion` is enabled.