2026-04-27 21:46:57 +01:00
<!doctype html>
2026-06-02 17:50:31 +01:00
< html lang = "en" data-theme = "hum" >
2026-05-01 10:21:02 +01:00
2026-04-27 21:46:57 +01:00
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1, viewport-fit=cover" />
< meta name = "color-scheme" content = "light" />
< title > Hallmark — A design skill that refuses to look AI-generated</ title >
2026-05-01 10:21:02 +01:00
< meta name = "description"
content = "Hallmark is a design skill for AI coding assistants. It encodes the anti-AI-slop consensus — typography, colour, layout, motion, interaction — into one holistic ruleset. Powered by Together AI." />
2026-04-27 21:46:57 +01:00
< meta property = "og:title" content = "Hallmark — A design skill that refuses to look AI-generated" />
2026-05-01 10:21:02 +01:00
< meta property = "og:description"
content = "A design skill for AI coding assistants. Encodes the anti-slop consensus into one ruleset. Powered by Together AI." />
2026-04-27 21:46:57 +01:00
< meta property = "og:type" content = "website" />
2026-05-19 16:07:24 +01:00
< meta property = "og:url" content = "https://www.usehallmark.com/" />
2026-05-07 14:59:45 +01:00
< meta property = "og:site_name" content = "Hallmark" />
2026-05-19 16:07:24 +01:00
< meta property = "og:image" content = "https://www.usehallmark.com/OG-hallmark.png" />
< meta property = "og:image:secure_url" content = "https://www.usehallmark.com/OG-hallmark.png" />
2026-05-07 14:59:45 +01:00
< meta property = "og:image:type" content = "image/png" />
2026-05-20 16:26:02 +01:00
< meta property = "og:image:width" content = "2400" />
2026-06-03 17:02:02 +01:00
< meta property = "og:image:height" content = "1260" />
2026-05-07 14:43:21 +01:00
< meta property = "og:image:alt" content = "Hallmark — A design skill that refuses to look AI-generated" />
< meta name = "twitter:card" content = "summary_large_image" />
< meta name = "twitter:title" content = "Hallmark — A design skill that refuses to look AI-generated" />
< meta name = "twitter:description"
content = "A design skill for AI coding assistants. Encodes the anti-slop consensus into one ruleset. Powered by Together AI." />
2026-05-19 16:07:24 +01:00
< meta name = "twitter:image" content = "https://www.usehallmark.com/OG-hallmark.png" />
2026-05-07 14:59:45 +01:00
< meta name = "twitter:image:alt" content = "Hallmark — A design skill that refuses to look AI-generated" />
2026-04-27 21:46:57 +01:00
2026-05-07 14:43:21 +01:00
< link rel = "icon" type = "image/svg+xml" href = "favicon-light.svg" media = "(prefers-color-scheme: light)" />
< link rel = "icon" type = "image/svg+xml" href = "favicon-dark.svg" media = "(prefers-color-scheme: dark)" />
< link rel = "icon" type = "image/svg+xml" href = "favicon-light.svg" />
2026-05-06 11:54:56 +01:00
2026-05-19 16:07:24 +01:00
<!-- Entrance gate. Hides body until web fonts resolve so the page doesn't
flash system fonts then snap to the real faces. Fires once on first
load only — the matching script in the pre-paint block at the bottom
of <head> sets data-fonts-ready on <html> when document.fonts.ready
resolves (or after a 1200 ms safety timeout). Theme switches modify
[data-theme], not [data-fonts-ready], so the fade never re-runs. -->
< style >
html : not ([ data-fonts-ready ]) body { opacity : 0 ; }
body {
opacity : 1 ;
transition : opacity 280 ms cubic-bezier ( 0.22 , 1 , 0.36 , 1 );
}
@ media ( prefers-reduced-motion : reduce ) {
html : not ([ data-fonts-ready ]) body { opacity : 1 ; }
body { transition : none ; }
}
</ style >
2026-08-06 14:41:26 +01:00
<!-- Google Fonts — Anton, Albert Sans, Archivo, Fraunces, Geist, Geist Mono, Hanken Grotesk, Inter, Inter Tight, Newsreader, Playfair Display, Public Sans. -->
2026-04-29 12:57:46 +01:00
< link rel = "preconnect" href = "https://fonts.googleapis.com" />
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin />
2026-05-01 10:21:02 +01:00
< link rel = "stylesheet"
2026-08-06 14:41:26 +01:00
href = "https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&family=Anton&family=Archivo:wght@400;500;600;700;800&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&family=Young+Serif&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" />
2026-04-29 12:57:46 +01:00
2026-06-03 16:19:09 +01:00
< link rel = "stylesheet" href = "css/tokens.css?v=24" />
< link rel = "stylesheet" href = "css/base.css?v=24" />
< link rel = "stylesheet" href = "css/components.css?v=24" />
< link rel = "stylesheet" href = "css/sections.css?v=24" />
2026-04-27 21:46:57 +01:00
< script >
2026-04-28 15:56:35 +01:00
// Load theme before paint to avoid flash. Order: ?theme= → localStorage → default.
2026-04-27 21:46:57 +01:00
try {
2026-04-28 15:56:35 +01:00
const url = new URL ( window . location . href );
const q = url . searchParams . get ( "theme" );
const t = q || localStorage . getItem ( "hallmark-theme" );
2026-04-27 21:46:57 +01:00
if ( t ) document . documentElement . dataset . theme = t ;
2026-05-01 10:21:02 +01:00
} catch ( e ) { }
2026-05-19 16:07:24 +01:00
// Mark fonts-ready when document.fonts resolves; safety timeout at 1200 ms.
// Pairs with the entrance-fade <style> above. Fires once on first load —
// theme switches don't reset the attribute, so the fade never re-runs.
( function () {
var html = document . documentElement ;
var fired = false ;
function ready () {
if ( fired ) return ;
fired = true ;
html . setAttribute ( "data-fonts-ready" , "" );
}
if ( document . fonts && document . fonts . ready && typeof document . fonts . ready . then === "function" ) {
document . fonts . ready . then ( ready );
} else {
ready ();
}
setTimeout ( ready , 1200 );
})();
2026-04-27 21:46:57 +01:00
</ script >
2026-05-19 19:49:36 +01:00
<!-- Privacy-friendly analytics by Plausible -->
< script async src = "https://plausible.io/js/pa-C-D0j4RyxujH0xB9vHv0a.js" ></ script >
< script >
window . plausible = window . plausible || function (){( plausible . q = plausible . q || []). push ( arguments )}, plausible . init = plausible . init || function ( i ){ plausible . o = i || {}};
plausible . init ()
</ script >
2026-04-27 21:46:57 +01:00
</ head >
2026-05-01 10:21:02 +01:00
2026-04-27 21:46:57 +01:00
< body >
2026-04-28 15:56:35 +01:00
<!-- BANNER — sticky top, thin, holds the theme picker -->
< header class = "banner" role = "banner" >
< a class = "banner__mark" href = "#top" aria-label = "Hallmark — top of page" >
2026-05-07 14:43:21 +01:00
< span class = "brand-mark" aria-hidden = "true" >< span class = "brand-mark__slash" > /</ span >< span class = "brand-mark__name" > hallmark</ span ></ span >
2026-06-02 20:20:23 +01:00
< span class = "banner__ver tnum" > v1.1</ span >
2026-04-28 15:56:35 +01:00
</ a >
2026-05-01 21:08:42 +01:00
< a class = "banner__install" href = "#install" aria-label = "Jump to install section" > Install</ a >
2026-05-07 17:39:18 +01:00
< a class = "banner__star" href = "https://github.com/nutlope/hallmark" target = "_blank" rel = "noopener"
2026-05-07 13:21:40 +01:00
aria-label = "Star Hallmark on GitHub" >
2026-05-06 14:06:15 +01:00
< svg class = "banner__star-icon" viewBox = "0 0 16 16" width = "11" height = "11" aria-hidden = "true" >
2026-05-07 13:21:40 +01:00
< path fill = "currentColor"
d = "M8 0.5l2.36 4.78 5.27.77-3.81 3.72.9 5.24L8 12.55 3.28 15.01l.9-5.24L.37 6.05l5.27-.77L8 .5z" />
2026-05-06 14:06:15 +01:00
</ svg >
2026-05-06 14:36:18 +01:00
< span class = "banner__star-count tnum" data-star-count > 0</ span >
2026-05-06 14:06:15 +01:00
</ a >
2026-04-30 18:04:48 +01:00
< span class = "banner__spacer" aria-hidden = "true" ></ span >
2026-05-06 12:02:10 +01:00
< div class = "banner__theme-wrap" data-theme-wrap >
2026-05-07 13:21:40 +01:00
< button class = "banner__theme-indicator" type = "button" aria-haspopup = "listbox" aria-expanded = "false"
aria-controls = "theme-dropdown" data-theme-trigger >
2026-06-03 16:19:09 +01:00
< span class = "banner__ordinal tnum" data-theme-ordinal > 01 / 20</ span >
2026-05-06 12:02:10 +01:00
< span class = "banner__indicator-sep" aria-hidden = "true" > —</ span >
2026-06-02 17:50:31 +01:00
< span class = "banner__theme" data-theme-current > Hum</ span >
2026-05-06 12:02:10 +01:00
< svg class = "banner__caret" viewBox = "0 0 12 12" width = "10" height = "10" aria-hidden = "true" >
2026-05-07 13:21:40 +01:00
< path d = "M2 4l4 4 4-4" fill = "none" stroke = "currentColor" stroke-width = "1.5" stroke-linecap = "round"
stroke-linejoin = "round" />
2026-05-06 12:02:10 +01:00
</ svg >
</ button >
2026-04-28 15:56:35 +01:00
2026-05-06 12:02:10 +01:00
< div class = "theme-dropdown" id = "theme-dropdown" role = "listbox" aria-label = "Theme picker" hidden >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "hum" aria-label = "01 · Hum"
style = "--dot: oklch(97% 0.012 95); --dot-edge: oklch(68% 0.24 18); --num: oklch(30% 0.05 18);" >< span
2026-05-07 13:21:40 +01:00
class = "theme-dropdown__num" > 01</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "specimen" aria-label = "02 · Specimen"
style = "--dot: oklch(96% 0.018 80); --dot-edge: oklch(70% 0.04 75); --num: oklch(30% 0.05 75);" >< span
2026-05-07 13:21:40 +01:00
class = "theme-dropdown__num" > 02</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "midnight" aria-label = "03 · Midnight"
style = "--dot: oklch(15% 0.022 250); --dot-edge: oklch(72% 0.16 220); --num: oklch(90% 0.04 220);" >< span
2026-05-07 13:21:40 +01:00
class = "theme-dropdown__num" > 03</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "brutal" aria-label = "04 · Brutal"
style = "--dot: oklch(98% 0.001 0); --dot-edge: oklch(60% 0.21 27); --num: oklch(30% 0.05 27);" >< span
2026-05-07 13:21:40 +01:00
class = "theme-dropdown__num" > 04</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "garden" aria-label = "05 · Garden"
style = "--dot: oklch(95.5% 0.022 92); --dot-edge: oklch(47% 0.13 140); --num: oklch(30% 0.05 140);" >< span
2026-05-07 13:21:40 +01:00
class = "theme-dropdown__num" > 05</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "atelier" aria-label = "06 · Atelier"
style = "--dot: oklch(94% 0.005 60); --dot-edge: oklch(45% 0.13 60); --num: oklch(30% 0.05 60);" >< span
2026-05-07 13:21:40 +01:00
class = "theme-dropdown__num" > 06</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "newsprint" aria-label = "07 · Newsprint"
style = "--dot: oklch(92% 0.045 50); --dot-edge: oklch(32% 0.10 28); --num: oklch(30% 0.05 28);" >< span
2026-05-07 13:21:40 +01:00
class = "theme-dropdown__num" > 07</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "terminal" aria-label = "08 · Terminal"
style = "--dot: oklch(11% 0.018 145); --dot-edge: oklch(78% 0.19 138); --num: oklch(90% 0.05 138);" >< span
2026-05-07 13:21:40 +01:00
class = "theme-dropdown__num" > 08</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "manifesto" aria-label = "09 · Manifesto"
style = "--dot: oklch(10% 0.005 60); --dot-edge: oklch(60% 0.22 27); --num: oklch(90% 0.04 27);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 09</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "almanac" aria-label = "10 · Almanac"
style = "--dot: oklch(94% 0.008 245); --dot-edge: oklch(38% 0.135 250); --num: oklch(30% 0.05 250);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 10</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "sport" aria-label = "11 · Sport"
style = "--dot: oklch(98% 0.003 250); --dot-edge: oklch(58% 0.190 35); --num: oklch(30% 0.05 35);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 11</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "studio" aria-label = "12 · Studio"
style = "--dot: oklch(96.5% 0.014 95); --dot-edge: oklch(46% 0.140 145); --num: oklch(30% 0.05 145);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 12</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "riso" aria-label = "13 · Riso"
style = "--dot: oklch(91% 0.034 30); --dot-edge: oklch(58% 0.170 220); --num: oklch(30% 0.05 220);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 13</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "bloom" aria-label = "14 · Bloom"
style = "--dot: oklch(97% 0.010 72); --dot-edge: oklch(56% 0.13 35); --num: oklch(30% 0.05 35);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 14</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "coral" aria-label = "15 · Coral"
style = "--dot: oklch(96.5% 0.005 50); --dot-edge: oklch(64% 0.165 28); --num: oklch(30% 0.05 28);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 15</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "aurora" aria-label = "16 · Aurora"
style = "--dot: oklch(11% 0.025 200); --dot-edge: oklch(72% 0.170 200); --num: oklch(90% 0.05 200);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 16</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "editorial" aria-label = "17 · Editorial"
style = "--dot: oklch(94% 0.020 75); --dot-edge: oklch(60% 0.160 35); --num: oklch(30% 0.05 35);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 17</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "carnival" aria-label = "18 · Carnival"
style = "--dot: oklch(92% 0.075 85); --dot-edge: oklch(40% 0.13 25); --num: oklch(30% 0.05 25);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 18</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "lumen" aria-label = "19 · Lumen"
style = "--dot: oklch(15% 0.016 265); --dot-edge: oklch(76% 0.13 60); --num: oklch(90% 0.05 60);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 19</ span ></ button >
2026-06-03 16:19:09 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "cobalt" aria-label = "20 · Cobalt"
style = "--dot: oklch(98.5% 0.004 250); --dot-edge: oklch(58% 0.20 256); --num: oklch(30% 0.05 256);" >< span
2026-06-02 17:50:31 +01:00
class = "theme-dropdown__num" > 20</ span ></ button >
2026-08-06 14:41:26 +01:00
< button class = "theme-dropdown__dot" type = "button" data-theme-btn = "grid" aria-label = "21 · Grid"
style = "--dot: oklch(99% 0.003 255); --dot-edge: oklch(55% 0.21 28); --num: oklch(30% 0.06 28);" >< span
class = "theme-dropdown__num" > 21</ span ></ button >
2026-05-06 12:02:10 +01:00
</ div >
2026-04-28 15:56:35 +01:00
</ div >
2026-04-30 18:04:48 +01:00
2026-05-01 10:21:02 +01:00
< button class = "banner__shuffle" type = "button" aria-label = "Random theme · T cycles · R randomises"
title = "Click → random · T cycles · R randomises" >
< svg viewBox = "0 0 24 24" width = "14" height = "14" fill = "none" stroke = "currentColor" stroke-width = "2"
stroke-linecap = "round" stroke-linejoin = "round" aria-hidden = "true" >
2026-04-30 18:04:48 +01:00
< path d = "M16 3h5v5" />
< path d = "M4 20 21 3" />
< path d = "M21 16v5h-5" />
< path d = "m15 15 6 6" />
< path d = "M4 4l5 5" />
</ svg >
< span class = "banner__shuffle-key" > T</ span >
</ button >
2026-05-01 21:08:42 +01:00
< aside class = "t-tooltip" data-t-tooltip hidden role = "status" aria-live = "polite" >
< span class = "t-tooltip__arrow" aria-hidden = "true" ></ span >
< span class = "t-tooltip__body" >
2026-06-02 17:50:31 +01:00
Press < kbd > T</ kbd > to see this page in < strong > 20 shapes</ strong > .
2026-05-01 21:08:42 +01:00
</ span >
</ aside >
2026-04-28 15:56:35 +01:00
</ header >
2026-04-27 21:46:57 +01:00
< main class = "page" >
2026-04-28 15:56:35 +01:00
<!-- 01 · HERO SLOT — archetype swaps per theme -->
< section class = "slot slot--hero reveal" data-slot = "hero" id = "top" style = "--i:0" aria-label = "Opening" ></ section >
2026-04-27 21:46:57 +01:00
2026-05-01 17:23:48 +01:00
<!-- 02 · EXAMPLES — full-bleed rail, the centerpiece -->
< section class = "section section--bleed reveal" style = "--i:1" id = "examples" aria-labelledby = "s2" >
2026-04-27 21:46:57 +01:00
< header class = "section__head" >
< p class = "section-label" >
2026-05-01 17:23:48 +01:00
< span class = "num" > 02</ span >< span class = "divider" > ⁄ </ span >< span > Examples</ span >
2026-04-27 21:46:57 +01:00
</ p >
< h2 class = "section__title" id = "s2" >
2026-05-06 13:42:25 +01:00
Worked examples.
2026-05-01 17:23:48 +01:00
</ h2 >
</ header >
2026-05-07 13:21:40 +01:00
< p class = "examples__intro" > One-shotted. No shared theme. No shared layout.</ p >
2026-05-01 17:23:48 +01:00
2026-05-07 14:43:21 +01:00
< div class = "examples-rail" role = "list" aria-label = "Example landing pages" >
2026-05-01 17:23:48 +01:00
2026-06-02 20:20:23 +01:00
< a class = "ex-card" style = "--scroll-dur:3.3s" role = "listitem" href = "examples/hum-07/" target = "_blank" rel = "noopener" aria-label = "Open the Bubble example, a guided sourdough app, Hum, in a new tab" >
2026-06-02 17:50:31 +01:00
< div class = "ex-card__thumb" aria-hidden = "true" >
2026-06-03 16:19:09 +01:00
< img src = "_tests/_thumbs/hum-07.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
2026-06-02 17:50:31 +01:00
</ div >
2026-06-02 18:54:33 +01:00
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a guided sourdough app, Hum</ p >
2026-06-02 17:50:31 +01:00
</ a >
2026-06-02 18:54:33 +01:00
<!-- Custom / bespoke showcase. One featured bespoke build; the others live under
site/examples/custom-*. Scroll preview via Remotion (see examples/scroll-demos.json);
once rendered, swap the <img> for <video data-hover-play src="..." poster="...">. -->
2026-06-02 20:20:23 +01:00
< a class = "ex-card" style = "--scroll-dur:4s" role = "listitem" href = "examples/custom-04/" target = "_blank" rel = "noopener" aria-label = "Open the Mend Assembly example, a repair-café manifesto poster, custom, in a new tab" >
2026-06-02 17:50:31 +01:00
< div class = "ex-card__thumb" aria-hidden = "true" >
2026-06-03 16:19:09 +01:00
< img src = "_tests/_thumbs/custom-04.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
2026-06-02 17:50:31 +01:00
</ div >
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a repair-café manifesto poster, custom</ p >
</ a >
2026-06-03 15:27:32 +01:00
< a class = "ex-card" style = "--scroll-dur:3.6s" role = "listitem" href = "examples/garden-01/" target = "_blank" rel = "noopener" aria-label = "Open the Hollowback Apiary example, a small-batch honey farm, Garden, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
2026-06-03 16:19:09 +01:00
< img src = "_tests/_thumbs/garden-01.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
2026-06-03 15:27:32 +01:00
</ div >
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a landing page for a small-batch honey farm</ p >
</ a >
< a class = "ex-card" style = "--scroll-dur:4.6s" role = "listitem" href = "examples/riso-01/" target = "_blank" rel = "noopener" aria-label = "Open the Off-Register example, an indie risograph print fair, Riso, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
2026-06-03 16:19:09 +01:00
< img src = "_tests/_thumbs/riso-01.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
2026-06-03 15:27:32 +01:00
</ div >
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a page for an indie risograph print fair</ p >
</ a >
< a class = "ex-card" style = "--scroll-dur:4.7s" role = "listitem" href = "examples/press-01/" target = "_blank" rel = "noopener" aria-label = "Open the Press Quaternary example, an experimental type studio, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
2026-06-03 16:19:09 +01:00
< img src = "_tests/_thumbs/press-01.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
2026-06-03 15:27:32 +01:00
</ div >
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a portfolio for an experimental typographer</ p >
</ a >
2026-06-02 20:20:23 +01:00
< a class = "ex-card" style = "--scroll-dur:3.6s" role = "listitem" href = "examples/tally/" target = "_blank" rel = "noopener" aria-label = "Open the Tally example, a SaaS product page, modern-minimal, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
2026-06-03 16:19:09 +01:00
< img src = "_tests/_thumbs/tally.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
2026-05-01 21:08:42 +01:00
</ div >
2026-05-07 14:09:59 +01:00
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a SaaS product page, modern-minimal</ p >
2026-05-18 16:23:29 +01:00
</ a >
2026-05-01 17:23:48 +01:00
2026-06-02 20:20:23 +01:00
< a class = "ex-card" style = "--scroll-dur:3s" role = "listitem" href = "examples/wayfare/" target = "_blank" rel = "noopener" aria-label = "Open the Wayfare example, a travel booking site, atmospheric, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
2026-06-03 16:19:09 +01:00
< img src = "_tests/_thumbs/wayfare.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
2026-05-06 18:13:10 +01:00
</ div >
2026-05-07 14:09:59 +01:00
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a travel booking site, atmospheric</ p >
2026-05-18 16:23:29 +01:00
</ a >
2026-05-07 13:21:40 +01:00
2026-06-02 20:20:23 +01:00
< a class = "ex-card" style = "--scroll-dur:3.2s" role = "listitem" href = "examples/bananastudio/" target = "_blank" rel = "noopener" aria-label = "Open the BananaStudio example, a creative studio with playful motion, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
2026-06-03 16:19:09 +01:00
< img src = "_tests/_thumbs/bananastudio.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
2026-05-01 21:08:42 +01:00
</ div >
2026-05-07 14:09:59 +01:00
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a creative studio with playful motion</ p >
2026-05-18 16:23:29 +01:00
</ a >
2026-05-01 17:23:48 +01:00
2026-06-02 20:20:23 +01:00
< a class = "ex-card" style = "--scroll-dur:1.8s" role = "listitem" href = "_tests/06-anya-portfolio/" target = "_blank" rel = "noopener" aria-label = "Open the Anya Reis example, a software architect personal site, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
2026-06-03 16:19:09 +01:00
< img src = "_tests/_thumbs/anya.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
2026-05-07 14:09:59 +01:00
</ div >
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a software architect personal site</ p >
2026-05-18 16:23:29 +01:00
</ a >
2026-05-01 17:23:48 +01:00
2026-06-02 20:20:23 +01:00
< a class = "ex-card" style = "--scroll-dur:2s" role = "listitem" href = "examples/najm/" target = "_blank" rel = "noopener" aria-label = "Open the NAJM example, a Moroccan fashion brand landing page, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
2026-06-03 16:19:09 +01:00
< img src = "_tests/_thumbs/najm.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
2026-05-07 14:09:59 +01:00
</ div >
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a Moroccan fashion brand landing page</ p >
2026-05-18 16:23:29 +01:00
</ a >
2026-05-01 17:23:48 +01:00
2026-06-02 20:20:23 +01:00
< a class = "ex-card" style = "--scroll-dur:3.5s" role = "listitem" href = "examples/hyperlane/" target = "_blank" rel = "noopener" aria-label = "Open the Hyperlane example, a developer infrastructure landing page, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
2026-06-03 16:19:09 +01:00
< img src = "_tests/_thumbs/hyperlane.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
2026-05-07 14:43:21 +01:00
</ div >
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a developer infrastructure landing page</ p >
2026-05-18 16:23:29 +01:00
</ a >
2026-05-07 14:43:21 +01:00
2026-06-03 16:19:09 +01:00
< a class = "ex-card" style = "--scroll-dur:2.5s" role = "listitem" href = "examples/cobalt-01/" target = "_blank" rel = "noopener" aria-label = "Open the Distil example, a content-extraction API, Cobalt, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
< img src = "_tests/_thumbs/cobalt-01.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
</ div >
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a content-extraction API, Cobalt</ p >
</ a >
< a class = "ex-card" style = "--scroll-dur:2.7s" role = "listitem" href = "examples/carnival-01/" target = "_blank" rel = "noopener" aria-label = "Open the Cold Snap example, a record-label EP page, Carnival, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
< img src = "_tests/_thumbs/carnival-01.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
</ div >
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a record-label EP page, Carnival</ p >
</ a >
< a class = "ex-card" style = "--scroll-dur:3.1s" role = "listitem" href = "examples/lumen-01/" target = "_blank" rel = "noopener" aria-label = "Open the Cinder example, an AI reasoning tool, Lumen, in a new tab" >
< div class = "ex-card__thumb" aria-hidden = "true" >
< img src = "_tests/_thumbs/lumen-01.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
</ div >
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build an AI reasoning tool, Lumen</ p >
</ a >
2026-08-06 16:40:03 +01:00
< a class = "ex-card" style = "--scroll-dur:3.3s" role = "listitem" href = "examples/grid-01/" target = "_blank" rel = "noopener" aria-label = "Open the signal example, a Basel poster festival built in the Grid theme" >
2026-08-06 14:41:26 +01:00
< div class = "ex-card__thumb" aria-hidden = "true" >
< img src = "_tests/_thumbs/grid-01.jpg?v=24" alt = "" loading = "lazy" width = "1600" height = "1000" />
</ div >
2026-08-06 16:40:03 +01:00
< p class = "ex-card__prompt" >< span class = "ex-card__prompt-mark" > $</ span > /hallmark build a poster festival site, Grid</ p >
2026-08-06 14:41:26 +01:00
</ a >
2026-05-01 17:23:48 +01:00
</ div >
2026-05-06 12:14:46 +01:00
2026-05-01 17:23:48 +01:00
</ section >
2026-05-05 15:30:38 +01:00
<!-- 03 · SKILLS — five things Hallmark does, one ruleset underneath -->
< section class = "section reveal" style = "--i:2" id = "skills" aria-labelledby = "s-skills" >
2026-05-01 17:23:48 +01:00
< header class = "section__head" >
< p class = "section-label" >
2026-05-05 15:30:38 +01:00
< span class = "num" > 03</ span >< span class = "divider" > ⁄ </ span >< span > Skills</ span >
2026-05-01 17:23:48 +01:00
</ p >
2026-05-05 15:30:38 +01:00
< h2 class = "section__title" id = "s-skills" >
2026-05-06 13:42:25 +01:00
What it does.
2026-05-01 22:52:23 +01:00
</ h2 >
</ header >
2026-05-05 15:30:38 +01:00
< p class = "skills__intro" >
2026-05-07 13:21:40 +01:00
Hallmark has one default behaviour and three explicit verbs. Each reads a different input and returns a
different shape — same opinions, different jobs.
2026-05-01 22:52:23 +01:00
</ p >
2026-05-05 15:30:38 +01:00
< ol class = "skills-list" >
2026-05-01 22:52:23 +01:00
2026-05-05 15:30:38 +01:00
<!-- Row I — Build (default) -->
< li class = "skill-row" data-verb = "build" >
< header class = "skill-row__head" >
< div class = "skill-row__head-body" >
2026-05-06 13:42:25 +01:00
< h3 class = "skill-row__title" > Build < span class = "skill-row__title-meta" > (default)</ span ></ h3 >
2026-05-07 13:21:40 +01:00
< p class = "skill-row__lede" > Ask for a page. Get a page that doesn't look generated. Hallmark picks a
macrostructure first, then dresses it — and refuses to repeat the same shape twice.</ p >
2026-05-05 15:30:38 +01:00
</ div >
</ header >
< div class = "skill-row__body" >
< figure class = "skill-row__demo skill-row__demo--build" >
2026-05-07 13:21:40 +01:00
< span class = "brief-pill" aria-label = "Example brief" > "Build me a landing page for an indie podcast
platform."</ span >
2026-05-05 15:30:38 +01:00
< span class = "brief-arrow" aria-hidden = "true" > ↓</ span >
< span class = "fig-corners brief-output" >
< span class = "fig-corners__bl" ></ span >< span class = "fig-corners__br" ></ span >
2026-05-07 13:21:40 +01:00
< video class = "brief-output__media" src = "_tests/_thumbs/Podcast-loop.mp4" autoplay loop muted playsinline
preload = "metadata" width = "1600" height = "1022"
aria-label = "Podcast platform — a Hallmark output looping through its scroll" ></ video >
2026-05-05 15:30:38 +01:00
</ span >
</ figure >
< ol class = "skill-row__list" >
2026-05-07 13:21:40 +01:00
< li class = "dna__row" >< span class = "dna__k" > Invocation</ span >< span class = "dna__v" > (default) — just
ask</ span ></ li >
< li class = "dna__row" >< span class = "dna__k" > Reads</ span >< span class = "dna__v" > your brief, project tokens,
framework</ span ></ li >
< li class = "dna__row" >< span class = "dna__k" > Picks</ span >< span class = "dna__v" > macrostructure → theme →
enrichment</ span ></ li >
< li class = "dna__row" >< span class = "dna__k" > Returns</ span >< span class = "dna__v" > a working page, stamped,
slop-tested</ span ></ li >
< li class = "dna__row" >< span class = "dna__k" > Refuses</ span >< span class = "dna__v" > repeating the last 3
macrostructures</ span ></ li >
2026-05-05 15:30:38 +01:00
</ ol >
2026-05-04 19:22:17 +01:00
</ div >
2026-05-05 15:30:38 +01:00
</ li >
2026-05-01 22:52:23 +01:00
2026-05-05 15:30:38 +01:00
<!-- Row II — Study (preserves the existing DNA cards as THE demo) -->
< li class = "skill-row" data-verb = "study" >
< header class = "skill-row__head" >
< div class = "skill-row__head-body" >
< h3 class = "skill-row__title" > Study</ h3 >
2026-05-15 14:10:35 +01:00
< p class = "skill-row__lede" > Paste a design you admire — a screenshot < em > or</ em > a URL. Hallmark reads its
structure, not its pixels, and returns a DNA card you can build against. Or say < code > lock the
DNA</ code > to write a portable < code > design.md</ code > you can hand to another AI tool. Never copies
pixels. Tighter refusal layer for the portable spec than for the diagnosis.</ p >
2026-05-05 15:30:38 +01:00
</ div >
</ header >
2026-05-06 13:42:25 +01:00
< div class = "skill-row__body" >
< figure class = "skill-row__demo skill-row__demo--build" >
2026-05-18 16:54:59 +01:00
< span class = "brief-pill" aria-label = "Example brief" > /hallmark study together.ai · or paste a screenshot</ span >
2026-05-06 13:42:25 +01:00
< span class = "brief-arrow" aria-hidden = "true" > ↓</ span >
< span class = "fig-corners brief-output" >
< span class = "fig-corners__bl" ></ span >< span class = "fig-corners__br" ></ span >
2026-05-07 13:21:40 +01:00
< img src = "_tests/_thumbs/study-example.png"
alt = "A scheduling-tool landing page — used as a study reference for Hallmark's DNA extractor"
loading = "lazy" decoding = "async" width = "1680" height = "1050" />
2026-05-06 13:42:25 +01:00
</ span >
</ figure >
2026-05-05 15:30:38 +01:00
2026-05-06 13:42:25 +01:00
< ol class = "skill-row__list" >
2026-05-07 13:21:40 +01:00
< li class = "dna__row" >< span class = "dna__k" > Invocation</ span >< span
2026-05-15 14:10:35 +01:00
class = "dna__v" >< code > hallmark study < screenshot | URL> </ code ></ span ></ li >
2026-05-06 18:13:10 +01:00
< li class = "dna__row" >< span class = "dna__k" > Macrostructure</ span >< span class = "dna__v" > Split Hero</ span ></ li >
2026-05-07 13:21:40 +01:00
< li class = "dna__row" >< span class = "dna__k" > Hero archetype</ span >< span class = "dna__v" > H7 Clipped · copy-left
+ product-mock right</ span ></ li >
< li class = "dna__row" >< span class = "dna__k" > Display role</ span >< span class = "dna__v" > heavy geometric
sans</ span ></ li >
< li class = "dna__row" >< span class = "dna__k" > Body role</ span >< span class = "dna__v" > same family · regular
weight</ span ></ li >
< li class = "dna__row" >< span class = "dna__k" > Label role</ span >< span class = "dna__v" > grotesque · sentence
case</ span ></ li >
< li class = "dna__row" >< span class = "dna__k" > Paper band</ span >< span class = "dna__v" > light · pure white</ span >
</ li >
< li class = "dna__row" >< span class = "dna__k" > Accent hue</ span >< span class = "dna__v" > cool blue + magenta ·
organic gradient</ span ></ li >
< li class = "dna__row" >< span class = "dna__k" > Rhythm</ span >< span class = "dna__v" > left-copy · right product card
· overlapping watercolor blobs</ span ></ li >
< li class = "dna__row" >< span class = "dna__k" > Refuses</ span >< span class = "dna__v" > to ID fonts · to copy
pixels</ span ></ li >
2026-05-06 13:42:25 +01:00
</ ol >
2026-05-04 19:22:17 +01:00
</ div >
2026-05-05 15:30:38 +01:00
</ li >
2026-05-01 22:52:23 +01:00
2026-05-05 15:30:38 +01:00
<!-- Row III — Audit -->
< li class = "skill-row" data-verb = "audit" >
< header class = "skill-row__head" >
< div class = "skill-row__head-body" >
< h3 class = "skill-row__title" > Audit</ h3 >
2026-05-07 13:21:40 +01:00
< p class = "skill-row__lede" > Point Hallmark at a page. Get a ranked punch list of what's wrong — scored
against the anti-pattern catalogue. < strong > No edits.</ strong > Just the diagnosis.</ p >
2026-05-05 15:30:38 +01:00
</ div >
</ header >
< div class = "skill-row__body" >
2026-05-07 14:09:59 +01:00
< figure class = "skill-row__demo skill-row__demo--audit" aria-label = "A Hallmark output for reference" >
2026-05-07 13:21:40 +01:00
< span class = "fig-corners brief-output" >
< span class = "fig-corners__bl" ></ span >< span class = "fig-corners__br" ></ span >
2026-05-07 14:09:59 +01:00
< img src = "_tests/_thumbs/audit-example.png"
alt = "A Hallmark output — editorial display, real proof, hand-built illustration"
2026-05-07 13:21:40 +01:00
loading = "lazy" decoding = "async" width = "1024" height = "640" />
</ span >
2026-05-05 15:30:38 +01:00
</ figure >
2026-05-06 13:42:25 +01:00
< ol class = "audit-check" >
< li class = "audit-check__row" >
< span class = "audit-check__cross" aria-hidden = "true" > ✗</ span >
< span class = "audit-check__problem" > Purple-to-pink gradient hero</ span >
< span class = "audit-check__arrow" aria-hidden = "true" > →</ span >
< span class = "audit-check__fix" > Solid surface, single accent</ span >
</ li >
< li class = "audit-check__row" >
< span class = "audit-check__cross" aria-hidden = "true" > ✗</ span >
< span class = "audit-check__problem" > Inter as display + body</ span >
< span class = "audit-check__arrow" aria-hidden = "true" > →</ span >
< span class = "audit-check__fix" > Pair distinctive display + body</ span >
</ li >
< li class = "audit-check__row" >
< span class = "audit-check__cross" aria-hidden = "true" > ✗</ span >
< span class = "audit-check__problem" > Centered everything</ span >
< span class = "audit-check__arrow" aria-hidden = "true" > →</ span >
< span class = "audit-check__fix" > Bias the layout, break symmetry</ span >
</ li >
< li class = "audit-check__row" >
< span class = "audit-check__cross" aria-hidden = "true" > ✗</ span >
< span class = "audit-check__problem" > Sparkle ✨ emoji as badge</ span >
< span class = "audit-check__arrow" aria-hidden = "true" > →</ span >
< span class = "audit-check__fix" > Pick an icon library, or drop it</ span >
</ li >
< li class = "audit-check__row" >
< span class = "audit-check__cross" aria-hidden = "true" > ✗</ span >
< span class = "audit-check__problem" > Gradient pill CTA</ span >
< span class = "audit-check__arrow" aria-hidden = "true" > →</ span >
< span class = "audit-check__fix" > Solid fill or outline, single hue</ span >
</ li >
2026-05-05 15:30:38 +01:00
</ ol >
</ div >
</ li >
2026-05-06 18:13:10 +01:00
<!-- Row IV — Redesign -->
< li class = "skill-row" data-verb = "redesign" >
2026-05-05 15:30:38 +01:00
< header class = "skill-row__head" >
< div class = "skill-row__head-body" >
< h3 class = "skill-row__title" > Redesign</ h3 >
2026-05-07 13:21:40 +01:00
< p class = "skill-row__lede" > Same content. Same brand. Different bones. Hallmark throws out the structural
fingerprint and rebuilds with a deliberately different one — new section rhythm, new heading placement,
new component voice.</ p >
2026-05-05 15:30:38 +01:00
</ div >
</ header >
2026-05-06 13:42:25 +01:00
< div class = "skill-row__body skill-row__body--full" >
2026-05-05 15:30:38 +01:00
< figure class = "skill-row__demo skill-row__demo--diptych" >
< figure class = "diptych__half" data-state = "before" >
< span class = "fig-corners" >
< span class = "fig-corners__bl" ></ span >< span class = "fig-corners__br" ></ span >
2026-05-07 13:21:40 +01:00
< img src = "_tests/_thumbs/example-redesign-uractivation.png"
alt = "The original page — generic SaaS chrome before the redesign" loading = "lazy" decoding = "async"
width = "1784" height = "1080" />
2026-05-05 15:30:38 +01:00
</ span >
2026-05-07 13:21:40 +01:00
< figcaption class = "diptych__cap" > Before</ figcaption >
2026-05-05 15:30:38 +01:00
</ figure >
< figure class = "diptych__half" data-state = "after" >
< span class = "fig-corners" >
< span class = "fig-corners__bl" ></ span >< span class = "fig-corners__br" ></ span >
2026-05-07 14:09:59 +01:00
< video src = "_tests/_thumbs/uractivation-after-loop.mp4" autoplay loop muted
2026-05-07 13:21:40 +01:00
playsinline preload = "metadata" width = "1784" height = "1080"
aria-label = "Same content, redesigned by Hallmark — different macrostructure, different fingerprint" ></ video >
2026-05-05 15:30:38 +01:00
</ span >
2026-05-07 13:21:40 +01:00
< figcaption class = "diptych__cap" > After Hallmark redesign</ figcaption >
2026-05-05 15:30:38 +01:00
</ figure >
</ figure >
</ div >
</ li >
</ ol >
2026-05-06 12:14:46 +01:00
2026-05-01 22:52:23 +01:00
</ section >
2026-05-06 12:14:46 +01:00
<!-- INTERLUDE — full-bleed typographic moment between III and IV.
Mid-scroll punctuation: a single declarative phrase set in
the active theme's display face, on a contrasting paper band.
Reprise of the marketing pitch in oversized type. -->
< aside class = "interlude reveal" style = "--i:3" aria-hidden = "true" >
< p class = "interlude__phrase" >< em > The page</ em > is the demo.</ p >
</ aside >
<!-- 04 · ANTI-PATTERNS — Slop, by name. Five named AI-UI tells, each
with the Hallmark fix beside it. Replaces the original Without/
With section (preserved as a <template> below). -->
< section class = "section reveal" style = "--i:3" id = "anti-patterns" aria-labelledby = "s-anti" >
< header class = "section__head" >
< p class = "section-label" >
< span class = "num" > 04</ span >< span class = "divider" > ⁄ </ span >< span > Anti-patterns</ span >
</ p >
< h2 class = "section__title" id = "s-anti" >
Slop, by name.
</ h2 >
</ header >
< p class = "anti__intro" >
2026-05-07 13:21:40 +01:00
Five tells the LLM reaches for by default. The Hallmark fix beside each. < code > hallmark audit</ code > flags every
one of these on existing code.
2026-05-06 12:14:46 +01:00
</ p >
< ol class = "anti-list" >
< li class = "anti-row" >
< p class = "anti-row__num tnum" > 01</ p >
< div class = "anti-row__slop" >
< h3 class = "anti-row__name" > The purple-gradient hero.</ h3 >
2026-05-07 13:21:40 +01:00
< p class = "anti-row__desc" > A hero with a background gradient from purple to blue or purple to pink, white
centred text. The single most-recognised AI aesthetic.</ p >
2026-05-06 12:14:46 +01:00
</ div >
< div class = "anti-row__fix" >
< p class = "anti-row__fix-label" > Hallmark</ p >
2026-05-07 13:21:40 +01:00
< p class = "anti-row__fix-body" > Pick a single anchor hue. One accent. No gradient backgrounds on heroes. If
you want warmth, tint the neutrals.</ p >
2026-05-06 12:14:46 +01:00
</ div >
</ li >
< li class = "anti-row" >
< p class = "anti-row__num tnum" > 02</ p >
< div class = "anti-row__slop" >
< h3 class = "anti-row__name" > Inter as display.</ h3 >
2026-05-07 13:21:40 +01:00
< p class = "anti-row__desc" > Inter (or Roboto, or Open Sans) used as both display and body, no pairing face. A
one-font page is a template page.</ p >
2026-05-06 12:14:46 +01:00
</ div >
< div class = "anti-row__fix" >
< p class = "anti-row__fix-label" > Hallmark</ p >
2026-05-07 13:21:40 +01:00
< p class = "anti-row__fix-body" > Pair a distinctive display face with a refined body. Two faces minimum, never
the same family doing both jobs.</ p >
2026-05-06 12:14:46 +01:00
</ div >
</ li >
< li class = "anti-row" >
< p class = "anti-row__num tnum" > 03</ p >
< div class = "anti-row__slop" >
< h3 class = "anti-row__name" > Centred everything.</ h3 >
2026-05-07 13:21:40 +01:00
< p class = "anti-row__desc" > Headline centred, body centred, button centred, section after section of centred
columns. Symmetry as default.</ p >
2026-05-06 12:14:46 +01:00
</ div >
< div class = "anti-row__fix" >
< p class = "anti-row__fix-label" > Hallmark</ p >
2026-05-07 13:21:40 +01:00
< p class = "anti-row__fix-body" > Bias the layout. Wide left margin, narrow right — or the reverse. Breaking
symmetry once is enough to register intent.</ p >
2026-05-06 12:14:46 +01:00
</ div >
</ li >
< li class = "anti-row" >
< p class = "anti-row__num tnum" > 04</ p >
< div class = "anti-row__slop" >
< h3 class = "anti-row__name" > The icon-tile feature card.</ h3 >
2026-05-07 13:21:40 +01:00
< p class = "anti-row__desc" > Rounded rectangle, icon in a coloured square top-left, two-line heading,
three-line copy, optional "Learn more →". The universal template.</ p >
2026-05-06 12:14:46 +01:00
</ div >
< div class = "anti-row__fix" >
< p class = "anti-row__fix-label" > Hallmark</ p >
2026-05-07 13:21:40 +01:00
< p class = "anti-row__fix-body" > If you need feature cards, let them be asymmetric — vary sizes, vary
alignments, pull the icon inline. Or drop the icon and lead with type.</ p >
2026-05-06 12:14:46 +01:00
</ div >
</ li >
< li class = "anti-row" >
< p class = "anti-row__num tnum" > 05</ p >
< div class = "anti-row__slop" >
< h3 class = "anti-row__name" > The AI nav.</ h3 >
2026-05-07 13:21:40 +01:00
< p class = "anti-row__desc" > Wordmark hard-left, four inline links centred, CTA button hard-right, sticky on
scroll, hairline border-bottom. The shape every LLM ships.</ p >
2026-05-06 12:14:46 +01:00
</ div >
< div class = "anti-row__fix" >
< p class = "anti-row__fix-label" > Hallmark</ p >
2026-05-07 13:21:40 +01:00
< p class = "anti-row__fix-body" > Pick a nav archetype that matches the page's genre — newspaper masthead,
terminal command bar, edge-aligned minimal. The nav should tell you what kind of site you're on.</ p >
2026-05-06 12:14:46 +01:00
</ div >
</ li >
</ ol >
</ section >
2026-04-27 21:46:57 +01:00
2026-05-06 13:42:25 +01:00
<!-- 05 · FOUNDATIONS — eight compact cards in a 4×
card holds a hand-drawn SVG icon, one-word title, and a single
line of description. Replaces the radio-tab Foundations panel
(preserved in <template id="section-05-archive-foundations-tabs">
below). -->
< section class = "section reveal" style = "--i:4" id = "foundations" aria-labelledby = "s5-foundations" >
2026-04-27 21:46:57 +01:00
< header class = "section__head" >
< p class = "section-label" >
2026-05-01 22:52:23 +01:00
< span class = "num" > 05</ span >< span class = "divider" > ⁄ </ span >< span > Foundations</ span >
2026-04-27 21:46:57 +01:00
</ p >
2026-05-01 22:52:23 +01:00
< h2 class = "section__title" id = "s5-foundations" >
2026-05-06 13:42:25 +01:00
Foundations.
2026-04-27 21:46:57 +01:00
</ h2 >
</ header >
2026-05-06 13:42:25 +01:00
< p class = "found__intro" > Eight rules that hold across every theme. None of them are settings.</ p >
< ul class = "found-cards" role = "list" >
< li class = "found-card" >
< span class = "found-card__icon" aria-hidden = "true" >
< svg viewBox = "0 0 48 48" fill = "none" stroke-linecap = "round" stroke-linejoin = "round" >
2026-05-07 13:21:40 +01:00
< text x = "3" y = "36" font-family = "'Fraunces', 'Tiempos', serif" font-style = "italic" font-size = "34"
font-weight = "500" fill = "currentColor" > A</ text >
< text x = "22" y = "42" font-family = "'Geist', 'Inter', sans-serif" font-size = "22" font-weight = "600"
fill = "currentColor" > a</ text >
2026-05-06 13:42:25 +01:00
</ svg >
</ span >
< h3 class = "found-card__name" > Type</ h3 >
< p class = "found-card__body" > Pair a display face with a body face. Never one font doing both jobs.</ p >
</ li >
< li class = "found-card" >
< span class = "found-card__icon" aria-hidden = "true" >
< svg viewBox = "0 0 48 48" fill = "currentColor" >
2026-05-07 13:21:40 +01:00
< circle cx = "9" cy = "24" r = "4.5" />
< circle cx = "20" cy = "24" r = "4.5" opacity = "0.7" />
< circle cx = "31" cy = "24" r = "4.5" opacity = "0.4" />
< circle cx = "42" cy = "24" r = "4.5" fill = "none" stroke = "currentColor" stroke-width = "1.5" />
2026-05-06 13:42:25 +01:00
</ svg >
</ span >
< h3 class = "found-card__name" > Colour</ h3 >
< p class = "found-card__body" > OKLCH palettes. One anchor hue. The accent stays under five percent.</ p >
</ li >
< li class = "found-card" >
< span class = "found-card__icon" aria-hidden = "true" >
< svg viewBox = "0 0 48 48" fill = "none" stroke = "currentColor" stroke-width = "1.5" stroke-linecap = "round" >
2026-05-07 13:21:40 +01:00
< line x1 = "4" y1 = "26" x2 = "44" y2 = "26" />
< line x1 = "8" y1 = "22" x2 = "8" y2 = "30" />
< line x1 = "16" y1 = "24" x2 = "16" y2 = "28" />
< line x1 = "24" y1 = "18" x2 = "24" y2 = "32" />
< line x1 = "32" y1 = "24" x2 = "32" y2 = "28" />
< line x1 = "40" y1 = "22" x2 = "40" y2 = "30" />
2026-05-06 13:42:25 +01:00
</ svg >
</ span >
< h3 class = "found-card__name" > Space</ h3 >
< p class = "found-card__body" > A named scale. Multiples of four. No arbitrary 17-pixel paddings.</ p >
</ li >
< li class = "found-card" >
< span class = "found-card__icon" aria-hidden = "true" >
2026-05-07 13:21:40 +01:00
< svg viewBox = "0 0 48 48" fill = "none" stroke = "currentColor" stroke-width = "1.5" stroke-linecap = "round"
stroke-linejoin = "round" >
< path d = "M 6 32 Q 18 32 24 24 T 40 14" />
< path d = "M 34 14 L 40 14 L 40 20" />
2026-05-06 13:42:25 +01:00
</ svg >
</ span >
< h3 class = "found-card__name" > Motion</ h3 >
< p class = "found-card__body" > Exponential ease-out. Reduced-motion alternative for every animation.</ p >
</ li >
< li class = "found-card" >
< span class = "found-card__icon" aria-hidden = "true" >
< svg viewBox = "0 0 48 48" fill = "none" stroke = "currentColor" stroke-width = "2.4" stroke-linecap = "round" >
2026-05-07 13:21:40 +01:00
< path d = "M 11 16 Q 7 19 7 24 Q 7 28 11 28" />
< path d = "M 17 16 Q 13 19 13 24 Q 13 28 17 28" />
< path d = "M 31 16 Q 27 19 27 24 Q 27 28 31 28" />
< path d = "M 37 16 Q 33 19 33 24 Q 33 28 37 28" />
2026-05-06 13:42:25 +01:00
</ svg >
</ span >
< h3 class = "found-card__name" > Voice</ h3 >
< p class = "found-card__body" > Distinct register per theme. Never the SaaS-default neutral middle.</ p >
</ li >
< li class = "found-card" >
< span class = "found-card__icon" aria-hidden = "true" >
< svg viewBox = "0 0 48 48" fill = "none" stroke = "currentColor" stroke-width = "1.5" >
2026-05-07 13:21:40 +01:00
< rect x = "6" y = "12" width = "14" height = "26" />
< rect x = "22" y = "18" width = "20" height = "20" />
2026-05-06 13:42:25 +01:00
</ svg >
</ span >
< h3 class = "found-card__name" > Layout</ h3 >
< p class = "found-card__body" > Bias the page. Asymmetric is intentional. Centred everything is a tell.</ p >
</ li >
< li class = "found-card" >
< span class = "found-card__icon" aria-hidden = "true" >
< svg viewBox = "0 0 48 48" fill = "none" stroke = "currentColor" stroke-linecap = "round" >
2026-05-07 13:21:40 +01:00
< line x1 = "6" y1 = "14" x2 = "42" y2 = "14" stroke-width = "3.5" />
< line x1 = "6" y1 = "25" x2 = "32" y2 = "25" stroke-width = "2" />
< line x1 = "6" y1 = "36" x2 = "22" y2 = "36" stroke-width = "1.2" />
2026-05-06 13:42:25 +01:00
</ svg >
</ span >
< h3 class = "found-card__name" > Hierarchy</ h3 >
< p class = "found-card__body" > Display, body, label. A weight ladder you can read in two seconds.</ p >
</ li >
< li class = "found-card" >
< span class = "found-card__icon" aria-hidden = "true" >
< svg viewBox = "0 0 48 48" fill = "none" stroke = "currentColor" stroke-width = "1.5" >
2026-05-07 13:21:40 +01:00
< rect x = "6" y = "6" width = "36" height = "36" />
< circle cx = "24" cy = "24" r = "3" fill = "currentColor" />
2026-05-06 13:42:25 +01:00
</ svg >
</ span >
< h3 class = "found-card__name" > Restraint</ h3 >
< p class = "found-card__body" > Better nothing than bad something. The strongest fail-state is silence.</ p >
</ li >
</ ul >
</ section >
<!-- DEPRECATED: original Section 05 (Foundations radio tabs) — replaced
by the 8-card grid above. Wrapped in <template> so the markup stays
in this file but doesn't render. To revert: change the opening
<template> to <section class="section reveal" style="--i:4"
aria-labelledby="s5-foundations"> and the closing </template> to
</section>, then remove the new 8-card section above. -->
2026-04-27 21:46:57 +01:00
2026-05-07 19:10:58 +01:00
<!-- 06 · WITH / WITHOUT HALLMARK — same prompt, two different outputs.
The "without" was generated by Sonnet 4.6 alone; the "with" by
2026-05-07 14:09:59 +01:00
Sonnet 4.6 with Hallmark loaded. Both are real outputs of the
same brief. -->
< section class = "section reveal" style = "--i:5" id = "before-after" aria-labelledby = "s-ba" >
2026-04-27 21:46:57 +01:00
< header class = "section__head" >
< p class = "section-label" >
2026-05-07 19:10:58 +01:00
< span class = "num" > 06</ span >< span class = "divider" > ⁄ </ span >< span > With / Without</ span >
2026-05-07 14:09:59 +01:00
</ p >
< h2 class = "section__title" id = "s-ba" >
Same prompt. Two different outputs.
</ h2 >
</ header >
2026-05-07 18:58:08 +01:00
< p class = "ba__prompt" aria-label = "The shared prompt" >< span class = "ba__prompt-mark" > $</ span > /hallmark build a landing page for a dev event launch.</ p >
2026-05-07 14:09:59 +01:00
< div class = "ba" >
< figure class = "ba__panel ba__panel--before" >
< p class = "ba__panel-label" >< span class = "ba__panel-tag" > Sonnet 4.6, no Hallmark</ span ></ p >
< span class = "fig-corners ba__frame" >
< span class = "fig-corners__bl" ></ span >< span class = "fig-corners__br" ></ span >
< img src = "_tests/_thumbs/before-quiet-hour.png" alt = "Generic AI-default landing page — purple-pink gradient hero, generic 'Discover natural wines' headline, ★★★★★ trust strip, 3-column feature cards" loading = "lazy" decoding = "async" width = "1440" height = "900" />
</ span >
< figcaption class = "ba__panel-cap" > Default reach for the gradient. Generic stat strip, made-up Trustpilot rating, "10× </ figcaption >
</ figure >
< figure class = "ba__panel ba__panel--after" >
< p class = "ba__panel-label" >< span class = "ba__panel-tag ba__panel-tag--accent" > Sonnet 4.6 + Hallmark</ span ></ p >
< span class = "fig-corners ba__frame" >
< span class = "fig-corners__bl" ></ span >< span class = "fig-corners__br" ></ span >
< img src = "_tests/_thumbs/after-quiet-hour.png" alt = "A Hallmark output — editorial Lisbon dispatch, italic Fraunces display, real bottle plate with grape + region + tasting notes, no fabricated proof" loading = "lazy" decoding = "async" width = "1440" height = "900" />
</ span >
< figcaption class = "ba__panel-cap" > Marquee Hero · Atelier · italic Fraunces. Real bottle, real grape, real region. No fabricated stats.</ figcaption >
</ figure >
</ div >
</ section >
<!-- 07 · INSTALL — one command, every harness -->
< section class = "section reveal" style = "--i:6" id = "install" aria-labelledby = "s6" >
< header class = "section__head" >
< p class = "section-label" >
< span class = "num" > 07</ span >< span class = "divider" > ⁄ </ span >< span > Install</ span >
2026-04-27 21:46:57 +01:00
</ p >
2026-05-01 22:52:23 +01:00
< h2 class = "section__title" id = "s6" >
2026-05-06 13:42:25 +01:00
Install.
2026-04-27 21:46:57 +01:00
</ h2 >
</ header >
2026-05-01 17:23:48 +01:00
< div class = "install-pane" >
2026-04-27 21:46:57 +01:00
2026-05-01 17:23:48 +01:00
< div class = "install-pane__row install-pane__row--cmd" >
< p class = "install-pane__label" >< span class = "install-pane__step" > I</ span > Run</ p >
< div class = "install-pane__cmd" data-copy-source >
< span class = "install-pane__prompt" aria-hidden = "true" > $</ span >
2026-05-07 17:39:18 +01:00
< span class = "install-pane__cmd-text" data-copy-text > npx skills add nutlope/hallmark</ span >
2026-05-01 17:23:48 +01:00
< button class = "install-pane__copy" type = "button" data-copy-btn aria-label = "Copy install command" >
< span class = "install-pane__copy-default" > Copy</ span >
< span class = "install-pane__copy-done" > Copied</ span >
</ button >
</ div >
2026-04-27 21:46:57 +01:00
</ div >
2026-05-01 17:23:48 +01:00
< div class = "install-pane__row" >
< p class = "install-pane__label" >< span class = "install-pane__step" > II</ span > In</ p >
< ul class = "install-pane__harnesses" >
2026-05-07 13:21:40 +01:00
< li class = "harness" > < span class = "harness__name" > Claude Code</ span >
2026-05-01 17:23:48 +01:00
< code class = "harness__path" > ~/.claude/skills/hallmark/</ code >
< span class = "harness__status harness__status--ok" > auto-detected</ span >
</ li >
2026-05-07 13:21:40 +01:00
< li class = "harness" > < span class = "harness__name" > Cursor</ span >
2026-05-01 17:23:48 +01:00
< code class = "harness__path" > .cursor/rules/hallmark.mdc</ code >
< span class = "harness__status harness__status--ok" > auto-detected</ span >
</ li >
2026-05-19 19:43:21 +01:00
< li class = "harness" > < span class = "harness__name" > Codex</ span >
< code class = "harness__path" > ~/.codex/skills/hallmark/</ code >
< span class = "harness__status harness__status--ok" > auto-detected</ span >
2026-05-01 17:23:48 +01:00
</ li >
</ ul >
2026-04-27 21:46:57 +01:00
</ div >
2026-05-01 17:23:48 +01:00
< div class = "install-pane__row" >
< p class = "install-pane__label" >< span class = "install-pane__step" > III</ span > Then</ p >
2026-05-05 11:39:02 +01:00
< p class = "install-pane__next" > Ask your agent for a UI. < code > hallmark</ code > attaches itself.</ p >
2026-04-27 21:46:57 +01:00
</ div >
</ div >
</ section >
2026-05-01 17:23:48 +01:00
<!-- FOOTER SLOT — archetype swaps per theme -->
2026-05-05 15:30:38 +01:00
< footer class = "slot slot--foot reveal" data-slot = "footer" style = "--i:6" role = "contentinfo" aria-label = "Colophon" >
2026-05-01 10:21:02 +01:00
</ footer >
2026-04-27 21:46:57 +01:00
</ main >
2026-05-01 17:23:48 +01:00
<!-- ─── Easter egg ─── revealed when the user spams T —— -->
< aside class = "easter" data-easter-egg hidden role = "dialog" aria-modal = "true" aria-label = "A note from Hallmark" >
< div class = "easter__panel" >
< ol class = "easter__lines" aria-live = "polite" >
2026-05-06 13:42:25 +01:00
< li class = "easter__line easter__line--cmd" >< span class = "easter__prompt" > $</ span > hallmark.observe()</ li >
2026-05-01 17:39:21 +01:00
< li class = "easter__line easter__line--punchline" data-easter-punchline >
2026-05-07 13:21:40 +01:00
< span class = "easter__arrow" > > </ span > < span data-easter-line > theme connoisseur.</ span >< span
class = "easter__cursor" aria-hidden = "true" ></ span >
2026-05-01 17:23:48 +01:00
</ li >
</ ol >
< p class = "easter__hint" >
2026-05-06 13:42:25 +01:00
< span > back in a moment</ span >
2026-05-01 17:23:48 +01:00
</ p >
</ div >
</ aside >
2026-04-28 15:56:35 +01:00
<!-- ─────────── HERO ARCHETYPES ─────────── -->
2026-04-27 22:38:45 +01:00
2026-04-28 15:56:35 +01:00
< template id = "hero-marquee" >
< div class = "hero hero--marquee" >
2026-05-07 10:42:43 +01:00
< div class = "hero__main" >
< p class = "hero__eyebrow" >< span class = "mark" aria-hidden = "true" ></ span > {{eyebrow}}</ p >
< h1 class = "hero__display" data-text = "{{title}}" > {{title}}</ h1 >
< p class = "hero__lede" > {{lede}}</ p >
< div class = "hero__cta" >
< p class = "label" > {{ctaLabel}}</ p >
< pre class = "code"
2026-05-07 17:39:18 +01:00
data-copy-source >< span class = "prompt" > $</ span >< span data-copy-text > npx skills add nutlope/hallmark</ span >< button class = "code__copy" type = "button" data-copy-btn aria-label = "Copy install command" >< span class = "code__copy-default" > Copy</ span >< span class = "code__copy-done" > Copied</ span ></ button ></ pre >
2026-05-07 10:42:43 +01:00
</ div >
2026-04-27 22:38:45 +01:00
</ div >
2026-05-07 10:42:43 +01:00
< aside class = "hero__moment" aria-hidden = "true" ></ aside >
2026-04-27 22:38:45 +01:00
</ div >
2026-04-28 15:56:35 +01:00
</ template >
< template id = "hero-split" >
< div class = "hero hero--split" >
< div class = "hero__col" >
< p class = "hero__eyebrow" >< span class = "mark" aria-hidden = "true" ></ span > {{eyebrow}}</ p >
< h1 class = "hero__display" > {{title}}</ h1 >
< p class = "hero__lede" > {{lede}}</ p >
</ div >
< aside class = "hero__proof" >
< p class = "label" > {{proofLabel}}</ p >
< p class = "hero__proof-line" > {{proofA}}</ p >
< p class = "hero__proof-line" > {{proofB}}</ p >
< p class = "hero__proof-line" > {{proofC}}</ p >
< a href = "#install" class = "link" > {{cta}} → </ a >
</ aside >
</ div >
</ template >
< template id = "hero-stat-led" >
< div class = "hero hero--stat" >
2026-05-07 10:42:43 +01:00
< div class = "hero__main" >
< p class = "hero__eyebrow" >< span class = "mark" aria-hidden = "true" ></ span > {{eyebrow}}</ p >
< span class = "hero__stat tabular-nums" > {{stat}}</ span >
< p class = "hero__qualifier" > {{qualifier}}</ p >
< p class = "hero__lede" > {{lede}}</ p >
< a href = "#install" class = "link hero__link" > {{cta}} → </ a >
</ div >
< aside class = "hero__moment" aria-hidden = "true" ></ aside >
2026-04-28 15:56:35 +01:00
</ div >
</ template >
< template id = "hero-quote-led" >
< div class = "hero hero--quote" >
2026-05-07 10:42:43 +01:00
< div class = "hero__main" >
< p class = "hero__eyebrow" >< span class = "mark" aria-hidden = "true" ></ span > {{eyebrow}}</ p >
< blockquote class = "hero__quote" >
< p > “ {{quote}}” </ p >
< footer class = "hero__attrib" > — {{attrib}}</ footer >
</ blockquote >
< p class = "hero__lede" > {{lede}}</ p >
< a href = "#install" class = "link hero__link" > {{cta}} → </ a >
</ div >
< aside class = "hero__moment" aria-hidden = "true" ></ aside >
2026-04-28 15:56:35 +01:00
</ div >
</ template >
< template id = "hero-letter" >
< div class = "hero hero--letter" >
2026-05-07 10:42:43 +01:00
< div class = "hero__main" >
< p class = "hero__eyebrow" >< span class = "mark" aria-hidden = "true" ></ span > {{eyebrow}}</ p >
< p class = "hero__salutation" > {{salutation}}</ p >
< p class = "hero__letter-body" > {{letterBody}}</ p >
< p class = "hero__signoff" > {{signoff}}< br >< span class = "hero__sign" > — Hallmark</ span ></ p >
</ div >
2026-06-02 17:50:31 +01:00
< aside class = "hero__moment" aria-hidden = "true" >
< svg viewBox = "0 0 120 220" fill = "none" xmlns = "http://www.w3.org/2000/svg" >
< path pathLength = "100" d = "M60 214 C60 168 58 118 60 76 C61 48 60 26 60 8" />
< path pathLength = "100" d = "M60 166 C40 160 26 144 27 120 C51 124 64 144 60 166Z" />
< path pathLength = "100" d = "M60 134 C82 128 96 110 95 86 C70 90 56 112 60 134Z" />
< path pathLength = "100" d = "M60 100 C42 95 31 80 32 58 C54 62 65 80 60 100Z" />
< path pathLength = "100" d = "M60 72 C80 67 92 52 91 32 C68 36 56 54 60 72Z" />
< path pathLength = "100" d = "M60 24 C53 18 53 10 60 4 C67 10 67 18 60 24Z" />
</ svg >
</ aside >
2026-04-28 15:56:35 +01:00
</ div >
</ template >
2026-04-29 15:42:17 +01:00
2026-05-06 14:18:50 +01:00
<!-- H9 — Bloom. Two-column hero with a layered watercolor + brushstroke
composition on the right: soft transparent SVG wash + oversized
italic wordmark + small geometric accents. Painterly, no chrome. -->
< template id = "hero-bloom" >
< div class = "hero hero--bloom" >
< div class = "hero__copy" >
< p class = "hero__eyebrow" >< span class = "mark" aria-hidden = "true" ></ span > {{eyebrow}}</ p >
< h1 class = "hero__display hero__display--small" > {{title}}</ h1 >
< p class = "hero__lede" > {{lede}}</ p >
< div class = "hero__cta" >
< pre class = "code"
2026-05-07 17:39:18 +01:00
data-copy-source >< span class = "prompt" > $</ span >< span data-copy-text > npx skills add nutlope/hallmark</ span >< button class = "code__copy" type = "button" data-copy-btn aria-label = "Copy install command" >< span class = "code__copy-default" > Copy</ span >< span class = "code__copy-done" > Copied</ span ></ button ></ pre >
2026-05-06 14:18:50 +01:00
</ div >
</ div >
< figure class = "hero__bloom-stage" aria-hidden = "true" >
< svg class = "hero__bloom-wash" viewBox = "0 0 400 500" preserveAspectRatio = "xMidYMid meet" >
< defs >
< radialGradient id = "bloomGrad" cx = "0.42" cy = "0.36" r = "0.72" >
2026-05-07 13:21:40 +01:00
< stop offset = "0%" stop-color = "currentColor" stop-opacity = "0.85" />
< stop offset = "55%" stop-color = "currentColor" stop-opacity = "0.45" />
< stop offset = "100%" stop-color = "currentColor" stop-opacity = "0" />
2026-05-06 14:18:50 +01:00
</ radialGradient >
</ defs >
2026-05-07 13:21:40 +01:00
< path
d = "M 80 60 Q 60 140 90 220 Q 50 280 80 360 Q 110 410 200 420 Q 320 440 340 360 Q 380 280 340 220 Q 380 130 320 80 Q 240 30 180 60 Q 130 30 80 60 Z"
fill = "url(#bloomGrad)" />
2026-05-06 14:18:50 +01:00
</ svg >
< span class = "hero__bloom-glyph" >< em > Hallmark.</ em ></ span >
< span class = "hero__bloom-dot" aria-hidden = "true" ></ span >
< span class = "hero__bloom-line" aria-hidden = "true" ></ span >
< span class = "hero__bloom-circle" aria-hidden = "true" ></ span >
</ figure >
</ div >
</ template >
<!-- H10 — Orbit. Two-column hero with concentric rings + a glowing
center dot. Slow rotation gives the page life without noise.
Reserved for atmospheric warm-glow themes (Halo). -->
< template id = "hero-orbit" >
< div class = "hero hero--orbit" >
< div class = "hero__copy" >
< p class = "hero__eyebrow" >< span class = "mark" aria-hidden = "true" ></ span > {{eyebrow}}</ p >
< h1 class = "hero__display hero__display--small" > {{title}}</ h1 >
< p class = "hero__lede" > {{lede}}</ p >
< div class = "hero__cta" >
< pre class = "code"
2026-05-07 17:39:18 +01:00
data-copy-source >< span class = "prompt" > $</ span >< span data-copy-text > npx skills add nutlope/hallmark</ span >< button class = "code__copy" type = "button" data-copy-btn aria-label = "Copy install command" >< span class = "code__copy-default" > Copy</ span >< span class = "code__copy-done" > Copied</ span ></ button ></ pre >
2026-05-06 14:18:50 +01:00
</ div >
</ div >
< figure class = "hero__orbit-stage" aria-hidden = "true" >
< div class = "hero__orbit-rings" >
< svg viewBox = "0 0 400 400" preserveAspectRatio = "xMidYMid meet" >
< g fill = "none" stroke = "currentColor" stroke-linecap = "round" >
2026-05-07 13:21:40 +01:00
< circle cx = "200" cy = "200" r = "190" stroke-width = "0.6" opacity = "0.35" />
< circle cx = "200" cy = "200" r = "155" stroke-width = "0.8" opacity = "0.5" />
< circle cx = "200" cy = "200" r = "118" stroke-width = "1" opacity = "0.7" />
< circle cx = "200" cy = "200" r = "82" stroke-width = "1.4" opacity = "0.85" />
< circle cx = "200" cy = "200" r = "48" stroke-width = "1.8" opacity = "1" />
< line x1 = "200" y1 = "10" x2 = "200" y2 = "22" stroke-width = "1.2" stroke = "var(--color-accent)" />
2026-05-06 14:18:50 +01:00
</ g >
</ svg >
</ div >
< span class = "hero__orbit-dot pulse" aria-hidden = "true" ></ span >
< div class = "hero__orbit-rule" ></ div >
< p class = "hero__orbit-spec" > {{captionA}} · {{captionB}}</ p >
</ figure >
</ div >
</ template >
2026-06-02 17:50:31 +01:00
<!-- HUM — playful shape play. A bouncing multi-accent composition on the
right; the default theme's hero. Reuses the marquee copy keys. -->
< template id = "hero-hum" >
< div class = "hero hero--hum" >
< div class = "hero__main" >
< p class = "hero__eyebrow" >< span class = "mark" aria-hidden = "true" ></ span > {{eyebrow}}</ p >
< h1 class = "hero__display" > {{title}}</ h1 >
< p class = "hero__lede" > {{lede}}</ p >
< div class = "hero__cta" >
< p class = "label" > {{ctaLabel}}</ p >
< pre class = "code"
data-copy-source >< span class = "prompt" > $</ span >< span data-copy-text > npx skills add nutlope/hallmark</ span >< button class = "code__copy" type = "button" data-copy-btn aria-label = "Copy install command" >< span class = "code__copy-default" > Copy</ span >< span class = "code__copy-done" > Copied</ span ></ button ></ pre >
</ div >
</ div >
< figure class = "hero__play" aria-hidden = "true" >
< span class = "play-blob" ></ span >
< span class = "play-dot play-dot--pear" ></ span >
< span class = "play-pill play-pill--cyan" ></ span >
< span class = "play-ring play-ring--lavender" ></ span >
< span class = "play-dot play-dot--coral" ></ span >
< span class = "play-dot play-dot--mint" ></ span >
</ figure >
</ div >
</ template >
< template id = "hero-cobalt" >
< div class = "hero hero--cobalt" >
< div class = "hero__main" >
< p class = "hero__eyebrow" >< span class = "mark" aria-hidden = "true" ></ span > {{eyebrow}}</ p >
< h1 class = "hero__display" > {{title}}</ h1 >
< p class = "hero__lede" > {{lede}}</ p >
< div class = "hero__cta-row" >
< a class = "hero__cta-btn" href = "#install" > {{ctaLabel}}</ a >
< a class = "link hero__link" href = "#examples" > {{cta}} → </ a >
</ div >
</ div >
</ div >
</ template >
2026-04-28 15:56:35 +01:00
<!-- ─────────── FOOTER ARCHETYPES ─────────── -->
2026-05-06 12:02:10 +01:00
<!-- The COLOPHON — a single editorial footer for every theme. The
publisher's signature page traditionally doesn't change across
volumes; the structural variety lives in the body, not here.
Per-theme typography still re-renders this block. -->
< template id = "footer-colophon" >
< div class = "foot foot--colophon" >
2026-05-07 11:30:45 +01:00
< div class = "foot__masthead" >
2026-05-07 14:43:21 +01:00
< span class = "foot__wordmark" aria-label = "Hallmark" >< span class = "brand-mark brand-mark--lg" aria-hidden = "true" >< span class = "brand-mark__slash" > /</ span >< span class = "brand-mark__name" > hallmark</ span ></ span ></ span >
2026-06-02 20:20:23 +01:00
< span class = "foot__version tnum" > v1.1 · MMXXVI</ span >
2026-05-06 13:42:25 +01:00
</ div >
2026-04-28 15:56:35 +01:00
2026-05-07 11:30:45 +01:00
< div class = "foot__grid" >
< section class = "foot__block" >
< p class = "foot__label" > Currently in</ p >
< p class = "foot__value" >< strong data-theme-current-foot > Specimen</ strong ></ p >
< p class = "foot__hint" > Press < kbd class = "kbd" > T</ kbd > to cycle · < kbd class = "kbd" > R</ kbd > to randomise.</ p >
</ section >
< section class = "foot__block" >
< p class = "foot__label" > In the catalog</ p >
< ul class = "foot__stats" >
2026-06-02 17:50:31 +01:00
< li >< span class = "foot__stat-num tnum" > 20</ span >< span class = "foot__stat-key" > themes</ span ></ li >
2026-05-07 11:30:45 +01:00
< li >< span class = "foot__stat-num tnum" > 21</ span >< span class = "foot__stat-key" > macrostructures</ span ></ li >
2026-06-02 18:34:47 +01:00
< li >< span class = "foot__stat-num tnum" > 57</ span >< span class = "foot__stat-key" > slop-test gates</ span ></ li >
2026-05-07 11:30:45 +01:00
</ ul >
</ section >
< section class = "foot__block" >
< p class = "foot__label" > Read or take a copy</ p >
< ul class = "foot__nav" >
2026-05-07 17:39:18 +01:00
< li >< a class = "link" href = "https://github.com/nutlope/hallmark" > Source on GitHub → </ a ></ li >
2026-05-07 11:30:45 +01:00
< li >< a class = "link" href = "#install" > Install command</ a ></ li >
< li >< a class = "link" href = "#top" > Back to top</ a ></ li >
</ ul >
</ section >
2026-05-06 13:42:25 +01:00
</ div >
2026-04-28 15:56:35 +01:00
2026-05-07 11:30:45 +01:00
< p class = "foot__base" >
2026-05-19 19:08:44 +01:00
Made by < a class = "foot__powered-mark" href = "https://www.together.ai" target = "_blank" rel = "noopener" > Together AI</ a > . MIT licensed.
2026-05-07 11:30:45 +01:00
</ p >
2026-05-06 12:02:10 +01:00
</ div >
2026-04-28 15:56:35 +01:00
</ template >
2026-04-27 22:38:45 +01:00
2026-06-03 16:19:09 +01:00
< script type = "module" src = "js/main.js?v=24" ></ script >
2026-04-27 21:46:57 +01:00
</ body >
2026-05-01 10:21:02 +01:00
2026-05-07 13:21:40 +01:00
</ html >
