From 6881aa800adbaf87d2663f2b575c04e773a1c4e8 Mon Sep 17 00:00:00 2001 From: Jake Date: Fri, 15 May 2026 21:18:43 +0100 Subject: [PATCH] =?UTF-8?q?v0.3=20Phase=204l:=20semantic=20palette=20revis?= =?UTF-8?q?ion=20=E2=80=94=20Tiger=20Flame=20/=20Banana=20Cream=20/=20Sea?= =?UTF-8?q?=20Green=20/=20Steel=20Azure?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Wren palette pass on 2026/05/15. Splits the role tokens away from the prior bright/neon set toward a more grounded warm-and-cool quartet, with explicit FILL + TEXT (signal + ink) pairs in light mode so AA-on-cream stays cheap to consume. Dark mode signals --color-info-signal #6EA8FF → #064789 Steel Azure --color-danger-signal #FF5A52 → #F26430 Tiger Flame --color-success-signal #00FF56 → #519872 Sea Green --color-caution-signal #FFCD00 → #FCEC52 Banana Cream Light mode (FILL = signal, TEXT = ink) --color-info-signal #000AFF → #217AD5 +ink #1F73C9 --color-danger-signal #FF0700 → #D55121 +ink #C54B1F --color-success-signal #00D94A → #21D575 +ink #148348 --color-caution-signal #FFCD00 → #D5A021 +ink #7E7414 Unchanged on purpose --color-bg Coffee Bean #1F0812 was tried live and rejected — R/G/B channels (31/8/18) read as aubergine, not brown. Bg + grain held at #12100E / 0.06 pending a true warm-brown candidate. --color-*-border Hue family unchanged from Phase 4j. --color-*-bg Hand-tuned surface tints unchanged. HC variants Out of scope for this pass. Known issue Steel Azure #064789 on the dark bg sits around 2.06:1 — fails AA as text/icon. The role-token model has --color-info-ink (currently #9CC6FF, light blue) for that use case, but consumers reaching for --color-info-signal directly will read muddy. Retune of the info ink/signal split is owed separately. Documented inline. npm run check: 0 errors. --- src/design-system/v0.3-quietware-tokens.css | 50 ++++++++++++++------- 1 file changed, 33 insertions(+), 17 deletions(-) diff --git a/src/design-system/v0.3-quietware-tokens.css b/src/design-system/v0.3-quietware-tokens.css index 171a12b..2dd93ca 100644 --- a/src/design-system/v0.3-quietware-tokens.css +++ b/src/design-system/v0.3-quietware-tokens.css @@ -186,6 +186,16 @@ Quietware — dark mode default. Warm brown-charcoal atmosphere. ============================================================ */ :root[data-design="quietware"] { + /* Phase 4l — Wren palette revision, 2026/05/15. Role signals + swapped to Tiger Flame / Banana Cream / Sea Green / Steel Azure + (dark) and the FILL/TEXT pair set (light). Coffee Bean bg + candidate #1F0812 was tested live and rejected — its R/G/B + channels (31/8/18) sit on a purple-leaning hue, reading as + aubergine in the running window, not the labelled warm brown. + Bg + grain held at the prior values pending a true coffee-brown + candidate. Steel Azure contrast on dark fails AA (see notice on + --color-info-signal below) regardless of bg choice — retune of + the info ink/signal split is owed separately. */ --color-bg: #12100E; --color-bg-elevated: #1A1713; --color-bg-card: #211D18; @@ -207,25 +217,28 @@ --color-accent-subtle: color-mix(in srgb, var(--blue-700) 12%, transparent); --color-accent-glow: color-mix(in srgb, var(--blue-700) 25%, transparent); - /* Four-tier role tokens. Signal stays bright (the role's identity); - ink lightens for text legibility on dark; border is a middle value; - bg is a hand-tuned dark tint, not a color-mix derivation. */ - --color-info-signal: #6EA8FF; + /* Four-tier role tokens. Signal carries the role's identity + (Tiger Flame / Banana Cream / Sea Green / Steel Azure under + Phase 4l); ink lightens for text legibility on dark; border is + a middle value; bg is a hand-tuned dark tint, not a color-mix. + Borders + bg tints retained from Phase 4j — they go with the + hue family rather than the specific shade. */ + --color-info-signal: #064789; --color-info-ink: #9CC6FF; --color-info-border: #4D8DFF; --color-info-bg: #101A2A; - --color-danger-signal: #FF5A52; + --color-danger-signal: #F26430; --color-danger-ink: #FF9B96; --color-danger-border: #FF5A52; --color-danger-bg: #2A1412; - --color-success-signal: #00FF56; + --color-success-signal: #519872; --color-success-ink: #7DFFA8; --color-success-border: #00D94A; --color-success-bg: #0D2415; - --color-caution-signal: #FFCD00; + --color-caution-signal: #FCEC52; --color-caution-ink: #FFE066; --color-caution-border: #FFCD00; --color-caution-bg: #29210A; @@ -419,25 +432,28 @@ --color-accent-subtle: color-mix(in srgb, var(--blue-700) 12%, transparent); --color-accent-glow: color-mix(in srgb, var(--blue-700) 25%, transparent); - /* Four-tier role tokens, light mode. Bg values hand-picked as - clean pale tints, not muddy color-mix products. */ - --color-info-signal: #000AFF; - --color-info-ink: #0033A0; + /* Four-tier role tokens, light mode. Phase 4l — Wren palette + revision 2026/05/15. Signal = FILL (vivid), ink = TEXT-safe + darker sibling that passes 4.5:1 on cream. Saturation/lightness + targeted on the locked Banana Cream anchor #D5A021 (S 73%, L 48%). + Borders + bg tints unchanged — they go with the hue family. */ + --color-info-signal: #217AD5; + --color-info-ink: #1F73C9; --color-info-border: #3A6BFF; --color-info-bg: #EEF3FF; - --color-danger-signal: #FF0700; - --color-danger-ink: #B3261E; + --color-danger-signal: #D55121; + --color-danger-ink: #C54B1F; --color-danger-border: #E13A32; --color-danger-bg: #FFF0EF; - --color-success-signal: #00D94A; - --color-success-ink: #006B2D; + --color-success-signal: #21D575; + --color-success-ink: #148348; --color-success-border: #159947; --color-success-bg: #EAF8EE; - --color-caution-signal: #FFCD00; - --color-caution-ink: #7A5D00; + --color-caution-signal: #D5A021; + --color-caution-ink: #7E7414; --color-caution-border: #D9A900; --color-caution-bg: #FFF7D6;