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

1.5 KiB Raw Blame History