68 lines
1.5 KiB
Markdown
68 lines
1.5 KiB
Markdown
# 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
|