# Lovable App 2 — Design Tokens Playground (Micro-App)

Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`.

## Goal

Build a UI/UX-rich **Design Tokens Playground** micro-app that previews a token-driven design system and provides high-signal tooling to spot inconsistencies.

This app is meant for **visual QA** and cross-pollination.

## Constraints

- Only modify files in this repository.
- No network calls
- No `console.log`
- No hardcoded colors (tokens only; define CSS variables and consume them)

## Pages (required)

- `/` Overview: theme switcher + token summary
- `/colors` Color ramp preview + contrast checker UI
- `/typography` Type scale preview
- `/components` Component preview gallery
- `/audit` “Hardcoded color detector” helper (basic UI tool)

## Key features

### Theme + token controls

- Theme toggle
- Density toggle (comfortable/compact)
- Radius slider (small/medium/large) affecting components

### Contrast checker

- Select foreground/background token
- Show WCAG-ish pass/fail indicator (client-side)

### Component gallery

Preview:

- buttons
- inputs
- cards
- alerts
- tabs
- table

### Audit helper (UI tool)

- Allow user to paste code snippets
- Highlight hex colors / rgb() occurrences
- Provide suggested token replacement list (heuristic)

## Deliverables

- Next.js 16 app
- Tailwind v4
- TypeScript strict
- Scripts: `dev`, `check`, `build` (`next build --webpack`)

## Success criteria

- Extremely polished UI
- Useful for designers/engineers
- Self-contained and safe