design-tokens Specification

Purpose

Centralize the public site's design tokens so the interface implements the Heritage Editorial system from DESIGN.md (EB Garamond, 8px rhythm, zero radius, 1120px container, paper/olive/sage/ink palette), honoring reduced motion and WCAG AA contrast without card-shadow hierarchy.

Requirements

Requirement: Design tokens are centralized for the public site

The system SHALL define design tokens in a single source consumed by the public site layout and components. Tokens MUST implement the Heritage Editorial system from DESIGN.md: typography family EB Garamond (self-hosted), font scale (display/headline/title/body/label), spacing on an 8px rhythm, border radius 0 for interactive and content surfaces, container max width 1120px, paper/olive/sage/ink color roles, transition duration/easing, and MUST NOT rely on card shadows as a hierarchy mechanism for regular content.

Scenario: Public layout uses shared Heritage Editorial tokens

WHEN a public page is rendered
THEN visual properties MUST be derived from the centralized token definitions rather than arbitrary inline values
AND the primary typeface MUST be EB Garamond (or the declared serif fallback stack)
AND public content surfaces MUST use 0 border radius from tokens

Scenario: Palette commits paper and olive regions

WHEN the public site is rendered
THEN background regions MUST use paper ivory / paper deep / olive deep tokens rather than pure white card stacks on a white page
AND primary interactive emphasis MUST use olive heritage (#556B2F) / olive deep (#3E5219) tokens

Requirement: Public site respects reduced motion preference

The system SHALL honor prefers-reduced-motion by disabling or minimizing non-essential animations and transitions on the public site, including image hover scales and menu transitions.

Scenario: User prefers reduced motion

WHEN a visitor has prefers-reduced-motion: reduce enabled
THEN the public site MUST NOT play non-essential motion effects

Requirement: Public site meets baseline accessibility contrast

The system SHALL use Heritage Editorial color combinations that meet WCAG AA contrast requirements for text and interactive elements. Long-form text MUST use ink on paper; sage MUST NOT replace reading color when contrast would fall below AA.

Scenario: Primary text is readable

WHEN primary body text is rendered on its background color
THEN the contrast ratio MUST meet WCAG AA minimums

Scenario: Olive on paper interactive text is readable

WHEN primary buttons or links use olive tokens on paper backgrounds (or paper text on olive)
THEN the contrast ratio MUST meet WCAG AA minimums

Requirement: Elevation comes from tonal fields not card shadows

The public site SHALL express hierarchy through tonal paper fields, 1px botanical rules, and editorial overlap. Regular content components MUST NOT use short grey SaaS card shadows.

Scenario: Content cards omit drop shadows

WHEN home services, testimonials, or portfolio items are rendered
THEN they MUST NOT depend on --amare-shadow-* card elevation for hierarchy
AND separation MUST come from borders, tonal backgrounds, or whitespace

Requirement: Editorial motion tokens are centralized

The system SHALL define shared public motion tokens for an approximately 500 ms entrance, short interaction feedback, exponential ease-out, 90 ms stagger capped at 270 ms, 12 px vertical distance, and 24 px desktop / 16 px mobile lateral distance. Public motion CSS MUST consume these tokens instead of duplicating arbitrary values.

Scenario: Motion runtime uses shared values

WHEN page openings, reveals, or interaction feedback are styled
THEN duration, easing, stagger, and distance MUST be derived from centralized tokens

3.8 KiB Raw Blame History