[UI/UX Design] Define spacing, radius, and typography scale tokens

[thlpkee20-wq]

Description

This is a UI/UX design task to formalize spacing, border-radius, and typography scale tokens. The app mixes ad-hoc values (e.g. p-20, rounded-2xl/rounded-xl/1.5rem, varied heading sizes). Define a documented scale to bring visual consistency.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/index.css (existing elevation tokens), src/App.tsx, src/components/AuthLayout.tsx
• Should align with existing --shadow-* and glass tokens already standardized

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/spacing-radius-type-tokens
• Implement changes
  • Define spacing, radius, and type-scale tokens in index.css
  • Map current ad-hoc values to the new scale and note migrations
  • Document the scale alongside the existing elevation/glass tokens
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • heading scale on mobile vs desktop, radius consistency, spacing rhythm, contrast unaffected
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: define spacing, radius, and type tokens

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours