@hegemonart/get-design-done 1.14.7 → 1.15.0

package/reference/brand-voice.md

@@ -0,0 +1,199 @@
+# Brand Voice
+
+<!-- Source: nextlevelbuilder/ui-ux-pro-max-skill (MIT) — data/products.csv, data/ui-reasoning.csv (industry-context section) -->
+
+Brand voice is not a single setting — it is a combination of independent axes, an archetype frame, and a sensitivity to context. Agents reading this file should treat the voice axes and archetype library as orthogonal dimensions: pick a position on each axis independently, then select an archetype to layer personality on top. Neither choice is derived from the other.
+
+---
+
+## Voice Axes
+
+Each axis is a spectrum between two poles. Moving toward one pole is not superior to moving toward the other — the correct position depends entirely on the product's audience, vertical, and context of use. Most products do not land at the extreme of any axis; they occupy a deliberate range within it.
+
+### Axis 1: Formal ↔ Casual
+
+**Formal pole:** Language is structured, precise, and impersonal. Sentences are grammatically complete. Contractions are avoided. Passive voice is acceptable when it de-emphasizes agency. Examples: "Submit your application for review." / "Your session has expired. Please authenticate to continue."
+
+**Casual pole:** Language is conversational, friendly, and direct. Contractions appear naturally. Second-person is preferred. Colloquialisms are acceptable when they do not confuse. Examples: "Send it over." / "You're in! Let's get started."
+
+**When to move toward Formal:** Finance, legal, healthcare, government, and enterprise compliance products benefit from formal language because it signals seriousness, reduces ambiguity in high-stakes decisions, and matches the institutional register users expect. A banking app that says "Send it over" for a wire transfer erodes trust.
+
+**When to move toward Casual:** Social apps, consumer lifestyle products, gaming, fitness trackers, and food-delivery apps benefit from casual language because it reduces friction, makes the product feel approachable, and builds an emotional connection. A meditation app that speaks like a compliance manual creates the wrong affective atmosphere.
+
+**Copy examples:**
+- Formal: "Enter your eight-digit verification code to proceed."
+- Casual: "Type the 8-digit code we just sent you."
+
+---
+
+### Axis 2: Serious ↔ Playful
+
+**Serious pole:** Tone is earnest and sober. Errors are acknowledged without irony. Humor is absent or very subdued. Stakes are treated as real. Example error message: "We were unable to process your payment. Please verify your card details and try again, or contact your bank."
+
+**Playful pole:** Tone uses wit, lightness, and occasionally emoji or metaphor to reduce tension and delight the user. Playfulness does not mean frivolous — it means the product enjoys its own existence. Example error message: "Something got tangled up on our end. Give it another go? 🙏"
+
+**When to move toward Serious:** Enterprise B2B, professional tools, medical platforms, legal services, and financial dashboards should maintain a serious register because users are performing consequential work and playful tone signals a mismatch in understanding stakes. An HR platform with whimsical error messages risks undermining managerial authority.
+
+**When to move toward Playful:** Lifestyle apps, kids' platforms, fitness and wellness products, food apps, and consumer gaming should embrace playfulness because the use context is low-stakes, habitual, or recreational. Playfulness here reduces abandonment and increases retention by making interaction inherently enjoyable.
+
+**Copy examples:**
+- Serious: "This action cannot be undone. All selected records will be permanently deleted."
+- Playful: "Heads up — once you delete this, it's gone for good. Still want to?"
+
+---
+
+### Axis 3: Expert ↔ Approachable
+
+**Expert pole:** Language assumes domain knowledge. Technical terms are used without definition. The product speaks as a peer to specialists. Precision is prioritized over accessibility. Example: "Configure your OAuth 2.0 PKCE flow with a 256-bit code verifier before initiating the authorization request."
+
+**Approachable pole:** Language explains concepts in plain English. Jargon is translated or avoided. The product speaks as a guide to non-specialists. Accessibility is prioritized over brevity. Example: "Connect your account securely — we use a modern login method that keeps your password private."
+
+**When to move toward Expert:** Developer tools, ML/data platforms, DevOps dashboards, security products, and medical or legal professional tools are used by specialists who are frustrated by over-explanation. Unnecessary simplification reads as condescension and slows expert users down.
+
+**When to move toward Approachable:** Consumer finance apps, health tracking for general audiences, first-time-user onboarding in any category, and civic technology should be maximally approachable because the audience includes users with wide variation in technical or domain literacy. Inaccessible language creates drop-off and confusion.
+
+**Copy examples:**
+- Expert: "Set `cache-control: no-store` on API responses to bypass the CDN edge layer."
+- Approachable: "Turn off caching here so your users always see the latest version."
+
+---
+
+### Axis 4: Reverent ↔ Irreverent
+
+**Reverent pole:** Language is deferential, careful, and tradition-respecting. It signals that the product understands gravity and heritage. Excess is avoided. Nothing is done with a wink. Example: "Crafted with care since 1897. Every detail considered."
+
+**Irreverent pole:** Language challenges conventions, uses unexpected angles, and does not take received wisdom at face value. It signals confidence and originality. It can be deliberately provocative. Example: "Most investment apps are built for banks. This one isn't."
+
+**When to move toward Reverent:** Luxury brands, heritage fashion houses, fine dining, premium hospitality, and cultural institutions benefit from reverent language because it honors the symbolic weight users attach to these products and does not puncture the aspirational experience they are purchasing.
+
+**When to move toward Irreverent:** Challenger brands, startup disruptors, creative tools, youth-oriented products, and any brand explicitly positioning against an incumbent benefit from irreverent language because it embodies the brand's core argument — that the old way is worth questioning. An anti-establishment fintech that writes like a bank forfeits its entire premise.
+
+**Copy examples:**
+- Reverent: "Each piece is hand-finished by our atelier in Lyon."
+- Irreverent: "Your bank charges you to hold your own money. We don't."
+
+---
+
+### Axis 5: Authoritative ↔ Collaborative
+
+**Authoritative pole:** The product speaks with confidence and direction. It tells users what to do. Instructions are commands, not suggestions. The relationship is expert-to-user. Example: "You must complete identity verification before withdrawing funds." / "Save your work before closing this window."
+
+**Collaborative pole:** The product speaks as a partner. It recommends and explains, framing choices as shared decisions. The relationship is peer-to-peer. Example: "We recommend verifying your identity now — it unlocks higher withdrawal limits." / "Just so you know — unsaved changes will be lost if you close."
+
+**When to move toward Authoritative:** Compliance interfaces, safety-critical systems, legal workflows, and any context where users must follow a specific procedure without deviation benefit from authoritative language because ambiguity creates errors and liability. A safety checklist that says "You might want to confirm the valve is closed" is a design defect.
+
+**When to move toward Collaborative:** Creative tools, community platforms, collaborative document editors, and any product built around co-creation or exploration benefit from collaborative language because it respects user agency, signals trust, and aligns with the product's core value proposition of shared work.
+
+**Copy examples:**
+- Authoritative: "Enter your password to confirm this irreversible action."
+- Collaborative: "One last check — confirm your password and we'll take it from there."
+
+---
+
+## Archetype Library
+
+Archetypes are personality frames, not voice axes. They describe the fundamental role the brand plays in its users' lives and the emotional contract it offers. Archetypes and voice axes are orthogonal: a Sage brand can be formal or casual, serious or playful. Select an archetype and then tune voice axes independently.
+
+### 1. The Sage
+The Sage earns trust by sharing knowledge. It positions the product as the most informed source in the room — not arrogant, but genuinely expert. The Sage communicates in a way that makes users feel more capable after each interaction, not dependent. In UI, this means rich documentation, contextual education woven into onboarding, and copy that explains the "why" rather than just the "what." Design skews toward clarity, precision, and minimalism — nothing competes with the information itself.
+
+### 2. The Hero
+The Hero is empowering and action-oriented. It frames the user as the agent of change and the product as the tool that makes the mission possible. CTAs are verbs: "Start building," "Launch your campaign," "Deploy now." The Hero archetype works best when users have a clear goal and the product gives them velocity toward it. Design is bold, directional, and high-contrast — it communicates momentum.
+
+### 3. The Creator
+The Creator prioritizes imagination and aesthetic experience. The product itself is a canvas, and the copy celebrates what users will make rather than what the product can do. Language is evocative rather than functional. Onboarding feels like an invitation rather than a tutorial. Design is aesthetic-forward — typography, whitespace, and visual rhythm are treated as expressive elements, not just layout tools.
+
+### 4. The Caregiver
+The Caregiver is empathetic, supportive, and gentle under pressure. It anticipates user anxiety and responds with reassurance. Error messages do not blame; they comfort and guide. Onboarding is patient. The Caregiver archetype is essential for health apps, mental wellness platforms, parenting tools, and any product used during vulnerable moments. Design is warm, rounded, and low-stimulus — nothing startles or overwhelms.
+
+### 5. The Ruler
+The Ruler is premium, commanding, and authority-signaling. It does not explain itself — it presents. Copy is declarative and sparse. The Ruler archetype justifies premium pricing through an experience that communicates exclusivity and mastery. This archetype works for luxury goods, high-end B2B platforms, and any product where status is part of the value. Design is restrained, high-contrast, and architectural — every element signals control.
+
+### 6. The Jester
+The Jester uses humor to disarm and delight. It understands that joy is a retention mechanism and that laughter creates loyalty. The Jester does not take itself seriously and invites users to share that lightness. This archetype works for consumer products in low-stakes categories, social tools, and brands that have earned enough trust to be self-deprecating. Design uses surprise, playful motion, and unexpected visual moments — but always purposefully, never randomly.
+
+### 7. The Innocent
+The Innocent is clean, optimistic, and simple. It communicates that the world is basically good and that this product exists to make it a little better. Copy is honest, unpretentious, and free of manipulation. The Innocent archetype is right for health food brands, sustainable products, children's tools, and any product positioning around purity or honesty. Design is bright, open, and generous with whitespace — nothing hidden, nothing complex.
+
+### 8. The Explorer
+The Explorer is discovery-forward and adventurous. It communicates that the world is full of things worth finding and that this product is the best vehicle for that journey. Copy uses open-ended language: "See what's possible," "Go further," "Find your path." The Explorer archetype fits travel apps, outdoor brands, learning platforms, and curiosity-driven tools. Design uses movement, depth, and environmental imagery to evoke possibility.
+
+### 9. The Rebel
+The Rebel challenges assumptions and frames the incumbent as the problem. It uses anti-establishment language deliberately, not carelessly. The Rebel is not angry — it is confident in its alternative. Copy names what it rejects: "Not your usual bank," "Skip the middleman," "Design without the gatekeepers." The Rebel archetype is right for challenger brands, disruptive startups, and any product that exists because the existing solution is broken. Design is unconventional — asymmetric, raw, or deliberately anti-polished to signal that the rules have changed.
+
+### 10. The Lover
+The Lover creates intimacy and sensory connection. Copy is warm, personal, and physically evocative. The Lover archetype is less about romance than about deep emotional resonance — the product feels like it was made for you specifically. This archetype fits beauty brands, food and beverage, hospitality, and any product where sensory experience is central. Design is rich, textural, and emotionally warm — photography over illustration, warmth over coolness.
+
+### 11. The Everyman
+The Everyman is relatable, unpretentious, and radically inclusive. It signals that this product is for everyone, not for a tribe or an aspirational identity. Copy avoids jargon, insider language, and exclusivity markers. The Everyman archetype is right for utility apps, mass-market consumer tools, and any product that succeeds by broad adoption rather than niche loyalty. Design is familiar and accessible — conventional enough to feel immediately understandable to any user.
+
+### 12. The Magician
+The Magician is transformation-focused. It frames the product as the mechanism by which users go from a lesser to a greater state. Copy uses before/after framing: "What used to take days takes minutes," "You used to guess. Now you know." The Magician archetype fits productivity tools, AI platforms, and any product whose core promise is that the user will be meaningfully different after using it. Design uses contrast — before states feel constrained, after states feel open and capable.
+
+---
+
+### Design-Oriented Archetype Variants
+
+Beyond the 12 canonical archetypes, products can adopt a design-register variant that shapes visual and typographic expression independently of archetype:
+
+**Brutalist:** Raw, unpolished, deliberately anti-refined. Grid-breaking, heavy type, exposed structure. Signals authenticity and rejection of commercial smoothness.
+
+**Editorial:** Typography-forward, content-as-design. White space is generous; hierarchy is entirely typographic. Signals intelligence, taste, and editorial authority.
+
+**Technical:** Precision over elegance. Monospace type, dense data grids, minimal decoration. Signals accuracy, depth, and professional competence.
+
+**Romantic:** Warmth, craft, and human touch. Texture, handmade-feeling elements, warm typography. Signals care, artisanship, and emotional presence.
+
+**Utilitarian:** Efficiency over expression. Maximum information density, minimal visual ornament. Signals that function is the point and nothing is wasted.
+
+**Experimental:** Pushes form conventions deliberately. Unusual composition, unexpected animation, non-standard grid. Signals originality and a willingness to challenge assumption.
+
+---
+
+## Tone-by-Context Table
+
+Tone is not fixed — even a consistent brand voice shifts register depending on the situation the user is in. A Jester brand should not make jokes in an error message that signals data loss. This table maps UI contexts to appropriate tone adjustments.
+
+| Context | Recommended Tone | Example Copy |
+|---------|-----------------|--------------|
+| Error message | Calm, clear, helpful — never humorous for data loss or high-stakes failure | "We couldn't save your changes. Check your connection and try again." |
+| Empty state | Warm, forward-looking, actionable — explains why empty and what to do | "Nothing here yet. Add your first project to get started." |
+| Success / celebration | Positive, proportionate to stakes — brief and genuine, not excessive | "All done! Your report is ready." / "🎉 You're all set!" (casual products only) |
+| Onboarding | Welcoming, encouraging, brief — does not front-load complexity | "Let's set up your workspace. It only takes a minute." |
+| Loading state | Reassuring, informative — signals progress without being annoying | "Getting your data…" / "Almost there." |
+| Destructive action confirmation | Serious, precise, no hedging — names what will be destroyed | "Delete project 'Alpha'? This cannot be undone." |
+| Pricing page | Honest, benefit-led, no dark patterns — copy earns the price | "Everything in Pro, plus unlimited seats and priority support." |
+| Marketing headline | Archetype-forward, emotionally resonant — captures brand promise | Varies by archetype (Hero: "Ship faster." / Creator: "Make something beautiful.") |
+
+---
+
+## Industry Context
+
+<!-- Source: nextlevelbuilder/ui-ux-pro-max-skill (MIT) — data/products.csv, data/ui-reasoning.csv -->
+
+**Important:** Voice axis positions and industry context are orthogonal dimensions. Industry context provides defaults and constraints; voice axis positions are still chosen deliberately within those constraints. A FinTech product can be formal but approachable, or formal and expert — industry context does not collapse those choices, it narrows the range.
+
+---
+
+| Vertical | Voice Axis Defaults | Color Mood | Typography Mood | Key Effects | Anti-Patterns |
+|----------|-------------------|------------|-----------------|-------------|---------------|
+| **FinTech / Banking** | Formal → Serious → Expert → Authoritative; trust must be earned through consistency | Deep navy, forest green, cool greys — signals stability and security | Clean sans-serif (Inter, DM Sans), generous line-height for readability at numeric density | Microanimations on transaction confirmation; subtle loading states; no celebration for transfers | Casual tone on high-stakes actions; bright consumer palettes; playful error messages; flashy transitions on money movement |
+| **HealthTech / Medical** | Formal → Serious → Approachable → Collaborative; clarity reduces anxiety | Soft teal, warm white, calm blues — avoids red except for genuine danger signals | Clean, large, high-contrast; body text ≥16px mandatory for compliance and accessibility | Gentle loading indicators; animated check states for completed steps; no jarring motion | Dense data without explanation; dark mode with pure black; small body text; red used decoratively |
+| **SaaS / B2B** | Formal–Casual range → Serious → Expert → Authoritative–Collaborative range | Neutral greys, controlled accent (brand blue/green), white space dominant | Clean sans-serif, systematic type scale; headings earn visual weight | Skeleton loading for data tables; progressive disclosure for settings; tooltips for technical fields | Over-explaining basics to expert users; inconsistent terminology across modules; AI-slop purple palette |
+| **E-commerce / DTC** | Casual → Playful–Serious range → Approachable → Collaborative | Brand-driven palette; high saturation for CTAs; warm neutrals for product context | Expressive display for headlines; clean body for product descriptions | Product zoom hover states; cart animation on add; wishlist micro-interaction | Fake urgency copy; cluttered hierarchy; hidden total cost until checkout; tiny CTA on mobile |
+| **Gaming / Entertainment** | Casual → Playful → Approachable–Expert range → Irreverent | High saturation, dark mode dominant, neon accent on dark surface | Display/gaming typefaces for headers; clean body for UI; weight contrast is high | Motion-heavy transitions; achievement celebrations; ambient background animation | Accessibility blindspots in dark mode; pure black backgrounds (vibration); low contrast on energetic backgrounds |
+| **Social / Community** | Casual → Playful → Approachable → Collaborative | Warm neutrals, brand accent, avatar-forward UI with minimal chrome | Friendly rounded sans-serif; generous spacing; conversational scale | Reaction microanimations; real-time presence indicators; celebratory confetti for milestones | Cold enterprise-grade color in social context; heavy typography hierarchy that buries user content |
+| **Dev Tools** | Casual–Formal range → Serious → Expert → Authoritative | Dark mode default; syntax-highlight palette; cool greys; code-emphasis contrast | Monospace for code; sans-serif for prose; no decorative type | Fast, no-flash loading states; inline error syntax highlighting; keyboard shortcut visibility | Explaining basics to experts; hiding power features; light-mode-only; inconsistent CLI↔UI vocabulary |
+| **EdTech** | Casual → Playful–Serious range → Approachable → Collaborative | Warm, bright, optimistic — not childish; academic versions use cooler tone | Friendly rounded sans; large body text; generous spacing for reading context | Progress animations; streak celebration; gentle nudges for return | Overwhelming choice on first launch; punitive error framing; tests without explanation of why wrong |
+| **Legal / Compliance** | Formal → Serious → Expert → Authoritative | Navy, charcoal, neutral greys — no decorative color | Readable serif or clean sans; no display type for primary content | None beyond loading states; no celebratory states — outcomes have real weight | Casual tone on contract actions; hiding consequences; playful UI that signals legal work is trivial |
+| **HR / People Ops** | Formal–Casual range → Serious → Approachable → Collaborative | Warm professional: muted teal, earth tones, warm greys | Clean sans-serif; expressive enough to feel human, not cold | Subtle check animations for onboarding; gentle feedback on form completion | Clinical coldness in employee-facing UI; hiding personal data implications; confusing benefit summaries |
+| **Real Estate** | Formal → Serious → Approachable → Authoritative | Warm greys, earth tones, occasional brand accent; photography-dominant | Clean serif or premium sans; photography does the expressive work | Map interaction states; mortgage calculator animations; image gallery transitions | Overwhelming data without hierarchy; hiding total cost; small map interaction targets on mobile |
+| **Travel / Hospitality** | Casual → Playful–Serious range → Approachable → Collaborative | Destination-driven: warm ambers, ocean blues, lush greens | Expressive display for destination content; clean sans for booking flows | Immersive imagery transitions; booking confirmation celebration; ambient destination video | Hiding fees until final step; tiny date pickers; inconsistent voice between inspiration and transactional flows |
+| **Food / Delivery** | Casual → Playful → Approachable → Collaborative | Warm appetizing tones: terracotta, golden yellow, deep greens | Rounded, friendly sans-serif; photography-heavy | Order status animation; delivery tracking real-time; add-to-cart micro-interaction | Cold clinical tone; hiding delivery costs; overwhelming menu density; slow loading states for item images |
+| **Fitness / Wellness** | Casual → Serious–Playful range → Approachable → Collaborative | High energy (fitness): deep navy + neon; Wellness: warm cream, sage, earth | Strong weight contrast for motivational moments; clean body for routine content | Workout completion celebration; streak animation; activity ring fill | Shaming language for missed goals; pure black dark mode; excessive notifications; gamification without consent |
+| **Non-profit / NGO** | Casual–Formal range → Serious → Approachable → Collaborative | Mission-driven: warm humanist tones, photography-led, restrained accent | Readable, accessible, warm — never cold or corporate | Impact counter animations; donation confirmation warmth; progress-toward-goal bars | Guilt-manipulation copy; inaccessible donation flows; slow load on donation pages; hiding overhead costs |
+| **Government / Civic** | Formal → Serious → Approachable → Authoritative | Institutional: navy, red, white variants — national palette conventions | Highly readable sans-serif; no display type; large body text mandatory | Progress bars for multi-step processes; no celebration for government services | Jargon without explanation; inaccessible forms; mobile-hostile layouts; hiding deadlines |
+| **Luxury / Fashion** | Formal → Serious → Expert → Reverent | Black, white, gold, nude — restraint signals luxury | Editorial serif or geometric sans; generous whitespace; typography is the aesthetic | Elegant fade transitions; product reveal on scroll; no click-bait motion | Playful copy that undercuts premium positioning; cluttered layout; urgent sale language; AI-slop palette |
+| **Media / Publishing** | Casual–Formal range → Serious → Approachable–Expert range → Authoritative | Publication-specific; reading UX emphasizes contrast and typography | Reading-optimized: long-form line length (60–75ch), generous line-height (1.7+) | Scroll-progress indicators; reading time estimates; article-end engagement | Distraction ads interrupting reading flow; tiny body text; low contrast for long-form content |
+| **Analytics / BI** | Formal → Serious → Expert → Authoritative | Data-focused: high contrast, neutral chrome, vivid but accessible chart palette | Dense but readable sans-serif; monospace for data values; strong heading hierarchy | Interactive chart hover states; filter animation; export confirmation | Color-blind-unsafe chart palettes; pure decoration in data visualizations; hiding data provenance |
+| **AI / ML Platform** | Casual–Formal range → Serious → Expert → Authoritative–Collaborative range | Dark mode default with vibrant accent; cool-to-neutral chrome | Clean monospace for code and prompts; sans-serif for prose; strong weight contrast | Streaming text animation; generation loading state; token cost micro-display | Anthropomorphizing in ways that mislead; hiding capability limits; magical framing that hides user responsibility |

package/reference/checklists.md

@@ -13,7 +13,7 @@ Use this before any design artifact goes to the user or into a PR.
 - [ ] Cited references in output so user can redirect
 
 ### Context check
-- [ ] `.impeccable.md` exists at project root
+- [ ] `DESIGN-CONTEXT.md` (or `DESIGN.md`) exists at project root with direction stated
 - [ ] `DESIGN.md` exists at project root
 - [ ] Design direction explicitly stated (brutalist / editorial / …)
 - [ ] User approved direction before Phase 3
@@ -66,7 +66,7 @@ Use this before any design artifact goes to the user or into a PR.
 ### Technical check (code artifacts)
 - [ ] Browser: running in preview; no console errors
 - [ ] Dev server responds with HTTP 200 on expected routes
-- [ ] Mobile viewport tested (or `impeccable-adapt` run)
+- [ ] Mobile viewport tested (320px, 375px, 390px, 428px breakpoints)
 - [ ] Tap delay removed (`touch-action: manipulation`)
 - [ ] Images use WebP/AVIF + `srcset` + lazy-loading where appropriate
 
@@ -83,7 +83,7 @@ Use this before any design artifact goes to the user or into a PR.
 When the change is a single-screen tweak, use this shortened list:
 
 - [ ] Pulled 1–2 references before touching code
-- [ ] Change respects `.impeccable.md` direction (didn't sneak in a different tone)
+- [ ] Change respects stated brand direction from `DESIGN-CONTEXT.md` (no tone drift)
 - [ ] Interactive element has all 8 states
 - [ ] No item on the absolute-ban list (anti-patterns.md)
 - [ ] Contrast AA
@@ -135,3 +135,30 @@ For flagship work:
 8. **Reduced motion test.** Enable it at OS level. Functional animations preserved, spatial ones killed?
 9. **Mobile test.** Real device or Chrome DevTools mobile emulation. Touch targets? Safe areas? Viewport zoom allowed?
 10. **The AI-slop self-check** (see anti-patterns.md). Honest answer: would someone believe this was AI-generated? If yes, which elements? Fix those.
+
+---
+
+## Micro-Polish Check
+Source: jakubkrehel/make-interfaces-feel-better (MIT)
+
+Use this checklist after the main design review for pixel-level craft verification:
+
+### Typography micro
+- [ ] Headings use `text-wrap: balance`
+- [ ] Body/caption uses `text-wrap: pretty` (or no wrap setting — not `balance`)
+- [ ] Font smoothing applied at `:root` only, not per-element
+- [ ] Dynamic numbers (counters, prices, timers) use `font-variant-numeric: tabular-nums`
+
+### Surfaces
+- [ ] Nested elements use concentric radius (`innerRadius = outerRadius − padding`)
+- [ ] No same-radius parent+child within padded container (see BAN-10 same-radius-nested)
+- [ ] Images have `outline: 1px solid rgba(0,0,0,0.08)` — no tinted outlines
+- [ ] Interactive elements <40px have `::after` hit-area extension to 40×40
+
+### Motion
+- [ ] Press feedback uses `scale(0.96)` — not 0.95, not 0.97, not 0.98
+- [ ] `AnimatePresence` on persistent UI has `initial={false}`
+- [ ] Icon cross-fade spring has `bounce: 0`
+- [ ] No `transition: all` anywhere (see BAN-12 transition-all)
+- [ ] No `will-change: all` anywhere (see BAN-13 will-change-all)
+- [ ] `prefers-reduced-motion` respected via `MotionConfig` or `useReducedMotion()`

package/reference/data/google-fonts.csv

@@ -0,0 +1,51 @@
+family,category,variants,popularity_rank,best_for,pairing_suggestion
+Inter,sans-serif,"100 200 300 400 500 600 700 800 900",1,UI interfaces,JetBrains Mono
+Roboto,sans-serif,"100 300 400 500 700 900",2,Android apps,Roboto Mono
+Open Sans,sans-serif,"300 400 500 600 700 800",3,Content sites,Source Code Pro
+Lato,sans-serif,"100 300 400 700 900",4,Corporate,Inconsolata
+Montserrat,sans-serif,"100 200 300 400 500 600 700 800 900",5,Headers/Fashion,Raleway
+Poppins,sans-serif,"100 200 300 400 500 600 700 800 900",6,Modern UI,Space Mono
+Nunito,sans-serif,"200 300 400 500 600 700 800 900",7,Friendly apps,Nunito Sans
+Raleway,sans-serif,"100 200 300 400 500 600 700 800 900",8,Luxury/Editorial,Lato
+Oswald,sans-serif,"200 300 400 500 600 700",9,Impact headlines,Source Sans 3
+Source Sans 3,sans-serif,"200 300 400 500 600 700 900",10,Content/Enterprise,Source Serif 4
+Playfair Display,serif,"400 500 600 700 800 900",11,Editorial headers,Source Sans 3
+Merriweather,serif,"300 400 700 900",12,Long-form reading,Open Sans
+PT Sans,sans-serif,"400 700",13,CIS region apps,PT Serif
+Ubuntu,sans-serif,"300 400 500 700",14,Linux/tech apps,Ubuntu Mono
+Noto Sans,sans-serif,"100 200 300 400 500 600 700 800 900",15,Multilingual,Noto Serif
+Work Sans,sans-serif,"100 200 300 400 500 600 700 800 900",16,Modern websites,Space Mono
+Quicksand,sans-serif,"300 400 500 600 700",17,Playful/Wellness,Nunito
+Mulish,sans-serif,"200 300 400 500 600 700 800 900",18,Clean UI,Courier Prime
+DM Sans,sans-serif,"100 200 300 400 500 600 700 800 900",19,Tech/Modern,DM Mono
+DM Serif Display,serif,"400",20,Display headers,DM Sans
+IBM Plex Sans,sans-serif,"100 200 300 400 500 600 700",21,Enterprise/IBM,IBM Plex Mono
+IBM Plex Mono,monospace,"100 200 300 400 500 600 700",22,Code/Tech,IBM Plex Sans
+JetBrains Mono,monospace,"100 200 300 400 500 600 700 800",23,Developer tools,Inter
+Fira Code,monospace,"300 400 500 600 700",24,Developer tools,Fira Sans
+Space Mono,monospace,"400 700",25,Retro/Tech,Space Grotesk
+Space Grotesk,sans-serif,"300 400 500 600 700",26,Modern tech,Space Mono
+Plus Jakarta Sans,sans-serif,"200 300 400 500 600 700 800",27,Consumer apps,Syne
+Syne,sans-serif,"400 500 600 700 800",28,Creative headers,DM Sans
+Cabinet Grotesk,sans-serif,"100 200 300 400 500 600 700 800 900",29,Consumer branding,Satoshi
+Geist,sans-serif,"100 200 300 400 500 600 700 800 900",30,Vercel ecosystem,Geist Mono
+Geist Mono,monospace,"100 200 300 400 500 600 700 800 900",31,Code display,Geist
+Outfit,sans-serif,"100 200 300 400 500 600 700 800 900",32,Friendly SaaS,DM Mono
+Cormorant Garamond,serif,"300 400 500 600 700",33,Luxury editorial,Proza Libre
+EB Garamond,serif,"400 500 600 700 800",34,Classical print,Lato
+Libre Baskerville,serif,"400 700",35,Classic editorial,Libre Franklin
+Libre Franklin,sans-serif,"100 200 300 400 500 600 700 800 900",36,Editorial body,Libre Baskerville
+Crimson Pro,serif,"200 300 400 500 600 700 800 900",37,Long-form reading,Raleway
+Lora,serif,"400 500 600 700",38,Blog/editorial,Source Sans 3
+Bodoni Moda,serif,"400 500 600 700 800 900",39,Fashion/luxury,Jost
+Jost,sans-serif,"100 200 300 400 500 600 700 800 900",40,Modern sans,Bodoni Moda
+Exo 2,sans-serif,"100 200 300 400 500 600 700 800 900",41,Futuristic/Gaming,Roboto
+Bebas Neue,sans-serif,"400",42,Impact display,Open Sans
+Anton,sans-serif,"400",43,Bold headlines,Open Sans
+Archivo,sans-serif,"100 200 300 400 500 600 700 800 900",44,Neutral content,Archivo Black
+Cabin,sans-serif,"400 500 600 700",45,Humanist UI,Cabin Condensed
+Rubik,sans-serif,"300 400 500 600 700 800 900",46,Rounded UI,Fira Code
+Barlow,sans-serif,"100 200 300 400 500 600 700 800 900",47,Wide screens,Barlow Condensed
+Hind,sans-serif,"300 400 500 600 700",48,Devanagari+Latin,Roboto
+Manrope,sans-serif,"200 300 400 500 600 700 800",49,Modern rounded,JetBrains Mono
+Noto Serif,serif,"100 200 300 400 500 600 700 800 900",50,Multilingual body,Noto Sans

package/reference/data/palettes.csv

@@ -0,0 +1,41 @@
+Vertical,Primary,On-Primary,Secondary,On-Secondary,Accent,Background,Foreground,Card,Muted,Border,Destructive,Notes
+FinTech/Banking,#1A56DB,#FFFFFF,#0E9F6E,#FFFFFF,#F05252,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#E5E7EB,#E02424,Authoritative navy-blue signals trust; green secondary for positive states; red destructive for transfers/deletions. WCAG verified.
+Healthcare/Medical,#0E9F6E,#FFFFFF,#1A56DB,#FFFFFF,#FF8A4C,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#E5E7EB,#E02424,Clinical green primary communicates health and safety; blue secondary for informational states; amber accent for caution alerts. WCAG verified.
+SaaS/B2B Tools,#6875F5,#FFFFFF,#0E9F6E,#FFFFFF,#F05252,#FFFFFF,#111928,#F9FAFB,#F3F4F6,#E5E7EB,#E02424,Periwinkle-purple primary is the contemporary B2B SaaS signal; green secondary for success states; cards slightly off-white for depth. WCAG verified.
+E-commerce/Retail,#D97706,#FFFFFF,#1A56DB,#FFFFFF,#E02424,#FFFFFF,#111928,#F9FAFB,#FEF3C7,#E5E7EB,#DC2626,Amber primary drives purchase urgency; blue secondary for trust (payments); warm-yellow muted for promotional surfaces. WCAG verified.
+Gaming/Entertainment,#7E3AF2,#FFFFFF,#FF8A4C,#111928,#F05252,#111928,#F9FAFB,#1F2937,#374151,#4B5563,#EF4444,Deep violet on dark; amber accent for XP/reward moments; dark card creates depth. Light on dark meets 4.5:1. WCAG verified.
+Social/Community,#3F83F8,#FFFFFF,#0E9F6E,#FFFFFF,#F05252,#FFFFFF,#111928,#F9FAFB,#EFF6FF,#E5E7EB,#DC2626,Friendly blue; green for connection/online states; sky-tinted muted for feed separation. WCAG verified.
+Developer Tools,#0F172A,#F8FAFC,#6875F5,#FFFFFF,#22D3EE,#F8FAFC,#0F172A,#FFFFFF,#F1F5F9,#CBD5E1,#EF4444,Near-black on white for precision; purple secondary for interactive elements; cyan accent for syntax-highlight pops. WCAG verified.
+EdTech/Learning,#FF8A4C,#FFFFFF,#6875F5,#FFFFFF,#0E9F6E,#FFFBEB,#111928,#FFFFFF,#FEF3C7,#FDE68A,#DC2626,Warm amber primary energizes motivation; violet secondary for quiz elements; warm background avoids clinical white. WCAG verified.
+Legal/Compliance,#1E3A5F,#FFFFFF,#374151,#FFFFFF,#B45309,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#D1D5DB,#DC2626,Deep navy signals authority and precision; slate secondary for neutral chrome; amber for deadlines. WCAG verified.
+HR/People Ops,#7E3AF2,#FFFFFF,#FF8A4C,#FFFFFF,#0E9F6E,#FAF5FF,#111928,#FFFFFF,#F3F4F6,#E9D5FF,#DC2626,Violet balances authority and empathy; amber secondary for recognition; lavender muted for soft separation. WCAG verified.
+Real Estate/Property,#065F46,#FFFFFF,#1A56DB,#FFFFFF,#B45309,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#E5E7EB,#DC2626,Deep forest green signals land and stability; blue secondary for financing; amber for premium listings. WCAG verified.
+Travel/Hospitality,#1A56DB,#FFFFFF,#0E9F6E,#FFFFFF,#FF8A4C,#EFF6FF,#111928,#FFFFFF,#DBEAFE,#BFDBFE,#DC2626,Sky blue evokes open skies; green for confirmed bookings; amber for discovery warmth; sky-tinted muted distinctive. WCAG verified.
+Food/Delivery,#D97706,#FFFFFF,#E02424,#FFFFFF,#0E9F6E,#FFFBEB,#111928,#FFFFFF,#FEF3C7,#FDE68A,#B91C1C,Amber stimulates appetite and speed; red secondary for urgency; warm background mirrors food photography. WCAG verified.
+Fitness/Wellness,#047857,#FFFFFF,#1A56DB,#FFFFFF,#F05252,#F0FDF4,#111928,#FFFFFF,#DCFCE7,#BBF7D0,#DC2626,Saturated green signals vitality; blue secondary for calm recovery; red for max-effort moments; green-tinted background. WCAG verified.
+Non-profit/NGO,#065F46,#FFFFFF,#D97706,#111928,#1A56DB,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#E5E7EB,#DC2626,Deep green signals mission; amber secondary for warmth; blue accent for impact data reporting. WCAG verified.
+Government/Civic,#1E3A5F,#FFFFFF,#374151,#FFFFFF,#D97706,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#D1D5DB,#DC2626,Deep navy is the global government convention (GOV.UK/USWDS); slate for dense information; amber for notices. WCAG verified.
+Luxury/Fashion,#111928,#F9FAFB,#374151,#F9FAFB,#B45309,#FFFFFF,#111928,#F9FAFB,#F9FAFB,#E5E7EB,#DC2626,Near-black on white is the international luxury language; gold-amber accent for price points. WCAG verified.
+Media/Publishing,#111928,#F9FAFB,#E02424,#FFFFFF,#D97706,#FFFFFF,#111928,#F9FAFB,#F3F4F6,#E5E7EB,#B91C1C,Near-black mirrors newspaper conventions; red secondary for breaking news and editorial accents. WCAG verified.
+Analytics/BI,#1A56DB,#FFFFFF,#0E9F6E,#FFFFFF,#FF8A4C,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#E5E7EB,#DC2626,Blue primary anchors sequential chart palettes; green for positive delta; amber for cautionary thresholds. WCAG verified.
+AI/ML Platform,#4F46E5,#FFFFFF,#7E3AF2,#FFFFFF,#22D3EE,#0F172A,#F8FAFC,#1E293B,#334155,#475569,#EF4444,Indigo on dark — the established AI product visual language; violet secondary; cyan for streaming states. WCAG verified.
+Cybersecurity,#1E3A5F,#FFFFFF,#0E9F6E,#FFFFFF,#22D3EE,#0A0A0A,#F8FAFC,#111827,#1F2937,#374151,#EF4444,Deep navy on near-black for monitoring environment; green for all-clear; cyan for network visualization. WCAG verified.
+Logistics/Supply Chain,#D97706,#111928,#1A56DB,#FFFFFF,#0E9F6E,#FFFBEB,#111928,#FFFFFF,#FEF3C7,#FDE68A,#DC2626,Amber mirrors high-vis safety conventions; blue secondary for digital tracking; warm background differentiates. WCAG verified.
+Insurance,#1E3A5F,#FFFFFF,#0E9F6E,#FFFFFF,#D97706,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#D1D5DB,#DC2626,Navy signals protection and reliability; green for claims approved; amber for upcoming renewals. WCAG verified.
+Automotive,#111928,#F9FAFB,#374151,#F9FAFB,#E02424,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#D1D5DB,#B91C1C,Near-black matches premium automotive convention; red accent for performance/sport; silver-gray for chrome surfaces. WCAG verified.
+Agriculture/AgriTech,#065F46,#FFFFFF,#D97706,#111928,#1A56DB,#F0FDF4,#111928,#FFFFFF,#DCFCE7,#A7F3D0,#DC2626,Deep green is literal and honest; amber secondary for harvest richness; blue for water management data. WCAG verified.
+CleanTech/Sustainability,#047857,#FFFFFF,#1A56DB,#FFFFFF,#D97706,#F0FDF4,#111928,#FFFFFF,#DCFCE7,#BBF7D0,#DC2626,Rich emerald signals genuine environmental commitment; blue for resource tracking; amber for carbon metrics. WCAG verified.
+Pharmaceutical,#1E3A5F,#FFFFFF,#0E9F6E,#FFFFFF,#FF8A4C,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#D1D5DB,#DC2626,Regulated navy for clinical authority; green for health-positive states; amber for warnings. WCAG verified.
+Architecture/AEC,#374151,#FFFFFF,#D97706,#111928,#1A56DB,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#E5E7EB,#DC2626,Slate evokes material neutrality; amber for material warmth; blue for technical drawing layers. WCAG verified.
+Interior Design,#92400E,#FFFFFF,#065F46,#FFFFFF,#1E3A5F,#FFFBEB,#111928,#FFFFFF,#FEF3C7,#FDE68A,#DC2626,Warm terracotta evokes timber and clay; deep green for biophilic moments; warm cream background. WCAG verified.
+Music/Audio,#111928,#F9FAFB,#7E3AF2,#FFFFFF,#F05252,#0A0A0A,#F9FAFB,#1F2937,#374151,#4B5563,#EF4444,Near-black dark primary — music is dark-mode-first; violet for discovery; red for recording/live states. WCAG verified.
+Photography/Video,#111928,#F9FAFB,#374151,#F9FAFB,#FF8A4C,#0A0A0A,#F9FAFB,#1F2937,#374151,#4B5563,#EF4444,Near-black canvas lets content take center stage; amber accent for active tool states. WCAG verified.
+Crypto/Web3,#4F46E5,#FFFFFF,#0E9F6E,#FFFFFF,#F59E0B,#0F172A,#F8FAFC,#1E293B,#334155,#475569,#EF4444,Indigo on dark signals crypto-native aesthetic; green for confirmed transactions; gold for high-value events. WCAG verified.
+Marketing/AdTech,#D97706,#111928,#E02424,#FFFFFF,#7E3AF2,#FFFFFF,#111928,#F9FAFB,#FEF3C7,#FDE68A,#B91C1C,Amber signals campaign energy; red for CTAs and limited-offer badges; violet for creative moments. WCAG verified.
+Recruitment/HR Tech,#7E3AF2,#FFFFFF,#1A56DB,#FFFFFF,#0E9F6E,#FAF5FF,#111928,#FFFFFF,#F3E8FF,#E9D5FF,#DC2626,Violet signals human potential; navy secondary for employer trust; green for offer extended. WCAG verified.
+Customer Support/CX,#0E9F6E,#FFFFFF,#3F83F8,#FFFFFF,#FF8A4C,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#E5E7EB,#DC2626,Green signals resolution; blue for informational knowledge base; amber for escalation alerts. WCAG verified.
+E-learning/MOOC,#6875F5,#FFFFFF,#FF8A4C,#FFFFFF,#0E9F6E,#F9FAFB,#111928,#FFFFFF,#EFF6FF,#E0E7FF,#DC2626,Periwinkle primary bridges EdTech energy and SaaS discipline; amber for deadlines; green for completion. WCAG verified.
+Telemedicine,#1A56DB,#FFFFFF,#0E9F6E,#FFFFFF,#FF8A4C,#EFF6FF,#111928,#FFFFFF,#DBEAFE,#BFDBFE,#DC2626,Blue signals clinical authority on video calls; green for patient-status OK; sky-blue creates clinical calm. WCAG verified.
+Smart Home/IoT,#1E3A5F,#FFFFFF,#0E9F6E,#FFFFFF,#F59E0B,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#E5E7EB,#DC2626,Deep navy signals reliable connectivity; green for device-online states; amber for warnings and energy peaks. WCAG verified.
+Manufacturing/Industrial,#374151,#FFFFFF,#D97706,#111928,#1A56DB,#F9FAFB,#111928,#FFFFFF,#F3F4F6,#D1D5DB,#DC2626,Slate mirrors industrial material honesty; amber mirrors high-vis safety conventions; blue for OEE dashboards. WCAG verified.
+Construction,#D97706,#111928,#374151,#FFFFFF,#1A56DB,#FFFBEB,#111928,#FFFFFF,#FEF3C7,#FDE68A,#B91C1C,Amber is literal high-vis construction signaling; slate for technical plan review; blue for BIM and site tracking. WCAG verified.

package/reference/data/styles.csv

@@ -0,0 +1,39 @@
+Style,Keywords,Signature Effects,Best For,Avoid For,Light/Dark,Performance,Era
+Glassmorphism,"frosted glass, translucency, blur, layered depth","backdrop-filter: blur(20px); semi-transparent cards; rgba border; subtle inner glow","Dashboards, media apps, modern SaaS, AI/ML surfaces","Data-dense tables, accessibility-critical flows, low-end devices",Both (dark base preferred),High — compositor layer cost,2019–present
+Brutalism,"raw layout, stark contrast, intentional roughness, exposed grid","Hard pixel borders 2–4px solid; no border-radius; flat color fills; oversized type","Creative portfolios, challenger brands, indie products, arts organizations","Healthcare, regulated finance, government, e-commerce",Light mode primary,Lowest,2016–present
+Neumorphism,"extruded shadows, raised/inset UI, monochromatic, bilateral shadows","box-shadow: bilateral soft shadow; near-identical fg/bg hue; no hard borders","Personal finance concept dashboards, design prototypes","Accessibility-critical (fails WCAG), mobile, production apps",Light only,Low — but WCAG caution,2019–2021
+Flat Design 2.0,"minimal decoration, subtle shadows, vibrant palette, geometric icons","Single drop-shadow at low blur; bold sans-serif; 8pt spacing grid; no gradients","Productivity apps, documentation, enterprise SaaS, developer tools","Luxury/fashion, entertainment",Both,Lowest,2014–present
+Material Design 3,"dynamic color, tonal surfaces, M3 components, elevation via color","Tonal surface colors from brand seed; container/on-container pairs; state layers","Android-first apps, cross-platform Google-adjacent products","Apple HIG contexts, luxury brands, editorial-first experiences",Both,Low,2021–present
+Bento Grid,"card-grid layout, variable card sizes, grid gaps as design element","CSS Grid with named areas; card size 1×1 to 3×2; 8–16px gap; rounded cards","Marketing pages, dashboard home screens, portfolio showcases","Linear narrative content, long-form reading, checkout flows",Both,Low,2022–present
+AI-Native,"gradient meshes, dark base, glowing accents, particle effects","Gradient mesh background; particle canvas overlay; glowing border via box-shadow","AI/ML products, futuristic SaaS, developer platform landing pages","Traditional enterprise, regulated industries, healthcare",Dark primary,High — particle canvas/WebGL,2022–present
+Swiss Modernism 2.0 / International Style,"strict grid, functional typography, red-black-white, structure as beauty","Baseline 12-column grid; Helvetica/Neue Haas/Inter; red accent only; type as layout element","Editorial platforms, design agencies, cultural institutions","Consumer apps, gaming, children's products",Both,Lowest,1950–present (revival 2018–)
+Claymorphism,"3D inflated shapes, soft clay surfaces, pastel palette, inner shadows","border-radius: 30–50px; layered box-shadow (inner highlight + outer soft); pastel fills","Consumer apps, children's products, lifestyle, wellness, gifting","Enterprise, financial tools, anything requiring precision",Both,Medium,2021–present
+Dark Mode First,"deep backgrounds, elevation via surface color, low-saturation palette","Background #0A0A0A–#121212; surface gray ladder; text #F5F5F5; color desaturated 20%","Developer tools, code editors, media players, gaming","Healthcare in clinical settings, high-ambient-light kiosks",Dark primary,Low,2018–present
+Vaporwave/Retrowave,"neon gradients, dark base, grid lines, retro typography, CRT aesthetic","Hot pink to cyan gradient; background grid lines; scanline overlay; glow via text-shadow","Gaming, entertainment, nostalgia brands, Gen-Z consumer, music","Trust-critical verticals, healthcare, finance, government",Dark,High — glow filters and gradient overlays,1980s origin; revival 2016–present
+Editorial Grid,"overlapping text and image, asymmetric layout, strong typographic hierarchy","Text over image with mix-blend-mode; column-spanning type; headline 80–120px; serif display","Media platforms, publishing, editorial brands, portfolios","Functional SaaS, data-dense dashboards, e-commerce PDP",Both,Low,Print tradition; revival 2018–present
+HUD/Sci-Fi FUI,"monochrome on dark, thin lines, technical readout vocabulary, blinking cursors","Background #000; primary green or cyan on black; 1px rule lines; monospace; corner bracket elements","Technology/aerospace dashboards, game UI overlays, cybersecurity monitoring","Consumer products, non-technical users requiring instant clarity",Dark,High — continuous animations,Science fiction tradition; real-world FUI since 2010
+Minimal/Zen,"maximum whitespace, single accent, natural textures, typography-first","70%+ whitespace ratio; single color accent; thin-weight serif or geometric sans; optional paper texture 5%","Wellness apps, meditation products, luxury minimal brands, author portfolios","Feature-dense apps, complex navigation, high-information-density dashboards",Both,Lowest,2010–present
+Skeuomorphism 2.0,"realistic textures, modern execution, material-specific rendering","Leather/wood/metal textures via CSS or SVG; specular highlights; physical affordances","Premium music instruments, luxury hardware apps, high-end lifestyle products","Modern SaaS, productivity tools, frequent-update products",Both,Medium — texture assets and layered pseudo-elements,Original 2007–2013; revival 2021–present
+Neubrutalism,"visible borders, flat colors, stark contrast, browser-default-inspired","2–3px solid dark border on all interactive elements; flat fill; color-flip hover; no border-radius","Indie SaaS, creative tools, challenger brands, hackathon projects","Enterprise, regulated industries, anything requiring perceived polish",Both,Lowest,2021–present
+Memphis Design Revival,"geometric shapes, primary colors, patterns, 80s-inspired, maximalist","Bold geometric pattern fills; primary + secondary color blocking; pattern borders; mixed type weights","Consumer brands targeting Gen Z, playful e-commerce, lifestyle, pop culture","Professional services, enterprise, financial products",Both,Low,1980s origin; digital revival 2022–present
+Glassmorphism Dark,"frosted glass on dark base, darker frost panels, subtle neon borders","backdrop-filter: blur(24px) on near-black; card at rgba(255,255,255,0.05); neon border at 30% opacity","Gaming UI, media players, nightclub/event apps, AI product dark surfaces","Products requiring readable body text at scale",Dark,High — same as Glassmorphism,2020–present
+Aurora/Gradient Mesh,"flowing color gradients, no hard borders, dreamlike, organic forms","CSS mesh gradient 4–6 color stops at 40–70% opacity; no hard-edge borders; sections dissolve","AI/ML landing pages, creative platform hero sections, generative art tools","Data-dense apps, form-heavy flows, contexts requiring clear section boundaries",Both,Medium-High — large gradient repaint,2021–present
+Monochromatic Minimal,"single hue across full lightness range, typography-first, restraint","All elements share one hue; lightness 5%–97%; no accent color; type weight as only contrast variation","Portfolios, luxury brand identity, photography showcases, editorial","Multi-action apps, e-commerce, gaming",Both,Lowest,2015–present
+Conversion-First,"CTA-dominant layout, social proof, urgency mechanics, trust signals","Primary CTA above fold; social proof within 2 scroll steps; urgency timer; benefit bullets; sticky CTA bar","Lead-gen landing pages, SaaS trial pages, product launch pages","Brand storytelling, editorial, informational docs",Both,Low,2010–present
+Story-Scroll,"parallax narrative, scroll-triggered animations, cinematic pacing","IntersectionObserver fade-in sequences; horizontal scroll segments; full-bleed imagery; chapter breaks","Brand launches, product storytelling, annual reports, agency showreels","High-conversion pages, dashboard apps, utility tools",Both,Medium-High — JS animation and asset loading,2014–present
+Product Demo,"embedded interactive preview, annotated feature callouts, tooltip overlays","Inline iframe/video demo above fold; numbered callout dots; feature spotlight; interactive hotspot map","SaaS product landing pages, browser extension pages, design tool showcases","Services businesses, content sites, physical product e-commerce",Both,Medium — video autoplay and interactives,2016–present
+Trust-Builder,"certification display, testimonial photography, risk-reduction copy, authority signals","Client logo strip; testimonial cards with real photos; certification badges; security copy near forms","B2B SaaS sales pages, fintech onboarding, legal/compliance, high-ticket e-commerce","Consumer social apps, entertainment, developer tools",Both,Low,2012–present
+Playful Consumer,"rounded UI, emoji integration, micro-animations, confetti moments","border-radius 24–32px everywhere; emoji in headings; Lottie animation; confetti on conversion; bouncy spring","Consumer apps, gifting platforms, children's products, food delivery","Enterprise, financial products, healthcare, government",Both,Medium — Lottie/animation assets,2018–present
+Dark Premium,"full dark canvas, gold or silver accents, whitespace-heavy, editorial hierarchy","Background #0A0A0A; gold or silver accent; large display serif 80–120px; section-level vertical rhythm","Luxury SaaS, high-end services, premium membership, whiskey/watch brands","Mass-market consumer apps, anything needing color variety for hierarchy",Dark,Low,2018–present
+Typography-Led,"large type as hero, minimal imagery, type as design","Display type 100–200px; type positioned absolutely; tight leading 0.9–1.1; type color inverted from background","Editorial brands, design agencies, type foundries, artist/creative portfolios","Functional apps, e-commerce needing imagery",Both,Lowest,Print tradition; digital 2015–present
+Data-Driven,"charts and stats as hero visual, number-forward design","Large KPI numbers 80–120px in hero; inline sparkline; data annotation typography; tabular numerals","Analytics tools, investor relations, research organizations, fintech reporting","Lifestyle brands, emotional products, services without clear metrics",Both,Low — static SVG charts,2019–present
+Data Dense,"information-maximized layout, minimal chrome, small type","12–13px body in tables; 4–8px row padding; no card containers; tooltips over labels; condensed font","Bloomberg-style terminals, trading desks, operations centers, medical records","Consumer apps, mobile-primary, accessibility-critical",Both (dark preferred),Low,1990s terminal origin; modern SaaS 2012–present
+Executive Dashboard,"large KPIs, traffic-light status, minimal labels, decision-oriented","KPI cards at 48–64px; 3-color status system; sparkline per KPI; max 6 KPIs above fold","C-suite reporting, board packs, PE portfolio monitoring, business reviews","Operational monitoring, self-serve analytics",Both,Low,2010–present
+Operational Monitor,"real-time status indicators, alert color system, live data feel, dense timeline","WebSocket refresh indicator; color-coded service dots; rolling log window; alert banner; incident timeline","DevOps dashboards, NOC, cloud infrastructure monitoring, on-call tools","Executive reporting, consumer apps",Dark primary,Medium — live data updates,2012–present
+Data Storytelling,"prose plus inline charts, guided narrative, progressive disclosure","Section header states finding; chart supports; annotation layer; reading-width column 640–720px; chapter progress","Insight reports, analytics 'stories', investor updates, data journalism","Self-serve exploration dashboards, real-time ops",Both,Low,2017–present
+Grid/Matrix,"dense tabular layout, frozen headers, column sorting, comparison-ready","CSS sticky headers; zebra-stripe rows; column resize; monospace numbers; sort indicators; heatmap cells","Financial data apps, CRM list views, ERP, spreadsheet-replacement tools","Dashboards with narrative focus, mobile primary",Both,Low — virtualize beyond 500 rows,2000–present
+Graph/Network,"node-edge visualization, force-directed layout, interactive topology","SVG/Canvas force-directed graph; node size encodes metric; edge color encodes relationship; zoom/pan","Dependency maps, org charts, knowledge graphs, security blast-radius visualization","Static reports, mobile primary",Both,High — use WebGL for >1000 nodes,2012–present
+Geospatial,"map-first layout, choropleth overlays, geographic filter","Full-bleed map primary content area; choropleth scale legend; point clusters; polygon selection; sidebar detail","Logistics route analytics, retail location, real estate maps, public health dashboards","Products without geographic data, mobile with small screen",Both,High — map tile loading and vector layers,2010–present
+Timeline-First,"chronological layout, Gantt-inspired, temporal density","Horizontal scroll timeline; date-stamped lane per entity; milestone markers; dependency lines; zoom year→day","Project management, roadmap views, history visualization, editorial production","Real-time monitoring, KPI dashboards",Both,Medium — virtualized timeline required for long ranges,2015–present
+Comparison View,"side-by-side panels, diff highlighting, symmetrical layout","Two-column 50/50; synchronized scroll; diff highlights green/red; overlay mode toggle; summary diff in header","A/B test dashboards, design diff tools, version comparison, benchmark analysis","Single-subject dashboards, mobile primary",Both,Low,2015–present
+Mobile Analytics,"touch-optimized charts, swipe navigation, bottom-sheet detail","Horizontal bar charts; swipe between metric cards; bottom-sheet drill-down; 48px tap targets; pinch-zoom charts","Field sales apps, retail staff dashboards, on-the-go executive views, mobile-first ops","Desktop-primary tools, data-dense tables",Both,Low — chart library must support touch events,2018–present