diff --git a/README.md b/README.md index f287b92..2c70d39 100644 --- a/README.md +++ b/README.md @@ -6,16 +6,9 @@ Powered by Together AI. - - - - - - - - - -
Static Hour — atmospheric podcast platform on dark canvas, italic editorial serifNAJM — Moroccan fashion brand, oversized condensed sans with bright accent
Tally — modern-minimal billing platform, live invoice card and chartNexus — developer tool, split hero with italic-emphasis sans
+

+ Hallmark — A design skill that refuses to look AI-generated +

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 slop-test gates plus a pre-emit self-critique before handing back, and refuses the on-distribution defaults every LLM was trained into. @@ -66,28 +59,28 @@ Generated by exercising the skill across contrasting briefs. No two share a macr - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + +
Tide — Quote-Led + AtelierStreampipe — Workbench + TerminalMaple Street Bread — Long Document + LinenMeridian — Manifesto + Manifesto
Tide
Quote-Led · Atelier · indie podcast		Streampipe
Workbench · Terminal · CSS-art mockup		Maple Street Bread
Long Doc · Linen · hand-built SVG loaf		Meridian
Manifesto · 11-section practice		SaaS
SaaS product page · modern-minimal		Wayfare
Travel booking · atmospheric		Slow Pour
Small-batch coffee subscription		BananaStudio
Creative studio · playful motion
Tracejam — Bento Grid + PastelAnya — Long Document + StudioFoundry — Stat-Led + Plain (pure white)Cohort — Marquee Hero + Salon
Tracejam
Bento · Pastel · clipped-edge mockup		Anya
Long Doc · Studio · personal one-pager		Foundry
Stat-Led · Plain (#fff) · animated counter		Cohort
Marquee Hero · Salon · continuous scroll		Anya
Software architect personal site		NAJM
Moroccan fashion brand		Søroe
Small ceramics studio		Hyperlane
Developer infrastructure
@@ -100,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`), 55-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-two themes** clustered into four genres: **editorial** (Specimen, 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-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. --- diff --git a/site/OG-hallmark.png b/site/OG-hallmark.png new file mode 100644 index 0000000..f084d0e Binary files /dev/null and b/site/OG-hallmark.png differ diff --git a/site/_tests/_thumbs/Hyperlane-example.mp4 b/site/_tests/_thumbs/Hyperlane-example.mp4 new file mode 100644 index 0000000..c8c75e5 Binary files /dev/null and b/site/_tests/_thumbs/Hyperlane-example.mp4 differ diff --git a/site/css/components.css b/site/css/components.css index e9cf992..09caaef 100644 --- a/site/css/components.css +++ b/site/css/components.css @@ -58,11 +58,6 @@ color: var(--color-ink); } -.banner__name { - font-weight: 500; - letter-spacing: 0.22em; -} - .banner__ver { font-size: 0.625rem; color: var(--color-muted); @@ -3129,19 +3124,49 @@ body:not(.easter-open) > footer { } .foot--colophon .foot__wordmark { - font-family: var(--font-display); - font-weight: var(--display-weight, 500); - font-style: var(--display-style, normal); - font-size: clamp(3rem, 7vw + 0.5rem, 6.5rem); - line-height: 0.85; - letter-spacing: var(--tracking-display, -0.025em); + display: inline-flex; color: var(--color-ink); - font-optical-sizing: auto; + line-height: 1; } +/* The brand mark is locked to Fraunces in every theme — themes still + re-render everything else, but the wordmark is brand-locked so the + site is always recognisable as "Hallmark" regardless of the theme. */ +.brand-mark { + font-family: "Fraunces", "Newsreader", "Playfair Display", serif; + font-optical-sizing: auto; + font-style: normal; + text-transform: none; + display: inline-flex; + align-items: baseline; + font-size: 1.05rem; + line-height: 1; + color: inherit; +} + +.brand-mark__slash { + font-weight: 900; + letter-spacing: 0.20em; + display: inline-block; +} + +.brand-mark__name { + font-weight: 300; + letter-spacing: 0; + margin-inline-start: 0.05em; +} + +/* Footer wordmark variant — same proportions, much larger. */ +.brand-mark--lg { + font-size: clamp(3rem, 7vw + 0.5rem, 6.5rem); + line-height: 0.85; +} + +/* Keep manifesto/brutal/sport from upper-casing the brand mark — the + wordmark is locked, theme typography lives elsewhere. */ [data-theme="manifesto"] .foot--colophon .foot__wordmark, [data-theme="brutal"] .foot--colophon .foot__wordmark, -[data-theme="sport"] .foot--colophon .foot__wordmark { text-transform: uppercase; } +[data-theme="sport"] .foot--colophon .foot__wordmark { text-transform: none; } .foot__version { font-family: var(--font-mono); @@ -3881,6 +3906,7 @@ html[data-theme="halo"] aside { scroll-snap-align: start; display: grid; grid-template-rows: auto auto; + min-width: 0; color: inherit; background: var(--color-paper); border: var(--rule-card, 1px) solid var(--color-rule); diff --git a/site/css/tokens.css b/site/css/tokens.css index 7542908..775234c 100644 --- a/site/css/tokens.css +++ b/site/css/tokens.css @@ -892,7 +892,7 @@ --color-rule-2: oklch(72% 0.010 50); --color-muted: oklch(52% 0.012 50); --color-neutral: oklch(38% 0.012 45); - --color-ink-2: oklch(28% 0.012 40); + --color-ink-2: oklch(26% 0.012 40); --color-ink: oklch(20% 0.010 35); --color-accent: oklch(64% 0.165 28); /* warm coral */ --color-accent-ink: oklch(98% 0.005 50); diff --git a/site/favicon-dark.svg b/site/favicon-dark.svg new file mode 100644 index 0000000..de9825a --- /dev/null +++ b/site/favicon-dark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/site/favicon-light.svg b/site/favicon-light.svg new file mode 100644 index 0000000..6e0dfbc --- /dev/null +++ b/site/favicon-light.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/site/favicon.svg b/site/favicon.svg deleted file mode 100644 index f711e43..0000000 --- a/site/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - H - diff --git a/site/index.html b/site/index.html index b3dcfea..40d3426 100644 --- a/site/index.html +++ b/site/index.html @@ -13,14 +13,23 @@ + + + + + + - + + + + href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&family=Anton&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,500&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Inter+Tight:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Playfair+Display:ital,wght@1,400;1,500;1,600&family=Public+Sans:wght@400;500;600;700&display=swap" /> @@ -43,7 +52,7 @@