diff --git a/.agents/skills/impeccable/reference/animate.md b/.agents/skills/impeccable/reference/animate.md
index b44d1ac61..f3d504c90 100644
--- a/.agents/skills/impeccable/reference/animate.md
+++ b/.agents/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, STOP and use Codex's structured u
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.agents/skills/impeccable/reference/bolder.md b/.agents/skills/impeccable/reference/bolder.md
index 6326d409a..fe037113d 100644
--- a/.agents/skills/impeccable/reference/bolder.md
+++ b/.agents/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.agents/skills/impeccable/reference/codex.md b/.agents/skills/impeccable/reference/codex.md
index f174e1f3c..233298bdd 100644
--- a/.agents/skills/impeccable/reference/codex.md
+++ b/.agents/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.agents/skills/impeccable/reference/colorize.md b/.agents/skills/impeccable/reference/colorize.md
index 08a3862d4..eebf613c3 100644
--- a/.agents/skills/impeccable/reference/colorize.md
+++ b/.agents/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.agents/skills/impeccable/reference/critique.md b/.agents/skills/impeccable/reference/critique.md
index 331ea9972..454bebbfb 100644
--- a/.agents/skills/impeccable/reference/critique.md
+++ b/.agents/skills/impeccable/reference/critique.md
@@ -56,7 +56,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -128,6 +128,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -343,11 +345,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.agents/skills/impeccable/reference/delight.md b/.agents/skills/impeccable/reference/delight.md
index b31967056..4909f450f 100644
--- a/.agents/skills/impeccable/reference/delight.md
+++ b/.agents/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.agents/skills/impeccable/reference/distill.md b/.agents/skills/impeccable/reference/distill.md
index 2ac85043e..9c8322669 100644
--- a/.agents/skills/impeccable/reference/distill.md
+++ b/.agents/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.agents/skills/impeccable/reference/document.md b/.agents/skills/impeccable/reference/document.md
index 3298274c9..1210ff10d 100644
--- a/.agents/skills/impeccable/reference/document.md
+++ b/.agents/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.agents/skills/impeccable/reference/init.md b/.agents/skills/impeccable/reference/init.md
index fc8ec3e72..de7d12a8a 100644
--- a/.agents/skills/impeccable/reference/init.md
+++ b/.agents/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), STOP and use Codex's structured user-input/question tool when available; if unavailable, ask directly in chat to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), STOP and use Codex's structured user-input/question tool when available; if unavailable, ask directly in chat to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.agents/skills/impeccable/reference/layout.md b/.agents/skills/impeccable/reference/layout.md
index a1ba6f305..9e79e7eb6 100644
--- a/.agents/skills/impeccable/reference/layout.md
+++ b/.agents/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.agents/skills/impeccable/reference/quieter.md b/.agents/skills/impeccable/reference/quieter.md
index 897c1e50c..c059bd5c9 100644
--- a/.agents/skills/impeccable/reference/quieter.md
+++ b/.agents/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.agents/skills/impeccable/reference/typeset.md b/.agents/skills/impeccable/reference/typeset.md
index 727f6e949..80529edf5 100644
--- a/.agents/skills/impeccable/reference/typeset.md
+++ b/.agents/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.agents/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.agents/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.agents/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.agents/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.agents/skills/impeccable/scripts/palette.mjs b/.agents/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.agents/skills/impeccable/scripts/palette.mjs
+++ b/.agents/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/.claude/skills/impeccable/reference/animate.md b/.claude/skills/impeccable/reference/animate.md
index 073ddcf5e..c57e65d1b 100644
--- a/.claude/skills/impeccable/reference/animate.md
+++ b/.claude/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, STOP and call the AskUserQuestion
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.claude/skills/impeccable/reference/bolder.md b/.claude/skills/impeccable/reference/bolder.md
index e1a03558f..a6b378afe 100644
--- a/.claude/skills/impeccable/reference/bolder.md
+++ b/.claude/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.claude/skills/impeccable/reference/codex.md b/.claude/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/.claude/skills/impeccable/reference/codex.md
+++ b/.claude/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.claude/skills/impeccable/reference/colorize.md b/.claude/skills/impeccable/reference/colorize.md
index 95b7365af..b0a61dade 100644
--- a/.claude/skills/impeccable/reference/colorize.md
+++ b/.claude/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.claude/skills/impeccable/reference/critique.md b/.claude/skills/impeccable/reference/critique.md
index 8e05304e5..429b6c4fc 100644
--- a/.claude/skills/impeccable/reference/critique.md
+++ b/.claude/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.claude/skills/impeccable/reference/delight.md b/.claude/skills/impeccable/reference/delight.md
index 4ff8ca93c..3fa4b3205 100644
--- a/.claude/skills/impeccable/reference/delight.md
+++ b/.claude/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.claude/skills/impeccable/reference/distill.md b/.claude/skills/impeccable/reference/distill.md
index 72d7c0076..887d1bbb3 100644
--- a/.claude/skills/impeccable/reference/distill.md
+++ b/.claude/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.claude/skills/impeccable/reference/document.md b/.claude/skills/impeccable/reference/document.md
index dab6d3902..4c52e92c5 100644
--- a/.claude/skills/impeccable/reference/document.md
+++ b/.claude/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.claude/skills/impeccable/reference/init.md b/.claude/skills/impeccable/reference/init.md
index ff720a21f..e2b1df04e 100644
--- a/.claude/skills/impeccable/reference/init.md
+++ b/.claude/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), STOP and call the AskUserQuestion tool to clarify. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), STOP and call the AskUserQuestion tool to clarify. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.claude/skills/impeccable/reference/layout.md b/.claude/skills/impeccable/reference/layout.md
index 664780b5d..23e9f4b74 100644
--- a/.claude/skills/impeccable/reference/layout.md
+++ b/.claude/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.claude/skills/impeccable/reference/quieter.md b/.claude/skills/impeccable/reference/quieter.md
index d1eddc29f..ea5b54925 100644
--- a/.claude/skills/impeccable/reference/quieter.md
+++ b/.claude/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.claude/skills/impeccable/reference/typeset.md b/.claude/skills/impeccable/reference/typeset.md
index 8a463f730..fefa95b0d 100644
--- a/.claude/skills/impeccable/reference/typeset.md
+++ b/.claude/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.claude/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.claude/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.claude/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.claude/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.claude/skills/impeccable/scripts/palette.mjs b/.claude/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.claude/skills/impeccable/scripts/palette.mjs
+++ b/.claude/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/.cursor/skills/impeccable/reference/animate.md b/.cursor/skills/impeccable/reference/animate.md
index 390b8fbfd..1a1098a5b 100644
--- a/.cursor/skills/impeccable/reference/animate.md
+++ b/.cursor/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, ask the user directly to clarify
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.cursor/skills/impeccable/reference/bolder.md b/.cursor/skills/impeccable/reference/bolder.md
index f6f12a97d..b72773c31 100644
--- a/.cursor/skills/impeccable/reference/bolder.md
+++ b/.cursor/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.cursor/skills/impeccable/reference/codex.md b/.cursor/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/.cursor/skills/impeccable/reference/codex.md
+++ b/.cursor/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.cursor/skills/impeccable/reference/colorize.md b/.cursor/skills/impeccable/reference/colorize.md
index 2457f608c..abee1acf8 100644
--- a/.cursor/skills/impeccable/reference/colorize.md
+++ b/.cursor/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.cursor/skills/impeccable/reference/critique.md b/.cursor/skills/impeccable/reference/critique.md
index d326a1148..6beb82dda 100644
--- a/.cursor/skills/impeccable/reference/critique.md
+++ b/.cursor/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.cursor/skills/impeccable/reference/delight.md b/.cursor/skills/impeccable/reference/delight.md
index 33772c82f..596cff09e 100644
--- a/.cursor/skills/impeccable/reference/delight.md
+++ b/.cursor/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.cursor/skills/impeccable/reference/distill.md b/.cursor/skills/impeccable/reference/distill.md
index b1ebffb6a..9dcac4676 100644
--- a/.cursor/skills/impeccable/reference/distill.md
+++ b/.cursor/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.cursor/skills/impeccable/reference/document.md b/.cursor/skills/impeccable/reference/document.md
index e6637c31a..0d38eb568 100644
--- a/.cursor/skills/impeccable/reference/document.md
+++ b/.cursor/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.cursor/skills/impeccable/reference/init.md b/.cursor/skills/impeccable/reference/init.md
index d9dab58b5..fad998fb9 100644
--- a/.cursor/skills/impeccable/reference/init.md
+++ b/.cursor/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.cursor/skills/impeccable/reference/layout.md b/.cursor/skills/impeccable/reference/layout.md
index 3ab1ed834..537a61d84 100644
--- a/.cursor/skills/impeccable/reference/layout.md
+++ b/.cursor/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.cursor/skills/impeccable/reference/quieter.md b/.cursor/skills/impeccable/reference/quieter.md
index c946ad318..55b00b6f3 100644
--- a/.cursor/skills/impeccable/reference/quieter.md
+++ b/.cursor/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.cursor/skills/impeccable/reference/typeset.md b/.cursor/skills/impeccable/reference/typeset.md
index ae371d4f1..318f33423 100644
--- a/.cursor/skills/impeccable/reference/typeset.md
+++ b/.cursor/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.cursor/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.cursor/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.cursor/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.cursor/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.cursor/skills/impeccable/scripts/palette.mjs b/.cursor/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.cursor/skills/impeccable/scripts/palette.mjs
+++ b/.cursor/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/.gemini/skills/impeccable/reference/animate.md b/.gemini/skills/impeccable/reference/animate.md
index 390b8fbfd..1a1098a5b 100644
--- a/.gemini/skills/impeccable/reference/animate.md
+++ b/.gemini/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, ask the user directly to clarify
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.gemini/skills/impeccable/reference/bolder.md b/.gemini/skills/impeccable/reference/bolder.md
index f6f12a97d..b72773c31 100644
--- a/.gemini/skills/impeccable/reference/bolder.md
+++ b/.gemini/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.gemini/skills/impeccable/reference/codex.md b/.gemini/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/.gemini/skills/impeccable/reference/codex.md
+++ b/.gemini/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.gemini/skills/impeccable/reference/colorize.md b/.gemini/skills/impeccable/reference/colorize.md
index 2457f608c..abee1acf8 100644
--- a/.gemini/skills/impeccable/reference/colorize.md
+++ b/.gemini/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.gemini/skills/impeccable/reference/critique.md b/.gemini/skills/impeccable/reference/critique.md
index 4ad79389d..bf292586f 100644
--- a/.gemini/skills/impeccable/reference/critique.md
+++ b/.gemini/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.gemini/skills/impeccable/reference/delight.md b/.gemini/skills/impeccable/reference/delight.md
index 33772c82f..596cff09e 100644
--- a/.gemini/skills/impeccable/reference/delight.md
+++ b/.gemini/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.gemini/skills/impeccable/reference/distill.md b/.gemini/skills/impeccable/reference/distill.md
index b1ebffb6a..9dcac4676 100644
--- a/.gemini/skills/impeccable/reference/distill.md
+++ b/.gemini/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.gemini/skills/impeccable/reference/document.md b/.gemini/skills/impeccable/reference/document.md
index e6637c31a..0d38eb568 100644
--- a/.gemini/skills/impeccable/reference/document.md
+++ b/.gemini/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.gemini/skills/impeccable/reference/init.md b/.gemini/skills/impeccable/reference/init.md
index 6f907a4a6..ce4a3a6d5 100644
--- a/.gemini/skills/impeccable/reference/init.md
+++ b/.gemini/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.gemini/skills/impeccable/reference/layout.md b/.gemini/skills/impeccable/reference/layout.md
index 922ba577e..5a884ac20 100644
--- a/.gemini/skills/impeccable/reference/layout.md
+++ b/.gemini/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.gemini/skills/impeccable/reference/quieter.md b/.gemini/skills/impeccable/reference/quieter.md
index c946ad318..55b00b6f3 100644
--- a/.gemini/skills/impeccable/reference/quieter.md
+++ b/.gemini/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.gemini/skills/impeccable/reference/typeset.md b/.gemini/skills/impeccable/reference/typeset.md
index ead0d51c1..5f94430c5 100644
--- a/.gemini/skills/impeccable/reference/typeset.md
+++ b/.gemini/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.gemini/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.gemini/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.gemini/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.gemini/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.gemini/skills/impeccable/scripts/palette.mjs b/.gemini/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.gemini/skills/impeccable/scripts/palette.mjs
+++ b/.gemini/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/.github/skills/impeccable/reference/animate.md b/.github/skills/impeccable/reference/animate.md
index 390b8fbfd..1a1098a5b 100644
--- a/.github/skills/impeccable/reference/animate.md
+++ b/.github/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, ask the user directly to clarify
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.github/skills/impeccable/reference/bolder.md b/.github/skills/impeccable/reference/bolder.md
index f6f12a97d..b72773c31 100644
--- a/.github/skills/impeccable/reference/bolder.md
+++ b/.github/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.github/skills/impeccable/reference/codex.md b/.github/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/.github/skills/impeccable/reference/codex.md
+++ b/.github/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.github/skills/impeccable/reference/colorize.md b/.github/skills/impeccable/reference/colorize.md
index 2457f608c..abee1acf8 100644
--- a/.github/skills/impeccable/reference/colorize.md
+++ b/.github/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.github/skills/impeccable/reference/critique.md b/.github/skills/impeccable/reference/critique.md
index b6ccc00a3..74de97307 100644
--- a/.github/skills/impeccable/reference/critique.md
+++ b/.github/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.github/skills/impeccable/reference/delight.md b/.github/skills/impeccable/reference/delight.md
index 33772c82f..596cff09e 100644
--- a/.github/skills/impeccable/reference/delight.md
+++ b/.github/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.github/skills/impeccable/reference/distill.md b/.github/skills/impeccable/reference/distill.md
index b1ebffb6a..9dcac4676 100644
--- a/.github/skills/impeccable/reference/distill.md
+++ b/.github/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.github/skills/impeccable/reference/document.md b/.github/skills/impeccable/reference/document.md
index e6637c31a..0d38eb568 100644
--- a/.github/skills/impeccable/reference/document.md
+++ b/.github/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.github/skills/impeccable/reference/init.md b/.github/skills/impeccable/reference/init.md
index 81d3508f1..969a6c0d1 100644
--- a/.github/skills/impeccable/reference/init.md
+++ b/.github/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.github/skills/impeccable/reference/layout.md b/.github/skills/impeccable/reference/layout.md
index cb1e9a799..129f4f9c2 100644
--- a/.github/skills/impeccable/reference/layout.md
+++ b/.github/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.github/skills/impeccable/reference/quieter.md b/.github/skills/impeccable/reference/quieter.md
index c946ad318..55b00b6f3 100644
--- a/.github/skills/impeccable/reference/quieter.md
+++ b/.github/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.github/skills/impeccable/reference/typeset.md b/.github/skills/impeccable/reference/typeset.md
index 82e95de8f..34b234342 100644
--- a/.github/skills/impeccable/reference/typeset.md
+++ b/.github/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.github/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.github/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.github/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.github/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.github/skills/impeccable/scripts/palette.mjs b/.github/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.github/skills/impeccable/scripts/palette.mjs
+++ b/.github/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/.kiro/skills/impeccable/reference/animate.md b/.kiro/skills/impeccable/reference/animate.md
index 390b8fbfd..1a1098a5b 100644
--- a/.kiro/skills/impeccable/reference/animate.md
+++ b/.kiro/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, ask the user directly to clarify
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.kiro/skills/impeccable/reference/bolder.md b/.kiro/skills/impeccable/reference/bolder.md
index f6f12a97d..b72773c31 100644
--- a/.kiro/skills/impeccable/reference/bolder.md
+++ b/.kiro/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.kiro/skills/impeccable/reference/codex.md b/.kiro/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/.kiro/skills/impeccable/reference/codex.md
+++ b/.kiro/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.kiro/skills/impeccable/reference/colorize.md b/.kiro/skills/impeccable/reference/colorize.md
index 2457f608c..abee1acf8 100644
--- a/.kiro/skills/impeccable/reference/colorize.md
+++ b/.kiro/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.kiro/skills/impeccable/reference/critique.md b/.kiro/skills/impeccable/reference/critique.md
index 191ac85d9..962456b56 100644
--- a/.kiro/skills/impeccable/reference/critique.md
+++ b/.kiro/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.kiro/skills/impeccable/reference/delight.md b/.kiro/skills/impeccable/reference/delight.md
index 33772c82f..596cff09e 100644
--- a/.kiro/skills/impeccable/reference/delight.md
+++ b/.kiro/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.kiro/skills/impeccable/reference/distill.md b/.kiro/skills/impeccable/reference/distill.md
index b1ebffb6a..9dcac4676 100644
--- a/.kiro/skills/impeccable/reference/distill.md
+++ b/.kiro/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.kiro/skills/impeccable/reference/document.md b/.kiro/skills/impeccable/reference/document.md
index e6637c31a..0d38eb568 100644
--- a/.kiro/skills/impeccable/reference/document.md
+++ b/.kiro/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.kiro/skills/impeccable/reference/init.md b/.kiro/skills/impeccable/reference/init.md
index 91a0c0dff..073b2fa62 100644
--- a/.kiro/skills/impeccable/reference/init.md
+++ b/.kiro/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.kiro/skills/impeccable/reference/layout.md b/.kiro/skills/impeccable/reference/layout.md
index 0302d930d..bce3d957d 100644
--- a/.kiro/skills/impeccable/reference/layout.md
+++ b/.kiro/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.kiro/skills/impeccable/reference/quieter.md b/.kiro/skills/impeccable/reference/quieter.md
index c946ad318..55b00b6f3 100644
--- a/.kiro/skills/impeccable/reference/quieter.md
+++ b/.kiro/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.kiro/skills/impeccable/reference/typeset.md b/.kiro/skills/impeccable/reference/typeset.md
index d76866ef4..defa6fb43 100644
--- a/.kiro/skills/impeccable/reference/typeset.md
+++ b/.kiro/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.kiro/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.kiro/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.kiro/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.kiro/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.kiro/skills/impeccable/scripts/palette.mjs b/.kiro/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.kiro/skills/impeccable/scripts/palette.mjs
+++ b/.kiro/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/.opencode/skills/impeccable/reference/animate.md b/.opencode/skills/impeccable/reference/animate.md
index d329dfacb..d632a5c14 100644
--- a/.opencode/skills/impeccable/reference/animate.md
+++ b/.opencode/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, STOP and call the `question` tool
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.opencode/skills/impeccable/reference/bolder.md b/.opencode/skills/impeccable/reference/bolder.md
index f11437e10..99c4e0088 100644
--- a/.opencode/skills/impeccable/reference/bolder.md
+++ b/.opencode/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.opencode/skills/impeccable/reference/codex.md b/.opencode/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/.opencode/skills/impeccable/reference/codex.md
+++ b/.opencode/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.opencode/skills/impeccable/reference/colorize.md b/.opencode/skills/impeccable/reference/colorize.md
index 9ce453823..29a4d0215 100644
--- a/.opencode/skills/impeccable/reference/colorize.md
+++ b/.opencode/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.opencode/skills/impeccable/reference/critique.md b/.opencode/skills/impeccable/reference/critique.md
index 5afe9c271..65b1fbf7a 100644
--- a/.opencode/skills/impeccable/reference/critique.md
+++ b/.opencode/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.opencode/skills/impeccable/reference/delight.md b/.opencode/skills/impeccable/reference/delight.md
index c4583805c..203f1bddd 100644
--- a/.opencode/skills/impeccable/reference/delight.md
+++ b/.opencode/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.opencode/skills/impeccable/reference/distill.md b/.opencode/skills/impeccable/reference/distill.md
index b828a4890..75c40ae46 100644
--- a/.opencode/skills/impeccable/reference/distill.md
+++ b/.opencode/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.opencode/skills/impeccable/reference/document.md b/.opencode/skills/impeccable/reference/document.md
index b5a00acb9..97a369611 100644
--- a/.opencode/skills/impeccable/reference/document.md
+++ b/.opencode/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.opencode/skills/impeccable/reference/init.md b/.opencode/skills/impeccable/reference/init.md
index 6258af49e..24cab7166 100644
--- a/.opencode/skills/impeccable/reference/init.md
+++ b/.opencode/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), STOP and call the `question` tool to clarify. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), STOP and call the `question` tool to clarify. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.opencode/skills/impeccable/reference/layout.md b/.opencode/skills/impeccable/reference/layout.md
index eca56c804..a59665c47 100644
--- a/.opencode/skills/impeccable/reference/layout.md
+++ b/.opencode/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.opencode/skills/impeccable/reference/quieter.md b/.opencode/skills/impeccable/reference/quieter.md
index 8c56bb003..06a3c999d 100644
--- a/.opencode/skills/impeccable/reference/quieter.md
+++ b/.opencode/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.opencode/skills/impeccable/reference/typeset.md b/.opencode/skills/impeccable/reference/typeset.md
index 063873f73..3eca79293 100644
--- a/.opencode/skills/impeccable/reference/typeset.md
+++ b/.opencode/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.opencode/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.opencode/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.opencode/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.opencode/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.opencode/skills/impeccable/scripts/palette.mjs b/.opencode/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.opencode/skills/impeccable/scripts/palette.mjs
+++ b/.opencode/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/.pi/skills/impeccable/reference/animate.md b/.pi/skills/impeccable/reference/animate.md
index 390b8fbfd..1a1098a5b 100644
--- a/.pi/skills/impeccable/reference/animate.md
+++ b/.pi/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, ask the user directly to clarify
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.pi/skills/impeccable/reference/bolder.md b/.pi/skills/impeccable/reference/bolder.md
index f6f12a97d..b72773c31 100644
--- a/.pi/skills/impeccable/reference/bolder.md
+++ b/.pi/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.pi/skills/impeccable/reference/codex.md b/.pi/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/.pi/skills/impeccable/reference/codex.md
+++ b/.pi/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.pi/skills/impeccable/reference/colorize.md b/.pi/skills/impeccable/reference/colorize.md
index 2457f608c..abee1acf8 100644
--- a/.pi/skills/impeccable/reference/colorize.md
+++ b/.pi/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.pi/skills/impeccable/reference/critique.md b/.pi/skills/impeccable/reference/critique.md
index fc466ebca..1dfae73b1 100644
--- a/.pi/skills/impeccable/reference/critique.md
+++ b/.pi/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.pi/skills/impeccable/reference/delight.md b/.pi/skills/impeccable/reference/delight.md
index 33772c82f..596cff09e 100644
--- a/.pi/skills/impeccable/reference/delight.md
+++ b/.pi/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.pi/skills/impeccable/reference/distill.md b/.pi/skills/impeccable/reference/distill.md
index b1ebffb6a..9dcac4676 100644
--- a/.pi/skills/impeccable/reference/distill.md
+++ b/.pi/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.pi/skills/impeccable/reference/document.md b/.pi/skills/impeccable/reference/document.md
index e6637c31a..0d38eb568 100644
--- a/.pi/skills/impeccable/reference/document.md
+++ b/.pi/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.pi/skills/impeccable/reference/init.md b/.pi/skills/impeccable/reference/init.md
index 1eb01b51f..e3562734f 100644
--- a/.pi/skills/impeccable/reference/init.md
+++ b/.pi/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.pi/skills/impeccable/reference/layout.md b/.pi/skills/impeccable/reference/layout.md
index c7ee9a2ac..590a57c90 100644
--- a/.pi/skills/impeccable/reference/layout.md
+++ b/.pi/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.pi/skills/impeccable/reference/quieter.md b/.pi/skills/impeccable/reference/quieter.md
index c946ad318..55b00b6f3 100644
--- a/.pi/skills/impeccable/reference/quieter.md
+++ b/.pi/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.pi/skills/impeccable/reference/typeset.md b/.pi/skills/impeccable/reference/typeset.md
index 5f4218148..8d11752ff 100644
--- a/.pi/skills/impeccable/reference/typeset.md
+++ b/.pi/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.pi/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.pi/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.pi/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.pi/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.pi/skills/impeccable/scripts/palette.mjs b/.pi/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.pi/skills/impeccable/scripts/palette.mjs
+++ b/.pi/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/.qoder/skills/impeccable/reference/animate.md b/.qoder/skills/impeccable/reference/animate.md
index 390b8fbfd..1a1098a5b 100644
--- a/.qoder/skills/impeccable/reference/animate.md
+++ b/.qoder/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, ask the user directly to clarify
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.qoder/skills/impeccable/reference/bolder.md b/.qoder/skills/impeccable/reference/bolder.md
index f6f12a97d..b72773c31 100644
--- a/.qoder/skills/impeccable/reference/bolder.md
+++ b/.qoder/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.qoder/skills/impeccable/reference/codex.md b/.qoder/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/.qoder/skills/impeccable/reference/codex.md
+++ b/.qoder/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.qoder/skills/impeccable/reference/colorize.md b/.qoder/skills/impeccable/reference/colorize.md
index 2457f608c..abee1acf8 100644
--- a/.qoder/skills/impeccable/reference/colorize.md
+++ b/.qoder/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.qoder/skills/impeccable/reference/critique.md b/.qoder/skills/impeccable/reference/critique.md
index 82bd31376..e89900ee7 100644
--- a/.qoder/skills/impeccable/reference/critique.md
+++ b/.qoder/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.qoder/skills/impeccable/reference/delight.md b/.qoder/skills/impeccable/reference/delight.md
index 33772c82f..596cff09e 100644
--- a/.qoder/skills/impeccable/reference/delight.md
+++ b/.qoder/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.qoder/skills/impeccable/reference/distill.md b/.qoder/skills/impeccable/reference/distill.md
index b1ebffb6a..9dcac4676 100644
--- a/.qoder/skills/impeccable/reference/distill.md
+++ b/.qoder/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.qoder/skills/impeccable/reference/document.md b/.qoder/skills/impeccable/reference/document.md
index e6637c31a..0d38eb568 100644
--- a/.qoder/skills/impeccable/reference/document.md
+++ b/.qoder/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.qoder/skills/impeccable/reference/init.md b/.qoder/skills/impeccable/reference/init.md
index 794a98cfe..7a6c8ddfa 100644
--- a/.qoder/skills/impeccable/reference/init.md
+++ b/.qoder/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.qoder/skills/impeccable/reference/layout.md b/.qoder/skills/impeccable/reference/layout.md
index 967407207..758588b52 100644
--- a/.qoder/skills/impeccable/reference/layout.md
+++ b/.qoder/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.qoder/skills/impeccable/reference/quieter.md b/.qoder/skills/impeccable/reference/quieter.md
index c946ad318..55b00b6f3 100644
--- a/.qoder/skills/impeccable/reference/quieter.md
+++ b/.qoder/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.qoder/skills/impeccable/reference/typeset.md b/.qoder/skills/impeccable/reference/typeset.md
index 985079785..bfa4737a5 100644
--- a/.qoder/skills/impeccable/reference/typeset.md
+++ b/.qoder/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.qoder/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.qoder/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.qoder/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.qoder/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.qoder/skills/impeccable/scripts/palette.mjs b/.qoder/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.qoder/skills/impeccable/scripts/palette.mjs
+++ b/.qoder/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/.rovodev/skills/impeccable/reference/animate.md b/.rovodev/skills/impeccable/reference/animate.md
index 390b8fbfd..1a1098a5b 100644
--- a/.rovodev/skills/impeccable/reference/animate.md
+++ b/.rovodev/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, ask the user directly to clarify
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.rovodev/skills/impeccable/reference/bolder.md b/.rovodev/skills/impeccable/reference/bolder.md
index f6f12a97d..b72773c31 100644
--- a/.rovodev/skills/impeccable/reference/bolder.md
+++ b/.rovodev/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.rovodev/skills/impeccable/reference/codex.md b/.rovodev/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/.rovodev/skills/impeccable/reference/codex.md
+++ b/.rovodev/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.rovodev/skills/impeccable/reference/colorize.md b/.rovodev/skills/impeccable/reference/colorize.md
index 2457f608c..abee1acf8 100644
--- a/.rovodev/skills/impeccable/reference/colorize.md
+++ b/.rovodev/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.rovodev/skills/impeccable/reference/critique.md b/.rovodev/skills/impeccable/reference/critique.md
index b1e5098fc..986656a29 100644
--- a/.rovodev/skills/impeccable/reference/critique.md
+++ b/.rovodev/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.rovodev/skills/impeccable/reference/delight.md b/.rovodev/skills/impeccable/reference/delight.md
index 33772c82f..596cff09e 100644
--- a/.rovodev/skills/impeccable/reference/delight.md
+++ b/.rovodev/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.rovodev/skills/impeccable/reference/distill.md b/.rovodev/skills/impeccable/reference/distill.md
index b1ebffb6a..9dcac4676 100644
--- a/.rovodev/skills/impeccable/reference/distill.md
+++ b/.rovodev/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.rovodev/skills/impeccable/reference/document.md b/.rovodev/skills/impeccable/reference/document.md
index e6637c31a..0d38eb568 100644
--- a/.rovodev/skills/impeccable/reference/document.md
+++ b/.rovodev/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.rovodev/skills/impeccable/reference/init.md b/.rovodev/skills/impeccable/reference/init.md
index 1505664b1..38dc35965 100644
--- a/.rovodev/skills/impeccable/reference/init.md
+++ b/.rovodev/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.rovodev/skills/impeccable/reference/layout.md b/.rovodev/skills/impeccable/reference/layout.md
index 09d026861..e9e37d3b5 100644
--- a/.rovodev/skills/impeccable/reference/layout.md
+++ b/.rovodev/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.rovodev/skills/impeccable/reference/quieter.md b/.rovodev/skills/impeccable/reference/quieter.md
index c946ad318..55b00b6f3 100644
--- a/.rovodev/skills/impeccable/reference/quieter.md
+++ b/.rovodev/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.rovodev/skills/impeccable/reference/typeset.md b/.rovodev/skills/impeccable/reference/typeset.md
index 8a43bf347..e94632159 100644
--- a/.rovodev/skills/impeccable/reference/typeset.md
+++ b/.rovodev/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.rovodev/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.rovodev/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.rovodev/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.rovodev/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.rovodev/skills/impeccable/scripts/palette.mjs b/.rovodev/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.rovodev/skills/impeccable/scripts/palette.mjs
+++ b/.rovodev/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/.trae-cn/skills/impeccable/reference/animate.md b/.trae-cn/skills/impeccable/reference/animate.md
index 390b8fbfd..1a1098a5b 100644
--- a/.trae-cn/skills/impeccable/reference/animate.md
+++ b/.trae-cn/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, ask the user directly to clarify
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.trae-cn/skills/impeccable/reference/bolder.md b/.trae-cn/skills/impeccable/reference/bolder.md
index f6f12a97d..b72773c31 100644
--- a/.trae-cn/skills/impeccable/reference/bolder.md
+++ b/.trae-cn/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.trae-cn/skills/impeccable/reference/codex.md b/.trae-cn/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/.trae-cn/skills/impeccable/reference/codex.md
+++ b/.trae-cn/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.trae-cn/skills/impeccable/reference/colorize.md b/.trae-cn/skills/impeccable/reference/colorize.md
index 2457f608c..abee1acf8 100644
--- a/.trae-cn/skills/impeccable/reference/colorize.md
+++ b/.trae-cn/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.trae-cn/skills/impeccable/reference/critique.md b/.trae-cn/skills/impeccable/reference/critique.md
index 7c2ad5cc2..2ae773275 100644
--- a/.trae-cn/skills/impeccable/reference/critique.md
+++ b/.trae-cn/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.trae-cn/skills/impeccable/reference/delight.md b/.trae-cn/skills/impeccable/reference/delight.md
index 33772c82f..596cff09e 100644
--- a/.trae-cn/skills/impeccable/reference/delight.md
+++ b/.trae-cn/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.trae-cn/skills/impeccable/reference/distill.md b/.trae-cn/skills/impeccable/reference/distill.md
index b1ebffb6a..9dcac4676 100644
--- a/.trae-cn/skills/impeccable/reference/distill.md
+++ b/.trae-cn/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.trae-cn/skills/impeccable/reference/document.md b/.trae-cn/skills/impeccable/reference/document.md
index e6637c31a..0d38eb568 100644
--- a/.trae-cn/skills/impeccable/reference/document.md
+++ b/.trae-cn/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.trae-cn/skills/impeccable/reference/init.md b/.trae-cn/skills/impeccable/reference/init.md
index 19c5982c2..d3be0fb9a 100644
--- a/.trae-cn/skills/impeccable/reference/init.md
+++ b/.trae-cn/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.trae-cn/skills/impeccable/reference/layout.md b/.trae-cn/skills/impeccable/reference/layout.md
index 779f15d8c..6bc335b3c 100644
--- a/.trae-cn/skills/impeccable/reference/layout.md
+++ b/.trae-cn/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.trae-cn/skills/impeccable/reference/quieter.md b/.trae-cn/skills/impeccable/reference/quieter.md
index c946ad318..55b00b6f3 100644
--- a/.trae-cn/skills/impeccable/reference/quieter.md
+++ b/.trae-cn/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.trae-cn/skills/impeccable/reference/typeset.md b/.trae-cn/skills/impeccable/reference/typeset.md
index 60a6325cb..4595fe854 100644
--- a/.trae-cn/skills/impeccable/reference/typeset.md
+++ b/.trae-cn/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.trae-cn/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.trae-cn/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.trae-cn/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.trae-cn/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.trae-cn/skills/impeccable/scripts/palette.mjs b/.trae-cn/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.trae-cn/skills/impeccable/scripts/palette.mjs
+++ b/.trae-cn/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/.trae/skills/impeccable/reference/animate.md b/.trae/skills/impeccable/reference/animate.md
index 390b8fbfd..1a1098a5b 100644
--- a/.trae/skills/impeccable/reference/animate.md
+++ b/.trae/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, ask the user directly to clarify
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/.trae/skills/impeccable/reference/bolder.md b/.trae/skills/impeccable/reference/bolder.md
index f6f12a97d..b72773c31 100644
--- a/.trae/skills/impeccable/reference/bolder.md
+++ b/.trae/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/.trae/skills/impeccable/reference/codex.md b/.trae/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/.trae/skills/impeccable/reference/codex.md
+++ b/.trae/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/.trae/skills/impeccable/reference/colorize.md b/.trae/skills/impeccable/reference/colorize.md
index 2457f608c..abee1acf8 100644
--- a/.trae/skills/impeccable/reference/colorize.md
+++ b/.trae/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/.trae/skills/impeccable/reference/critique.md b/.trae/skills/impeccable/reference/critique.md
index 91dcd9bea..0e43b1a41 100644
--- a/.trae/skills/impeccable/reference/critique.md
+++ b/.trae/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/.trae/skills/impeccable/reference/delight.md b/.trae/skills/impeccable/reference/delight.md
index 33772c82f..596cff09e 100644
--- a/.trae/skills/impeccable/reference/delight.md
+++ b/.trae/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/.trae/skills/impeccable/reference/distill.md b/.trae/skills/impeccable/reference/distill.md
index b1ebffb6a..9dcac4676 100644
--- a/.trae/skills/impeccable/reference/distill.md
+++ b/.trae/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/.trae/skills/impeccable/reference/document.md b/.trae/skills/impeccable/reference/document.md
index e6637c31a..0d38eb568 100644
--- a/.trae/skills/impeccable/reference/document.md
+++ b/.trae/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/.trae/skills/impeccable/reference/init.md b/.trae/skills/impeccable/reference/init.md
index 2fd355390..499f60055 100644
--- a/.trae/skills/impeccable/reference/init.md
+++ b/.trae/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), ask the user directly to clarify what you cannot infer. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/.trae/skills/impeccable/reference/layout.md b/.trae/skills/impeccable/reference/layout.md
index f67cd31b1..ecd958443 100644
--- a/.trae/skills/impeccable/reference/layout.md
+++ b/.trae/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/.trae/skills/impeccable/reference/quieter.md b/.trae/skills/impeccable/reference/quieter.md
index c946ad318..55b00b6f3 100644
--- a/.trae/skills/impeccable/reference/quieter.md
+++ b/.trae/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/.trae/skills/impeccable/reference/typeset.md b/.trae/skills/impeccable/reference/typeset.md
index 0cfdffa93..1b9743b91 100644
--- a/.trae/skills/impeccable/reference/typeset.md
+++ b/.trae/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/.trae/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/.trae/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/.trae/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/.trae/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/.trae/skills/impeccable/scripts/palette.mjs b/.trae/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/.trae/skills/impeccable/scripts/palette.mjs
+++ b/.trae/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/cli/engine/registry/antipatterns.mjs b/cli/engine/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/cli/engine/registry/antipatterns.mjs
+++ b/cli/engine/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/plugin/skills/impeccable/reference/animate.md b/plugin/skills/impeccable/reference/animate.md
index 073ddcf5e..c57e65d1b 100644
--- a/plugin/skills/impeccable/reference/animate.md
+++ b/plugin/skills/impeccable/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, STOP and call the AskUserQuestion
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/plugin/skills/impeccable/reference/bolder.md b/plugin/skills/impeccable/reference/bolder.md
index e1a03558f..a6b378afe 100644
--- a/plugin/skills/impeccable/reference/bolder.md
+++ b/plugin/skills/impeccable/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/plugin/skills/impeccable/reference/codex.md b/plugin/skills/impeccable/reference/codex.md
index d563af95b..67a257d88 100644
--- a/plugin/skills/impeccable/reference/codex.md
+++ b/plugin/skills/impeccable/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/plugin/skills/impeccable/reference/colorize.md b/plugin/skills/impeccable/reference/colorize.md
index 95b7365af..b0a61dade 100644
--- a/plugin/skills/impeccable/reference/colorize.md
+++ b/plugin/skills/impeccable/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/plugin/skills/impeccable/reference/critique.md b/plugin/skills/impeccable/reference/critique.md
index 8e05304e5..429b6c4fc 100644
--- a/plugin/skills/impeccable/reference/critique.md
+++ b/plugin/skills/impeccable/reference/critique.md
@@ -47,7 +47,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -113,6 +113,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -319,11 +321,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/plugin/skills/impeccable/reference/delight.md b/plugin/skills/impeccable/reference/delight.md
index 4ff8ca93c..3fa4b3205 100644
--- a/plugin/skills/impeccable/reference/delight.md
+++ b/plugin/skills/impeccable/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/plugin/skills/impeccable/reference/distill.md b/plugin/skills/impeccable/reference/distill.md
index 72d7c0076..887d1bbb3 100644
--- a/plugin/skills/impeccable/reference/distill.md
+++ b/plugin/skills/impeccable/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/plugin/skills/impeccable/reference/document.md b/plugin/skills/impeccable/reference/document.md
index dab6d3902..4c52e92c5 100644
--- a/plugin/skills/impeccable/reference/document.md
+++ b/plugin/skills/impeccable/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/plugin/skills/impeccable/reference/init.md b/plugin/skills/impeccable/reference/init.md
index ff720a21f..e2b1df04e 100644
--- a/plugin/skills/impeccable/reference/init.md
+++ b/plugin/skills/impeccable/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), STOP and call the AskUserQuestion tool to clarify. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), STOP and call the AskUserQuestion tool to clarify. Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/plugin/skills/impeccable/reference/layout.md b/plugin/skills/impeccable/reference/layout.md
index 664780b5d..23e9f4b74 100644
--- a/plugin/skills/impeccable/reference/layout.md
+++ b/plugin/skills/impeccable/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/plugin/skills/impeccable/reference/quieter.md b/plugin/skills/impeccable/reference/quieter.md
index d1eddc29f..ea5b54925 100644
--- a/plugin/skills/impeccable/reference/quieter.md
+++ b/plugin/skills/impeccable/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/plugin/skills/impeccable/reference/typeset.md b/plugin/skills/impeccable/reference/typeset.md
index 8a463f730..fefa95b0d 100644
--- a/plugin/skills/impeccable/reference/typeset.md
+++ b/plugin/skills/impeccable/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/plugin/skills/impeccable/scripts/detector/registry/antipatterns.mjs b/plugin/skills/impeccable/scripts/detector/registry/antipatterns.mjs
index be24f12b6..70aea105d 100644
--- a/plugin/skills/impeccable/scripts/detector/registry/antipatterns.mjs
+++ b/plugin/skills/impeccable/scripts/detector/registry/antipatterns.mjs
@@ -32,9 +32,9 @@ const ANTIPATTERNS = [
id: 'single-font',
category: 'slop',
scopes: ['type'],
- name: 'Single font for everything',
+ name: 'Single font without hierarchy',
description:
- 'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
+ 'Only one font family is used for the entire page. A single family can work when weight and size contrast carry the hierarchy; otherwise pair a distinctive display font with a refined body font.',
skillSection: 'Typography',
skillGuideline: 'only one font family for the entire page',
},
diff --git a/plugin/skills/impeccable/scripts/palette.mjs b/plugin/skills/impeccable/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/plugin/skills/impeccable/scripts/palette.mjs
+++ b/plugin/skills/impeccable/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.
diff --git a/skill/reference/animate.md b/skill/reference/animate.md
index f95e36dd9..1aa36f2e5 100644
--- a/skill/reference/animate.md
+++ b/skill/reference/animate.md
@@ -6,9 +6,9 @@ Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut moti
## Register
-Brand: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
+Persuade + Experience: motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions. The saturated AI default is fade-and-rise reveals on every scrolled section; that's a tell, not a choreography. Reserve scroll-triggered motion for moments that earn it.
-Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
+Operate + Read: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Native (`ios` / `android` / `adaptive`): implementation follows the Motion section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): system transitions and OS Reduce Motion, never the web tooling below.
@@ -39,9 +39,9 @@ If any of these are unclear from the codebase, {{ask_instruction}}
Create a purposeful animation plan:
-- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
- **Feedback layer**: Which interactions need acknowledgment?
- **Transition layer**: Which state changes need smoothing?
+- **Entrance moment**: The ONE entrance worth rehearsing, where the mode invites it. Not every surface wants one.
- **Delight layer**: Where can we surprise and delight?
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
@@ -50,13 +50,6 @@ Create a purposeful animation plan:
Add motion systematically across these categories:
-### Entrance Animations
-- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
-- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
-- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
-
- Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
-
### Micro-interactions
- **Button feedback**:
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
@@ -76,6 +69,13 @@ Add motion systematically across these categories:
- **Success/error**: Color transitions, icon animations, gentle scale pulse
- **Enable/disable**: Opacity transitions, cursor changes
+### Entrance Animations
+- **The one entrance moment** (where the mode invites it): a committed entrance for primary content (scale, parallax, or a creative effect)
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+- **List rhythm**: Sibling stagger is legitimate for cards-in-a-grid or list-items-appearing. Whole-section fade-on-scroll is not a list and is not legitimate. Cap total stagger time: 10 items at 50ms each = 500ms total. For more items, reduce per-item delay or cap the staggered count.
+
+ Use CSS custom properties for clean stagger: `animation-delay: calc(var(--i, 0) * 50ms)` with `style="--i: 0"`, `style="--i: 1"`, etc. on each item.
+
### Navigation & Flow
- **Page transitions**: Crossfade between routes, shared element transitions
- **Tab switching**: Slide indicator, content fade/slide
diff --git a/skill/reference/bolder.md b/skill/reference/bolder.md
index c6d0936a1..d8c459cc1 100644
--- a/skill/reference/bolder.md
+++ b/skill/reference/bolder.md
@@ -4,9 +4,9 @@ When asked for "bolder," AI defaults to the same tired tricks: cyan/purple gradi
## Register
-Brand: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
+Persuade + Experience: "bolder" means distinctive. Express a stronger point of view through hierarchy, pacing, proportion, copy, evidence, and one committed visual idea.
-Product: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
+Operate + Read: "bolder" rarely means theatrics; those undermine trust. It means stronger hierarchy, clearer weight contrast, sharper information density, and more decisive prioritization. The amplification is in clarity, not drama.
---
diff --git a/skill/reference/codex.md b/skill/reference/codex.md
index 923bb899b..065ac7d31 100644
--- a/skill/reference/codex.md
+++ b/skill/reference/codex.md
@@ -64,7 +64,7 @@ Common ingredients to inventory:
- Hero silhouette and dominant composition
- Signature motifs (planets, devices, portraits, charts, route lines, insets, badges, etc.)
-- Nav and primary CTA treatment
+- Nav and primary-action treatment (when the surface has one)
- Section sequence, especially the second fold
- Image-native content the concept depends on
- Typography, density, color/material treatment, motion cues
diff --git a/skill/reference/colorize.md b/skill/reference/colorize.md
index 46e5cabc4..7f9acc3b6 100644
--- a/skill/reference/colorize.md
+++ b/skill/reference/colorize.md
@@ -6,9 +6,9 @@ Replace timid grayscale or single-accent designs with a strategic palette: pick
## Register
-Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
+Persuade + Experience: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule; that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it.
-Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
+Operate + Read: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators. Not decoration. Every color has a consistent meaning across every screen.
---
diff --git a/skill/reference/critique.md b/skill/reference/critique.md
index 26c667ffc..e5ccf472b 100644
--- a/skill/reference/critique.md
+++ b/skill/reference/critique.md
@@ -58,7 +58,7 @@ Evaluate:
- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
- **Cognitive load**: consult the [Cognitive Load Assessment](#cognitive-load-assessment) section below; report checklist failures and decision points with >4 visible options.
- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
-- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4.
+- **Nielsen heuristics**: consult the [Heuristics Scoring Guide](#heuristics-scoring-guide) section below; score all 10 heuristics 0-4, marking any heuristic the mode-applicability rule allows as `n/a` instead of forcing a number.
Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
@@ -136,6 +136,8 @@ Present the Nielsen's 10 heuristics scores as a table:
Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+**Mode applicability**: heuristics 7 (Flexibility and Efficiency) and 10 (Help and Documentation) may be scored `n/a` on Persuade and Experience surfaces (landing pages, campaigns, portfolios, bodies of work), as may any other heuristic that genuinely cannot apply to the surface under review. Write `n/a` in the Score cell with a one-line reason, and renormalize the total to the applicable maximum (e.g. **24/32** when two heuristics are n/a) so the rating band stays proportional. The persisted snapshot must record which heuristics were scored n/a.
+
#### Anti-Patterns Verdict
**Start here.** Does this look AI-generated?
@@ -357,11 +359,11 @@ At any decision point, count the number of distinct options, actions, or pieces
- **8+ items**: Overloaded; users will skip, misclick, or abandon
**Practical applications**:
-- Navigation menus: ≤5 top-level items (group the rest under clear categories)
-- Form sections: ≤4 fields visible per group before a visual break
- Action buttons: 1 primary, 1–2 secondary, group the rest in a menu
-- Dashboard widgets: ≤4 key metrics visible without scrolling
-- Pricing tiers: ≤3 options (more causes analysis paralysis)
+- Navigation menus: ≤5 top-level items (group the rest under clear categories)
+- Long-form articles: one reading path; gather related links into a single block at the end instead of scattering them mid-flow
+- Documentation sidebars: ≤4 sibling choices visible per level before grouping kicks in
+- Portfolio and gallery indexes: one decision per screen (which piece to open), not filter, sort, and tag controls all at once
---
diff --git a/skill/reference/delight.md b/skill/reference/delight.md
index bf96a7185..80280114f 100644
--- a/skill/reference/delight.md
+++ b/skill/reference/delight.md
@@ -6,9 +6,9 @@ Find the moments where personality and unexpected polish would turn a functional
## Register
-Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+Persuade + Experience: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
-Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+Operate + Read: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
---
@@ -128,8 +128,8 @@ Add personality and joy through these methods:
"No projects"
"Your canvas awaits. Create something amazing."
-"No messages"
-"Inbox zero! You're crushing it today."
+"No saved articles"
+"Nothing on the nightstand yet. Save a story for later."
```
**Playful labels & tooltips**:
@@ -178,7 +178,7 @@ Add personality and joy through these methods:
- Haptic feedback on mobile
- Optional sound effect
-**Progress & achievements**:
+**Progress & achievements** (Operate surfaces with recurring tasks only; gamification on editorial, portfolio, or one-visit surfaces reads as noise):
- Streak counters with celebratory milestones
- Progress bars that "celebrate" at 100%
- Badge unlocks with animation
@@ -212,7 +212,7 @@ Add personality and joy through these methods:
- Hidden keyboard shortcuts (Cmd+K for special features)
- Hover reveals on logos or illustrations
- Alt text jokes on images (for screen reader users too!)
-- Console messages for developers ("Like what you see? We're hiring!")
+- A view-source or console colophon (a note on the typefaces, a thank-you, a hiring line)
**Seasonal touches**:
- Holiday themes (subtle, tasteful)
@@ -237,10 +237,10 @@ Add personality and joy through these methods:
```
Loading messages: write ones specific to your product, not generic AI filler:
-- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
-- "Preparing your dashboard..."
-- "Checking for updates since yesterday..."
+- "Fetching this week's issue..."
+- "Developing your photos..."
+- "Checking tomorrow's tide tables..."
```
**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
@@ -254,7 +254,7 @@ Loading messages: write ones specific to your product, not generic AI filler:
- "Achievement unlocked" style notifications
- Personalized messages ("You published your 10th article!")
-**Milestone recognition**:
+**Milestone recognition** (same scoping as Progress & achievements: Operate surfaces with recurring tasks):
- First-time actions get special treatment
- Streak tracking and celebration
- Progress toward goals
diff --git a/skill/reference/distill.md b/skill/reference/distill.md
index 72ba34ad5..85c4ea69c 100644
--- a/skill/reference/distill.md
+++ b/skill/reference/distill.md
@@ -66,8 +66,8 @@ Systematically remove complexity across these dimensions:
- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
- **Smart defaults**: Make common choices automatic, only ask when necessary
- **Inline actions**: Replace modal flows with inline editing where possible
-- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
-- **Clear CTAs**: ONE obvious next step, not five competing actions
+- **Remove steps**: Can the flow lose a step?
+- **Clear next action**: ONE obvious next action, not five competing ones
### Content Simplification
- **Shorter copy**: Cut every sentence in half, then do it again
diff --git a/skill/reference/document.md b/skill/reference/document.md
index d977acbc1..c8e548363 100644
--- a/skill/reference/document.md
+++ b/skill/reference/document.md
@@ -274,7 +274,7 @@ Regenerate the sidecar whenever you regenerate root `DESIGN.md`. If the user onl
"kind": "button | input | nav | chip | card | custom",
"refersTo": "button-primary",
"description": "One-line what and when.",
- "html": "",
+ "html": "",
"css": ".ds-btn-primary { background: #191c1d; color: #fff; padding: 16px 48px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; border: none; border-radius: 0; transition: background 0.2s, transform 0.2s; } .ds-btn-primary:hover { background: oklch(60% 0.25 350); transform: translateY(-2px); }"
}
],
@@ -307,7 +307,7 @@ The `html` and `css` fields must be **self-contained, drop-in snippets** that re
Aim for a tight set of **5-10 components** that best represent the visual system:
- **Canonical primitives (always include if the project has them):** button (each variant as a separate component entry), input/text field, navigation, chip/tag, card.
-- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, any custom pattern the user mentioned as important in PRODUCT.md.
+- **Signature components (include if distinctive):** hero CTA, featured card, filter pill, a distinctive table or list-row treatment, any custom pattern the user mentioned as important in PRODUCT.md.
- **Skip the rest.** Utility components, form building blocks, wrapper layouts: not worth documenting unless visually distinctive.
If the project has **no component library yet** (bare landing page, new project), synthesize canonical primitives from the tokens using best-practice defaults consistent with the DESIGN.md's rules. Every `.impeccable/design.json` has *something* to render, even on day zero.
diff --git a/skill/reference/init.md b/skill/reference/init.md
index 3e13b5d48..5a0ad063a 100644
--- a/skill/reference/init.md
+++ b/skill/reference/init.md
@@ -65,19 +65,19 @@ If the repo is empty or the user's brief is sparse, run a short interview before
- Use inferred answers as hypotheses or options, not as finished facts.
- Complete at least one real user-answer round before drafting PRODUCT.md, unless every required answer is directly discoverable from repo docs.
- Round 1 should establish register, platform, users, purpose, positioning, and desired outcome.
-- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for the brand register.
+- Round 2 should establish brand personality or references, anti-references, and accessibility needs, plus conversion & proof for Persuade surfaces.
### Minimum viable interview
-Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for the brand register) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
+Ask enough to complete PRODUCT.md. At minimum, cover register confirmation, **platform confirmation** (`web` / `ios` / `android` / `adaptive`), users, purpose, positioning, brand personality, anti-references, and accessibility needs (plus conversion & proof for Persuade surfaces) unless each answer is directly discoverable from repo context. Never let the template's default `web` stand unconfirmed for a native or cross-platform repo. After at least one interview round, you may propose inferred answers, but the user must confirm them before you write PRODUCT.md. Never synthesize PRODUCT.md from the original task prompt alone.
### Register (ask first; it shapes everything below)
-Every design task is either **brand** (marketing, landing, campaign, long-form content, portfolio: design IS the product) or **product** (app UI, admin, dashboards, tools: design SERVES the product).
+Every design task serves one of four visitor modes (see SKILL.md's Registers): **Persuade** (marketing, landing, campaigns), **Experience** (portfolios, albums, bodies of work), **Operate** (app UI, admin, dashboards, tools), and **Read** (documentation, editorial, long-form). PRODUCT.md stores the two-value family that covers them: `brand` covers Persuade and Experience, `product` covers Operate and Read. The brief decides the exact mode per task; the stored register only sets the default family.
If Step 2 produced a clear hypothesis, lead with it: *"From the codebase, this looks like a [brand / product] surface. Does that match your intent, or should we treat it differently?"*
-If the signal is genuinely split (e.g. a product with a big marketing landing), {{ask_instruction}} Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch brand-only questions (Conversion & proof) into the same round as the question that decides the register.
+If the signal is genuinely split (e.g. a product with a big marketing landing), {{ask_instruction}} Ask which register describes the **primary** surface. The register can be overridden per task later, but PRODUCT.md carries one default. Settle the default before drafting any register-dependent questions; never batch Persuade-only questions (Conversion & proof) into the same round as the question that decides the register.
### Platform (ask right after register)
@@ -106,7 +106,10 @@ A monorepo shipping both a website and a native app gets a PRODUCT.md per app, e
- Push for specific named references with the *specific* thing about them that fits this brand, not generic "modern" adjectives or category-bucket lanes.
- What should this explicitly NOT look like? Any anti-references?
-### Conversion & proof (brand register only)
+### Conversion & proof (Persuade surfaces only)
+
+Ask these only when the primary surface is a Persuade one (marketing, landing, campaigns). Experience and Read surfaces (portfolios, albums, long-form writing, documentation) get no CTA, belief-ladder, or proof questions even when the stored register is `brand`; skip this section and its PRODUCT.md counterpart.
+
- What's the primary CTA?
- What's the secondary fallback, for visitors not ready for the primary?
- The one line a visitor should remember after 10 seconds.
@@ -146,7 +149,7 @@ web
[The single strategic claim every screen reinforces. Not a visual rule, not an anti-reference.]
## Conversion & proof
-[Brand register only. Product register: omit this section entirely, heading included.]
+[Persuade surfaces only (marketing, landing, campaigns). Omit this section entirely, heading included, for the product register and for Experience or Read surfaces such as portfolios, albums, or long-form writing.]
- Primary and secondary CTA: [...]
- The line a visitor remembers after 10 seconds: [...]
- Belief ladder: [...]
diff --git a/skill/reference/layout.md b/skill/reference/layout.md
index cfb05dc49..d171dbe3b 100644
--- a/skill/reference/layout.md
+++ b/skill/reference/layout.md
@@ -4,9 +4,9 @@ Space is the most underused design tool. Find the layout's actual problem (monot
## Register
-Brand: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
+Persuade + Experience: asymmetric compositions, fluid spacing with `clamp()`, intentional grid-breaking for emphasis. Rhythm through contrast: tight groupings paired with generous separations.
-Product: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance.
+Operate + Read: predictable grids, consistent densities, familiar navigation patterns. Responsive behavior is structural (collapse sidebar, responsive table), not fluid typography. Consistency IS an affordance. Read surfaces specifically want navigable linearity: a steady column the reader can follow and a structure they can hold in their head, not compositional surprise.
Native (`ios` / `android` / `adaptive`): structure follows the Layout section of [ios.md](ios.md) / [android.md](android.md) (read it first if Setup hasn't already): platform navigation, insets, and touch targets, never the CSS tooling below.
diff --git a/skill/reference/quieter.md b/skill/reference/quieter.md
index 3ee5d2b1f..dc3e960f9 100644
--- a/skill/reference/quieter.md
+++ b/skill/reference/quieter.md
@@ -4,9 +4,9 @@ Quiet design is harder than bold design. Subtlety needs precision. Reduce visual
## Register
-Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
+Persuade + Experience: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
-Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
+Operate + Read: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
---
diff --git a/skill/reference/typeset.md b/skill/reference/typeset.md
index b44c414c6..cd82b24df 100644
--- a/skill/reference/typeset.md
+++ b/skill/reference/typeset.md
@@ -6,7 +6,7 @@ Typography carries most of the information on the page. Replace generic defaults
New identity work: run the font selection procedure in [new-work.md](new-work.md). Fluid `clamp()` scale, ≥1.25 ratio between steps.
-Product: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps.
+Operate + Read: system fonts and familiar sans stacks are legitimate here. One well-tuned family typically carries the whole UI. Fixed `rem` scale, 1.125–1.2 ratio between more closely-spaced steps. Long-form Read content wants a steady reading measure and a quiet, stable scale, not display-scale drama.
---
@@ -47,7 +47,7 @@ This checklist is sub-agent A's brief (on the fallback path, work through it you
3. **Sizing & scale**:
- Is there a consistent type scale, or are sizes arbitrary?
- Does body text meet minimum readability? (16px+)
- - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings)
+ - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs and long-form reading, where a steady measure beats display scale; fluid `clamp()` for marketing-page headings)
4. **Readability**:
- Are line lengths comfortable? (45-75 characters ideal)
diff --git a/skill/scripts/palette.mjs b/skill/scripts/palette.mjs
index 4c3f1751a..39e295940 100644
--- a/skill/scripts/palette.mjs
+++ b/skill/scripts/palette.mjs
@@ -52,7 +52,7 @@ const SEEDS = [
mood: "smoldering vermillion at dusk — the last red ember in a blacksmith's forge, iron-rich and quietly violent",
strategy: "Near-black gallery surround lets the seed read as glowing forged metal; ink stays warm-off-white, accent shifts to a hotter ember orange so the primary feels like cooling steel against a fresh strike." },
{ id: "seed-201", oklch: [0.647, 0.262, 0.3],
- mood: "Figma plugin marketplace red — confident product-brand crimson, the kind a modern dev tool uses for a 'live' indicator or a primary CTA on a pristine docs page",
+ mood: "sealing-wax crimson — one confident stamp of red on pristine white paper",
strategy: "Pure white surface lets a high-chroma crimson primary do all the brand work, paired with a hue-shifted warm coral accent for hierarchy without competing saturation" },
{ id: "seed-006", oklch: [0.650, 0.160, 0.0],
mood: "1960s Italian cinema — Technicolor lipstick red against a darkened theater",
@@ -64,8 +64,8 @@ const SEEDS = [
mood: "Negroni hour on a Milan rooftop — bittersweet crimson, aperitivo light, polished restraint",
strategy: "Seed is a vivid carmine-red with strong chroma, so the surface gets out of the way (pure white) and lets the primary do the aperitivo work, with a cooled garnet accent for tension." },
{ id: "seed-202", oklch: [0.643, 0.247, 7.0],
- mood: "Glossier brand pink — modern beauty editorial, confident and current",
- strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the Stripe/Glossier move where the color carries the mood." },
+ mood: "blush editorial pink — modern beauty-page confidence, current without sweetness",
+ strategy: "Pure white bg lets a saturated rose-red primary do all the brand work, paired with a deeper crimson accent for hierarchy — the single-pigment move where the color carries the mood." },
{ id: "seed-013", oklch: [0.400, 0.130, 20.0],
mood: "Tuscan cellar at dusk — aged terracotta, oxidized iron, the deep red of decanted Sangiovese",
strategy: "Black surface lets the oxblood seed and copper accent glow like firelight on cellar stone; brand colors carry all the warmth while the room recedes." },
@@ -115,49 +115,49 @@ const SEEDS = [
mood: "Aesop apothecary bottle — considered red oxide, the calm authority of a well-made object on a white shelf",
strategy: "Seed becomes the singular brand voice against pure white, with a deeper oxblood accent for hierarchy — the surface disappears so the red does all the speaking." },
{ id: "seed-035", oklch: [0.663, 0.153, 32.1],
- mood: "Aesop apothecary bottle — clay-fired warmth, considered retail",
+ mood: "apothecary bottle — clay-fired warmth, considered retail",
strategy: "Pure white surface lets the terracotta primary do the brand work, paired with a deep umber ink and a cooler clay accent for editorial tension." },
{ id: "seed-037", oklch: [0.590, 0.188, 35.8],
- mood: "Aesop apothecary bottle — considered terracotta, herbalist restraint, the warmth comes from the glass not the room",
+ mood: "herbalist's bottle — considered terracotta, the warmth comes from the glass not the room",
strategy: "Seed becomes a muted terracotta primary against pure white so the brand's warmth carries entirely through the color itself; accent shifts to a deeper umber for quiet hierarchy." },
{ id: "seed-038", oklch: [0.652, 0.229, 34.8],
mood: "blown-glass furnace at dusk — molten orange iron pulled from the kiln, a craftsman's signature heat",
strategy: "Pure black stage so the seed reads as live ember; primary holds the seed's heat, accent shifts to a brass-amber a hue-step away for a 1.7+ contrast pairing without leaving the fire." },
{ id: "seed-039", oklch: [0.653, 0.185, 33.5],
- mood: "Aesop apothecary bottle — considered terracotta, quiet retail craft",
+ mood: "potter's glaze terracotta — quiet shelf craft, considered and grounded",
strategy: "Seed becomes a grounded clay primary against pure white, paired with a deeper umber accent so the warmth lives entirely in the brand marks, not the surface." },
{ id: "seed-167", oklch: [0.495, 0.134, 36.0],
- mood: "Aesop apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
+ mood: "apothecary shelf — burnished terracotta on clinical white, considered craft pharmacy",
strategy: "Treat the seed as a brand-carrying burnt-sienna against a pure paper-white surface so the warmth lives entirely in the primary, with a deep umber accent pulled along the same warm axis for typographic gravity." },
{ id: "seed-147", oklch: [0.500, 0.151, 40.0],
- mood: "Aesop apothecary shelf — considered terracotta, pharmacy restraint, the brand color does the work against clinical white",
+ mood: "pharmacy shelf — considered terracotta restraint, the color does the work against clinical white",
strategy: "Anchor the seed's burnt-sienna primary against a pure white surface so the rust speaks alone, with a deep umber ink and a cooler clay accent to give the palette product-brand discipline rather than environmental warmth." },
{ id: "seed-040", oklch: [0.660, 0.201, 40.0],
- mood: "Aesop apothecary bottle — amber glass on a clean dispensary shelf, considered and clinical-warm",
+ mood: "amber bottle glass on a clean dispensary shelf — considered and clinical-warm",
strategy: "Seed becomes a burnt-amber primary against pure white so the bottle-glass color does the emotional work; accent shifts to a deep olive-bronze for the apothecary-label pairing." },
{ id: "seed-041", oklch: [0.673, 0.217, 38.6],
- mood: "Aesop apothecary shelf — considered orange glass, clinical retail restraint",
+ mood: "chemist's shelf — considered orange glass, clinical restraint",
strategy: "Pure white surface lets the burnt-orange primary do all the brand work, with a deep ink-brown for editorial gravity and a muted clay accent that reads as a sibling, not a contrast." },
{ id: "seed-042", oklch: [0.688, 0.133, 35.8],
- mood: "Aesop apothecary shelf — terracotta glass, considered retail",
+ mood: "terracotta glass on a marble counter — considered, unhurried",
strategy: "Seed becomes a warm clay primary against pure white so the bottle-on-marble retail feel comes from the brand color alone; a deeper umber accent gives the label-print contrast." },
{ id: "seed-043", oklch: [0.781, 0.119, 38.1],
- mood: "Aesop apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
+ mood: "apothecary catalogue — considered terracotta, dermatological restraint, the warm color doing all the work against clinical white",
strategy: "Pure white surface lets the seed's warm clay tone read as the entire brand voice, paired with a deeper umber accent for hierarchy without competing with the primary's warmth." },
{ id: "seed-168", oklch: [0.400, 0.103, 50.0],
- mood: "Aesop apothecary bottle — amber glass on a clinical white shelf, considered and pharmaceutical",
+ mood: "amber glass on a clinical white shelf — considered and pharmaceutical",
strategy: "Pure white surface lets the deep amber primary act like tinted glass against a clean shelf; accent is a muted clay that complements without competing, keeping the brand quiet and product-led." },
{ id: "seed-044", oklch: [0.568, 0.149, 45.9],
mood: "1970s desert highway at golden hour — sun-faded terracotta, denim dust, the warmth of a Polaroid pulled from a glovebox",
strategy: "Seed becomes a burnt-sienna primary against pure white so the terracotta does all the emotional work; a deep indigo accent acts as the denim shadow opposing the sun, creating the era's signature warm/cool tension without tinting the page." },
{ id: "seed-045", oklch: [0.607, 0.163, 47.7],
- mood: "Aesop apothecary shelf — considered amber glass, clinical restraint, craft pharmacy",
+ mood: "dispensary shelf — considered amber glass, clinical restraint, craft pharmacy",
strategy: "Pure white bg lets the burnt-amber primary do the apothecary work alone, paired with a deeper umber accent and graphite ink for editorial calm." },
{ id: "seed-046", oklch: [0.653, 0.175, 45.0],
- mood: "Aesop apothecary shelf — considered amber glass, quiet luxury, restrained craft",
+ mood: "amber glass in lamplight — quiet luxury, restrained craft",
strategy: "Pure black backdrop lets the warm amber primary glow like backlit apothecary glass, with a deeper rust accent providing tonal depth in the same hue family — monochromatic warm against neutral void." },
{ id: "seed-047", oklch: [0.695, 0.205, 43.2],
- mood: "Aesop apothecary label — sun-warmed amber glass on a clinical countertop, restrained botanical pharmacy",
+ mood: "botanical pharmacy label — sun-warmed amber glass on a clinical countertop, restrained",
strategy: "Pure white surface lets the burnt-amber primary and a deeper sienna accent do all the brand work, like an apothecary bottle photographed under daylight." },
{ id: "seed-051", oklch: [0.704, 0.189, 49.0],
mood: "blacksmith's forge at dusk — glowing iron, hammered copper, ember light against cooling steel",
@@ -166,7 +166,7 @@ const SEEDS = [
mood: "Klim Type Foundry specimen page — considered ochre on paper, design-school-honest",
strategy: "Seed becomes a muted ochre primary on pure white; accent is a deep ink-navy pulled across the wheel for editorial contrast without warmth-pooling in the bg" },
{ id: "seed-148", oklch: [0.650, 0.146, 60.0],
- mood: "Klim-style editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
+ mood: "editorial gold — late-afternoon paper light on a serif specimen sheet, considered and dry",
strategy: "Hold the seed's amber as primary on a pure white page so the gold reads as ink rather than atmosphere, and pair with a deep aubergine accent for typographic contrast." },
{ id: "seed-052", oklch: [0.700, 0.130, 60.0],
mood: "late-afternoon terracotta studio — sun-warmed clay, hands-on craft, the hour before dusk",
@@ -184,7 +184,7 @@ const SEEDS = [
mood: "late-summer honey hour — amber light slanting through a west-facing window, optimistic and golden",
strategy: "Anchor a saturated honey-amber primary on pure white so the warmth radiates from the brand itself, then pair with a deep teak accent for grounded contrast rather than tinting the canvas." },
{ id: "seed-056", oklch: [0.691, 0.146, 74.6],
- mood: "Klim-style modern publishing house — late-afternoon paper warmth, considered editorial gold",
+ mood: "small publishing house — late-afternoon paper warmth, considered editorial gold",
strategy: "Pure white surface so the amber seed becomes the brand voice; ink stays near-black neutral and accent shifts to a deep ink-blue to give the gold something structural to lean on." },
{ id: "seed-150", oklch: [0.750, 0.148, 80.0],
mood: "Klim Type Foundry specimen page — late-summer editorial gold, considered and grown-up",
@@ -205,7 +205,7 @@ const SEEDS = [
mood: "olive grove at late afternoon — sun-cured leaves, dust, and quiet Mediterranean weight",
strategy: "Pure white surface lets a deep, sun-cured olive primary do the emotional work, with a burnt-terracotta accent providing the warm-earth counterpoint olive groves are known for." },
{ id: "seed-117", oklch: [0.650, 0.100, 110.0],
- mood: "Klim-style editorial sage — late-summer foundry catalogue, considered olive-yellow on paper",
+ mood: "editorial sage — late-summer type-foundry catalogue, considered olive-yellow on paper",
strategy: "Seed sits at olive-chartreuse; treating it as a quiet typographic primary on pure paper, with a deeper bronze-olive accent for hierarchy — the color does the work, the page disappears." },
{ id: "seed-118", oklch: [0.750, 0.090, 110.0],
mood: "Klim Type Foundry specimen page — late-summer olive light on a working specimen, the honesty of a type designer showing their work",
@@ -268,17 +268,17 @@ const SEEDS = [
mood: "weathered copper patina on a museum bronze — oxidized teal, conservatorial quiet",
strategy: "Pure near-black gallery surround lets the patina-teal primary glow like a lit artifact, with a warm verdigris-adjacent accent providing the oxidation contrast against the cool seed." },
{ id: "seed-161", oklch: [0.720, 0.100, 188.0],
- mood: "climate-tech dashboard — calm verdigris on plain paper, the quiet confidence of an instrument that just works",
+ mood: "field-station verdigris — calm oxidized green-blue on plain paper, the quiet confidence of an instrument that just works",
strategy: "Seed teal carries the entire mood as a single considered brand color on pure white, with a desaturated copper accent providing warm signal against the cool primary without competing for attention." },
{ id: "seed-186", oklch: [0.450, 0.074, 200.0],
mood: "deep hydrothermal vent — mineral teal under pressure, the cold blue-green of oxidized copper in submerged light",
strategy: "Near-black surface lets the mineral teal glow as if lit from within; accent shifts toward verdigris-copper to suggest patina on submerged metal, while ink stays cool-neutral to keep the register austere rather than aquatic-cute." },
{ id: "seed-125", oklch: [0.650, 0.100, 200.0],
- mood: "climate-tech dashboard — calm operational teal, the color of clean water data and atmospheric sensors",
+ mood: "tide-gauge teal — calm working blue-green, the color of clean water and clear morning air",
strategy: "Pure white surface lets a single muted-teal primary do all the brand work, with a deeper marine accent providing hierarchy without competing chroma." },
{ id: "seed-126", oklch: [0.750, 0.080, 200.0],
- mood: "climate-tech product brand — quiet competence, dashboards for hard infrastructure problems",
- strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for interactive lift, and let a pure white surface do the disappearing act so the brand reads as a tool, not an atmosphere." },
+ mood: "harbor-works teal — quiet competence, paint chosen for cranes and lock gates that face hard weather",
+ strategy: "Hold the seed's muted teal as primary, pair with a sharper cyan-leaning accent for lift, and let a pure white surface do the disappearing act so the teal reads as an instrument mark, not an atmosphere." },
{ id: "seed-162", oklch: [0.550, 0.091, 210.0],
mood: "weathered nautical instrument — patinated brass on oxidized steel, the cool blue-grey of a ship's chronometer at dawn",
strategy: "Pure white surface lets the muted teal-steel primary read as a precise instrument mark, with a warm brass accent providing the single point of patina against clinical white." },
@@ -289,10 +289,10 @@ const SEEDS = [
mood: "deep harbor at dawn — cold steel water, fog-muted light, the quiet before the boats leave",
strategy: "Pure near-black bg lets the seed's cold marine blue read as a luminous beacon, while a pale frost-cyan accent evokes diffused dawn light cutting through fog." },
{ id: "seed-127", oklch: [0.650, 0.100, 230.0],
- mood: "climate-tech dashboard — atmospheric sensor blue, calm operational clarity",
+ mood: "weather-station blue — clear-sky reading at altitude, calm working clarity",
strategy: "Anchor the seed as a confident mid-blue primary on pure white so the brand color carries all the atmospheric feeling, with a deep navy accent for hierarchy and a soft slate muted for body text." },
{ id: "seed-128", oklch: [0.750, 0.080, 230.0],
- mood: "climate-tech dashboard — calm atmospheric data, considered sky-blue",
+ mood: "barometer sky-blue — a calm reading before the weather turns, considered and clear",
strategy: "Pure white surface lets the muted sky-blue primary carry the meteorological calm, with a deep-navy accent providing readable weight against the soft primary." },
{ id: "seed-187", oklch: [0.350, 0.078, 240.0],
mood: "deep harbor at blue hour — wet stone, cold steel, the quiet before night fully lands",
@@ -301,7 +301,7 @@ const SEEDS = [
mood: "pre-dawn signal tower — cold blue solitude, instruments glowing against the dark",
strategy: "Pure near-black bg lets the seed's cold tower-light blue glow as the sole emotional source, with a frost-cyan accent acting as a secondary indicator light." },
{ id: "seed-188", oklch: [0.400, 0.110, 250.0],
- mood: "Linear's considered indigo — the calm authority of a well-built developer tool, blueprint ink on a clean page",
+ mood: "blueprint ink — the calm authority of a drafting table where every line is deliberate, drawn on a clean page",
strategy: "Held the seed as a deep indigo primary against pure white so the brand color carries all the gravity; accent shifts to a cooler, brighter cyan-blue to create a crisp hierarchy pair without warming the surface." },
{ id: "seed-165", oklch: [0.450, 0.123, 250.0],
mood: "blueprint room at dusk — drafting table, graphite, civic-engineering blue",
@@ -310,8 +310,8 @@ const SEEDS = [
mood: "twilight cartography — the blue of deep dusk over open water, precise and navigational",
strategy: "Pure white surface lets the seed's oceanic blue act as a single navigational anchor, with a warm amber accent struck across it like a lighthouse beam at dusk." },
{ id: "seed-080", oklch: [0.541, 0.122, 248.2],
- mood: "Linear-style considered tool blue — the calm, exact register of a modern engineering app where every pixel is intentional",
- strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused-software feel" },
+ mood: "surveyor's ink blue — the calm, exact register of a hand-ruled site plan where every line is intentional",
+ strategy: "Pure white surface lets the considered indigo-blue primary carry the entire brand; a deeper navy accent provides hierarchy without warmth, keeping the palette in a single cool family for that focused, exacting feel" },
{ id: "seed-166", oklch: [0.550, 0.149, 250.0],
mood: "pre-dawn flight deck — instrument glow against deep cobalt sky, precise and quietly intense",
strategy: "Near-black bg with the faintest cool tint reads like a darkened cockpit; the seed becomes a luminous instrument-blue primary, paired with a warm amber accent that mimics avionics readouts for unmistakable signal contrast." },
@@ -322,14 +322,14 @@ const SEEDS = [
mood: "high-altitude flight deck at dawn — cold cabin instruments glowing against a sky still holding night",
strategy: "Near-black cockpit ground with a faint blue cast lets the seed read as an illuminated instrument; primary holds the seed, accent shifts to cyan for signal/indicator contrast." },
{ id: "seed-210", oklch: [0.360, 0.140, 260.0],
- mood: "Linear-style considered tool indigo — late-night focused work, the deep blue of a code editor at 2am where everything else falls away",
- strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for interactive lift — the surface disappears so the tool feels weightless." },
+ mood: "printmaker's night sky — late-night focused work, the deep blue of a studio at 2am where everything else falls away",
+ strategy: "Pure black bg lets the indigo primary carry all the cognitive-focus weight, with a slightly brighter periwinkle accent for lift — the surface disappears so the indigo feels weightless." },
{ id: "seed-189", oklch: [0.400, 0.130, 260.0],
mood: "pre-dawn observatory — cold instrument blue, star-chart precision",
strategy: "Seed becomes the primary on pure black so the deep instrument-blue glows like a calibration light, with a faint cyan accent reading as starlight against the void." },
{ id: "seed-211", oklch: [0.420, 0.161, 260.0],
- mood: "Linear's considered indigo — the tool-for-thought blue of focused product work, calm authority without coldness",
- strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined tool-brand register." },
+ mood: "workwear denim indigo — deep-dyed cloth made for focused hands, calm authority without coldness",
+ strategy: "Hold the seed as a deep indigo primary against pure white, then pair with a slightly warmer, lighter periwinkle accent to create gentle hue separation without breaking the disciplined register." },
{ id: "seed-129", oklch: [0.450, 0.150, 260.0],
mood: "pre-dawn observatory — deep cobalt sky just before astronomical twilight, instruments cool to the touch",
strategy: "Near-black surface lets the cobalt seed read as luminous starlight; a single warm amber accent acts as the calibration lamp against the cold blue field." },
@@ -346,14 +346,14 @@ const SEEDS = [
mood: "deep cobalt twilight — the moment after sunset when the sky goes electric blue and city windows start to glow",
strategy: "Pure black stage lets the cobalt seed act as a luminous neon-window glow, with a warm amber accent across the wheel for the lit-window contrast." },
{ id: "seed-212", oklch: [0.360, 0.219, 270.0],
- mood: "Linear-grade tooling indigo — considered software for people who care about craft",
+ mood: "indigo dye vat — deep pigment worked by hands that care about craft",
strategy: "Anchored the deep indigo seed as primary on a pure white surface so the brand color carries all the weight, with a slightly cooler violet-blue accent for hierarchy without competing chroma." },
{ id: "seed-130", oklch: [0.400, 0.150, 270.0],
- mood: "Linear-grade indigo — considered productivity tool, ink on paper, no theatrics",
+ mood: "fountain-pen indigo — considered ink on paper, no theatrics",
strategy: "Pure white surface lets a deep cool indigo carry all the brand weight, paired with a slightly warmer violet-blue accent for hierarchy without acid." },
{ id: "seed-213", oklch: [0.411, 0.241, 267.9],
- mood: "Linear-style indigo — considered tool surface, the kind of blue-violet that sits behind a developer's keyboard at 11pm without shouting",
- strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing UI signal without competing." },
+ mood: "night-study indigo — the kind of blue-violet that sits behind a desk lamp at 11pm without shouting",
+ strategy: "Pure black canvas lets a saturated indigo primary do all the brand work, with a cooler cyan-violet accent providing a second point of light without competing." },
{ id: "seed-131", oklch: [0.450, 0.180, 270.0],
mood: "monastic indigo dusk — vespers light through stained glass, contemplative and severe",
strategy: "Seed becomes a deep indigo primary against pure near-black so the violet reads as luminous stained-glass against architectural shadow, with a cooler iris accent for tonal lift." },
@@ -361,23 +361,23 @@ const SEEDS = [
mood: "pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite",
strategy: "Near-black bg with the faintest cool tint to evoke night sky without theatrics; primary holds the seed's indigo, accent shifts to a paler periwinkle for stellar contrast, keeping the palette monochromatic-cool and observational." },
{ id: "seed-196", oklch: [0.530, 0.130, 268.0],
- mood: "Linear-style considered tool indigo — the deep-focus blue-violet of a thoughtfully built productivity surface, the color of a well-typeset keyboard shortcut",
- strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and interactive states — the surface disappears so the brand color reads as the entire identity." },
+ mood: "bookbinder's indigo — the deep-focus blue-violet of cloth-bound reference volumes, the color of a well-set line of type",
+ strategy: "Pure white bg lets the indigo seed do all the brand work as primary, with a slightly darker, more saturated violet-shifted accent for hierarchy and emphasis — the surface disappears so the brand color reads as the entire identity." },
{ id: "seed-132", oklch: [0.700, 0.120, 270.0],
- mood: "Linear-style considered tool indigo — the quiet violet of a focused product workspace, late-afternoon thinking",
- strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and software-like rather than theatrical." },
+ mood: "observatory dusk — the quiet violet of a reading room at closing hour, late-afternoon thinking",
+ strategy: "Pure white surface lets a muted indigo-violet primary and a slightly cooler accent do all the brand work, keeping the register calm and studied rather than theatrical." },
{ id: "seed-090", oklch: [0.445, 0.206, 279.1],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, not a nightclub",
- strategy: "Anchor the seed as a confident product primary on pure white, with a cooler indigo-shift accent that reads as a sibling tool color, so the brand violet does all the emotional work." },
+ mood: "printmaker's violet — the ink of a limited-edition run, not a nightclub",
+ strategy: "Anchor the seed as a confident primary on pure white, with a cooler indigo-shift accent that reads as a sibling ink, so the brand violet does all the emotional work." },
{ id: "seed-133", oklch: [0.500, 0.160, 280.0],
- mood: "Linear-adjacent indigo — considered productivity tool, the violet of a thinking workspace",
+ mood: "study at blue hour — the considered violet of a room where thinking happens",
strategy: "Seed becomes a measured indigo primary on pure white; accent shifts to a cooler blue-violet to create hierarchy without nightclub saturation, letting the brand color do all the emotional work." },
{ id: "seed-094", oklch: [0.533, 0.125, 294.3],
- mood: "Linear-style considered tool indigo — the violet of a focused product surface, calm authority for a creative workspace",
- strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, tool-like duotone rather than warm decorative pairing." },
+ mood: "twilight atelier violet — calm authority for a working studio, focused and unhurried",
+ strategy: "Pure white canvas lets the indigo-violet primary carry the entire brand voice; accent shifts hue slightly toward blue for a cool, disciplined duotone rather than warm decorative pairing." },
{ id: "seed-137", oklch: [0.700, 0.120, 290.0],
- mood: "Linear-adjacent indigo — the considered tool, late-evening focus mode, software made for people who care about craft",
- strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing UI hierarchy without competing — Vercel/Linear dark-mode discipline." },
+ mood: "violet ink at last light — late-evening focus, the desk of someone who cares about craft",
+ strategy: "Pure black surface lets a single restrained indigo-violet carry the brand, with a cooler periwinkle accent providing hierarchy without competing — lights-off discipline." },
{ id: "seed-100", oklch: [0.450, 0.150, 330.0],
mood: "velvet boudoir at last call — bruised orchid and lipstick traces under low lamplight",
strategy: "Pure near-black surface lets a deep magenta-rose primary smolder while a warm peach accent acts like skin-lit lamplight — drama lives in the brand pair, not the room." },
@@ -385,20 +385,20 @@ const SEEDS = [
mood: "1980s Memphis boudoir — powder-pink neon humming against lacquered black, lipstick and lacquer",
strategy: "Near-black gallery surface lets the magenta-pink seed read as lit neon; accent shifts to warm coral to create cinematic dichromatic tension without competing chroma." },
{ id: "seed-228", oklch: [0.360, 0.147, 340.0],
- mood: "Figma-era creative tool plum — considered productivity software for designers, the inky violet of a serif wordmark on a marketing site",
- strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the productivity-tool restraint." },
+ mood: "riso-printed plum — the inky violet of a small-press poster, considered and current",
+ strategy: "Held the seed as a deep plum primary against pure white so the brand color does the emotional work; paired with a muted rose accent for warmth without breaking the printed-page restraint." },
{ id: "seed-107", oklch: [0.500, 0.200, 340.0],
- mood: "Figma plum — creative-tool confidence, considered magenta for a modern design product",
+ mood: "orchid-house plum — hothouse confidence, considered magenta with modern poise",
strategy: "Pure white surface lets a saturated magenta-plum primary carry all the brand voice, paired with a cooler violet-leaning accent for hierarchy without competing." },
{ id: "seed-198", oklch: [0.600, 0.210, 340.0],
- mood: "Figma-era creative tool plum — confident, considered, made for makers",
+ mood: "silkscreen plum — confident, considered, pulled by hand",
strategy: "Anchor a saturated plum primary against pure white so the brand color does all the emotional work, with a deeper magenta-rose accent for hierarchy." },
{ id: "seed-112", oklch: [0.754, 0.193, 343.4],
- mood: "Figma-era creative tool — confident pink primary doing the brand work on a clean canvas, the way Linear uses indigo or Stripe uses violet",
+ mood: "neon signage pink — one confident tube of light doing all the work against a clean night wall",
strategy: "Anchor the seed pink as a saturated brand primary on pure white so the color carries all the personality; pair with a cooler plum accent to give the pink something to push against without competing." },
{ id: "seed-229", oklch: [0.420, 0.163, 350.0],
- mood: "considered fintech rose — the deep magenta of a modern product brand (think Stripe-adjacent, but rotated toward berry), confident and current",
- strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for the contrast move you see in modern product marketing" },
+ mood: "crushed-berry rose — deep magenta pressed like ink from dark fruit, confident and current",
+ strategy: "pure white surface lets a single deep berry-rose primary do all the brand work, paired with a cooler indigo accent for a crisp warm-cool contrast" },
{ id: "seed-113", oklch: [0.470, 0.173, 354.8],
mood: "1960s velvet rope nightclub — crushed magenta, low light, cigarette smoke catching a spotlight",
strategy: "Pure black stage so the seed's smoky magenta reads as a single hot spotlight, paired with a cooler violet accent for the second light cue." },
@@ -406,19 +406,19 @@ const SEEDS = [
mood: "fin-de-siècle Parisian rose — velvet curtain, theatre program, lipstick blotted on linen",
strategy: "Drop bg to true black so the dusty-rose primary reads as stage-lit silk; accent shifts to a warmer coral-mauve at higher lightness to create gentle hue rotation without breaking the romance." },
{ id: "seed-199", oklch: [0.650, 0.180, 350.0],
- mood: "modern fintech rose — the considered pink of a Series B brand mark, confident and current without nostalgia",
- strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — the Stripe move applied to a pink hue." },
+ mood: "fresh-cut peony rose — considered pink, confident and current without nostalgia",
+ strategy: "Pure white surface lets a saturated rose primary do the brand work, paired with a deep plum accent for hierarchy — one saturated hue carrying the whole voice against white." },
{ id: "seed-115", oklch: [0.636, 0.218, 355.3],
mood: "backstage at a cabaret — velvet rope, lipstick mark on a champagne glass",
strategy: "Seed reads as a saturated stage-light magenta-red; I push it into pure black so the primary glows like a neon sign and the accent (a cold pearl-pink) acts as the spotlight rim — the room is dark, the color does the singing." },
{ id: "seed-230", oklch: [0.650, 0.249, 354.5],
- mood: "Modern fintech rose — the considered pink of a contemporary payments brand: confident, alive, and clear-headed",
- strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for trustworthy contrast — the Stripe move applied to a pink hue." },
+ mood: "neon rose at dusk — a considered pink, confident, alive, and clear-headed",
+ strategy: "Pure white bg lets a saturated rose-magenta primary carry all the brand energy, paired with a cooler indigo accent for steady contrast — one saturated hue doing all the talking against white." },
{ id: "seed-231", oklch: [0.682, 0.241, 353.2],
- mood: "Figma-era creative tool — a confident pink-magenta product brand, the kind a modern design platform uses to feel alive without shouting",
- strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for tool-like clarity and a neutral ink for editorial calm" },
+ mood: "riso ink pink-magenta — one confident pigment that feels alive without shouting",
+ strategy: "Default A pure white bg lets the saturated pink-magenta primary do all the brand work, with a near-complementary cool teal accent for crisp clarity and a neutral ink for editorial calm" },
{ id: "seed-116", oklch: [0.734, 0.183, 356.8],
- mood: "modern beauty brand DTC — Glossier-adjacent pink, confident and current without being saccharine",
+ mood: "modern beauty counter — fresh rose-pink, confident and current without being saccharine",
strategy: "Pure white surface so the rose-pink primary carries all the brand warmth, paired with a near-black ink and a desaturated mauve accent for editorial restraint." },
];
@@ -539,22 +539,20 @@ How to use:
• bg — the most important architectural choice.
CORE PRINCIPLE: the mood lives in the BRAND COLORS
(primary + accent) and typography, NOT in the surface.
- Stripe is warm — its purple does that, bg is pure
- white. Linear is cool — its blue does that, bg is
- pure. Notion is warm — its accents do that, bg is
- near-pure-white. Putting warmth in BOTH primary AND
- bg is the AI cliché.
+ A warm brand puts the warmth in its primary against a
+ pure surface. Putting warmth in BOTH primary AND bg is
+ the AI cliché.
DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).
- Not 0.99, not chroma 0.002. Stripe / Notion / Apple
- use literal #ffffff. Don't add hidden warmth.
- Refs: Stripe, Notion, Linear (light), Apple.com,
- Vercel docs, Figma marketing, Loom, Substack.
+ Not 0.99, not chroma 0.002. The most confident
+ brands in every field — fashion houses, galleries,
+ publishers, tool makers — use literal #ffffff.
+ Don't add hidden warmth.
DEFAULT B — PURE black/near-black: L 0.04-0.12,
- chroma exactly 0.000. No hue tint. Vercel is
- roughly oklch(0.08 0 0). Pick L for mood; C is 0.
- Refs: Vercel, A24, Acne, Apple dark, MUBI.
+ chroma exactly 0.000. No hue tint. Pick L for the
+ mood (cinema dark, gallery dark, instrument-panel
+ dark); C stays 0.
ALT 2 — TINTED: chroma 0.015-0.05.
Use ONLY when:
@@ -568,10 +566,11 @@ How to use:
environment, use PURE white and let primary carry
the warmth.
- HEURISTIC: if seed chroma > 0.10 AND mood is product-
- focused (not environment-focused), it's almost always
- PURE white. Target distribution across many palettes:
- ~50% pure white, ~25% pure black, ~25% tinted.
+ HEURISTIC: if the seed's chroma > 0.10 and the mood
+ doesn't name a specific environment, it's almost
+ always PURE white. Target distribution across many
+ palettes: ~50% pure white, ~25% pure black, ~25%
+ tinted.
• surface — bg pulled slightly toward ink (10-15% mix). Same hue
family as bg. Used for cards, panels, sections.
• ink — body text color. Must reach ≥7:1 contrast vs bg.