Files
pbakaus_impeccable/tests/oracle/golden/palette-from-key.json
T

8 lines
6.8 KiB
JSON

{
"stdout": "BRAND SEED · seed-088\n\nSeed color (anchor for your primary brand color):\n oklch(0.476 0.158 268.5) — violet / purple (one read: \"pre-dawn astronomer's notebook — deep indigo sky just before the stars fade, ink and graphite\")\n\nThis is the brand's anchor — a single beautiful color. Compose the rest of\nthe palette around it using YOUR judgment, the brief (PRODUCT.md /\nDESIGN.md / the user's prompt), and the color-strategy guidance already in\nSKILL.md.\n\nHow to use:\n\n1. Read the brief. Write one specific phrase describing the mood this\n product calls for. Be granular. Good: \"1970s travel poster — sun-baked\n warmth, considered\", \"midnight jazz club — smoky brass, saxophone\n light\", \"Scandinavian winter morning — quiet light through frost\". Bad:\n \"modern and clean\", \"warm and inviting\". The first lets you compose; the\n second is generic and will produce generic palettes.\n\n2. The seed's hue (269°) anchors your primary brand color. You\n choose L and C to match the mood. The same hue can be deep-and-velvet,\n bright-and-confident, or pale-and-faded — pick the one the mood demands.\n Primary's hue should stay within ±10° of the seed.\n - one example 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.\n\n3. Now compose the full palette in OKLCH (5 more roles):\n • bg — the most important architectural choice.\n CORE PRINCIPLE: the mood lives in the BRAND COLORS\n (primary + accent) and typography, NOT in the surface.\n A warm brand puts the warmth in its primary against a\n pure surface. Putting warmth in BOTH primary AND bg is\n the AI cliché.\n\n DEFAULT A — PURE white: exactly oklch(1.000 0.000 0).\n Not 0.99, not chroma 0.002. The most confident\n brands in every field — fashion houses, galleries,\n publishers, tool makers — use literal #ffffff.\n Don't add hidden warmth.\n\n DEFAULT B — PURE black/near-black: L 0.04-0.12,\n chroma exactly 0.000. No hue tint. Pick L for the\n mood (cinema dark, gallery dark, instrument-panel\n dark); C stays 0.\n\n ALT 2 — TINTED: chroma 0.015-0.05.\n Use ONLY when:\n (a) the mood is EXPLICITLY environmental — the surface\n IS part of the brand (1920s lacquered interior,\n leather library, ceramic studio, hotel lobby), or\n (b) the seed itself is desaturated (chroma < 0.10) and\n needs a tinted surface to read as a brand.\n NOT for \"feels warm\" / \"modern + warm\" / \"moody\". If\n your mood says \"warm\" but doesn't name a specific\n environment, use PURE white and let primary carry\n the warmth.\n\n HEURISTIC: if the seed's chroma > 0.10 and the mood\n doesn't name a specific environment, it's almost\n always PURE white. Target distribution across many\n palettes: ~50% pure white, ~25% pure black, ~25%\n tinted.\n • surface — bg pulled slightly toward ink (10-15% mix). Same hue\n family as bg. Used for cards, panels, sections.\n • ink — body text color. Must reach ≥7:1 contrast vs bg.\n Can carry the brand hue at low chroma in light mode\n (slight warmth or coolness toward the brand).\n • accent — a SECOND brand color, distinct from primary in BOTH\n hue AND lightness. Picked to complement the mood (not\n default-complementary across the wheel). Used for\n badges, status pills, links, accent rules.\n • muted — secondary text. Ink pulled 40% toward bg, keeping ink's\n hue. Must reach ≥3.5:1 contrast vs bg.\n\n4. Pick a color STRATEGY (the four steps from SKILL.md):\n • Restrained: tinted neutrals + accent ≤10% — product default\n • Committed: one saturated color carries 30-60% — identity-driven\n • Full palette: 3-4 named roles each used deliberately — brand work\n • Drenched: the surface IS the color — campaign, hero, statement\n The brief picks the strategy. A startup dashboard ≠ a perfume brand.\n\nHard rules (already in SKILL.md, recapped because the seed step is where\nthey actually bite):\n\n - OKLCH only — never hex. Never #RRGGBB.\n - ink-vs-bg WCAG contrast ≥ 7 (body text must be readable)\n - primary chroma ≤ 0.23 (above this, primary glows perceptually and\n no text on it is readable — acid-bright is a UI failure)\n - if primary L > 0.78, primary chroma ≤ 0.18 (the fluorescent zone)\n - primary-vs-accent contrast ≥ 1.7 (they must be visually distinct,\n not two variants of the same hue at similar lightness)\n - accent must carry readable text on a filled badge/pill: EITHER\n saturated (chroma ≥ 0.10) OR clearly light (L ≥ 0.85) OR clearly\n dark (L ≤ 0.30). Never a muddy mid-tone (L 0.45-0.72 + chroma < 0.10)\n — taupe/mushroom/dusty-grey accents read as weak and can't hold text\n either way. Saturate it or push its lightness to a clear light/dark.\n - avoid the saturated AI attractor zones: claude-beige (warm-cream bg\n + dusty brown primary), forest-green-on-cream, AI-purple-on-white,\n navy-cream-with-orange-accent\n\nTEXT-ON-COLOR FILLS — pick by perceptual contrast, not just WCAG. The\nrule applies to ANY element where text sits on a saturated color fill:\nprimary buttons, accent buttons, badges, status pills, tag highlights,\nfilled callouts. Don't only think \"primary button\" — apply consistently.\n\nFor any saturated mid-luminance color (L between 0.42 and 0.78, chroma ≥\n0.08), use WHITE text (or near-white from your bg), not dark text — even\nif WCAG says dark technically passes. The Helmholtz-Kohlrausch effect\nmakes saturated colors appear brighter than their luminance suggests,\nand dark text on a warm-or-cool-saturated fill reads as muddy.\n\nConvention: saturated action fills in the wild, from fast-food reds to\nstatus pills to filled badges, near-universally carry white text.\n\nDark text is correct only on PALE fills (L > 0.85) or PURE-NEUTRAL fills\n(chroma near 0). Everything else: white text.\n\nReturn your composed palette in CSS custom properties using OKLCH, then\nbuild with it. The seed is the start, not the recipe.\n",
"stderr": "",
"exit": 0,
"signal": null,
"files": {}
}