minimal-design-system

# Minimal Design System A minimalist design system for HTML artifacts, dashboards, and websites. ## Philosophy - Generous whitespace - Clear typography hierarchy - Minimal color palette - Auto dark mode via `prefers-color-scheme` - Accessible: WCAG AA minimum ## Quick start template Use Tailwind CSS via CDN and the HSL tokens from `references/design-tokens.md`. ## Core tokens - `--background`: page background - `--foreground`: primary text - `--primary`: buttons and emphasis - `--muted`: subtle backgrounds - `--border`: borders and dividers - `--card`: card backgrounds - `--radius`: 0.5rem ## Common components - **Primary button**: `bg-primary text-primary-foreground h-11 px-8 rounded-md` - **Secondary button**: `border border-default h-11 px-8 rounded-md hover:bg-muted` - **Card**: `p-6 rounded-lg border border-default bg-card` - **Badge**: `text-xs px-2.5 py-1 rounded-full bg-muted` - **Input**: `h-11 px-4 rounded-md border border-default focus:ring-2 focus:ring-[hsl(var(--ring))]` ## Layout - Container max widths: `max-w-7xl`, `max-w-4xl`, `max-w-3xl`, `max-w-2xl` - Section spacing: `py-16`, `py-24` - Element gaps: `gap-4`, `gap-6`, `gap-8` ## Rules - Use Lucide icons only. No emojis. - Never overwrite existing styles without asking. - Add focus-visible indicators. - Keep touch targets at least 44px. ## Reference - `references/design-tokens.md` — complete tokens - `references/components.md` — full component library