Design system reference for HTML prototypes. Every component matches the real Nuxt 4 app. Last synced March 2026.
Primary = Blue-600. Secondary = Emerald. Neutral = Slate. All badge/status colors use color-mix for soft backgrounds.
Inter via Google Fonts. Weights: 400 (normal), 500 (medium), 600 (semibold), 700 (bold).
Custom "s-prefixed" scale from the real app. Base unit = 4px. Used for padding, gaps, and margins.
Heroicons (primary) + Lucide (secondary). Loaded via Iconify CDN. Never use inline SVGs.
All buttons require font-family: inherit and iconify-icon font-size: 20px.
Pill badges using color-mix for soft backgrounds. No ring/border.
Always use type="text" for date/time fields. Focus state = blue border + blue ring at 20% opacity.
Proper <table> element, not CSS grid. Uppercase headers, hover rows, 13px body text.
| Name | Status | Role | Actions | |
|---|---|---|---|---|
| Sarah Johnson | sarah.j@example.com | Active | Organization Admin | |
| Michael Chen | m.chen@example.com | Active | Staff | |
| Emily Rodriguez | e.rod@example.com | Pending | Member | |
| David Park | d.park@example.com | Suspended | Member |
Always pill-style with border-radius: 9999px. Never underline-style. Supports icons and count badges.
Basic content container. 8px radius, 1px border, white background.
Basic card with header and body content.
Card with an action button in the header.
Used on detail pages (member profiles, payment drawers). 12-column grid with gap-ssm (16px). Icon + title header.
Full table page pattern: header, search/export toolbar, filter bar, data table, pagination.
| Applicant | Position | Status | Applied |
|---|---|---|---|
| James Wilson | Electrician | Under Review | Mar 12, 2026 |
| Maria Garcia | Plumber | Approved | Mar 10, 2026 |
| Robert Kim | Welder | Pending | Mar 8, 2026 |
Max-width 560px, 16px radius. Cancel = text color (not blue). Close via Escape, backdrop, X, or Cancel.
Slide-over panel from the right. Max-width varies (480px default, up to 600px for complex content).
Dashed border when inactive, solid blue border when active. Filter chips show active selections.
"Showing X-Y of Z" on the left, page controls on the right. Active page = primary blue fill.