biohazard-vfx/docs/stories/1.1.design-tokens-and-typography.md

Status

APPROVED

Story

As a visitor, I want a cohesive visual language, so that the site feels premium and consistent.

Acceptance Criteria

1. Global CSS variables for color, spacing, radii, shadows, and motion exist and are documented.
2. Headline font and body font applied globally; extraneous fonts removed.
3. Tailwind config consumes tokens; shadcn primitives reflect tokens.

Tasks / Subtasks

• Define and align design tokens (AC: 1, 3)
  • Audit existing tokens in src/app/globals.css (surface/text/brand, spacing, radius, transitions)
  • Update palette to dark-first black/orange + neutrals per PRD; keep aliases for backward compat where needed
  • Add motion presets and shadow tokens if missing; ensure --radius aligns with Tailwind theme.borderRadius
  • Document token usage in a short README at src/components/ui/README.md
• Apply typography pairing globally (AC: 2)
  • In src/app/layout.tsx:body, set Kanit as base text font; Rajdhani for headings via utility/class
  • Remove unused fonts (DM Serif, Bentham, Share) from layout font variables and any CSS usages
  • Ensure weights available: Rajdhani 600/700 for headings; Kanit 400/500 for body
  • Update src/app/globals.css heading selectors to use Rajdhani
• Tailwind + shadcn integration (AC: 3)
  • Map Tailwind theme colors to CSS vars (already partially done); ensure components read from vars
  • Set Tailwind fontFamily to prefer CSS vars (e.g., body → Kanit, display → Rajdhani) where appropriate
  • Verify shadcn primitives reflect tokenized colors, radius, and motion
• Regression and quality checks
  • Lint passes: npm run lint
  • Build passes: npm run build
  • Visual smoke check /projects, /faq, /contact for layout/regressions (Integration Verification IV1)
  • Admin pages readable and functional (IV2)
  • Bundle size does not grow >10% vs baseline; note result in Completion Notes (IV3)

Dev Notes

• Context
  • PRD: docs/prd.md (Ready). Story 1.1 targets tokens + typography; sidebar choice does not affect this story.
  • Typography pairing approved: Headings Rajdhani 600/700; Body Kanit 400/500.
  • Palette direction approved: dark-first black/orange + neutrals.
• Relevant Source Tree
  • Layout file: src/app/layout.tsx:1 — loads multiple local fonts and assigns body class variables.
  • Global styles: src/app/globals.css:1 — defines CSS variables and sets current fonts (Bentham, DM Serif for headings).
  • Tailwind config: tailwind.config.ts:1 — maps theme colors to CSS vars; sets font families (currently Inter/Cal Sans defaults).
  • Shared components likely to reflect tokens: src/components/* (e.g., Buttons/Forms use radius/colors).
• Required Changes (high level)
  • Remove DM Serif, Bentham, Share font variables from body class list in layout; keep Rajdhani and Kanit only.
  • Switch body font-family in globals.css to var(--font-kanit), headings h1–h3 to var(--font-rajdhani).
  • Ensure Tailwind fontFamily values either include CSS variable driven stacks or rely on element selectors; do not regress shadcn styles.
  • Tokenize any hardcoded colors in components if encountered while verifying ACs (limit scope to token plumbing, not a full refactor).

Testing

• Standards
  • Use existing linting (ESLint + Prettier) and Next build as gates; no unit test framework present in repo.
  • Accessibility: verify visible focus rings remain; respect prefers-reduced-motion (no changes expected in this story).
  • Performance: capture approximate bundle size before/after with next build output; ensure <10% growth.
• Manual Checks
  • Pages: /projects, /faq, /contact, /admin/* render without font fallback flashes and with expected fonts.
  • Visual: Headings visibly using Rajdhani, body using Kanit.

Change Log

Date	Version	Description	Author
2025-09-24	v1	Initial draft from PRD Story 1.1	Scrum Master

Dev Agent Record

Agent Model Used

{{agent_model_name_version}}

Debug Log References

Completion Notes List

File List

QA Results