aw-ecc 1.4.32 → 1.4.48

package/skills/aw-design/references/highrise-tokens.md

@@ -0,0 +1,394 @@
+# HighRise Design Tokens
+
+**Source of truth:** Figma — `HighRise` (fileKey `BM196jNmVUfXBYDsyEVv8N`), page **1. Tokens**.
+**Extraction method:** Figma MCP `get_variable_defs` on the Colors / Typography / Gradients / Label / Input / Gap frames.
+**Status markers:** ✓ verified from Figma | ~ derived | ? needs verification.
+
+Every value below was pulled directly from the production design system. Use these exact tokens — no rogue hex codes, no sibling brand scales (violet / purple / indigo exist in the kit but are **accent** colors, not brand).
+
+## Colors — Core Palette
+
+### Primary · Blue (brand) ✓
+
+Brand color. Primary buttons, active indicators, links, focus rings. Never decorative. `color/primary/blue/600` is the one true brand token.
+
+```css
+--color-primary-blue-25:  #F5F8FF;   /* ✓ subtlest bg tint */
+--color-primary-blue-50:  #EFF4FF;   /* ✓ selected-row bg, Secondary/Tertiary btn bg */
+--color-primary-blue-100: #D1E0FF;   /* ✓ focus ring 4px glow, soft hover */
+--color-primary-blue-200: #B2CCFF;   /* ✓ disabled primary bg, Secondary btn bg */
+--color-primary-blue-300: #84ADFF;   /* ✓ Secondary btn border, dark-mode focus */
+--color-primary-blue-400: #528BFF;   /* ✓ lighter accent on dark surface */
+--color-primary-blue-500: #2970FF;   /* ✓ dark-mode accent / gradient stop */
+--color-primary-blue-600: #155EEF;   /* ✓ PRIMARY BRAND — buttons, active nav, links */
+--color-primary-blue-700: #004EEB;   /* ✓ hover / blue text on light bg */
+--color-primary-blue-800: #0040C1;   /* ✓ focused border, hover-on-primary */
+--color-primary-blue-900: #00359E;   /* ✓ active / pressed */
+```
+
+### Neutral · Gray ✓
+
+Primary neutral. HighRise also ships seven optional gray variants (`gray-blue`, `gray-cool`, `gray-modern`, `gray-neutral`, `gray-iron`, `gray-true`, `gray-warm`) — only reach for those when explicitly asked. Default to plain `gray`.
+
+```css
+--color-neutral-white:    #FFFFFF;   /* ✓ page bg (light), text on primary */
+--color-neutral-black:    #000000;   /* ✓ modal scrim only — never as surface */
+--color-neutral-gray-25:  #FCFCFD;   /* ✓ subtle page bg / hover-on-white */
+--color-neutral-gray-50:  #F9FAFB;   /* ✓ sidebar bg, table header, subtle bg */
+--color-neutral-gray-100: #F2F4F7;   /* ✓ hover states on neutral surfaces */
+--color-neutral-gray-200: #EAECF0;   /* ✓ dividers, disabled neutral bg */
+--color-neutral-gray-300: #D0D5DD;   /* ✓ input borders, card borders */
+--color-neutral-gray-400: #98A2B3;   /* ✓ placeholder text, icons */
+--color-neutral-gray-500: #667085;   /* ✓ body text (secondary), metadata */
+--color-neutral-gray-600: #475467;   /* ✓ body text (primary), Neutral btn bg */
+--color-neutral-gray-700: #344054;   /* ✓ headings (secondary), Label text */
+--color-neutral-gray-800: #1D2939;   /* ✓ headings, emphatic text */
+--color-neutral-gray-900: #101828;   /* ✓ page titles, metric numbers, input value */
+```
+
+### Secondary · Error / Destructive ✓
+
+```css
+--color-secondary-error-25:  #FFFBFA;
+--color-secondary-error-50:  #FEF3F2;   /* error bg */
+--color-secondary-error-100: #FEE4E2;   /* error soft */
+--color-secondary-error-200: #FECDCA;
+--color-secondary-error-300: #FDA29B;   /* invalid input border */
+--color-secondary-error-400: #F97066;
+--color-secondary-error-500: #F04438;   /* status dot */
+--color-secondary-error-600: #D92D20;   /* Destructive base — btns, alerts */
+--color-secondary-error-700: #B42318;   /* hover */
+--color-secondary-error-800: #912018;
+--color-secondary-error-900: #7A271A;
+```
+
+### Secondary · Warning ✓
+
+```css
+--color-secondary-warning-25:  #FFFCF5;
+--color-secondary-warning-50:  #FFFAEB;
+--color-secondary-warning-100: #FEF0C7;
+--color-secondary-warning-200: #FEDF89;
+--color-secondary-warning-300: #FEC84B;
+--color-secondary-warning-400: #FDB022;
+--color-secondary-warning-500: #F79009;   /* status dot */
+--color-secondary-warning-600: #DC6803;   /* Warning base */
+--color-secondary-warning-700: #B54708;   /* hover */
+--color-secondary-warning-800: #93370D;
+--color-secondary-warning-900: #7A2E0E;
+```
+
+### Secondary · Success ✓
+
+```css
+--color-secondary-success-25:  #F6FEF9;
+--color-secondary-success-50:  #ECFDF3;
+--color-secondary-success-100: #D1FADF;
+--color-secondary-success-200: #A6F4C5;
+--color-secondary-success-300: #6CE9A6;
+--color-secondary-success-400: #32D583;
+--color-secondary-success-500: #12B76A;   /* status dot */
+--color-secondary-success-600: #039855;   /* Success base */
+--color-secondary-success-700: #027A48;   /* hover */
+--color-secondary-success-800: #05603A;
+--color-secondary-success-900: #054F31;
+```
+
+### Accent library (opt-in) ✓
+
+Full 25-900 scales exist for: `moss`, `green-light`, `green`, `teal`, `cyan`, `blue-light`, `blue`, `blue-dark`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`, `orange`, `orange-dark`, `yellow`. Use only when an accent chart / category / tag color is explicitly required. Never substitute for brand. Common 600 values:
+
+```css
+--color-accent-green-light-600: #4CA30D;
+--color-accent-green-600:       #099250;
+--color-accent-teal-600:        #0E9384;
+--color-accent-cyan-600:        #088AB2;
+--color-accent-blue-light-600:  #0086C9;
+--color-accent-blue-600:        #1570EF;   /* note: distinct from primary-blue-600 */
+--color-accent-indigo-600:      #444CE7;
+--color-accent-violet-600:      #7839EE;
+--color-accent-purple-600:      #6938EF;
+--color-accent-fuchsia-600:     #BA24D5;
+--color-accent-pink-600:        #DD2590;
+--color-accent-rose-600:        #E31B54;
+--color-accent-orange-600:      #E04F16;
+--color-accent-yellow-600:      #CA8504;
+```
+
+## Semantic Aliases
+
+```css
+/* Surfaces */
+--bg-page:          var(--color-neutral-white);
+--bg-surface:       var(--color-neutral-white);
+--bg-subtle:        var(--color-neutral-gray-50);     /* sidebar, table header */
+--bg-hover:         var(--color-neutral-gray-100);    /* row hover */
+--bg-selected:      var(--color-primary-blue-50);     /* selected row, active nav */
+
+/* Borders */
+--border-default:   var(--color-neutral-gray-300);
+--border-subtle:    var(--color-neutral-gray-200);
+--border-focus:     var(--color-primary-blue-800);
+
+/* Text */
+--text-primary:     var(--color-neutral-gray-900);
+--text-secondary:   var(--color-neutral-gray-700);    /* labels */
+--text-tertiary:    var(--color-neutral-gray-500);    /* helper, metadata */
+--text-placeholder: var(--color-neutral-gray-400);
+--text-accent:      var(--color-primary-blue-700);    /* links */
+--text-on-accent:   var(--color-neutral-white);
+
+/* Brand */
+--accent-base:      var(--color-primary-blue-600);
+--accent-hover:     var(--color-primary-blue-700);
+--accent-pressed:   var(--color-primary-blue-900);
+--accent-disabled:  var(--color-primary-blue-200);
+
+/* Status dots (6px circle + gray label — NEVER filled pills) */
+--status-success:   var(--color-secondary-success-500);
+--status-warning:   var(--color-secondary-warning-500);
+--status-error:     var(--color-secondary-error-500);
+```
+
+## Dark Mode ? (not yet exported from Figma)
+
+Derived defaults that respect the blue brand and meet WCAG AA:
+
+```css
+.dark {
+  --bg-page:          #0A0A0A;
+  --bg-surface:       #141414;
+  --bg-subtle:        #1A1A1A;
+  --bg-hover:         #1F1F22;
+  --bg-selected:      rgba(21, 94, 239, 0.14);   /* primary-blue-600 @ 14% */
+
+  --border-default:   #2A2A2E;
+  --border-subtle:    #222226;
+  --border-focus:     #84ADFF;                    /* primary-blue-300 */
+
+  --text-primary:     #FAFAFA;
+  --text-secondary:   #A1A1AA;
+  --text-tertiary:    #71717A;
+  --text-placeholder: #5A5A5F;
+  --text-accent:      #84ADFF;                    /* primary-blue-300 */
+  --text-on-accent:   #FFFFFF;
+
+  --accent-base:      #2970FF;                    /* primary-blue-500 */
+  --accent-hover:     #528BFF;                    /* primary-blue-400 */
+  --accent-pressed:   #155EEF;                    /* primary-blue-600 */
+  --accent-disabled:  #00359E;                    /* primary-blue-900 */
+}
+```
+
+Contrast: near-zero shadow opacity on dark; borders do the work.
+
+## Gradients ✓
+
+HighRise ships gradients only in gray and primary blue. Use sparingly — hero banners, marketing surfaces, empty-state illustrations. **Never** on buttons or form fields.
+
+```css
+/* Primary (brand) */
+--gradient-primary-600-500-90:   linear-gradient(90deg,   #155EEF 0%, #2970FF 100%);
+--gradient-primary-700-600-45:   linear-gradient(45deg,   #004EEB 0%, #155EEF 100%);
+--gradient-primary-800-600-45:   linear-gradient(45deg,   #0040C1 0%, #155EEF 100%);
+--gradient-primary-800-600-90:   linear-gradient(90deg,   #0040C1 0%, #155EEF 100%);
+--gradient-primary-800-700-26:   linear-gradient(26.5deg, #0040C1 0%, #004EEB 100%);
+--gradient-primary-900-600-45:   linear-gradient(45deg,   #00359E 0%, #155EEF 100%);
+
+/* Gray (neutral hero / illustration fill) */
+--gradient-gray-600-500-90:      linear-gradient(90deg,   #475467 0%, #667085 100%);
+--gradient-gray-700-600-45:      linear-gradient(45deg,   #344054 0%, #475467 100%);
+--gradient-gray-800-600-45:      linear-gradient(45deg,   #1D2939 0%, #475467 100%);
+--gradient-gray-800-600-90:      linear-gradient(90deg,   #1D2939 0%, #475467 100%);
+--gradient-gray-800-700-26:      linear-gradient(26.5deg, #1D2939 0%, #344054 100%);
+--gradient-gray-900-600-45:      linear-gradient(45deg,   #101828 0%, #475467 100%);
+```
+
+**Note:** Figma also contains 28 "Mesh gradients" for illustration / marketing surfaces. Treat those as image assets — don't try to recreate in CSS.
+
+## Typography — Inter ✓
+
+Font family: `Inter, -apple-system, BlinkMacSystemFont, sans-serif`.
+
+### Text scale (body, UI) ✓
+
+```css
+--font-size-4xs: 8px;   --font-line-height-4xs: 12px;
+--font-size-3xs: 9px;   --font-line-height-3xs: 14px;
+--font-size-2xs: 10px;  --font-line-height-2xs: 15px;
+--font-size-xs:  11px;  --font-line-height-xs:  16px;   /* Label xs, helper xs */
+--font-size-sm:  12px;  --font-line-height-sm:  17px;   /* smallest body, chips */
+--font-size-md:  13px;  --font-line-height-md:  18px;   /* Button label, Input value */
+--font-size-lg:  14px;  --font-line-height-lg:  20px;   /* Body default, Label md */
+--font-size-xl:  15px;  --font-line-height-xl:  20px;
+--font-size-2xl: 16px;  --font-line-height-2xl: 24px;   /* larger body emphasis */
+--font-size-3xl: 18px;  --font-line-height-3xl: 28px;   /* section headings */
+--font-size-4xl: 20px;  --font-line-height-4xl: 30px;   /* card titles */
+```
+
+### Display scale (page titles, hero) ✓
+
+| Token | Size × Line | Letter-spacing |
+|---|---|---|
+| `Display xs` | 24 / 32 | 0 |
+| `Display sm` | 30 / 38 | 0 |
+| `Display md` | 36 / 44 | -0.02em |
+| `Display lg` | 48 / 60 | -0.02em |
+| `Display xl` | 60 / 72 | -0.02em |
+| `Display 2xl` | 72 / 90 | -0.02em |
+
+Each display size ships in Regular / Medium / Semibold / Bold.
+
+### Weights ✓
+
+```css
+--font-weight-regular:  400;
+--font-weight-medium:   500;   /* Label default */
+--font-weight-semibold: 600;   /* Button label, headings */
+--font-weight-bold:     700;
+```
+
+### Letter spacing ✓
+
+```css
+--letter-spacing-normal: 0;          /* all text scale */
+--letter-spacing-tight:  -0.02em;    /* display md+ */
+```
+
+### Role mappings ✓
+
+```css
+/* Label (form labels, overline) — always Medium weight, uses gray-700 */
+.label-xs  { font: 500 11px/16px Inter; color: var(--text-secondary); }
+.label-sm  { font: 500 12px/17px Inter; color: var(--text-secondary); }
+.label-md  { font: 500 13px/18px Inter; color: var(--text-secondary); }
+.label-lg  { font: 500 14px/20px Inter; color: var(--text-secondary); }
+
+/* Input value (rendered text in field) — Regular, gray-900 */
+.input-xs  { font: 400 11px/16px Inter; color: var(--text-primary); }
+.input-sm  { font: 400 12px/17px Inter; color: var(--text-primary); }
+.input-md  { font: 400 13px/18px Inter; color: var(--text-primary); }
+.input-lg  { font: 400 14px/20px Inter; color: var(--text-primary); }
+
+/* Button label — Semibold */
+.text-button-sm { font: 600 12px/17px Inter; }
+.text-button-md { font: 600 13px/18px Inter; }
+.text-button-lg { font: 600 14px/20px Inter; }
+
+/* Body copy */
+.text-body-sm { font: 400 12px/17px Inter; color: var(--text-secondary); }
+.text-body-md { font: 400 13px/18px Inter; color: var(--text-secondary); }
+.text-body-lg { font: 400 14px/20px Inter; color: var(--text-secondary); }
+
+/* Headings (use Display scale for page titles, Text 3xl/4xl for sections) */
+.text-heading-section { font: 600 18px/28px Inter; color: var(--text-primary); }
+.text-heading-card    { font: 600 20px/30px Inter; color: var(--text-primary); }
+.text-heading-page    { font: 600 30px/38px Inter; letter-spacing: 0;        color: var(--text-primary); }
+.text-display-hero    { font: 600 48px/60px Inter; letter-spacing: -0.02em;  color: var(--text-primary); }
+```
+
+## Spacing ~ (derived from component observations)
+
+```css
+--space-0:  0;
+--space-1:  2px;
+--space-2:  4px;
+--space-3:  6px;    /* Label → input gap, helper text → icon gap */
+--space-4:  8px;    /* button icon gap, helper → helper */
+--space-5:  10px;   /* MD button vertical padding */
+--space-6:  12px;
+--space-7:  14px;
+--space-8:  16px;   /* MD button horizontal padding, input → helper */
+--space-10: 20px;
+--space-12: 24px;   /* card padding, grid gap */
+--space-16: 32px;   /* card padding large */
+--space-20: 40px;
+--space-24: 48px;   /* section gap */
+--space-32: 64px;
+```
+
+Content max-width `1200px` with generous side margins.
+
+## Border Radius ✓
+
+```css
+--radius-xs:   4px;    /* icon-only button */
+--radius-sm:   6px;    /* chips, tags */
+--radius-md:   8px;    /* MD button, input, select */
+--radius-lg:   12px;   /* cards */
+--radius-xl:   16px;   /* modals */
+--radius-2xl:  20px;
+--radius-full: 9999px; /* pills, avatars, toggle */
+```
+
+## Shadows ✓
+
+```css
+/* Verified from Figma "Shadow/xs" & "Shadow/lg" */
+--shadow-xs:  0 1px 2px 0 rgba(16, 24, 40, 0.05);
+--shadow-lg:  0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08);
+
+/* Derived interpolations */
+--shadow-sm:  0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
+--shadow-md:  0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
+
+/* Focus ring — 4px outer glow of primary-blue-100 + xs */
+--focus-ring: 0 0 0 4px var(--color-primary-blue-100), 0 1px 2px 0 rgba(16, 24, 40, 0.05);
+```
+
+## Component Anatomy ✓
+
+### Button
+- **Variants:** Primary / Secondary / Tertiary / Ghost / Link
+- **Themes:** Primary (blue) / Neutral (gray) / Destructive / Warning / Success
+- **States:** Default / Hover / Focused / Active / Disabled
+- **Sizes (height × radius):** 2XL 60px, XL 48px, LG 44px, MD 40px · `--radius-md`, SM 36px, XS 32px · `--radius-xs` (icon-only), 2XS 28px, 3XS 24px
+- **MD padding:** `10px 16px`, `8px` icon gap
+- **Label:** `.text-button-md` (600 13/18) for Primary/Secondary/Tertiary/Ghost, `.text-button-lg` (600 14/20) for Links
+
+### Input Field
+- **Height scale:** 24, 28, 32, 36, 40 (default), 44
+- **Radius:** `--radius-md` (8px), border 1px `--border-default`, `--shadow-xs` at rest
+- **Value:** `.input-md` (400 13/18, gray-900) default · also available xs/sm/lg (`.input-*`)
+- **Placeholder:** `--text-placeholder` (gray-400)
+- **Focus:** border `--border-focus` (primary-blue-800) + `--focus-ring`
+- **Label → Input gap:** `--space-3` (6px)
+- **Input → Helper gap:** `--space-3` (6px)
+- **Helper lines gap:** `--space-2` (4px), icon-to-text `--space-3` (6px)
+
+## Visual Restraint Rules (non-negotiable)
+
+- **One** brand accent (`--color-primary-blue-600` = `#155EEF`) — no rainbow
+- **Status indicators** = 6px colored dot + gray label, **NEVER** filled pills
+- **Cards** = white surface + 1px `--border-default` + no shadow at rest (hover can add `--shadow-sm`)
+- Near-zero shadow opacity — borders do the work
+- Section gaps ≥ 48px — content breathes
+- **No zebra-striped tables** — hover `--bg-subtle` + single bottom border
+- Sidebar = `--bg-subtle` or white, never dark or colored in light mode
+- Max 3 text sizes per section (title, body, caption)
+- Realistic data — real names, plausible numbers, recent dates; never Lorem Ipsum
+- Gradients reserved for hero / marketing / illustration surfaces — not buttons, not form fields
+
+## Responsive Breakpoints (mandatory)
+
+| Breakpoint | Width | Layout |
+|---|---|---|
+| Mobile  | 320–767px   | Single column, sidebar behind hamburger, stacked cards, tables scroll horizontally, touch targets ≥ 44×44 |
+| Tablet  | 768–1023px  | 2-column grid, collapsed sidebar (64px icons only) |
+| Desktop | 1024–1279px | Full layout, expanded sidebar |
+| Wide    | 1280px+     | Content max-width 1200px, centered |
+
+Body font ≥ 14px on mobile. Modal full-screen below 640px.
+
+## Provenance
+
+All values extracted from Figma file `BM196jNmVUfXBYDsyEVv8N` (HighRise), page **1. Tokens**, via Figma MCP `get_variable_defs` / `get_design_context`:
+
+- `1525:271581` (Colors) — full primary, neutral, secondary, and accent palettes
+- `1525:272676` (Gradients) — gray + primary gradient stops & angles
+- `1023:36826`  (Typography) — full 11-step Text scale + 6-step Display scale + weights + letter-spacing
+- `26951:17805` (Label) — Label Medium-weight variants (xs/sm/md/lg/2xl)
+- `27376:6411`  (Input text) — Input Regular-weight variants + placeholder / value colors
+- `28038:45100` (Gap) — label/input/helper spacing reference (6/8/4px pattern)
+
+To extend, open the file in Figma and run `get_variable_defs` on the target node. Dark-mode tokens are **not yet published** in this file; update when they land.

package/skills/aw-design/references/micro-interactions.md

@@ -0,0 +1,76 @@
+# Micro-interactions
+
+Static-looking designs feel unfinished. Every prototype must include these CSS-only interactions.
+
+## Transitions (global)
+
+```css
+* { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
+```
+
+## Buttons
+
+```
+:hover         → background shifts one shade darker, no shadow change
+:focus-visible → 4px primary-soft ring (#D1E0FF in light, rgba(132,173,255,0.2) in dark)
+:active        → transform: scale(0.97)
+transition: all 0.15s ease
+```
+
+## Cards / List rows
+
+```
+:hover → background: #f9fafb (or #1a1a1a in dark), 0.2s ease
+cursor: pointer if clickable
+```
+
+## Inputs
+
+```
+:focus-visible     → border #0040C1 + 4px #D1E0FF ring, 0.15s ease
+:invalid (on blur) → border #f04438 + inline error message fade-in 0.2s
+```
+
+## Sidebar nav
+
+```
+:hover  → background: #f9fafb, 0.15s
+Active  → #EFF4FF background + #155EEF text + 2px left border (slide-in on mount)
+```
+
+## Loading choreography
+
+```
+Skeleton shimmer: @keyframes pulse with background: linear-gradient(-90deg, #f2f4f7 0%, #e5e7eb 50%, #f2f4f7 100%), 1.5s infinite
+Skeleton-to-content crossfade: 0.3s ease when data arrives
+```
+
+## Toast notifications
+
+```
+Slide in from top-right: translateX(100%) → 0, 0.25s ease-out
+Auto-dismiss: fade out 0.2s after 4s
+```
+
+## Modal
+
+```
+Backdrop: opacity 0 → 0.4, 0.2s ease
+Dialog:   translateY(8px) scale(0.98) opacity 0 → translateY(0) scale(1) opacity 1, 0.2s ease-out
+Close:    reverse in 0.15s
+```
+
+## Page entrance (light touch)
+
+Stagger reveal of top-level sections: each gets `animation: fadeUp 0.3s ease-out backwards` with `animation-delay: calc(var(--i) * 50ms)`. Max 5 staggered items.
+
+## Accessibility fallback (mandatory)
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```

package/skills/aw-design/references/prompt-template.md

@@ -0,0 +1,160 @@
+# Screen Prompt Template
+
+Use this template verbatim for every screen, filling in the bracketed parts. Whether you send it to Stitch or implement it directly as HTML, the template is the same.
+
+## Base template
+
+```
+Design a [SCREEN TYPE] for a SaaS [PRODUCT TYPE] application.
+
+AESTHETIC: Clean, minimal, premium. Think Linear.app or Vercel dashboard.
+Generous whitespace. Let content breathe. Almost flat design.
+NO colored backgrounds on cards. NO heavy shadows. NO gradient fills.
+Monochrome-first — only use the accent color for primary CTAs and active states.
+
+COLORS (Highrise tokens):
+- Page background: #ffffff
+- Content cards: #ffffff with 1px border rgba(0,0,0,0.06)
+- Primary accent: #155EEF (HighRise brand blue — ONLY for primary buttons and active indicators)
+- Primary hover: #004EEB, pressed: #00359E, disabled bg: #B2CCFF, soft: #EFF4FF (selected rows, active nav bg)
+- Heading text: #101828
+- Body text: #344054
+- Secondary/muted text: #667085
+- Subtle backgrounds: #f9fafb (hover states, sidebar, table headers)
+- Dividers: #eaecf0 (use sparingly — prefer spacing over lines)
+- Status indicators: tiny 6px dots only (green #12B76A, amber #F79009, red #F04438)
+  paired with gray text labels. NEVER use colored pills or colored backgrounds.
+
+TYPOGRAPHY: Inter font family. Use HighRise's verified scale — every line-height is fixed.
+- Page title (Display sm): 30px / line-height 38px, semibold, letter-spacing 0
+- Hero / large display (Display md): 36px / 44px, semibold, letter-spacing -0.02em
+- Section headings: 18px / 28px or 20px / 30px, semibold
+- Body default (Text lg): 14px / 20px, regular, color #475467
+- Button label (Text md): 13px / 18px, semibold 600
+- Captions / metadata (Text sm): 12px / 17px, medium 500, color #667085
+- Helper / micro (Text xs): 11px / 16px, medium 500, color #667085
+- Metric numbers (Display sm / md): 30px / 38px or 36px / 44px, semibold, color #101828
+
+SPACING:
+- Section gaps: 48px
+- Card padding: 24-32px
+- Card grid gap: 24px
+- Content max-width: 1200px with generous side margins
+
+COMPONENTS:
+- Cards: 12px radius, 1px border (no shadow at rest), 24-32px padding
+- Buttons: 8px radius, 36-40px height, only primary gets color fill, scale(0.97) on active
+- Secondary buttons: ghost/outline style with gray border
+- Tables: clean rows, no zebra stripes, #f9fafb hover, 1px bottom border only
+- Metric cards: large number prominently, small gray label below, NO icon circles
+- Inputs: 8px radius, 1px #D0D5DD border, 40px height, 4px #D1E0FF focus ring + border #0040C1 on focus
+
+MICRO-INTERACTIONS (include CSS for all):
+- All interactive elements: transition 0.15s ease on bg, border, color, transform
+- Button hover: shade darker, focus-visible 4px primary ring, active scale(0.97)
+- Card/row hover: background #f9fafb 0.2s ease
+- Input focus: #0040C1 border + 4px #D1E0FF ring
+- Sidebar active: 2px left border slide-in
+- @media (prefers-reduced-motion: reduce) fallback to disable animations
+
+DARK MODE (mandatory): Toggle via .dark class on <html>. Use CSS custom properties.
+- Page bg: #0A0A0A, cards #141414, subtle bg #1A1A1A, borders #2A2A2E
+- Heading #FAFAFA, body #A1A1AA, secondary #71717A
+- Accent #2970FF (blue-500 lighter for dark contrast), hover #528BFF, pressed #155EEF
+- Focused border: #84ADFF, focus ring 4px rgba(132,173,255,0.2), near-zero shadow opacity
+
+RESPONSIVE (mandatory): The HTML must include working CSS media queries for all four breakpoints. Test by resizing — content must reflow, not just scale.
+
+- Mobile (max-width: 767px):
+  * Sidebar: hidden, replaced by a hamburger icon in the header that opens a full-height drawer
+  * Header: 56px tall, compact spacing
+  * Main grid: single column, cards stacked vertically with 16px gap
+  * Tables: wrap in overflow-x: auto so they scroll horizontally; OR collapse to card-per-row layout for primary tables
+  * Metric cards: 2-per-row (or 1-per-row if there are <=3)
+  * Modals: full-screen (100vw, 100vh, no rounded corners, no backdrop)
+  * Touch targets: minimum 44x44px
+  * Body text: minimum 14px
+  * Side padding: 16px
+
+- Tablet (min-width: 768px and max-width: 1023px):
+  * Sidebar: collapsed to 64px icon rail (tooltips on hover show labels)
+  * Main grid: 2 columns
+  * Metric cards: 2-per-row
+  * Modals: centered but max-width 90vw
+  * Side padding: 24px
+
+- Desktop (min-width: 1024px and max-width: 1279px):
+  * Sidebar: full 240px, expanded with labels
+  * Main grid: 3 columns (or whatever the design calls for)
+  * Metric cards: 3-4 per row
+  * Modals: max-width 560px, centered
+  * Side padding: 32px
+
+- Wide (min-width: 1280px):
+  * Content wrapper capped at max-width 1200px, centered with auto margins
+  * Side padding: 48px
+
+Use a mobile-first approach with min-width media queries. Do NOT use JavaScript for layout changes — pure CSS only.
+
+LAYOUT: [describe specific layout — sidebar width, header height, content areas, grid]
+
+DATA: Use realistic placeholder data (real names, plausible numbers, recent dates).
+
+NAVIGATION: This screen is part of a linked prototype. Include a left sidebar with navigation links.
+Each nav item must be an <a> tag with href pointing to sibling pages using relative paths.
+Sidebar nav items:
+[list nav items with relative href paths like ../dashboard/default.html]
+[current page] should have active state: #EFF4FF background, #155EEF text, 2px left border.
+Theme toggle button in top-right that flips .dark class and persists to localStorage.
+```
+
+## Layout hints by screen type
+
+**Dashboard:** Left sidebar 240px (#f9fafb), 64px header (white), metric cards row, then charts/tables.
+
+**List view:** Search bar + filter chips, action bar with bulk actions/sort/view toggle, data table, pagination.
+
+**Detail view:** Breadcrumb, header with name + status dot + actions, tab bar or side panels, activity timeline.
+
+**Form / Settings:** Section headers with descriptions, form groups with labels + inputs + help text, sticky save/cancel.
+
+**Modal:** Semi-transparent backdrop rgba(0,0,0,0.4), centered white card 16px radius 32px padding max-width 560px, header + body + footer with cancel/confirm.
+
+## State variant prompt additions
+
+Append one of these to the base template to generate a state variant:
+
+### Loading
+
+```
+Show LOADING state: replace text with skeleton shimmer rectangles (#f2f4f7, animated pulse).
+@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.5 } }. 1.5s infinite.
+Replace images with gray rectangles. Keep sidebar and header fully rendered.
+```
+
+### Empty
+
+```
+Show EMPTY state (zero data): centered illustration placeholder (gray circle with icon),
+heading "No [items] yet" 18px semibold #101828, description 14px #667085,
+primary CTA "Create your first [item]" #155EEF with hover (#004EEB) and active (#00359E) states.
+Keep sidebar and header rendered.
+```
+
+### Error
+
+```
+Show ERROR state: form inputs with red border #f04438 and error text 12px below (fade-in 0.2s),
+toast notification top-right (white card, red left border, slide-in from right 0.25s, dismiss X).
+Keep sidebar and header rendered.
+```
+
+### Modal
+
+```
+Show MODAL OVERLAY: backdrop rgba(0,0,0,0.4) fade-in 0.2s,
+centered white modal 16px radius 32px padding max-width 560px,
+dialog entrance: translateY(8px) scale(0.98) opacity 0 → translateY(0) scale(1) opacity 1, 0.2s ease-out,
+title + close X, [form/content], cancel ghost + confirm primary button.
+Background page visible but dimmed.
+```