v0.3 Phase 1: palette amendment to color.adobe.com primaries
Third palette iteration. Source: Jake's color.adobe.com primaries
attached to the Phase 1 review reply 2026-05-15:
#FF0700 red -> --color-danger
#000AFF blue -> --color-info
#00FF56 green -> --color-success
#FFCD00 yellow -> --color-caution
Each primary is used literally where it clears WCAG AA on the
relevant background. Where it does not, a text-safe sibling at the
same hue and saturation is derived.
LIGHT MODE on cream paper
--info #000AFF Jake literal 7.96 AAA
--danger #E60600 sibling 4.51 AA
--success #00852D sibling 4.51 AA
--caution #FFCD00 Jake literal 1.42 (fill-only by convention)
DARK MODE on lifted Coffee Bean #2A1620
--info #7076FF lifted from blue 4.64 AA
--danger #FF2A24 lifted from red 4.54 AA
--success #00FF56 Jake literal 12.51 AAA
--caution #FFCD00 Jake literal 11.33 AAA
HIGH CONTRAST on black, S=80% L=70%
--info #757AF0 5.80 AA
--danger #F07975 7.70 AAA
--success #75F09F 14.72 AAA
--caution #F0D875 14.78 AAA
Caution remains a fill-only convention on cream. Any darkened yellow
reads as olive or mustard, which Jake refused at the round-2 stage
(see capture 2026-05-15-re-lumotia-v03-renders-revised-palette-).
No component changes. No behavioural changes. Phase 1 still inert
without html[data-design="quietware"]. Supersedes the cobalt-pegged
square palette in commit f718ade. Geometry geometry argument retired;
canonical brand primaries take its place.
Plan doc updated with the new palette tables and the round-3
refinement reference. Phase 1 log notes the three-iteration journey.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -14,27 +14,25 @@
|
||||
attribute through +layout.svelte automatically.
|
||||
|
||||
--------------------------------------------------------------
|
||||
Palette geometry: strict 90-degree square colour harmony,
|
||||
pegged at cobalt blue #0047AB.
|
||||
Palette source — Jake's color.adobe.com primaries, locked 2026-05-15:
|
||||
|
||||
Hue spacing fixed at 90 degrees from cobalt:
|
||||
--info 215deg (cobalt blue, the peg)
|
||||
--danger 305deg (magenta-pink)
|
||||
--caution 35deg (orange-amber)
|
||||
--success 125deg (yellow-green)
|
||||
#FF0700 red (--danger)
|
||||
#000AFF blue (--info)
|
||||
#00FF56 green (--success)
|
||||
#FFCD00 yellow (--caution)
|
||||
|
||||
Saturation locked at 100%. Lightness adjusted per role to clear
|
||||
WCAG AA 4.5:1 on the relevant background. Yellow and green are
|
||||
perceptually brighter than blue and magenta at the same numeric L,
|
||||
so caution and success use slightly darker L values in light mode.
|
||||
This is perceptual-lightness compensation, not a break from the
|
||||
square geometry.
|
||||
Each primary is used literally where it clears WCAG AA on the
|
||||
relevant background. Where it does not (typically yellow and green
|
||||
on cream paper, blue on dark Coffee Bean) a text-safe sibling at
|
||||
the same hue and saturation is derived by adjusting lightness
|
||||
until 4.5:1 clears.
|
||||
|
||||
Caution stays a fill-only role on cream paper. Bright caution
|
||||
tones fail 4.5:1 as text on cream regardless of lightness.
|
||||
Pill backgrounds, dots, left-border accents and icons take
|
||||
--color-caution. Foreground text inside caution-coloured pills
|
||||
stays --color-text.
|
||||
Caution stays a fill-only role on cream paper. Any darkened yellow
|
||||
reads as olive or mustard ("looks like poop", per Jake), which we
|
||||
refuse to ship. Pill backgrounds, dots, left-border accents and
|
||||
icons take --color-caution. Foreground text inside caution-coloured
|
||||
pills stays --color-text. This matches Material, GOV.UK and IBM
|
||||
Carbon practice.
|
||||
|
||||
Typography stack (V4 pairing, locked 2026-05-15):
|
||||
Work Sans -> body, UI, controls, headers
|
||||
@@ -72,8 +70,8 @@
|
||||
|
||||
/* ============================================================
|
||||
Quietware — dark mode default.
|
||||
Lifted Coffee Bean base. Square-harmony hues, L lifted for AA
|
||||
on the dark surface.
|
||||
Lifted Coffee Bean base. Jake's primaries used directly where
|
||||
they clear AA on the dark surface; lifted siblings for the rest.
|
||||
============================================================ */
|
||||
:root[data-design="quietware"] {
|
||||
--color-bg: #2A1620;
|
||||
@@ -87,11 +85,13 @@
|
||||
--color-text-secondary: #BDB6A9;
|
||||
--color-text-tertiary: #8D8577;
|
||||
|
||||
--color-info: #247FFF;
|
||||
--color-danger: #EC00D8;
|
||||
--color-caution: #C07000;
|
||||
/* --info and --danger lifted from primaries; pure red/blue too dark on dark bg. */
|
||||
--color-info: #7076FF; /* lifted from #000AFF, 4.64 AA */
|
||||
--color-danger: #FF2A24; /* lifted from #FF0700, 4.54 AA */
|
||||
/* --success and --caution use Jake's primaries directly; both already AAA on dark bg. */
|
||||
--color-success: #00FF56; /* Jake literal, 12.51 AAA */
|
||||
--color-caution: #FFCD00; /* Jake literal, 11.33 AAA */
|
||||
--color-warning: var(--color-caution);
|
||||
--color-success: #00AB0E;
|
||||
|
||||
--color-sidebar: #1F0F18;
|
||||
--color-nav-active: #3E2A33;
|
||||
@@ -109,9 +109,10 @@
|
||||
|
||||
/* ============================================================
|
||||
Quietware — light mode.
|
||||
Cream paper base. Cobalt blue #0047AB appears literally as --info.
|
||||
Other three roles share cobalt's hue offsets (90 / 180 / 270 deg)
|
||||
with L adjusted per role to clear WCAG AA 4.5:1 on cream.
|
||||
Cream paper base. Jake's blue passes AAA on cream as text and is
|
||||
used literally. The other three roles use text-safe siblings
|
||||
derived at the same hue and saturation (lightness shifted for AA).
|
||||
Caution is fill-only on cream by convention.
|
||||
============================================================ */
|
||||
:root[data-design="quietware"][data-theme="light"] {
|
||||
--color-bg: #FBF8F2;
|
||||
@@ -125,11 +126,12 @@
|
||||
--color-text-secondary: #5E574C;
|
||||
--color-text-tertiary: #74685B;
|
||||
|
||||
--color-info: #0047AB; /* cobalt peg, 215deg, AAA on cream */
|
||||
--color-danger: #AB009C; /* 305deg, AA on cream */
|
||||
--color-caution: #A76200; /* 35deg, AA on cream */
|
||||
--color-info: #000AFF; /* Jake literal, 7.96 AAA on cream */
|
||||
--color-danger: #E60600; /* text-safe derived from #FF0700, 4.51 AA */
|
||||
--color-success: #00852D; /* text-safe derived from #00FF56, 4.51 AA */
|
||||
/* Caution is FILL ONLY on cream. Text inside caution pills uses --color-text. */
|
||||
--color-caution: #FFCD00; /* Jake literal, fill-only by convention */
|
||||
--color-warning: var(--color-caution);
|
||||
--color-success: #00850B; /* 125deg, AA on cream */
|
||||
|
||||
--color-sidebar: #F3EEE6;
|
||||
--color-nav-active: #E8E2D6;
|
||||
@@ -142,8 +144,9 @@
|
||||
|
||||
/* ============================================================
|
||||
Quietware — high-contrast mode.
|
||||
Brand chroma steps aside. S=80%, L=70%. Zero texture.
|
||||
Same four hues retained so role recognition does not flip.
|
||||
Same four hues retained so role recognition does not flip between
|
||||
modes. Saturation 80%, lightness 70%. Zero texture, no translucent
|
||||
overlays.
|
||||
============================================================ */
|
||||
:root[data-design="quietware"][data-contrast="high"] {
|
||||
--color-bg: #000000;
|
||||
@@ -157,11 +160,11 @@
|
||||
--color-text-secondary: #DADADA;
|
||||
--color-text-tertiary: #C8C8C8;
|
||||
|
||||
--color-info: #75A8F0;
|
||||
--color-danger: #F075E5;
|
||||
--color-caution: #F0BD75;
|
||||
--color-info: #757AF0; /* 5.80 AA on black */
|
||||
--color-danger: #F07975; /* 7.70 AAA on black */
|
||||
--color-success: #75F09F; /* 14.72 AAA on black */
|
||||
--color-caution: #F0D875; /* 14.78 AAA on black */
|
||||
--color-warning: var(--color-caution);
|
||||
--color-success: #75F080;
|
||||
|
||||
--color-sidebar: #000000;
|
||||
--color-nav-active: #1A1A1A;
|
||||
|
||||
Reference in New Issue
Block a user