mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Catalog · drop Pastel theme (23 → 22) · centre Plume hero
Pastel removal:
- skill/SKILL.md — theme list, five count refs, four example refs
(rotation log, preview block, diversification text, display-style
cluster).
- skill/references/ — structure.md (table row), component-cookbook.md
(modern-minimal nav routing), custom-theme.md (theme list + count;
also fixes 55 → 65 gate-count drift), study.md (DNA-match row),
copy.md (×2 sample copy → Plume), macrostructures.md (Letter
sample), hero-enrichment.md (stamp example → Linen), playful.md
(Plume becomes the canonical playful theme).
- site/js/main.js — THEME_NAMES, ARCHETYPES, THEME_GENRES, COPY
block; "twenty-three" → "twenty-two"; almanac letterBody updated
("23 themes, 55 slop-test gates" → "22 themes, 65 slop-test
gates" — also catches the gate-count drift).
- site/index.html — delete Pastel button; renumber Riso through
Editorial (15 → 14 ... 23 → 22).
- site/css/tokens.css — delete Pastel theme block + its per-theme
radius override; update "soft themes" + Plume neighbour comments.
- site/css/components.css — delete two Pastel blocks (banner pill +
big component overrides); update stale "Pastel post-Linear-soft"
comment; "23 themes" → "22 themes".
- site/css/sections.css — delete Pastel skill-row + brief-output.
- README — "twenty-three" → "twenty-two"; theme list drops Pastel.
Plume hero centring:
- Delete the [data-theme="plume"] .hero__bloom-stage::after feather
glyph.
- Add a Plume-only override that hides .hero__bloom-stage entirely
and recasts .hero--bloom as a single centred column with text +
CTA + eyebrow + proof centred. Hero only — the rest of the Plume
page keeps its asymmetric rhythm.
Verified the demo site loads on a static server (HTTP 200 on
index.html + all CSS + JS), main.js parses with node --check, and
the theme dropdown now has 22 buttons.
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
a6a157e520
commit
32c02f1775
@@ -2,7 +2,7 @@
|
||||
|
||||
**A design skill for Claude Code, Cursor, and Codex that refuses to look AI-generated.**
|
||||
|
||||
[Live demo →](https://hallmark-murex.vercel.app) · twenty-three themes · four verbs · press `T` to cycle.
|
||||
[Live demo →](https://hallmark-murex.vercel.app) · twenty-two themes · four verbs · press `T` to cycle.
|
||||
|
||||
Powered by Together AI.
|
||||
|
||||
@@ -10,7 +10,7 @@ Powered by Together AI.
|
||||
<img src="site/OG-hallmark.png" alt="Hallmark — A design skill that refuses to look AI-generated" />
|
||||
</p>
|
||||
|
||||
Hallmark encodes the anti-AI-slop consensus — typography, colour, layout, motion, microinteractions, structural variety — into one opinionated rule-set. It picks a macrostructure for the brief, dresses it in one of twenty-three themes, runs sixty-five slop-test gates plus a pre-emit self-critique before handing back, and refuses the on-distribution defaults every LLM was trained into.
|
||||
Hallmark encodes the anti-AI-slop consensus — typography, colour, layout, motion, microinteractions, structural variety — into one opinionated rule-set. It picks a macrostructure for the brief, dresses it in one of twenty-two themes, runs sixty-five slop-test gates plus a pre-emit self-critique before handing back, and refuses the on-distribution defaults every LLM was trained into.
|
||||
|
||||
> **v1.0.0** — pre-emit critique on six axes, honest-copy enforcement, locked-token discipline, re-drawn-chrome ban, and a no-wrap rule for clickable text. Five new slop-test gates (56–60). The full rule-set lives in [`skill/SKILL.md`](skill/SKILL.md) and [`skill/references/`](skill/references/).
|
||||
|
||||
@@ -93,7 +93,7 @@ Each page is its own self-contained HTML + CSS — no shared theme, no shared la
|
||||
- **[`SKILL.md`](skill/SKILL.md)** — the routing file. Six-step design flow (including `Step 2.5 · Check project memory` reading `.hallmark/log.json`), 65-gate slop test, output contract, always-on `tokens.css` export.
|
||||
- **[`references/`](skill/references/)** — short, opinionated rule files: typography, colour, layout, motion, microinteractions, interaction-and-states (with the input-state checklist), responsive, copy, anti-patterns, the 21 named macrostructures, the **40 component archetypes** with variation knobs (9 hero · 6 feature · 4 CTA · 4 testimonial · **8 footer · 9 nav**), the **4 hero polish patterns** (in `hero-enrichment.md`), the 6 primitive structure axes, the vision-extraction protocol for `study`, hero enrichment, custom-craft (CSS art over Lottie), assets, the slop-test gates, four genre rule-overlays (each with nav + footer voice routing), per-verb dispatchers, and the export-formats reference (Tailwind / DTCG / shadcn / tokens.css).
|
||||
- **[`docs/`](docs/)** — human-reading content: **[`recipes.md`](docs/recipes.md)** (8 worked briefs + a canonical try-it prompt) and **[`study-examples.md`](docs/study-examples.md)** (3 worked DNA-extractions). Not auto-loaded by the skill.
|
||||
- **[`site/`](site/)** — a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. **Twenty-three themes** clustered into four genres: **editorial** (Specimen, Editorial, Atelier, Newsprint, Salon, Linen, Almanac, Garden, Studio, Sport, Riso, Brutal, Manifesto), **modern-minimal** (Quiet, Coral, Violet), **atmospheric** (Midnight, Terminal, Bloom, Aurora, Halo), **playful** (Pastel, Plume). Switching themes literally rebuilds the page — different hero archetype, different footer archetype, different nav archetype.
|
||||
- **[`site/`](site/)** — a self-demonstrating landing page. Hand-written HTML + CSS + ES module, no framework, no build step. **Twenty-two themes** clustered into four genres: **editorial** (Specimen, Editorial, Atelier, Newsprint, Salon, Linen, Almanac, Garden, Studio, Sport, Riso, Brutal, Manifesto), **modern-minimal** (Quiet, Coral, Violet), **atmospheric** (Midnight, Terminal, Bloom, Aurora, Halo), **playful** (Plume). Switching themes literally rebuilds the page — different hero archetype, different footer archetype, different nav archetype.
|
||||
|
||||
---
|
||||
|
||||
|
||||
+26
-77
@@ -349,7 +349,7 @@
|
||||
|
||||
/* — Banner pill per-theme shape + voice ————————————————————————
|
||||
The banner is the only fixed surface that crosses every theme. If
|
||||
it stays the same shape on all 23 themes, the "switching themes
|
||||
it stays the same shape on all 22 themes, the "switching themes
|
||||
rebuilds the page" claim leaks. Per-theme shape (border-radius) and
|
||||
font choice push the banner into the theme's register too. */
|
||||
|
||||
@@ -439,11 +439,6 @@
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/* Pastel — softer shadow on the install pill. */
|
||||
[data-theme="pastel"] .banner__install {
|
||||
box-shadow: 0 1px 0 0 color-mix(in oklch, var(--color-rule) 60%, transparent);
|
||||
}
|
||||
|
||||
/* Theme-indicator extra cases — extend the existing uppercase group. */
|
||||
[data-theme="almanac"] .banner__theme-indicator,
|
||||
[data-theme="newsprint"] .banner__theme-indicator,
|
||||
@@ -2288,58 +2283,6 @@ body:not(.easter-open) > footer {
|
||||
}
|
||||
|
||||
|
||||
/* ───────────── PASTEL — Geist sans display, soft surfaces ───────────── */
|
||||
|
||||
[data-theme="pastel"] .hero__display,
|
||||
[data-theme="pastel"] .section__title,
|
||||
[data-theme="pastel"] .foot__wordmark,
|
||||
[data-theme="pastel"] .spec__name,
|
||||
[data-theme="pastel"] .tell__name,
|
||||
[data-theme="pastel"] .hero__quote p,
|
||||
[data-theme="pastel"] .hero__salutation,
|
||||
[data-theme="pastel"] .hero__qualifier {
|
||||
font-family: var(--font-display);
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
[data-theme="pastel"] .hero__display {
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
[data-theme="pastel"] .hero__stat {
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
[data-theme="pastel"] .hero__lede,
|
||||
[data-theme="pastel"] .hero__letter-body,
|
||||
[data-theme="pastel"] .spec__rule,
|
||||
[data-theme="pastel"] .tell__why,
|
||||
[data-theme="pastel"] .foot__tagline {
|
||||
font-family: var(--font-body);
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
[data-theme="pastel"] .banner__center {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/* Pastel uses a subtle indigo on accent — never as a flood. */
|
||||
[data-theme="pastel"] .hero__eyebrow .mark,
|
||||
[data-theme="pastel"] .opening__eyebrow .mark {
|
||||
background: var(--color-accent);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* ───────────── RISO — bold lowercase, off-register print ───────────── */
|
||||
|
||||
[data-theme="riso"] .hero__display,
|
||||
@@ -2914,23 +2857,6 @@ body:not(.easter-open) > footer {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/* Plume — feather glyph bottom-right of the bloom hero. Reinforces the
|
||||
"plume" name without being twee. SVG via mask, low opacity. */
|
||||
[data-theme="plume"] .hero__bloom-stage::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 4%;
|
||||
bottom: 8%;
|
||||
width: clamp(3rem, 5vw, 5rem);
|
||||
aspect-ratio: 1 / 3;
|
||||
background-color: var(--color-accent);
|
||||
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 72" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M12 4 C8 18 8 38 12 68"/><path d="M12 12 L6 16"/><path d="M12 18 L6 22"/><path d="M12 24 L6 28"/><path d="M12 30 L6 34"/><path d="M12 36 L6 40"/><path d="M12 42 L6 46"/><path d="M12 12 L18 16"/><path d="M12 18 L18 22"/><path d="M12 24 L18 28"/><path d="M12 30 L18 34"/><path d="M12 36 L18 40"/><path d="M12 42 L18 46"/></svg>') center/contain no-repeat;
|
||||
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 72" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M12 4 C8 18 8 38 12 68"/><path d="M12 12 L6 16"/><path d="M12 18 L6 22"/><path d="M12 24 L6 28"/><path d="M12 30 L6 34"/><path d="M12 36 L6 40"/><path d="M12 42 L6 46"/><path d="M12 12 L18 16"/><path d="M12 18 L18 22"/><path d="M12 24 L18 28"/><path d="M12 30 L18 34"/><path d="M12 36 L18 40"/><path d="M12 42 L18 46"/></svg>') center/contain no-repeat;
|
||||
opacity: 0.55;
|
||||
transform: rotate(8deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero__bloom-wash {
|
||||
position: absolute;
|
||||
inset: -8% -12% -8% -8%;
|
||||
@@ -3850,8 +3776,31 @@ html[data-theme="halo"] aside {
|
||||
|
||||
/* ───────────── PLUME — playful · warm cream + tinted bands ─────────────
|
||||
Alternating section backgrounds (paper vs paper-2), hover-lift on
|
||||
cards, soft drop shadows, friendly motion. Closer to actual playful
|
||||
than Pastel's post-Linear-soft. */
|
||||
cards, soft drop shadows, friendly motion — the playful canon. */
|
||||
|
||||
/* Hero only — drop the right-side bloom stage and centre the copy.
|
||||
The rest of the page keeps its asymmetric rhythm; only the hero
|
||||
reads as a centred lede. */
|
||||
[data-theme="plume"] .hero--bloom {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
padding-block: var(--space-3xl) var(--space-2xl);
|
||||
}
|
||||
[data-theme="plume"] .hero--bloom .hero__bloom-stage { display: none; }
|
||||
[data-theme="plume"] .hero--bloom .hero__copy {
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
[data-theme="plume"] .hero--bloom .hero__display,
|
||||
[data-theme="plume"] .hero--bloom .hero__lede {
|
||||
margin-inline: auto;
|
||||
}
|
||||
[data-theme="plume"] .hero--bloom .hero__cta-row,
|
||||
[data-theme="plume"] .hero--bloom .hero__eyebrow,
|
||||
[data-theme="plume"] .hero--bloom .hero__proof {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[data-theme="plume"] .page > .section:nth-child(even) {
|
||||
background: var(--color-paper-2);
|
||||
|
||||
@@ -635,7 +635,6 @@
|
||||
[data-theme="sport"] .skill-row__lede,
|
||||
[data-theme="almanac"] .skill-row__lede,
|
||||
[data-theme="studio"] .skill-row__lede,
|
||||
[data-theme="pastel"] .skill-row__lede,
|
||||
[data-theme="quiet"] .skill-row__lede,
|
||||
[data-theme="bloom"] .skill-row__lede,
|
||||
[data-theme="aurora"] .skill-row__lede,
|
||||
@@ -842,11 +841,6 @@
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 24px -10px color-mix(in oklch, var(--color-accent) 35%, transparent);
|
||||
}
|
||||
[data-theme="pastel"] .brief-output {
|
||||
border: 1px solid var(--color-rule);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 24px -16px oklch(20% 0.04 270 / 0.18);
|
||||
}
|
||||
[data-theme="plume"] .brief-output {
|
||||
border: 1px solid var(--color-rule);
|
||||
border-radius: 12px;
|
||||
|
||||
+6
-53
@@ -84,7 +84,7 @@
|
||||
editorial themes stay square (Specimen, Newsprint, Salon, Linen),
|
||||
technical themes stay square (Almanac, Midnight, Terminal),
|
||||
brutalist themes get heavier borders (Brutal, Manifesto),
|
||||
soft themes get rounded corners (Pastel, Garden, Studio, Quiet). */
|
||||
soft themes get rounded corners (Garden, Studio, Quiet, Plume). */
|
||||
--radius-card: 0; /* .code, .tell cards, .install__body */
|
||||
--radius-pill: 0; /* CTAs, dot indicators, badges */
|
||||
--radius-input: 0; /* form fields, single-line code blocks */
|
||||
@@ -683,51 +683,6 @@
|
||||
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────
|
||||
PASTEL — post-Linear soft tech · Geist sans, lavender paper
|
||||
Inspiration: Linear (2025-26), Resend, Cron, Raycast, Vercel light.
|
||||
The dev-tool aesthetic, but soft instead of stark.
|
||||
────────────────────────────────────────────────────────────── */
|
||||
|
||||
[data-theme="pastel"] {
|
||||
/* Cool near-white paper — distinguishes from Plume's warm cream.
|
||||
The "design-tool" register: cool ground, low-chroma indigo, soft
|
||||
surfaces. No more overlap with the warm-soft register. */
|
||||
--color-paper: oklch(98% 0.008 240);
|
||||
--color-paper-2: oklch(96% 0.010 240);
|
||||
--color-paper-3: oklch(93% 0.012 240);
|
||||
--color-rule: oklch(88% 0.012 240);
|
||||
--color-rule-2: oklch(76% 0.014 240);
|
||||
--color-muted: oklch(52% 0.018 250);
|
||||
--color-neutral: oklch(40% 0.022 255);
|
||||
--color-ink-2: oklch(28% 0.025 260);
|
||||
--color-ink: oklch(20% 0.028 265);
|
||||
--color-accent: oklch(54% 0.110 282); /* slightly lower chroma indigo */
|
||||
--color-accent-ink: oklch(98% 0.008 240);
|
||||
--color-focus: oklch(54% 0.110 282);
|
||||
|
||||
--font-display: "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-body: "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-serif: "Newsreader", ui-serif, Georgia, serif;
|
||||
--font-label: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
||||
--font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
|
||||
|
||||
--display-weight: 600;
|
||||
--display-style: normal;
|
||||
|
||||
--text-display: clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem);
|
||||
--text-display-s: clamp(2rem, 3vw + 1rem, 3.25rem);
|
||||
|
||||
--tracking-display: -0.035em;
|
||||
--tracking-tight: -0.012em;
|
||||
--tracking-label: 0.04em;
|
||||
|
||||
--lh-tight: 0.96;
|
||||
--section-gap: 6rem;
|
||||
--section-head-gap: 1.5rem;
|
||||
|
||||
}
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────
|
||||
RISO — risograph print · Public Sans display, off-register
|
||||
Inspiration: Are.na, e-flux, Frieze, indie magazine sites.
|
||||
@@ -1045,9 +1000,9 @@
|
||||
|
||||
/* ──────────────────────────────────────────────────────────────
|
||||
PLUME — playful · warm cream paper · tinted bands
|
||||
Closer to actual playful than Pastel. Warm cream throughout,
|
||||
alternating paper-2 bands on sections, hover-lift on cards, soft
|
||||
rose accent. The page wants to feel friendly without being twee.
|
||||
Warm cream throughout, alternating paper-2 bands on sections,
|
||||
hover-lift on cards, soft rose accent. The page wants to feel
|
||||
friendly without being twee.
|
||||
────────────────────────────────────────────────────────────── */
|
||||
|
||||
[data-theme="plume"] {
|
||||
@@ -1092,8 +1047,8 @@
|
||||
|
||||
The discipline: editorial / brutalist / technical themes stay
|
||||
square (the rule is the design); soft / modern themes get
|
||||
measured radius (Pastel 12 px is the most rounded — it's the
|
||||
post-Linear theme); brutalist / declarative themes get heavier
|
||||
measured radius (Plume 14 px is the most rounded — it's the
|
||||
playful theme); brutalist / declarative themes get heavier
|
||||
borders. Nothing is rounded "for fun".
|
||||
────────────────────────────────────────────────────────────── */
|
||||
|
||||
@@ -1102,8 +1057,6 @@
|
||||
[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.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; }
|
||||
[data-theme="quiet"] { --radius-card: 8px; --radius-pill: 999px; --radius-input: 8px; }
|
||||
[data-theme="bloom"] { --radius-card: 16px; --radius-pill: 999px; --radius-input: 12px;
|
||||
|
||||
+18
-21
@@ -128,36 +128,33 @@
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="studio" aria-label="13 — Studio"
|
||||
style="--dot: oklch(96.5% 0.014 95); --dot-edge: oklch(46% 0.140 145);"><span
|
||||
class="theme-dropdown__num">13</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="pastel" aria-label="14 — Pastel"
|
||||
style="--dot: oklch(98% 0.008 240); --dot-edge: oklch(54% 0.110 282);"><span
|
||||
class="theme-dropdown__num">14</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="riso" aria-label="15 — Riso"
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="riso" aria-label="14 — Riso"
|
||||
style="--dot: oklch(91% 0.034 30); --dot-edge: oklch(58% 0.170 220);"><span
|
||||
class="theme-dropdown__num">15</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="quiet" aria-label="16 — Quiet"
|
||||
class="theme-dropdown__num">14</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="quiet" aria-label="15 — Quiet"
|
||||
style="--dot: oklch(100% 0 0); --dot-edge: oklch(15% 0 0);"><span
|
||||
class="theme-dropdown__num">16</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="bloom" aria-label="17 — Bloom"
|
||||
class="theme-dropdown__num">15</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="bloom" aria-label="16 — Bloom"
|
||||
style="--dot: oklch(96% 0.018 35); --dot-edge: oklch(64% 0.180 18);"><span
|
||||
class="theme-dropdown__num">17</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="coral" aria-label="18 — Coral"
|
||||
class="theme-dropdown__num">16</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="coral" aria-label="17 — Coral"
|
||||
style="--dot: oklch(96.5% 0.005 50); --dot-edge: oklch(64% 0.165 28);"><span
|
||||
class="theme-dropdown__num">18</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="violet" aria-label="19 — Violet"
|
||||
class="theme-dropdown__num">17</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="violet" aria-label="18 — Violet"
|
||||
style="--dot: oklch(99% 0.003 280); --dot-edge: oklch(58% 0.16 285);"><span
|
||||
class="theme-dropdown__num">19</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="aurora" aria-label="20 — Aurora"
|
||||
class="theme-dropdown__num">18</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="aurora" aria-label="19 — Aurora"
|
||||
style="--dot: oklch(11% 0.025 200); --dot-edge: oklch(72% 0.170 200);"><span
|
||||
class="theme-dropdown__num">20</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="halo" aria-label="21 — Halo"
|
||||
class="theme-dropdown__num">19</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="halo" aria-label="20 — Halo"
|
||||
style="--dot: oklch(13% 0.005 60); --dot-edge: oklch(74% 0.16 70);"><span
|
||||
class="theme-dropdown__num">21</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="plume" aria-label="22 — Plume"
|
||||
class="theme-dropdown__num">20</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="plume" aria-label="21 — Plume"
|
||||
style="--dot: oklch(96% 0.020 70); --dot-edge: oklch(68% 0.130 18);"><span
|
||||
class="theme-dropdown__num">22</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="editorial" aria-label="23 — Editorial"
|
||||
class="theme-dropdown__num">21</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="editorial" aria-label="22 — Editorial"
|
||||
style="--dot: oklch(94% 0.020 75); --dot-edge: oklch(60% 0.160 35);"><span
|
||||
class="theme-dropdown__num">23</span></button>
|
||||
class="theme-dropdown__num">22</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
+3
-27
@@ -53,7 +53,6 @@ const THEMES = {
|
||||
almanac: "Almanac",
|
||||
sport: "Sport",
|
||||
studio: "Studio",
|
||||
pastel: "Pastel",
|
||||
riso: "Riso",
|
||||
quiet: "Quiet",
|
||||
bloom: "Bloom",
|
||||
@@ -84,7 +83,6 @@ const ARCHETYPES = {
|
||||
manifesto: { hero: "marquee", footer: "colophon" },
|
||||
sport: { hero: "stat-led", footer: "colophon" },
|
||||
studio: { hero: "letter", footer: "colophon" },
|
||||
pastel: { hero: "bloom", footer: "colophon" },
|
||||
riso: { hero: "quote-led", footer: "colophon" },
|
||||
quiet: { hero: "split", footer: "colophon" },
|
||||
bloom: { hero: "marquee", footer: "colophon" },
|
||||
@@ -124,8 +122,7 @@ const THEME_GENRES = {
|
||||
terminal: "atmospheric",
|
||||
aurora: "atmospheric",
|
||||
halo: "atmospheric",
|
||||
// playful — post-Linear soft school (2 themes)
|
||||
pastel: "playful",
|
||||
// playful — post-Linear soft school (1 theme)
|
||||
plume: "playful",
|
||||
// editorial — open-design-inspired premium (added v1.0.0)
|
||||
editorial: "editorial",
|
||||
@@ -134,7 +131,7 @@ const THEME_GENRES = {
|
||||
/* — Locked hero title —————————————————————————————————
|
||||
The H1 string is the same across every theme. Only the visual
|
||||
treatment swaps — italic vs roman, serif vs sans, all-caps vs not.
|
||||
The page is the demo: one sentence, twenty-three distinct designs. */
|
||||
The page is the demo: one sentence, twenty-two distinct designs. */
|
||||
const HERO_TITLE = "A design skill that refuses to look AI-generated.";
|
||||
|
||||
/* — Per-theme copy fixtures —————————————————————————————
|
||||
@@ -277,7 +274,7 @@ const COPY = {
|
||||
quote: "An almanac is a book that knows where to look.",
|
||||
attrib: "Almanac, frontispiece",
|
||||
salutation: "Reference note,",
|
||||
letterBody: "This page is a reference, not an argument. The numbers are the point: 21 macrostructures, 40 archetypes, 23 themes, 55 slop-test gates. Cross-referenced so the next page Hallmark builds is genuinely different from the last.",
|
||||
letterBody: "This page is a reference, not an argument. The numbers are the point: 21 macrostructures, 40 archetypes, 22 themes, 65 slop-test gates. Cross-referenced so the next page Hallmark builds is genuinely different from the last.",
|
||||
signoff: "— editor",
|
||||
captionA: "Vol. III",
|
||||
captionB: "Plate 12",
|
||||
@@ -402,27 +399,6 @@ const COPY = {
|
||||
captionA: "Studio · 2026",
|
||||
captionB: "Selected work",
|
||||
},
|
||||
pastel: {
|
||||
eyebrow: "v0.4 · post-Linear soft",
|
||||
title: HERO_TITLE,
|
||||
lede: "A design skill that prefers soft surfaces and exact rules. Buttery paper. Slate ink. One indigo accent at low chroma — never a gradient.",
|
||||
ctaLabel: "Open it",
|
||||
proofLabel: "What it does",
|
||||
proofA: "OKLCH-anchored palettes",
|
||||
proofB: "Geist sans + Geist Mono",
|
||||
proofC: "33-question slop test",
|
||||
cta: "Open Hallmark",
|
||||
stat: "33",
|
||||
qualifier: "gates, soft-spoken.",
|
||||
mockStat: "33",
|
||||
quote: "Software can be soft and exact at once. That's the trick.",
|
||||
attrib: "Pastel · field note",
|
||||
salutation: "Hey there.",
|
||||
letterBody: "This page is soft because the surface should be soft. The rules underneath are not — there are thirty-three of them, and the page passed every one. We hope it feels like the modern dev tools you already love, just with fewer gradients.",
|
||||
signoff: "Take care,",
|
||||
captionA: "Field note 04",
|
||||
captionB: "Pastel",
|
||||
},
|
||||
riso: {
|
||||
eyebrow: "ed. 12 · printed today",
|
||||
title: HERO_TITLE,
|
||||
|
||||
+10
-10
@@ -29,7 +29,7 @@ Hallmark has one default behaviour and three explicit verbs.
|
||||
|
||||
If the user types anything that does not clearly map to `audit`, `redesign`, or `study`, treat it as default. If the user attaches an image without a verb prefix, ask: *"Should I `study` this (extract the DNA), or should I treat it as a reference for a fresh build?"*
|
||||
|
||||
The default Design flow always picks a theme. By default it picks one of the **23 named themes** — the *catalog* — and rotates among them per the diversification rule. There is also a quiet *custom* branch that constructs a one-off OKLCH palette + free-font pairing for the brief; the custom route fires **only when the brief carries a creative-intent signal** (the user names a brand colour, names a multi-attribute vibe the catalog can't carry, or explicitly asks for a custom theme). For vanilla briefs, the user never sees the words "catalog" or "custom" — the catalog runs silently. See Step 1 (signal detection) and Step 2.6 (dispatch); the protocol lives in [`references/custom-theme.md`](references/custom-theme.md).
|
||||
The default Design flow always picks a theme. By default it picks one of the **22 named themes** — the *catalog* — and rotates among them per the diversification rule. There is also a quiet *custom* branch that constructs a one-off OKLCH palette + free-font pairing for the brief; the custom route fires **only when the brief carries a creative-intent signal** (the user names a brand colour, names a multi-attribute vibe the catalog can't carry, or explicitly asks for a custom theme). For vanilla briefs, the user never sees the words "catalog" or "custom" — the catalog runs silently. See Step 1 (signal detection) and Step 2.6 (dispatch); the protocol lives in [`references/custom-theme.md`](references/custom-theme.md).
|
||||
|
||||
---
|
||||
|
||||
@@ -228,7 +228,7 @@ If two non-default signals fire (rare), ask one short follow-up: *"This brief fi
|
||||
|
||||
State the genre out loud at Step 2.5 alongside the macrostructure and theme picks: *"Genre: atmospheric. Macrostructure: Marquee Hero. Theme: Bloom (atmospheric cluster)."*
|
||||
|
||||
**Theme route — only surface when the brief signals it.** Hallmark has two theme routes: **catalog** (the 23 named themes — Specimen, Atelier, Pastel, Brutal, Salon, Newsprint, Linen, Studio, Manifesto, Terminal, Midnight, Almanac, Garden, Quiet, Riso, Sport, Bloom, Coral, Violet, Aurora, Halo, Plume, Editorial) and **custom** (an OKLCH palette + free-font pairing tuned to this one brief). **Catalog is the default.** The catalog rotation is *scoped to the genre's theme cluster* — atmospheric rotates Bloom/Midnight/Terminal, modern-minimal stays on Quiet, playful stays on Pastel, editorial walks the remaining twelve. Do **not** offer the user a choice on every prompt — that's friction, not discipline. Surface the catalog/custom fork only when the brief carries one of these signals:
|
||||
**Theme route — only surface when the brief signals it.** Hallmark has two theme routes: **catalog** (the 22 named themes — Specimen, Atelier, Brutal, Salon, Newsprint, Linen, Studio, Manifesto, Terminal, Midnight, Almanac, Garden, Quiet, Riso, Sport, Bloom, Coral, Violet, Aurora, Halo, Plume, Editorial) and **custom** (an OKLCH palette + free-font pairing tuned to this one brief). **Catalog is the default.** The catalog rotation is *scoped to the genre's theme cluster* — atmospheric rotates Bloom/Midnight/Terminal, modern-minimal stays on Quiet, playful stays on Plume, editorial walks the remaining twelve. Do **not** offer the user a choice on every prompt — that's friction, not discipline. Surface the catalog/custom fork only when the brief carries one of these signals:
|
||||
|
||||
- The user explicitly says **custom theme** / **tailored to our brand** / **make it ours** / **something unique** / **play with the colors and fonts**.
|
||||
- The user names a **specific brand colour** as the anchor (e.g., "use our terracotta", "the brand red is hex #c0392b", "anchor on sea-blue").
|
||||
@@ -237,7 +237,7 @@ State the genre out loud at Step 2.5 alongside the macrostructure and theme pick
|
||||
|
||||
If any of those fires, ask one short follow-up before picking: *"This brief reads like a custom palette would fit better than the catalog. Want me to construct a custom OKLCH palette + free-font pairing tuned to <one-line summary of the vibe>, or stay on the catalog for variety + speed?"* Wait for the user to say custom (or catalog). Default is still catalog — silence routes to catalog, not custom.
|
||||
|
||||
If none of the signals fires, **proceed with catalog silently. Do not mention the fork.** Most briefs don't need a custom theme — the catalog's 23 themes plus the rotation rule already deliver structural variety. See Step 2.6 for the dispatch.
|
||||
If none of the signals fires, **proceed with catalog silently. Do not mention the fork.** Most briefs don't need a custom theme — the catalog's 22 themes plus the rotation rule already deliver structural variety. See Step 2.6 for the dispatch.
|
||||
|
||||
**If the user opts out or skips fields** (says "go ahead", "you pick", "skip", "just build it", "don't ask", answers some fields and leaves others blank, or simply doesn't engage with the question after one prompt):
|
||||
|
||||
@@ -263,7 +263,7 @@ Before loading any visual ruleset, **pick one of the twenty-one named macrostruc
|
||||
**Theme-diversification rule (mandatory).** Picking a different macrostructure isn't enough on its own — two consecutive Hallmark outputs can share a theme even if their structures differ, and the result reads as repetition. Two consecutive themes must differ on **at least one** of three axes:
|
||||
|
||||
- **Paper band** — dark (L < 30 %) / mid (30–85 %) / light (> 85 %), per the theme's `--color-paper` lightness
|
||||
- **Display style** — italic-serif (Specimen, Studio, Atelier) / roman-serif (Newsprint, Salon, Linen) / geometric-sans (Pastel, Manifesto) / mono (Terminal) / display-condensed-italic (Sport) / display-heavy (Brutal) / system-native (Quiet) / risograph-bold (Riso)
|
||||
- **Display style** — italic-serif (Specimen, Studio, Atelier) / roman-serif (Newsprint, Salon, Linen) / geometric-sans (Plume, Manifesto) / mono (Terminal) / display-condensed-italic (Sport) / display-heavy (Brutal) / system-native (Quiet) / risograph-bold (Riso)
|
||||
- **Accent hue** — warm (red / orange / amber: 10–60°) / cool (blue / indigo / cyan: 200–300°) / neutral (no chromatic accent: Quiet) / chromatic-other (green: Studio · sage: Garden · phosphor: Terminal)
|
||||
|
||||
If the previous output was Specimen (light · italic-serif · warm), the next can be Studio (light · italic-serif · chromatic-green) — the *accent hue* differs. But the next can't be Salon (light · roman-serif · warm) which only differs on display style and shares both paper band and accent — pick a more distant theme.
|
||||
@@ -288,7 +288,7 @@ If the project has a `.hallmark/log.json` file (created by previous Hallmark run
|
||||
|
||||
```json
|
||||
[
|
||||
{ "date": "2026-04-30", "macrostructure": "Bento Grid", "theme": "Pastel", "enrichment": "E1 clipped-edge", "brief": "Tracejam · SaaS observability" },
|
||||
{ "date": "2026-04-30", "macrostructure": "Bento Grid", "theme": "Linen", "enrichment": "E1 clipped-edge", "brief": "Tracejam · SaaS observability" },
|
||||
{ "date": "2026-04-28", "macrostructure": "Long Document","theme": "Linen", "enrichment": "E5 hand-built SVG", "brief": "Maple Street Bread · bakery" },
|
||||
{ "date": "2026-04-25", "macrostructure": "Manifesto", "theme": "Manifesto","enrichment": "none", "brief": "Meridian · studio manifesto" }
|
||||
]
|
||||
@@ -309,7 +309,7 @@ If the project has a CSS stamp but no `log.json`, infer one entry from the stamp
|
||||
|
||||
Then the theme rotation, on the next line:
|
||||
|
||||
> *"Last 3 themes: Pastel · Plain · Salon. Picking from {Newsprint, Atelier, Linen, Studio} — Newsprint differs on display style and accent hue."*
|
||||
> *"Last 3 themes: Linen · Plain · Salon. Picking from {Newsprint, Atelier, Studio, Garden} — Newsprint differs on display style and accent hue."*
|
||||
|
||||
**Three sample shapes** to imitate:
|
||||
|
||||
@@ -324,10 +324,10 @@ The rotation block keeps the user inside the discipline without making them read
|
||||
By the time you reach this step, one of three things is true:
|
||||
|
||||
1. **The user named custom** (because they said so, or because Step 1's signal detection fired and they confirmed) → load [`references/custom-theme.md`](references/custom-theme.md), ask the **one** follow-up (vibe in 4–8 words + optional anchor colour), construct the OKLCH palette + free-font pairing, compute the three axis values (paper-band / display-style / accent-hue), then continue to Step 3.
|
||||
2. **The user named catalog** (or implicitly accepted it by not naming custom) → pick one of the 23 named themes per the diversification rule above. Existing flow — continue to Step 3.
|
||||
2. **The user named catalog** (or implicitly accepted it by not naming custom) → pick one of the 22 named themes per the diversification rule above. Existing flow — continue to Step 3.
|
||||
3. **Neither was discussed** (Step 1's signals didn't fire — vanilla brief) → default to **catalog**. Do not pause. Do not ask. Continue to Step 3.
|
||||
|
||||
**Custom is a quiet branch, not a default question.** Most briefs route to catalog and the user never sees the words "catalog" or "custom." The 23 named themes plus the rotation rule already deliver structural variety; the fork is reserved for when the brief specifically asks for a tuned look the catalog can't carry.
|
||||
**Custom is a quiet branch, not a default question.** Most briefs route to catalog and the user never sees the words "catalog" or "custom." The 22 named themes plus the rotation rule already deliver structural variety; the fork is reserved for when the brief specifically asks for a tuned look the catalog can't carry.
|
||||
|
||||
A custom theme is a **complete** OKLCH palette + font pairing tuned to the brief — not a one-off colour swap, not an excuse to bypass the rules. Every constraint in [`color.md`](references/color.md), [`typography.md`](references/typography.md), and [`anti-patterns.md`](references/anti-patterns.md) still applies. The 65 slop-test gates fire unchanged. The Step 5 preview block surfaces the palette + pairing in plain text **before** any code is emitted, so the user can redirect.
|
||||
|
||||
@@ -401,7 +401,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T
|
||||
- **Sections** · Hero · Logos · Stats · Features · Testimonials · Pricing · FAQ · CTA · Footer
|
||||
- **Motion** · counter · pricing-lift · pulse-once
|
||||
- **Slop test** · 65 / 65 ✓ (run after Build)
|
||||
- **Diversification** · differs from Pastel on display style + accent hue
|
||||
- **Diversification** · differs from Linen on display style + accent hue
|
||||
```
|
||||
|
||||
**Six required bullets, one optional, plus a CTA line:**
|
||||
@@ -437,7 +437,7 @@ Skip the CTA line when (a) the build is component-scope, or (b) `design.md` alre
|
||||
> **Hallmark · v1.0.0**
|
||||
>
|
||||
> - **Macrostructure** · Bento Grid
|
||||
> - **Theme** · Pastel (light cool paper · indigo accent · geometric Geist)
|
||||
> - **Theme** · Linen (cool slate paper · steel-blue accent · geometric sans)
|
||||
> - **Enrichment** · E1 Clipped-Edge Demo Video, Tier-A CSS-art trace waterfall
|
||||
> - **Sections** · Hero · 6-tile Bento (stat · sparkline · quote · code · integrations · spotlight) · Index Footer
|
||||
> - **Motion** · counter · pricing-lift · CSS marquee on integrations strip
|
||||
|
||||
@@ -901,7 +901,7 @@ The full recipe — the four laws (height-constant, transform-for-offset, cross-
|
||||
| Genre / cluster | Default nav | Acceptable also |
|
||||
| --- | --- | --- |
|
||||
| editorial (Newsprint · Salon · Garden · Linen · Atelier) | **N6 Masthead** | N1, N9 |
|
||||
| modern-minimal (Specimen · Pastel · Quiet · Coral · Violet · Plume) | **N5 Floating pill** | N1, N9 |
|
||||
| modern-minimal (Specimen · Quiet · Coral · Violet · Plume) | **N5 Floating pill** | N1, N9 |
|
||||
| atmospheric (Bloom · Aurora · Halo · Midnight) | **N5 Floating pill** (blur backdrop sells the mood) | N9, N4 |
|
||||
| playful (Brutal · Manifesto · Sport · Riso · Studio) | **N7 Brutal slab** | N1, N3 |
|
||||
| terminal / CLI (Terminal) | **N8 Terminal command** | N4 ⌘K-only |
|
||||
|
||||
@@ -105,7 +105,7 @@ Three voice patterns: *poetic restraint*, *passion via enumeration*, *vulnerabil
|
||||
- *"Design engineer creating software that makes people feel something."* — rauno.me — emotional outcome over feature list; "feel something" avoids genre cliché
|
||||
- *"All I want to do is build websites. Typography, motion design, copywriting, performance — the web is an endless medium of opportunity."* — paco.me — passion via enumeration; vulnerability ("scratched the surface")
|
||||
- *"I craft UI demos that explore the power of the web and help others sharpen their skills."* — jhey.dev — names the verb (*craft*), names the audience (*others*)
|
||||
- *"Soft, but exact."* — Hallmark Pastel — two short adjectives, one comma, full stop
|
||||
- *"Soft, but exact."* — Hallmark Plume — two short adjectives, one comma, full stop
|
||||
- *"This page is soft because the surface should be soft. The rules underneath are not."* — pairs claim with refusal
|
||||
|
||||
### Technical
|
||||
@@ -156,7 +156,7 @@ Three voice patterns: *extreme abbreviation*, *principle as opening*, *refusal o
|
||||
- *"Things Become Other Things."* — craigmod.com — three words; treats brand as essay title
|
||||
- *"Lightness above weightiness, elevate everyone you encounter."* — craigmod.com — principle-first positioning
|
||||
- *"A quiet skill."* — Hallmark Quiet — three words; the article is doing work
|
||||
- *"Software can be soft and exact at once. That's the trick."* — Hallmark Pastel — names the contradiction, names the resolution
|
||||
- *"Software can be soft and exact at once. That's the trick."* — Hallmark Plume — names the contradiction, names the resolution
|
||||
- *"One HTML file."* — Anya (test 06) footer — three words; the count is the boast
|
||||
- *"This page doesn't move."* — names the design decision openly
|
||||
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
|
||||
Loaded only when the user has opted into the **custom** theme route in Step 1 of the Design flow. Custom produces a **complete OKLCH palette + free-font pairing tuned to this brief** — a one-off theme written inline into the page's `:root`, not a permanent catalog entry.
|
||||
|
||||
**The freedom is the combination, not the rules.** Every constraint in [`color.md`](color.md), [`typography.md`](typography.md), and [`anti-patterns.md`](anti-patterns.md) still applies. The 55 slop-test gates fire unchanged. The Step 5 preview block surfaces the palette + pairing in plain text *before* any code is emitted, so the user can redirect.
|
||||
**The freedom is the combination, not the rules.** Every constraint in [`color.md`](color.md), [`typography.md`](typography.md), and [`anti-patterns.md`](anti-patterns.md) still applies. The 65 slop-test gates fire unchanged. The Step 5 preview block surfaces the palette + pairing in plain text *before* any code is emitted, so the user can redirect.
|
||||
|
||||
## Two words, plain English
|
||||
|
||||
- **catalog** — the named-theme catalogue. Hallmark's 23 themes (Specimen, Atelier, Pastel, Brutal, Salon, Newsprint, Linen, Studio, Manifesto, Terminal, Midnight, Almanac, Garden, Quiet, Riso, Sport, Bloom, Coral, Violet, Aurora, Halo, Plume, Editorial). Each one is a fixed combination of paper-band, display-style, and accent-hue. The rotation rule cycles through them so two consecutive runs don't read alike. **This is the default.** Most briefs use it.
|
||||
- **custom** — made-to-measure. A one-off palette + font pairing constructed specifically for one brief. The skill builds the OKLCH values, picks fonts, and stamps the page — but does **not** add a 23rd theme to the catalog. The rules behind the catalog (paper L bands, accent chroma caps, font ban list, slop-test gates) all still apply; only the *combination* is per-brief.
|
||||
- **catalog** — the named-theme catalogue. Hallmark's 22 themes (Specimen, Atelier, Brutal, Salon, Newsprint, Linen, Studio, Manifesto, Terminal, Midnight, Almanac, Garden, Quiet, Riso, Sport, Bloom, Coral, Violet, Aurora, Halo, Plume, Editorial). Each one is a fixed combination of paper-band, display-style, and accent-hue. The rotation rule cycles through them so two consecutive runs don't read alike. **This is the default.** Most briefs use it.
|
||||
- **custom** — made-to-measure. A one-off palette + font pairing constructed specifically for one brief. The skill builds the OKLCH values, picks fonts, and stamps the page — but does **not** extend the catalog with a new theme. The rules behind the catalog (paper L bands, accent chroma caps, font ban list, slop-test gates) all still apply; only the *combination* is per-brief.
|
||||
|
||||
## When to surface this fork — Step 1 trigger signals
|
||||
|
||||
@@ -15,12 +15,12 @@ Hallmark must **not** offer catalog-vs-custom on every prompt. That's friction,
|
||||
|
||||
1. **Explicit ask** — the user types `custom`, "custom theme", "tailored to our brand", "make it ours", "something unique", "play around with the colors and fonts", "I want my own palette".
|
||||
2. **Named brand colour** — the user gives a specific anchor colour as a hex / OKLCH / brand name. Example: "use our terracotta", "the brand red is hex #c0392b", "anchor on sea-blue".
|
||||
3. **Multi-attribute aesthetic the catalog can't carry** — three or more vibe words pointing at a specific, off-catalog feel. Examples: "moss, lichen, soft pink, herbal" / "sun-drenched, market-day, carbon-black" / "late-night, neon, brutalist deli". Compare against the 23 catalog themes; if no single catalog theme is within one axis-step of the vibe, fire the fork. **One adjective ("warm", "technical", "playful") is not a signal — that's a tone, the catalog already carries it.**
|
||||
3. **Multi-attribute aesthetic the catalog can't carry** — three or more vibe words pointing at a specific, off-catalog feel. Examples: "moss, lichen, soft pink, herbal" / "sun-drenched, market-day, carbon-black" / "late-night, neon, brutalist deli". Compare against the 22 catalog themes; if no single catalog theme is within one axis-step of the vibe, fire the fork. **One adjective ("warm", "technical", "playful") is not a signal — that's a tone, the catalog already carries it.**
|
||||
4. **Brand-mood reference attached** — the user attaches a colour swatch, a moodboard, a Pantone chip. (If they attach a *page* screenshot, route to `study` instead; custom is for brand colour / mood, study is for design DNA.)
|
||||
|
||||
If any signal fires, ask one short follow-up before picking a theme:
|
||||
|
||||
> *"This brief reads like a custom palette would fit better than the 23 named themes. Want me to construct a custom OKLCH palette + free-font pairing tuned to <one-line summary of the vibe>, or stay on the catalog for variety + speed?"*
|
||||
> *"This brief reads like a custom palette would fit better than the 22 named themes. Want me to construct a custom OKLCH palette + free-font pairing tuned to <one-line summary of the vibe>, or stay on the catalog for variety + speed?"*
|
||||
|
||||
Wait for the user to answer. If they say custom (or yes / go) → continue this protocol from § A. If they say catalog (or no / stay catalog) → drop the fork and proceed with the catalog route. **Default to catalog** — silence routes to catalog, not custom.
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ Brief mentions any of: *fun, consumer, casual, family, kids, friendly, approacha
|
||||
|
||||
## Themes that belong
|
||||
|
||||
`Pastel` (canonical). The genre is small intentionally — playful is easy to overdo.
|
||||
`Plume` (canonical). The genre is small intentionally — playful is easy to overdo.
|
||||
|
||||
## Voice
|
||||
|
||||
|
||||
@@ -454,7 +454,7 @@ When you ship enrichment, the macrostructure stamp records the choice:
|
||||
* polish: HP3 Cursor-spotlight (scoped to hero, reduced-motion fallback pinned at 50%/30%)
|
||||
* nav: N5 Floating pill · footer: Ft5 Statement
|
||||
* craft: tier-A CSS art (no real video — pure custom-built mockup)
|
||||
* theme: Pastel · accent: indigo ~3% · studied: no
|
||||
* theme: Linen · accent: steel-blue ~3% · studied: no
|
||||
*/
|
||||
```
|
||||
|
||||
|
||||
@@ -403,7 +403,7 @@ Reference: Frank Chimero's site, founder farewell posts, indie newsletter front
|
||||
**Sample opening lines** (imitate the *specificity* — Letter openings are first-person greetings, dated, with a place if relevant):
|
||||
> *"Hello, I'm Anya."* — Anya (test 06) — single line, name, full stop
|
||||
> *"Saturday, 6:14 a.m. The dough went in at midnight."* — opens on a moment, then explains it
|
||||
> *"Hey there. This page is soft because the surface should be soft."* — Hallmark Pastel — colloquial open + a principle
|
||||
> *"Hey there. This page is soft because the surface should be soft."* — Hallmark Plume — colloquial open + a principle
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -107,7 +107,6 @@ The table below is alphabetical by theme to neutralise any "first row = default"
|
||||
| Manifesto | Overlapping image | Full-bleed reset | Bleed-colour | Oversized solid | Full-bleed | Horizontal sweep | N7 Brutal slab | Ft5 Statement |
|
||||
| Midnight | Numbered display | Single column | Hairline | Typographic-only | None | Typewriter | N5 Floating pill | Ft2 Inline single line |
|
||||
| Newsprint | Bottom-aligned | Multi-column justified | Double rule | Outlined | Inline | None | N6 Masthead | Ft4 Dense colophon |
|
||||
| Pastel | Centered | Single column | Negative space | Outlined | None | Fade-up | N5 Floating pill | Ft2 Inline single line |
|
||||
| Plume | Hanging | Single column | Bleed-colour band | Outlined | Margin-aligned | Fade-up | N9 Edge-min | Ft1 Mast-headed |
|
||||
| Editorial | Hanging | 2-col asym hero / single below | Hairline | Outlined | Tightly cropped or generated (Tier C) | Fade-up | N6 Masthead | Ft1 Mast-headed |
|
||||
| Quiet | Centered | Single column narrow | Negative space | Outlined pill | None | None | N9 Edge-min | Ft2 Inline single line |
|
||||
|
||||
@@ -133,7 +133,6 @@ After the schema is filled, map the source to one of Hallmark's named themes —
|
||||
| `paper_band: dark`, `accent: indigo`, `display: condensed/heavy` | **Midnight** |
|
||||
| `paper_band: dark`, `font: mono throughout`, `treatments: phosphor green or amber` | **Terminal** |
|
||||
| `paper_hue: warm-pink`, `treatments: riso / grain / off-register`, `display: heavy lowercase` | **Riso** |
|
||||
| `paper_hue: cool-lavender`, `display: soft geometric sans`, `accent: low-chroma indigo` | **Pastel** |
|
||||
| `paper_band: light`, `display: heavy black sans`, `accent: red flood` | **Brutal** |
|
||||
| `paper_band: dark`, `display: heavy uppercase`, `accent: red flood` | **Manifesto** |
|
||||
| `paper_hue: cool`, `density: dense`, `body: 2-3 column justified` | **Newsprint** |
|
||||
|
||||
Reference in New Issue
Block a user