de-SaaS the skill: mode-aware rules, neutral runtime injections, diversified examples

Fix batch from the visitor-mode bias audit. The skill's four modes
(Persuade / Operate / Read / Experience) now reach the places that were
still hard-coded to a SaaS-marketing default:

- palette.mjs: rewrote 45 seed blurbs in material/world terms. The 29
  tech-tool-world moods (13 Linear-indigo variants, 6 Figma-era, 5
  climate-tech, 3 fintech, 2 Glossier DTC, incl. seed-201's docs-page
  CTA red) lose all company names and product-category words; Aesop
  trimmed from 17 blurbs to 4 and Klim from 7 to 4, excess rewritten
  as unnamed material terms. Also carries the earlier bg-block rewrite
  (brand refs out of the composition doc).
- init.md: register explainer now names the four modes and the family
  each belongs to (stored value stays brand/product for compatibility);
  Conversion & proof interview + PRODUCT.md section gated to Persuade
  surfaces only (Experience/Read get no CTA/belief-ladder/proof).
- critique.md: Nielsen heuristics 7 and 10 may score n/a on Persuade
  and Experience surfaces, total renormalized to the applicable max,
  snapshot records which were n/a; working-memory examples diversified
  beyond dashboard/pricing anatomy.
- Register headers in bolder/delight/quieter/colorize/layout/animate/
  typeset renamed from Brand:/Product: to Persuade + Experience: /
  Operate + Read:; typeset and layout gain one Read-specific sentence
  (steady reading measure; navigable linearity).
- animate.md: plan checklist and implementation order lead with
  feedback and transitions; the single entrance moment comes after,
  scoped to modes that invite it.
- codex.md: mock inventory says "primary-action treatment (when the
  surface has one)" instead of assuming a CTA.
- delight.md: loading/empty-state/console-egg examples diversified
  beyond SaaS; streaks/badges scoped to Operate surfaces with
  recurring tasks.
- distill.md: step-removal and next-action lines neutralized away
  from signup/checkout/CTA vocabulary.
- document.md: canonical button label GET STARTED -> SAVE CHANGES;
  signature components gain a non-marketing example.
- antipatterns registry: single-font rule renamed to "Single font
  without hierarchy" with a description that permits one family when
  weight/size contrast carries hierarchy.

Staged provider copies regenerated via build:skills:release for the
touched files only.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-07-11 18:35:53 -07:00
co-authored by Claude Fable 5
parent c32fcb47ef
commit 2c62f0f4f9
196 changed files with 1806 additions and 1750 deletions
@@ -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: 150250 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: 150250 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
@@ -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.
---
@@ -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
@@ -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.
---
@@ -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, 12 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
---
@@ -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
@@ -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
@@ -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": "<button class=\"ds-btn-primary\">GET STARTED</button>",
"html": "<button class=\"ds-btn-primary\">SAVE CHANGES</button>",
"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.
@@ -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: [...]
@@ -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.
@@ -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.
---
@@ -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.1251.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.1251.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)
@@ -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',
},
+76 -77
View File
@@ -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.