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.
The app's real icon set, pulled from icons.ts (Heroicons + Lucide via Iconify). Names shown are the semantic keys the app references (e.g. ICON.members) — not the raw icon names. Never use inline SVGs.
All buttons require font-family: inherit and iconify-icon font-size: 20px.
Icon-only button that turns primary on hover. Always paired with a tooltip. Used across tables and module headers.
Always use type="text" for date/time fields. Focus state = blue border + blue ring at 20% opacity.
Wrapper for any input: label, required marker, hint text, and error state. The real app's most-used form component — wraps inputs, selects, and textareas.
Standardized search field: leading magnifier, larger size, and a / keyboard hint (becomes a clear button when typing).
Selection controls. Primary fill when selected. Checkbox for multi-select, radio for one-of-many.
Toggle for on/off settings. Primary fill when on. Use for instant-apply settings, not form submission.
Numeric input with stepper buttons. Used for quantities, counts, and amounts.
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 |
Pill badges using color-mix for soft backgrounds. No ring/border.
Color-coded badge driven by an entity's assigned color (via data-entity-color in the real app). Same pill shape, accented per entity.
Blue rocket badge marking a gated-but-visible feature under roadmap preview.
Circular user representation. Initials on a soft tint, or an icon fallback. Three sizes.
Small indicator anchored to another element — a count badge or a status dot.
Read-only label/value pair for detail views. Stacked by default, or inline. Falls back to "–" when empty.
Dashboard summary card: tinted icon tile, title, optional description, a large value, and an optional action link. Six tones.
Active this month
June 2026
Members overdue
Vertical sequence of events. Filled dots for completed, muted for upcoming.
Centered layout: "Showing X-Y of Z", page controls, and records-per-page selector. Active page = primary blue fill.
Inline message banner with a leading icon and soft tinted background. Five colors: info, success, warning, error, neutral.
Dark label on hover. Used on icon-only buttons and truncated text. Dark slate background, white text.
Loading placeholder with a subtle shimmer. Mirror the shape of the content that's loading.
Linear progress bar. Primary fill on a muted track.
The "nothing here yet" placeholder for empty modules and tables: a dimmed icon over a muted message.
The standard tab style: a 3px primary underline on the active tab. Inactive tabs use default (darker) text and get a soft primary-tint pill on hover. This is the only tab style — pill tabs are retired.
Horizontal progress through a sequence. Completed steps fill primary; the current step is outlined.
A Filters toggle button sits in the table toolbar next to Export (both outline buttons). Clicking Filters reveals the filter panel below. The button turns primary once any filter is applied.
Max-width 560px, 16px radius. Cancel = text color (not blue). Close via Escape, backdrop, X, or Cancel.
Slide-over panel from the right. Standard width 576px (real app's max-w-xl). Footer button hierarchy: Save = primary (filled blue), Cancel = outline, any in-between action (e.g. Save Draft) = soft grey. Primary action on the right.
Floating panel anchored to a trigger. Richer than a tooltip — can hold formatted content.
Action menu from a trigger. Items with leading icons, an optional separator, and a danger action.
Basic content container. 8px radius, 1px border, white background.
Basic card with header and body content.
Card with an action button in the header.
The ModuleBase pattern for detail pages (member profiles, payment drawers). Rounded-2xl (16px) card with inner shadow, a primary-colored header icon, 16px title, and a subtle 50%-opacity header divider. Body padding 24px. Active state shows a 2px primary border. Sits in a 12-column grid (gap-ssm / 16px).
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 |
Divider line between content. Plain, or with a centered label.
Small section header: a round neutral icon chip beside a muted title. Used inside modules and drawers.