BAL-35 — Visual Foundation

Design system tokens + card templates. All surfaces derive from tokens.css. Showcase page for visual verification.

Politician Cards Red Team & Blue Team

Situation Cards Shared News Cycle

Spin Reference Triangle & quick-start rules

Token Swatches Color verification

Red Team
Blue Team
Neutral
Ink
Headline
Dark
Outrage
Economy
Security

Contrast Check

All text-on-background combinations must meet WCAG AA: body text 4.5:1, large text 3:1.

White on Red Team — body text sample
White on Blue Team — body text sample
Ink on Neutral — body text sample
Neutral on Ink — reversed text
Ink on Outrage — spin indicator
Ink on Economy — spin indicator
White on Security — spin indicator

File Manifest Design system deliverables

File Purpose Consumers
css/tokens.css All CSS custom properties: colors, typography, spacing, layout, textures, motion Every surface
css/texture.css Halftone dot pattern, newsprint grain, divider rules Cards, landing page hero
css/card.css Card shell + politician, situation, spin reference layouts Card templates, card gallery
css/landing.css Landing page layout and components (by another agent) Landing page only
cards/politician.html Standalone politician card template (Red + Blue examples) Card generation, social exports
cards/situation.html Standalone situation card template Card generation, social exports
cards/spin-reference.html Spin triangle reference card template Rules reference, learning aid
showcase.html This page — all templates + token swatches for visual verification Design review only