--- name: admin-kaiadmin description: | Light-canvas dark-sidebar admin aesthetic: frosted-white card surfaces on a pale blue-grey page (#f5f7fd), a fixed deep-navy sidebar (#1a2035) with white icon-label navigation, a sticky top header bar, a cobalt-blue primary accent (#1572e8) for buttons, badges, and active states, body text #5a5a5a, Public Sans 400/600/700 type scale, 10px card radius, subtle box-shadow cards, and status pills for every entity state. Archetype = fixed dark vertical sidebar (icon + label items, collapsible sub-nav, bottom user chip) + sticky top header (breadcrumb title + search field + icon actions + avatar) + 4-tile KPI row (icon chip + big figure + trend badge + sub-label) + 2-column dashboard grid (status overview panel + SVG inline chart panel) + full-width records table with status pills, plus list, advanced datatable, form, charts, widgets, and profile/settings screens. triggers: - "light admin dark sidebar" - "navy sidebar blue accent admin" - "clean card admin dashboard" - "white card navy panel admin" - "blue accent enterprise dashboard" - "light canvas sidebar admin" - "admin painel lateral escuro" - "dashboard cards brancos acento azul" - "admin fundo claro sidebar navy" - "enterprise sidebar navigation blue" example_prompt: "Apply this light-canvas dark-sidebar admin aesthetic to my domain" od: mode: prototype surface: web scenario: operations preview: type: html entry: example.html design_system: requires: true sections: [color, typography, layout, components] craft: requires: [typographic-rhythm, state-coverage] --- # Azure Rail Admin — Visual Archetype This plugin contributes a **look** (light frosted-white content area, deep-navy sidebar, cobalt-blue accent, Public Sans type, 10px radius cards with subtle shadows) and a **structure** (fixed dark sidebar + sticky header + KPI tiles + dashboard grid + records table, plus list, datatable, form, charts, widgets, and profile screens). It does **not** contribute a domain — the subject matter comes from the Knowledge Base and the user's prompt. Treat the example below as illustration only. ## Visual language (AUTHORITATIVE) The non-negotiable look. Every chromatic value is a `:root` CSS custom property; only true neutrals (#fff, #000 derivatives) may be hardcoded. - **Page canvas:** `--page-bg: #f5f7fd` (pale blue-grey); content scrolls on this. - **Sidebar:** `--sidebar-bg: #1a2035` (deep navy); `--sidebar-text: #a9b7d0` (muted slate); `--sidebar-active-bg: #1572e8` (blue chip); `--sidebar-active-text: #ffffff`. `--sidebar-hover-bg: rgba(255,255,255,.08)`. Width 260px fixed; top logo zone 60px. - **Cards / panels:** `--card-bg: #ffffff`; `border-radius: 10px`; `box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04)`. Internal padding 20–24px. Card headings 15px / weight 600 / `#444`. - **Primary accent:** `--accent: #1572e8` (cobalt blue); `--accent-hover: #1260c4`; `--accent-light: rgba(21,114,232,.12)` (icon chip + badge tint). - **Text ramp:** `--text-primary: #444444`; `--text-body: #5a5a5a`; `--text-muted: #9daec5`; `--text-link: #1572e8`. - **Status tokens:** - `--state-success: #31ce36`; `--state-success-bg: rgba(49,206,54,.13)`. - `--state-warning: #ffad46`; `--state-warning-bg: rgba(255,173,70,.13)`. - `--state-danger: #f25961`; `--state-danger-bg: rgba(242,89,97,.13)`. - `--state-info: #48abf7`; `--state-info-bg: rgba(72,171,247,.13)`. - `--state-secondary: #6c757d`; `--state-secondary-bg: rgba(108,117,125,.13)`. - **Typography:** `"Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif`. Base 14px; line-height 1.5. Headings: page title 20px/700; card title 15px/600; table header 11px/700 uppercase letter-spacing .5px; KPI figure 28px/700; sub-labels 12px/400 muted. Numeric columns use `font-variant-numeric: tabular-nums`. - **Borders:** `--border: #ebecec` (1px dividers); `--border-focus: #1572e8` (focus ring). - **Header bar:** `--header-bg: #ffffff`; height 60px; 1px bottom border `--border`; position sticky top 0; `z-index 100`. - **Radius & spacing:** card 10px; button 5px; input 5px; pill 12px; table row 44px tall; section padding 24px; grid gap 20px. - **Motion:** `.15s ease` background/color/border transitions on interactive elements; no bounce, no scale-zero transforms. ## Layout archetype (AUTHORITATIVE, domain-neutral) Regions and component patterns described by shape and behavior — not meaning. - **Fixed dark sidebar (260px):** top logo zone (brand mark + app label) → vertical nav list (icon glyph + label + optional sub-nav chevron, collapsible sub-items indented 12px) → bottom user chip (avatar + name + role, pinned). Active item gets a blue solid chip full-width; hover gets a translucent white wash. - **Sticky header bar (60px, full width minus sidebar):** left — page breadcrumb / title; center — search input (icon + placeholder + pill border); right — icon action buttons (bell + grid + cog) with optional badge dot + avatar circle with dropdown indicator. - **Main content area** (padding 24px, vertical flow on `--page-bg`): - **KPI tile row** (4 equal tiles): each tile = white card with a colored square icon chip (top-left) + a trend/delta pill (top-right) + a big tabular figure (center) + an uppercase sub-label + a supporting line of text. - **2-column dashboard grid (7fr / 5fr or 60/40):** - **Left — status overview panel:** titled white card with a summary bar or segmented ring, then a labeled-row list of `[color dot] [label] [count chip] [bar-fill percent]` stacked rows. - **Right — inline chart panel:** titled white card housing an SVG line/area chart with labeled axes, gridlines, and a small legend row; optionally a second smaller bar-chart panel stacked below. - **Full-width records table panel:** white card, card-title + count badge + header actions (search field + primary button), a sticky thead with sortable columns (11px/700 uppercase), dense tbody rows (44px, 1px row border) with status pills, a checkbox column, an action column (icon buttons), and a footer with result count + pagination controls. - **List screen:** the records-table archetype as a full page — filter row (search input + select chips + date range) above the same table, pager below. - **Advanced datatable screen:** adds column visibility toggle, row-select checkbox header, inline row editing (pencil icon → editable cell), bulk action bar (appears when rows selected), and per-row expand/collapse sub-row. - **Form screen:** sectioned white cards of labelled fields; **domain rules appear as inline validation** — red asterisk on required labels, helper text beneath the field, and inline error message on the field border turning `--state-danger`; primary submit button disabled until required fields pass. No rules/checklist/ validation-status panel. - **Charts screen:** a row of two or three chart cards (line, bar, doughnut) in the same white-card shell, each with a card header + SVG or CSS chart body + optional legend row. - **Widgets screen:** a mixed-grid of specialty cards — progress-ring widget, quick-stats strip, activity feed, mini-calendar block, icon-stat row — all in the same white-card + blue-accent skin. - **Profile / settings screen:** two-column layout — left narrow card (avatar + name + role + quick stats) + right wider card (tabbed sections: personal info fields, password change, notification toggles, each section with inline-validated fields and a save button). ## Applying to a domain (the contract) The domain comes from the Knowledge Base + the user's prompt. Extract THIS domain's equivalent of the archetype slots — its primary entities, key metrics, status states, record list columns, form fields and their validation rules, chart subjects, and settings sections — and map them onto the archetype above. If no KB/domain is supplied (standalone), use the Example instantiation below. Do NOT invent a "rules" / "checklist" / "validation-status" panel; domain rules become inline field validation. Do NOT render build/implementation notes or designer controls — every screen is a finished product screen. ## Example instantiation (illustrative only — NOT the domain) > One concrete example so standalone Open Design has a complete brief. In WXCode > this is IGNORED — replace every label with the real domain's equivalent > (entities, metrics, states, columns, fields) drawn from the KB + prompt. ``` Domain (illustrative): a regional logistics and fleet-management console. Sidebar nav items → Dashboard, Shipments, Fleet, Routes, Drivers, Reports, Settings. Header breadcrumb → "Dashboard" or current section label. Avatar → dispatcher's initials chip. KPI tiles (4): • Active Shipments 1,284 (▲ 47, "vs. yesterday", blue chip icon: box). • On-Time Delivery 94.2% (▲ 1.3%, green, icon: check-circle). • Vehicles En Route 86 (▼ 3, amber, icon: truck). • Incidents Today 5 (▲ 2, red, icon: alert-triangle). Dashboard grid: Left — Shipment Status panel: segmented bar + labeled rows [blue dot] In Transit [412] [████████░░ 82%] [green dot] Delivered [718] [██████████ 100%] [amber dot] Delayed [94] [████░░░░░░ 18%] [red dot] Failed [12] [█░░░░░░░░░ 2%] Right — Delivery Rate chart: SVG line chart of on-time % over 7 days with gridlines + day labels; secondary mini bar-chart of daily volume below. Records table → "Shipments — Active": Columns: ID (mono) / Origin / Destination / Driver / ETA / Status pill / Actions (eye + edit). Status pills: In Transit (blue) / Delayed (amber) / Failed (red) / Delivered (green). List screen → All shipments; filter by Status, Route, Date Range; paginated. Datatable → Fleet vehicles — column toggle, row inline edit (license plate, capacity), bulk "schedule maintenance" action, expand sub-row for trip log. Form screen → "New Shipment": origin (required), destination (required), driver (required select), cargo type, declared weight (required, > 0), pickup date (required, not in the past), notes. Required marks + helper text + inline errors; submit disabled until valid. Charts screen → Delivery rate line chart (7 days) + Volume by route bar chart + Shipment status doughnut. Widgets screen → On-time ring (94.2%), Active fleet strip, Recent alerts feed, Top routes mini-table, Daily volume mini bar. Profile screen → Left card: dispatcher avatar + name + role + 3 quick stats. Right card tabs: Personal Info (name, email, phone — inline validated), Change Password (current + new + confirm, strength meter inline), Notifications (toggles). ``` ## Workflow 1. Read the active DESIGN.md (if present); otherwise use this plugin's Visual language tokens. 2. Extract THIS domain's equivalent of the archetype slots — primary entities, key metrics, status states, record columns, form fields + rules, chart subjects, settings sections — from the KB + prompt. Standalone: use the Example instantiation above. 3. Build each screen in the Visual language + Layout archetype above, imitating the example set in `assets/` (dashboard, list, datatable, form, charts, widgets, profile) and the `assets/template.html` seed — with fresh content for the real domain, NOT the example labels. 4. Express domain rules as INLINE field validation (required asterisks, helper text, inline error messages, disabled-until-valid submit). Never render rules/checklist/validation-status/build-note panels or designer/demo controls. 5. One inline `