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. Normal-case headers (14px/600, slate-900), 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).
Solid border pill buttons with filter icon + label + chevron. Active state = blue tint. Always goes on a row below the search bar — never inline with search.
Centered layout: "Showing X-Y of Z", page controls, and records-per-page selector. Active page = primary blue fill.