# Mapping: Spec 214 - Website Visual Foundation

## Status

| Field | Value |
| --- | --- |
| classification | continuing |
| follow-up owner | `specs/223-astrodeck-website-rebuild/mappings/spec-214-website-visual-foundation.md` |
| legacy task file | `specs/214-website-visual-foundation/tasks.md` |
| exception outcome | no exception required |
| material drift references | none |

Spec 214 remains the controlling visual contract. AstroDeck may accelerate the rebuild, but it may not impose a second visual system or a generic startup aesthetic.

## Mapping Records

| Requirement reference | Candidate primitive(s) | Disposition | Adaptation summary | Acceptance mapping | materialDriftReferences | exceptionReference |
| --- | --- | --- | --- | --- | --- | --- |
| Color roles, surfaces, border-first clarity, and restrained elevation | `adk-component-section-shell`, `adk-component-card-surface`, `adk-component-badge-chip` | adapt | Map AstroDeck colors, borders, and surface layers to the website-local token model; strip decorative gradients, glass, and vanity shadows. | 214 FR-003, FR-004, FR-008, FR-009, FR-015 | none | none |
| Typography hierarchy, page rhythm, and progressive disclosure | `adk-section-hero-split-media`, `adk-section-outcome-band`, `adk-section-feature-cluster-grid` | adapt | Rebuild heading scale, section spacing, and copy rhythm around the Spec 214 hierarchy instead of vendor defaults. | 214 FR-005, FR-006, FR-007, FR-013, FR-016 | none | none |
| CTA, link, and form semantics | `adk-component-primary-button`, `adk-component-secondary-button`, `adk-component-input-field`, `adk-component-textarea-field` | adapt | Preserve one dominant CTA, lower-emphasis secondary actions, shared focus logic, and calm form styling. | 214 FR-010, FR-012, FR-015, FR-017 | none | none |
| Shared shell and page-family consistency across landing, trust, and content routes | `adk-component-header-nav`, `adk-component-footer-nav`, `adk-section-footer-utility`, `adk-page-home-marketing`, `adk-page-trust-proof`, `adk-page-legal-utility` | adapt | Keep one website-only visual language across landing, trust/legal, and content-heavy surfaces; no platform coupling and no raw library styling. | 214 FR-001, FR-002, FR-011, FR-018, FR-019, FR-020 | none | none |

## Replacement Tasks

1. Inventory AstroDeck design tokens, utility classes, and section-shell defaults, then bind them to the Spec 214 role model before any page-level restyling starts.
2. Adapt `adk-component-section-shell`, `adk-component-card-surface`, and `adk-component-badge-chip` to the website-local surface, border, radius, and contrast rules.
3. Re-skin `adk-component-primary-button`, `adk-component-secondary-button`, `adk-component-input-field`, and `adk-component-textarea-field` to match the CTA and form semantics already defined by Spec 214.
4. Rebuild AstroDeck header/footer typography, spacing, and nav emphasis so landing, trust, and content page families read as one website.
5. Remove or neutralize AstroDeck visual defaults that drift into glass, loud gradients, decorative shadows, or badge-heavy proof theater.
6. Re-verify the mapped primitives against representative landing, trust/legal, and content-heavy surfaces before homepage-specific work lands.

## Spread Control and Acceptance Trace

- Spread control: all styling work must route through the website-local token and primitive model; no raw AstroDeck styling is allowed to remain as a second standard.
- Acceptance trace: the mapped primitives cover the required design token set, typography hierarchy, surface model, interaction semantics, and page-family review rules from Spec 214.
- Exception note: no exception is approved. A later exception would need to prove that the mounted AstroDeck snapshot lacks a usable button, form, card, or shell family entirely.