From 9aa09f1d6006c3c01acd2e4c68eaf4ae4cee7526 Mon Sep 17 00:00:00 2001 From: Youssef Date: Thu, 30 Apr 2026 15:01:18 +0100 Subject: [PATCH] =?UTF-8?q?Rebalance=20theme=20palette=20=E2=80=94=20Linen?= =?UTF-8?q?=20=E2=86=92=20cool=20slate=20=C2=B7=20Studio=20=E2=86=92=20coo?= =?UTF-8?q?l=20grey?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Seven of Hallmark's 16 themes had warm-cream paper (Specimen, Atelier, Newsprint, Salon, Linen, Studio, Riso). Switching themes felt monochromatic — too many cards from the same hue band. Two converted: ## Linen — warm linen-yellow → cool slate - paper: oklch(89% 0.022 95) → oklch(91% 0.012 220) (cool, slightly cooler L) - accent: oklch(46% 0.06 95) → oklch(40% 0.12 232) (steel-blue, more chroma) - ink: tinted toward the cool side at hue 215-220 - Display still IBM Plex Sans (geometric-sans is Linen's identity) - Same fabric voice, different dye. Sits at the calm cool-paper end. ## Studio — warm cream-yellow → cool grey - paper: oklch(96.5% 0.014 95) → oklch(96.5% 0.005 200) (cool grey, very subtle) - ink: tinted toward hue 205 (cool) - Forest-green accent KEPT (oklch 46% 0.140 145) — Studio's identity. The pairing of cool-grey paper + green accent reads as a research studio rather than a warm-bohemian-studio. - Italic Fraunces display KEPT — typographic identity unchanged. - Card shadow hue updated from warm 100 to cool 205. ## Result Theme palette now spread across: - Warm: Specimen, Atelier, Newsprint, Salon, Riso - Cool: Linen, Studio, Garden, Almanac, Pastel, Sport - Neutral: Brutal, Quiet - Dark: Midnight, Terminal, Manifesto No single hue band dominates the cycle. Co-Authored-By: Claude Opus 4.7 (1M context) --- README.md | 2 +- site/css/tokens.css | 56 ++++++++++++++++++++++++++------------------- 2 files changed, 33 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 5affeca..352fc07 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ The differentiator: Hallmark insists on **structural variety**, not just visual - **[`SKILL.md`](skill/SKILL.md)** — the routing file. Design flow (six steps, including `Step 2.5 · Check project memory` reading `.hallmark/log.json`), slop test (35 questions), output contract. - **[`references/`](skill/references/)** — sixteen short, opinionated rule files: typography, colour, layout, motion, microinteractions, interaction-and-states, responsive, copy, anti-patterns, the 21 named macrostructures, the 36 component archetypes with variation knobs, the 6 primitive structure axes, the vision-extraction protocol for `study`, and three new files for hero work — `hero-enrichment.md` (when to add visuals to a hero, plus eight enrichment archetypes), `custom-craft.md` (how to hand-build CSS art, SVG, declarative animation, JS-driven motion, with Lottie demoted to last resort), and `assets.md` (sourcing canon for icons, brand logos, generated illustration via Nanobanana / Recraft, library illustration, app mockups, hero video, photography, abstract backgrounds). -- **[`site/`](site/)** — a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. **Sixteen themes** — Specimen, Newsprint, Atelier, Garden, Salon, Linen, Almanac, Midnight, Terminal, Brutal, Manifesto, Sport, Studio, Pastel, Riso, **Quiet** — that swap not just colour and typography but the page's hero archetype and footer archetype. Switching themes literally rebuilds the page. The "07 · Examples" section ships with **eight** generation tests (under [`site/_tests/`](site/_tests/)) — each a self-contained HTML + CSS demo of the skill, with a real visual thumbnail on the gallery card. +- **[`site/`](site/)** — a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. **Sixteen themes** — Specimen, Newsprint, Atelier, Garden, Salon, Linen, Almanac, Midnight, Terminal, Brutal, Manifesto, Sport, Studio, Pastel, Riso, **Quiet** — that swap not just colour and typography but the page's hero archetype and footer archetype. Switching themes literally rebuilds the page. The palette is deliberately balanced across the warm / cool / neutral spectrum: warm-paper themes (Specimen, Atelier, Newsprint, Salon, Riso), cool-paper themes (Linen-cool-slate, Studio-cool-grey, Garden, Almanac, Pastel, Sport), neutral-paper (Brutal, Quiet), and three dark themes (Midnight, Terminal, Manifesto) — no single hue band dominates. The "07 · Examples" section ships with **eight** generation tests (under [`site/_tests/`](site/_tests/)) — each a self-contained HTML + CSS demo of the skill, with a real visual thumbnail on the gallery card. - **[`ROADMAP.md`](ROADMAP.md)** — Tier 1, 2, 3 work plus an explicit "things to *not* do" list. --- diff --git a/site/css/tokens.css b/site/css/tokens.css index ccaf973..2b9d31d 100644 --- a/site/css/tokens.css +++ b/site/css/tokens.css @@ -482,23 +482,27 @@ } /* ────────────────────────────────────────────────────────────── - LINEN — desaturated linen-beige · LIGHT GEOMETRIC SANS display - Sans-serif display is the key differentiator from Specimen / Atelier / Salon + LINEN — cool slate-grey paper · LIGHT GEOMETRIC SANS display + Repalleted from warm linen-yellow to cool slate-grey for theme variety — + the gallery had too many cream-paper themes (Specimen, Atelier, Newsprint, + Salon, Studio, Riso). Linen now sits on the cool side: low-chroma paper + at hue 220, steel-blue accent. Same fabric voice, different dye. + Sans-serif display is the key differentiator from Specimen / Atelier / Salon. ────────────────────────────────────────────────────────────── */ [data-theme="linen"] { - --color-paper: oklch(89% 0.022 95); - --color-paper-2: oklch(86% 0.026 95); - --color-paper-3: oklch(82% 0.030 95); - --color-rule: oklch(72% 0.022 95); - --color-rule-2: oklch(58% 0.024 95); - --color-muted: oklch(46% 0.020 90); - --color-neutral: oklch(34% 0.022 90); - --color-ink-2: oklch(28% 0.024 90); - --color-ink: oklch(22% 0.025 90); - --color-accent: oklch(46% 0.06 95); - --color-accent-ink: oklch(50% 0.07 95); - --color-focus: oklch(50% 0.10 100); + --color-paper: oklch(91% 0.012 220); + --color-paper-2: oklch(88% 0.014 220); + --color-paper-3: oklch(83% 0.016 215); + --color-rule: oklch(74% 0.014 215); + --color-rule-2: oklch(56% 0.020 215); + --color-muted: oklch(46% 0.020 215); + --color-neutral: oklch(34% 0.024 215); + --color-ink-2: oklch(26% 0.026 215); + --color-ink: oklch(18% 0.028 220); + --color-accent: oklch(40% 0.12 232); + --color-accent-ink: oklch(46% 0.14 232); + --color-focus: oklch(50% 0.16 232); --font-display: "IBM Plex Sans", "Hanken Grotesk", ui-sans-serif, sans-serif; --font-body: "IBM Plex Sans", "Hanken Grotesk", ui-sans-serif, sans-serif; @@ -638,18 +642,22 @@ studio portfolios in 2026. Forest-green accent — uncommon, distinctive. Fraunces is a variable serif with conventional italic letterforms; used here at high optical size + soft axis for the editorial agency feel. + Repalleted: paper shifts from warm-cream to cool-grey (hue 200, very low + chroma) so Studio's italic-Fraunces + forest-green accent reads against + a calm, scientific surface — like a research-studio rather than a + warm-bohemian-studio. The green accent is the identity, not the paper. ────────────────────────────────────────────────────────────── */ [data-theme="studio"] { - --color-paper: oklch(96.5% 0.014 95); - --color-paper-2: oklch(94% 0.016 95); - --color-paper-3: oklch(90% 0.018 95); - --color-rule: oklch(82% 0.012 90); - --color-rule-2: oklch(70% 0.010 90); - --color-muted: oklch(48% 0.010 95); - --color-neutral: oklch(34% 0.014 100); - --color-ink-2: oklch(22% 0.018 100); - --color-ink: oklch(13% 0.020 100); + --color-paper: oklch(96.5% 0.005 200); + --color-paper-2: oklch(93.5% 0.007 200); + --color-paper-3: oklch(89% 0.010 200); + --color-rule: oklch(82% 0.008 200); + --color-rule-2: oklch(68% 0.010 200); + --color-muted: oklch(48% 0.012 205); + --color-neutral: oklch(34% 0.016 205); + --color-ink-2: oklch(22% 0.020 205); + --color-ink: oklch(13% 0.024 205); --color-accent: oklch(46% 0.140 145); --color-accent-ink: oklch(46% 0.140 145); --color-focus: oklch(46% 0.140 145); @@ -828,7 +836,7 @@ [data-theme="manifesto"] { --rule-card: 2px; } [data-theme="sport"] { --rule-card: 1.5px; } [data-theme="garden"] { --radius-card: 6px; --radius-pill: 4px; } -[data-theme="studio"] { --radius-card: 6px; --radius-pill: 4px; --shadow-card: 0 1px 2px oklch(20% 0.012 100 / 0.04); } +[data-theme="studio"] { --radius-card: 6px; --radius-pill: 4px; --shadow-card: 0 1px 2px oklch(20% 0.014 205 / 0.05); } [data-theme="pastel"] { --radius-card: 12px; --radius-pill: 999px; --radius-input: 8px; --shadow-card: 0 8px 24px -10px oklch(50% 0.13 282 / 0.14); } [data-theme="riso"] { --radius-card: 2px; --radius-pill: 2px; }