mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Rebalance theme palette — Linen → cool slate · Studio → cool grey
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) <noreply@anthropic.com>
This commit is contained in:
Youssef
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
ceea50279f
commit
9aa09f1d60
@@ -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.
|
||||
|
||||
---
|
||||
|
||||
+32
-24
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user