diff --git a/.hallmark/log.json b/.hallmark/log.json new file mode 100644 index 0000000..6c79ee2 --- /dev/null +++ b/.hallmark/log.json @@ -0,0 +1,3 @@ +[ + { "date": "2026-05-18", "macrostructure": "Workbench", "theme": "Quiet", "enrichment": "Tier-A pure-CSS trace panel", "nav": "N5", "footer": "Ft2", "brief": "Flarepin · error-tracking SaaS for backend devs (Node/Python/Go)" } +] diff --git a/README.md b/README.md index 7b8a5a5..64745e7 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Powered by Together AI. 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/). +> **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.md`](SKILL.md) and [`references/`](references/). --- @@ -91,8 +91,8 @@ Each page is its own self-contained HTML + CSS — no shared theme, no shared la ## What's inside -- **[`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). +- **[`SKILL.md`](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/`](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, 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. @@ -115,7 +115,7 @@ Each page is its own self-contained HTML + CSS — no shared theme, no shared la - **SaaS page sequence.** Hero → social proof → features → testimonials → pricing → FAQ → CTA → footer. Real prices, not "contact sales for pricing." Specific testimonials with role + company. - **Wordmark may use a different display face.** A Geist-bodied SaaS page can set its wordmark in Fraunces. Same-family collapse on Bento / Stat-Led / Workbench / Marquee Hero is the new "un-branded" tell. - **`study` extracts DNA, not pixels.** Refusal heuristics, type-role vocabulary (no font ID guessing in image mode), confirmation step before any code. Accepts a screenshot *or* a URL — URL mode reads HTML / CSS via WebFetch and names exact fonts + exact tokens (trades the rhythm pass for accuracy on everything else), with a graceful screenshot fallback when the URL is auth-walled or a JS-only shell. Three worked examples in [`docs/study-examples.md`](docs/study-examples.md). -- **Opt-in `design.md` lock-the-system flow — two entry points.** Iterate freely on the first builds; when the system is settled, say *"lock the system"* (or *"give me a design.md"*) and Hallmark extracts the build's tokens + voice into a portable design system at the project root. **Or**, after a `study` diagnosis, say *"lock the DNA"* and Hallmark emits the same `design.md` format seeded from the studied source — URL mode populates exact tokens + fonts; image mode populates estimated bands + candidate fonts. From that point on every Hallmark run defers to the file, the diversification rule inverts to consistency, and the file becomes the single source of truth for scaling the design across a real app. The study-mode emission carries a tighter refusal layer than the diagnosis itself — third-party URLs require user attestation (your own site / public reference for your own brand), competitors and paid templates are auto-refused. Phrase-triggered from either entry point, never auto-emitted. See [`skill/references/design-md.md`](skill/references/design-md.md). +- **Opt-in `design.md` lock-the-system flow — two entry points.** Iterate freely on the first builds; when the system is settled, say *"lock the system"* (or *"give me a design.md"*) and Hallmark extracts the build's tokens + voice into a portable design system at the project root. **Or**, after a `study` diagnosis, say *"lock the DNA"* and Hallmark emits the same `design.md` format seeded from the studied source — URL mode populates exact tokens + fonts; image mode populates estimated bands + candidate fonts. From that point on every Hallmark run defers to the file, the diversification rule inverts to consistency, and the file becomes the single source of truth for scaling the design across a real app. The study-mode emission carries a tighter refusal layer than the diagnosis itself — third-party URLs require user attestation (your own site / public reference for your own brand), competitors and paid templates are auto-refused. Phrase-triggered from either entry point, never auto-emitted. See [`references/design-md.md`](references/design-md.md). --- diff --git a/ROADMAP.md b/ROADMAP.md index d26b9d5..4eec29f 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -19,7 +19,7 @@ A forward-looking plan for what to build next, drawn from the gaps the latest re ### N.2 Nanobanana image generation inside Hallmark (image-led theme) -**Status now.** [`assets.md`](skill/references/assets.md) lists Nanobanana as the canonical generated-still source (Tier C in the enrichment hierarchy) but the integration is *recommend-only* — Hallmark tells the user to go generate something and bring it back. No first-class image-led theme exists; image-heavy briefs route to a typography-only macrostructure and feel underserved. +**Status now.** [`assets.md`](references/assets.md) lists Nanobanana as the canonical generated-still source (Tier C in the enrichment hierarchy) but the integration is *recommend-only* — Hallmark tells the user to go generate something and bring it back. No first-class image-led theme exists; image-heavy briefs route to a typography-only macrostructure and feel underserved. **Build.** 1. **First-class Nanobanana hook.** When the brief signals "needs imagery" (e-commerce, travel, food, lookbook, gallery) and the user hasn't supplied real assets, Hallmark generates a brief for Nanobanana (style, subject, framing, palette tokens), invokes the API, ingests the returned image, and wires it into the build. Cache by prompt hash so re-runs are cheap. @@ -34,7 +34,7 @@ A forward-looking plan for what to build next, drawn from the gaps the latest re ### 1.1 Theme-aware microinteraction tokens -**Status now.** [`microinteractions.md`](skill/references/microinteractions.md) describes a duration multiplier per theme as a table — but the multipliers aren't actually expressed in CSS. Atelier and Salon should *feel* slower than Brutal and Sport, but right now they share the same `--dur-short` / `--dur-long`. +**Status now.** [`microinteractions.md`](references/microinteractions.md) describes a duration multiplier per theme as a table — but the multipliers aren't actually expressed in CSS. Atelier and Salon should *feel* slower than Brutal and Sport, but right now they share the same `--dur-short` / `--dur-long`. **Build.** Move `--dur-micro`, `--dur-short`, `--dur-long` into per-theme overrides in [`tokens.css`](site/css/tokens.css), scaled by the table in `microinteractions.md`. Newsprint and Terminal use `0ms` for spatial motion (they're print/terminal metaphors). One pass through the file; small diff. @@ -74,7 +74,7 @@ A forward-looking plan for what to build next, drawn from the gaps the latest re ### 2.1 `references/structural-cookbook.md` — concrete recipes -**Status now.** [`structure.md`](skill/references/structure.md) catalogues the *axes* of structural variety. It doesn't show *what* a left-margin-headed, single-column, hairline-divided, unstyled-link, no-image, no-reveal page actually looks like assembled. +**Status now.** [`structure.md`](references/structure.md) catalogues the *axes* of structural variety. It doesn't show *what* a left-margin-headed, single-column, hairline-divided, unstyled-link, no-image, no-reveal page actually looks like assembled. **Build.** A cookbook file with 12–20 *complete* structural fingerprints, each with a short HTML/CSS sketch, a paragraph explaining when to reach for it, and a real-world reference (NYT Mag, Stripe, Linear, Pentagram, etc.). The cookbook teaches the model patterns the same way recipe books teach cooking — through *worked examples*, not just *principles*. @@ -134,7 +134,7 @@ This requires a new mapping: emotion → tone → fingerprint. Worth building on ### 3.4 Sound and haptic policy -Currently [`microinteractions.md`](skill/references/microinteractions.md) says "no sound on web" — correct default. But Hallmark could ship a tiny module covering: when sound is appropriate (gaming, AAA brands, accessibility-augmenting); haptic feedback (Vibration API on mobile); and how to do them without crossing into kitsch. Small file; long horizon. +Currently [`microinteractions.md`](references/microinteractions.md) says "no sound on web" — correct default. But Hallmark could ship a tiny module covering: when sound is appropriate (gaming, AAA brands, accessibility-augmenting); haptic feedback (Vibration API on mobile); and how to do them without crossing into kitsch. Small file; long horizon. ### 3.5 Live preview as a Claude Code MCP server diff --git a/skill/SKILL.md b/SKILL.md similarity index 100% rename from skill/SKILL.md rename to SKILL.md diff --git a/docs/talk-slides.md b/docs/talk-slides.md new file mode 100644 index 0000000..e8177d0 --- /dev/null +++ b/docs/talk-slides.md @@ -0,0 +1,364 @@ +# Stop letting your agents ship ugly UIs. + +How to build well-designed UIs with AI agents. + +Hassan El Mghari · Together AI · AI Engineer World's Fair · 2026 + +--- + +> **About this deck** — this is a general playbook for any AI engineer, not a product pitch. Hallmark is mentioned once, on slide 15, as one open-source example our team built. The seven fixes apply to v0, Lovable, Bolt, Cursor, Claude Code, or any agent you're building yourself. +> +> **Visual style** — dark slate `#0b1117`, off-white ink `#e6edf3`, GitHub-cool-blue accent `#58a6ff`. Inter for type, Roboto Mono for code. Every slide chrome-free: no eyebrow labels, no decorative hairlines. Footer is the Together AI logo bottom-left and a page number bottom-right. +> +> **Cadence** — 17 slides, 18 minutes. ~60 seconds per slide. Section opener (S05) is a 10-second beat. S08 (wireframes), S11 (eight states), S13 (system prompt) want a moment. + +--- + +## 01 · Cover + +# Stop letting your agents ship ugly UIs. + +*How to build well-designed UIs with AI agents.* + +— Hassan El Mghari · Together AI · AI Engineer World's Fair · 2026 + +*Speaker: I'm Hassan, I lead DX at Together AI. Most of you have built an AI app this year and watched it ship a UI you'd never put on your portfolio. This talk is about why that happens, and seven concrete things that fix it — for any agent you use.* + +--- + +## 02 · The problem + +# Here's what your agent ships today. + +*(Visual: the real DevForge screenshot — a generated developer-conference landing page. Purple-cyan gradient on the headline, centered hero, four-column stat row, Inter on Inter.)* + +> Vanilla prompt. Same shape every time. + +*Speaker: I gave the same prompt to a dozen agents — "build me a landing page for a developer conference, dark theme, in Brooklyn." This is roughly what every one of them returned. Different models, different stacks, same page.* + +--- + +## 03 · The promise + +# It could ship this instead. + +*(Visual: the Hyperlane screenshot — same brief, rebuilt. Big sans-serif headline with an italic-serif accent, asymmetric layout, single warm accent, monospace meta.)* + +> Same brief. One missing layer added. + +*Speaker: Same brief. Same agent. The difference is the layer between the prompt and the output. We'll spend the rest of the talk on that layer.* + +--- + +## 04 · Why + +# Models ship the mean of their training set. + +*Every SaaS site since 2019 trained on the same shape. Without external steering, the agent regresses to it.* + +> Every part of this is fixable with prompting and a small amount of structure. + +*Speaker: This isn't a model failure. Claude can render anything you describe. It's that "make me a landing page" maps to a region of the manifold where every SaaS site since 2019 lives. The good news: every fix from here is something you can do today, with any agent.* + +--- + +## 05 · Section opener + +# Seven things that fix it. + +*Tool-agnostic. Works with v0, Lovable, Bolt, Cursor, Claude Code, or your own agent.* + +*Speaker: Each one of these closes a class of slop. Each one works today.* + +--- + +## 06 · Fix 01 — Use a real component library + +# Use a real component library. + +shadcn/ui is the lingua franca of generated UI. +Every major AI tool is trained on it. Linear, Vercel and Stripe ship it. +Adopt it and your agent's output gets 80% better on day one. + +```bash +$ npx shadcn@latest add button card dialog input table +``` + +→ *drop the components in. Now every AI generation composes from a real system, not from invented primitives.* + +*Speaker: This is the cheapest, highest-leverage move. Most AI engineers know about shadcn/ui. Fewer actually adopt it. v0 ships it natively. Cursor reads it. Claude Code reads it. The model has seen millions of examples of these components — it knows how to compose them.* + +--- + +## 07 · Fix 02 — Pin a design system + +# Pin a design system. + +A single file at the root the agent reads on every render. +One palette, one type pairing, one scale. No mid-render improvisation. + +```css +/* DESIGN.md or app/globals.css — Tailwind v4 @theme block */ + +@theme { + --color-paper: oklch(0.13 0.01 250); /* one surface, not five */ + --color-ink: oklch(0.93 0.01 250); /* one ink */ + --color-accent: oklch(0.65 0.18 250); /* one accent, under 5% */ + --font-display: "Inter Tight", sans-serif; + --font-body: "Inter", sans-serif; + --space-1: 0.25rem; /* 4-pt scale */ + --ease-out: cubic-bezier(.2,0,0,1); +} +``` + +*Speaker: Tailwind v4 made this easier than it used to be. One `@theme` block, OKLCH for color, semantic names. Drop a `DESIGN.md` next to it that describes the brand in plain English — what the brand sounds like, what it isn't. The agent reads both on every run.* + +--- + +## 08 · Fix 03 — Ask for a shape + +# Ask for a shape, not a list of features. + +*Stop saying "hero with three features." Say marquee. bento. long-document. stat-led.* + +*(Visual: four abstract wireframes drawn in Figma showing each shape.)* + +- **MARQUEE** · one editorial idea, biased left +- **LONG DOCUMENT** · reads like a letter, no marketing chrome +- **BENTO** · many entries, irregular grid +- **STAT-LED** · product is the headline; numbers carry it + +*Speaker: This is the move that breaks the "every page looks like a SaaS landing" attractor. Don't enumerate features. Pick a category of page. The same way Linear's home and Stripe's home don't share a shape — they share a category.* + +--- + +## 09 · Fix 04 — Show a reference + +# Paste a screenshot. Don't describe it. + +AI sees more than it reads. +A reference image carries more taste than a paragraph of adjectives. + +``` +→ pick a real site you admire. +→ ask the agent to extract the structure, not copy the pixels. +→ name the role of the type ("italic editorial serif"), not the font. +``` + +*(Visual right: a real screenshot of calendly.com — the reference you'd actually paste.)* + +> example · pasted calendly.com to the agent + +*Speaker: Designers have always done this — "make it feel like this." Until recently your agent had no equivalent. Now it does. Don't describe taste. Show it. And ask the model to extract structure, not pixels — what you want is the rhythm, not a knock-off.* + +--- + +## 10 · Fix 05 — Ban the tells + +# Tell it what you DON'T want. + +*Constraints beat instructions. Put these in your system prompt:* + +- ✕ Purple → blue gradient hero +- ✕ Inter / Roboto as display AND body +- ✕ Three equal columns with icon-above-heading +- ✕ `min-height: 100vh`, everything centered +- ✕ Cards inside cards (no semantic reason) +- ✕ `background-clip` text gradients on headlines +- ✕ Pure `#000` or pure `#fff` as a surface +- ✕ Invented metrics, testimonials, or logos + +*Speaker: Counterintuitive but true: telling the model what NOT to do is stronger than describing what you want. These eight tells are the fingerprints of AI-generated UI. Ban them and the model has to reach somewhere else.* + +--- + +## 11 · Fix 06 — Eight states + +# Every interactive element ships eight states. + +*If the agent emits two, your UI ships broken.* + +*(Visual: eight actual buttons in a 4-by-2 grid, each visibly in a different state — default, hover, focus-visible, active, disabled, loading, error, success.)* + +| state | what makes it different | +| --- | --- | +| `default` | the resting style | +| `hover` | one shade lighter | +| `:focus-visible` | a 2px accent ring, instant (no fade-in) | +| `:active` | inverted ink, accent fill | +| `disabled` | 50% opacity, no pointer | +| `loading` | `· · · working` | +| `error` | red border, ⚠ retry | +| `success` | green border, ✓ saved | + +*Speaker: This is the single fastest "real or vibes" test you can run on AI output. Tab into the page. Disable a field. Make something load. If three of the eight states are unstyled, the agent shipped a screenshot, not a component.* + +--- + +## 12 · Fix 07 — Critique before emit + +# Make the agent grade its own work — first. + +*One line in the system prompt forces a critical pass before output. Two passes is normal.* + +- **DISTINCTIVENESS** · does this look like THIS brief — or any brief +- **HIERARCHY** · can a reader tell first / second / third in 2 seconds +- **EXECUTION** · are the details right (rules, spacing, focus rings) +- **RESTRAINT** · cut what doesn't earn its place + +Score each 1–5. Anything below 3 → revision pass. + +*Speaker: The trick isn't the rubric — it's forcing the model to look at its own output critically before it returns. Two passes is normal. Three passes means the brief is too vague.* + +--- + +## 13 · The whole playbook + +# You can fit the whole playbook in one paragraph. + +```md +# system_prompt.md + +You are a designer, not a templater. Before you write code: + + 1. use shadcn/ui — never re-invent a primitive that already exists. + 2. read DESIGN.md for tokens. Use only those. + 3. pick ONE page shape (marquee, long-document, bento, stat-led, manifesto, catalogue). + 4. ban: purple-cyan gradients, Inter on Inter, 3-col icon grids, 100vh centered hero, + card-in-card, background-clip text, pure #000 / #fff, invented metrics. + 5. ship 8 states for every interactive element. + 6. score Distinctiveness · Hierarchy · Execution · Restraint on 1–5. + anything <3 triggers a revision pass. +``` + +*Speaker: That's it. Seven lines. Drop this in any agent's system prompt — Cursor `.mdc`, Claude Code skill, v0 project instructions. Feel the difference on the next render.* + +--- + +## 14 · Tools + +# Pick your weapon. + +*Same seven fixes. Different surfaces.* + +| | | | +| --- | --- | --- | +| **v0** | shadcn / Tailwind playground | best UI quality out of the box | +| **Lovable** | full-stack chat-and-build | edit visually, ship live | +| **Bolt** | fast prototyping in StackBlitz | speed | +| **Cursor** | in-IDE assistant | lives in your editor | +| **Claude Code** | agent loop · file-aware · skills | longest-context coder | + +*Speaker: All of these can do beautiful work if you put the seven fixes in. Pick the one that matches your stack.* + +--- + +## 15 · Hallmark — one example our team open-sourced + +# Hallmark. + +*One example our team open-sourced.* + +A Claude Code skill that bakes all seven fixes in. + +→ `github.com/nutlope/hallmark` + +*(Visual: the Hallmark OG image — "The best landing pages built with AI" with three real example pages baked in.)* + +*Speaker: We packaged the seven fixes into a Claude Code skill for ourselves at Together AI, then open-sourced it. It's one approach — there are others (Anthropic's frontend-design skill, Taste, Impeccable, others). The principle is the same: stop letting the agent invent the rules. Hand it a system.* + +--- + +## 16 · The big idea + +# Design taste is a layer in the agent stack. + +``` +MODELS +TOOLS +MEMORY +RAG +EVALS +TASTE ← here +ORCHESTRATION +``` + +*If you don't put it in the stack, the model picks the mean.* + +*Speaker: We treat eval as a first-class layer because we know models will optimize for the wrong thing without it. Taste is the same — not a polish step you add at the end. A layer. Same stack you already build with. New row.* + +--- + +## 17 · Thanks + +# Thanks. + +``` +github.com/nutlope/hallmark +together.ai +``` + +`@nutlope` `@YoussefXLM` + +*(Visual right: a real QR code linking to the Hallmark repo.)* + +> scan to install + +*Speaker: Thanks. The skill is open today. I'd love to see what you build with it — and what fixes you'd add to your own agent's stack.* + +--- + +# Designer / production notes + +**Chrome — kept minimal on purpose** + +- No eyebrow labels at the top of slides. +- No decorative hairlines, dividers, or accent rules. +- Footer is two elements only: the Together AI logo bottom-left (32×32), and the slide number bottom-right. +- Functional rectangles (code-block surfaces, button shapes on S11, axis cards on S12) are kept — they carry content. + +**Palette — locked** + +- BG `#0b1117` (deep slate) +- Surface `#161b22` (code blocks, cards) +- Ink primary `#e6edf3` +- Ink secondary `#7d8590` +- Accent `#58a6ff` (GitHub cool blue — links, key labels, accent fills) +- Alert `#f85149` (only on Fix 05 ban list and Fix 06 error button) +- Success `#3fb950` (only on Fix 06 success button) + +**Type** + +- Display: Inter (Black / Bold weights at huge sizes) +- Body: Inter Regular / Light +- Code & mono labels: Roboto Mono + +**Pacing** + +17 slides for an 18-minute slot ≈ 60 seconds per slide. The section opener (S05) is a 10-second beat. The system-prompt slide (S13) wants a moment for Hassan to read it out loud. The Hallmark slide (S15) is intentionally quiet — read the label, don't dwell. + +**If running long** + +In order: S04 (Why — can fold into S02 narration), S16 (the stack diagram — can be one sentence after S15). Never drop S05, S08, S09, S11. + +**If running short** + +Add a live demo after S09. Paste a screenshot of a designed site, run the agent, show the output. 90 seconds max. + +**The markdown deliverable** + +This file (`docs/talk-slides.md`) is the canonical copy. If the Figma file gets reorganized, this stays authoritative. + +--- + +# Sources + +- ["shadcn/ui March 2026 Update: CLI v4, AI Agent Skills and Design System Presets"](https://medium.com/@nakranirakesh/shadcn-ui-march-2026-update-cli-v4-ai-agent-skills-and-design-system-presets-d30cf200b0e9) +- ["AI-First UIs: Why shadcn/ui's Model is Leading the Pack" — Refine](https://refine.dev/blog/shadcn-blog/) +- ["Design Systems for the Vibe-Coding Era" — Anna Arteeva, Design Systems Collective](https://www.designsystemscollective.com/design-systems-for-the-vibe-coding-era-42282e1affef) +- [Anthropic — "Improving frontend design through Skills"](https://claude.com/blog/improving-frontend-design-through-skills) +- ["v0 by Vercel — Complete Guide 2026"](https://www.nxcode.io/resources/news/v0-by-vercel-complete-guide-2026) +- ["The Vibe-Coder's Prompting Guide" — Anna Arteeva, Medium](https://annaarteeva.medium.com/the-vibe-coders-prompting-guide-e04ba0295a18) +- ["Choosing your AI prototyping stack: Lovable, v0, Bolt, Replit, Cursor, Magic Patterns" — Anna Arteeva, Medium](https://annaarteeva.medium.com/choosing-your-ai-prototyping-stack-lovable-v0-bolt-replit-cursor-magic-patterns-compared-9a5194f163e9) +- [AI Engineer World's Fair 2026 — Jun 29 – Jul 2](https://www.ai.engineer/worldsfair) +- [Hassan El Mghari · DX at Together AI](https://www.nutlope.com/) diff --git a/package.json b/package.json index dfada75..95c5cde 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,12 @@ "license": "MIT", "type": "module", "files": [ - "skill/SKILL.md", - "skill/references" + "SKILL.md", + "references" ], "skill": { - "entry": "skill/SKILL.md", - "references": "skill/references", + "entry": "SKILL.md", + "references": "references", "harnesses": [ "claude-code", "cursor", diff --git a/skill/references/anti-patterns.md b/references/anti-patterns.md similarity index 100% rename from skill/references/anti-patterns.md rename to references/anti-patterns.md diff --git a/skill/references/assets.md b/references/assets.md similarity index 100% rename from skill/references/assets.md rename to references/assets.md diff --git a/skill/references/color.md b/references/color.md similarity index 100% rename from skill/references/color.md rename to references/color.md diff --git a/skill/references/component-cookbook.md b/references/component-cookbook.md similarity index 100% rename from skill/references/component-cookbook.md rename to references/component-cookbook.md diff --git a/skill/references/components/c1-outlined-chip.md b/references/components/c1-outlined-chip.md similarity index 100% rename from skill/references/components/c1-outlined-chip.md rename to references/components/c1-outlined-chip.md diff --git a/skill/references/components/c2-inline-form-as-cta.md b/references/components/c2-inline-form-as-cta.md similarity index 100% rename from skill/references/components/c2-inline-form-as-cta.md rename to references/components/c2-inline-form-as-cta.md diff --git a/skill/references/components/c3-typographic-link.md b/references/components/c3-typographic-link.md similarity index 100% rename from skill/references/components/c3-typographic-link.md rename to references/components/c3-typographic-link.md diff --git a/skill/references/components/c4-sticky-bottom-bar.md b/references/components/c4-sticky-bottom-bar.md similarity index 100% rename from skill/references/components/c4-sticky-bottom-bar.md rename to references/components/c4-sticky-bottom-bar.md diff --git a/skill/references/components/f1-bento-grid.md b/references/components/f1-bento-grid.md similarity index 100% rename from skill/references/components/f1-bento-grid.md rename to references/components/f1-bento-grid.md diff --git a/skill/references/components/f2-sticky-scroll-stack.md b/references/components/f2-sticky-scroll-stack.md similarity index 100% rename from skill/references/components/f2-sticky-scroll-stack.md rename to references/components/f2-sticky-scroll-stack.md diff --git a/skill/references/components/f3-tabular-spec-sheet.md b/references/components/f3-tabular-spec-sheet.md similarity index 100% rename from skill/references/components/f3-tabular-spec-sheet.md rename to references/components/f3-tabular-spec-sheet.md diff --git a/skill/references/components/f4-step-sequence.md b/references/components/f4-step-sequence.md similarity index 100% rename from skill/references/components/f4-step-sequence.md rename to references/components/f4-step-sequence.md diff --git a/skill/references/components/f5-annotated-screenshot.md b/references/components/f5-annotated-screenshot.md similarity index 100% rename from skill/references/components/f5-annotated-screenshot.md rename to references/components/f5-annotated-screenshot.md diff --git a/skill/references/components/f6-product-card-grid.md b/references/components/f6-product-card-grid.md similarity index 100% rename from skill/references/components/f6-product-card-grid.md rename to references/components/f6-product-card-grid.md diff --git a/skill/references/components/ft1-mast-headed.md b/references/components/ft1-mast-headed.md similarity index 100% rename from skill/references/components/ft1-mast-headed.md rename to references/components/ft1-mast-headed.md diff --git a/skill/references/components/ft2-inline-rule-single-line.md b/references/components/ft2-inline-rule-single-line.md similarity index 100% rename from skill/references/components/ft2-inline-rule-single-line.md rename to references/components/ft2-inline-rule-single-line.md diff --git a/skill/references/components/ft3-index-style-category-list.md b/references/components/ft3-index-style-category-list.md similarity index 100% rename from skill/references/components/ft3-index-style-category-list.md rename to references/components/ft3-index-style-category-list.md diff --git a/skill/references/components/ft4-dense-typographic.md b/references/components/ft4-dense-typographic.md similarity index 100% rename from skill/references/components/ft4-dense-typographic.md rename to references/components/ft4-dense-typographic.md diff --git a/skill/references/components/ft5-statement.md b/references/components/ft5-statement.md similarity index 100% rename from skill/references/components/ft5-statement.md rename to references/components/ft5-statement.md diff --git a/skill/references/components/ft6-letter-close.md b/references/components/ft6-letter-close.md similarity index 100% rename from skill/references/components/ft6-letter-close.md rename to references/components/ft6-letter-close.md diff --git a/skill/references/components/ft7-newsletter-first.md b/references/components/ft7-newsletter-first.md similarity index 100% rename from skill/references/components/ft7-newsletter-first.md rename to references/components/ft7-newsletter-first.md diff --git a/skill/references/components/ft8-marquee-scroll.md b/references/components/ft8-marquee-scroll.md similarity index 100% rename from skill/references/components/ft8-marquee-scroll.md rename to references/components/ft8-marquee-scroll.md diff --git a/skill/references/components/h1-marquee.md b/references/components/h1-marquee.md similarity index 100% rename from skill/references/components/h1-marquee.md rename to references/components/h1-marquee.md diff --git a/skill/references/components/h2-split-diptych.md b/references/components/h2-split-diptych.md similarity index 100% rename from skill/references/components/h2-split-diptych.md rename to references/components/h2-split-diptych.md diff --git a/skill/references/components/h3-quote-led.md b/references/components/h3-quote-led.md similarity index 100% rename from skill/references/components/h3-quote-led.md rename to references/components/h3-quote-led.md diff --git a/skill/references/components/h4-stat-led.md b/references/components/h4-stat-led.md similarity index 100% rename from skill/references/components/h4-stat-led.md rename to references/components/h4-stat-led.md diff --git a/skill/references/components/h5-letter-hero.md b/references/components/h5-letter-hero.md similarity index 100% rename from skill/references/components/h5-letter-hero.md rename to references/components/h5-letter-hero.md diff --git a/skill/references/components/h6-photographic-fold.md b/references/components/h6-photographic-fold.md similarity index 100% rename from skill/references/components/h6-photographic-fold.md rename to references/components/h6-photographic-fold.md diff --git a/skill/references/components/h7-demo-video-clipped-by-viewport-edge.md b/references/components/h7-demo-video-clipped-by-viewport-edge.md similarity index 100% rename from skill/references/components/h7-demo-video-clipped-by-viewport-edge.md rename to references/components/h7-demo-video-clipped-by-viewport-edge.md diff --git a/skill/references/components/h8-mockup-split-browser-framed.md b/references/components/h8-mockup-split-browser-framed.md similarity index 100% rename from skill/references/components/h8-mockup-split-browser-framed.md rename to references/components/h8-mockup-split-browser-framed.md diff --git a/skill/references/components/h9-custom-illustration-centerpiece.md b/references/components/h9-custom-illustration-centerpiece.md similarity index 100% rename from skill/references/components/h9-custom-illustration-centerpiece.md rename to references/components/h9-custom-illustration-centerpiece.md diff --git a/skill/references/components/n1-wordmark-2-links.md b/references/components/n1-wordmark-2-links.md similarity index 100% rename from skill/references/components/n1-wordmark-2-links.md rename to references/components/n1-wordmark-2-links.md diff --git a/skill/references/components/n10-floating-on-scroll-morph.md b/references/components/n10-floating-on-scroll-morph.md similarity index 100% rename from skill/references/components/n10-floating-on-scroll-morph.md rename to references/components/n10-floating-on-scroll-morph.md diff --git a/skill/references/components/n2-floating-chip.md b/references/components/n2-floating-chip.md similarity index 100% rename from skill/references/components/n2-floating-chip.md rename to references/components/n2-floating-chip.md diff --git a/skill/references/components/n3-side-rail.md b/references/components/n3-side-rail.md similarity index 100% rename from skill/references/components/n3-side-rail.md rename to references/components/n3-side-rail.md diff --git a/skill/references/components/n4-hidden-behind-k.md b/references/components/n4-hidden-behind-k.md similarity index 100% rename from skill/references/components/n4-hidden-behind-k.md rename to references/components/n4-hidden-behind-k.md diff --git a/skill/references/components/n5-floating-pill.md b/references/components/n5-floating-pill.md similarity index 100% rename from skill/references/components/n5-floating-pill.md rename to references/components/n5-floating-pill.md diff --git a/skill/references/components/n6-newspaper-masthead.md b/references/components/n6-newspaper-masthead.md similarity index 100% rename from skill/references/components/n6-newspaper-masthead.md rename to references/components/n6-newspaper-masthead.md diff --git a/skill/references/components/n7-brutal-slab.md b/references/components/n7-brutal-slab.md similarity index 100% rename from skill/references/components/n7-brutal-slab.md rename to references/components/n7-brutal-slab.md diff --git a/skill/references/components/n8-terminal-command.md b/references/components/n8-terminal-command.md similarity index 100% rename from skill/references/components/n8-terminal-command.md rename to references/components/n8-terminal-command.md diff --git a/skill/references/components/n9-edge-aligned-minimal.md b/references/components/n9-edge-aligned-minimal.md similarity index 100% rename from skill/references/components/n9-edge-aligned-minimal.md rename to references/components/n9-edge-aligned-minimal.md diff --git a/skill/references/components/s1-left-margin-numbered.md b/references/components/s1-left-margin-numbered.md similarity index 100% rename from skill/references/components/s1-left-margin-numbered.md rename to references/components/s1-left-margin-numbered.md diff --git a/skill/references/components/s2-hanging.md b/references/components/s2-hanging.md similarity index 100% rename from skill/references/components/s2-hanging.md rename to references/components/s2-hanging.md diff --git a/skill/references/components/s3-sticky-pinned.md b/references/components/s3-sticky-pinned.md similarity index 100% rename from skill/references/components/s3-sticky-pinned.md rename to references/components/s3-sticky-pinned.md diff --git a/skill/references/components/s4-inline-no-break.md b/references/components/s4-inline-no-break.md similarity index 100% rename from skill/references/components/s4-inline-no-break.md rename to references/components/s4-inline-no-break.md diff --git a/skill/references/components/s5-bottom-anchored.md b/references/components/s5-bottom-anchored.md similarity index 100% rename from skill/references/components/s5-bottom-anchored.md rename to references/components/s5-bottom-anchored.md diff --git a/skill/references/components/t1-pull-quote-with-marginalia.md b/references/components/t1-pull-quote-with-marginalia.md similarity index 100% rename from skill/references/components/t1-pull-quote-with-marginalia.md rename to references/components/t1-pull-quote-with-marginalia.md diff --git a/skill/references/components/t2-logo-wall-hairline.md b/references/components/t2-logo-wall-hairline.md similarity index 100% rename from skill/references/components/t2-logo-wall-hairline.md rename to references/components/t2-logo-wall-hairline.md diff --git a/skill/references/components/t3-single-huge-quote.md b/references/components/t3-single-huge-quote.md similarity index 100% rename from skill/references/components/t3-single-huge-quote.md rename to references/components/t3-single-huge-quote.md diff --git a/skill/references/components/t4-numbered-stat-strip.md b/references/components/t4-numbered-stat-strip.md similarity index 100% rename from skill/references/components/t4-numbered-stat-strip.md rename to references/components/t4-numbered-stat-strip.md diff --git a/skill/references/contract.md b/references/contract.md similarity index 100% rename from skill/references/contract.md rename to references/contract.md diff --git a/skill/references/copy.md b/references/copy.md similarity index 100% rename from skill/references/copy.md rename to references/copy.md diff --git a/skill/references/custom-craft.md b/references/custom-craft.md similarity index 100% rename from skill/references/custom-craft.md rename to references/custom-craft.md diff --git a/skill/references/custom-theme.md b/references/custom-theme.md similarity index 100% rename from skill/references/custom-theme.md rename to references/custom-theme.md diff --git a/skill/references/design-md.md b/references/design-md.md similarity index 98% rename from skill/references/design-md.md rename to references/design-md.md index 2298647..b8f39a7 100644 --- a/skill/references/design-md.md +++ b/references/design-md.md @@ -98,7 +98,7 @@ to it. Amend intentionally — the file is the rule. `tokens.css` (in this project) is the source of truth. For Tailwind v4 `@theme`, DTCG `tokens.json`, or shadcn/ui CSS variables, ask *"extend design.md with Tailwind exports"* (or the format you want) — Hallmark will -append them per [`export-formats.md`](skill/references/export-formats.md). +append them per [`export-formats.md`](export-formats.md). ```` State the picks aloud BEFORE writing the file. *"Genre: editorial. Macrostructure: Long Document. Theme: catalog Editorial. Locking this as the project's system."* Then write. diff --git a/skill/references/export-formats.md b/references/export-formats.md similarity index 100% rename from skill/references/export-formats.md rename to references/export-formats.md diff --git a/skill/references/floating-nav.md b/references/floating-nav.md similarity index 100% rename from skill/references/floating-nav.md rename to references/floating-nav.md diff --git a/skill/references/genres/atmospheric.md b/references/genres/atmospheric.md similarity index 100% rename from skill/references/genres/atmospheric.md rename to references/genres/atmospheric.md diff --git a/skill/references/genres/editorial.md b/references/genres/editorial.md similarity index 100% rename from skill/references/genres/editorial.md rename to references/genres/editorial.md diff --git a/skill/references/genres/modern-minimal.md b/references/genres/modern-minimal.md similarity index 100% rename from skill/references/genres/modern-minimal.md rename to references/genres/modern-minimal.md diff --git a/skill/references/genres/playful.md b/references/genres/playful.md similarity index 100% rename from skill/references/genres/playful.md rename to references/genres/playful.md diff --git a/skill/references/hero-enrichment.md b/references/hero-enrichment.md similarity index 100% rename from skill/references/hero-enrichment.md rename to references/hero-enrichment.md diff --git a/skill/references/imagery-kit.md b/references/imagery-kit.md similarity index 100% rename from skill/references/imagery-kit.md rename to references/imagery-kit.md diff --git a/skill/references/interaction-and-states.md b/references/interaction-and-states.md similarity index 100% rename from skill/references/interaction-and-states.md rename to references/interaction-and-states.md diff --git a/skill/references/layout-and-space.md b/references/layout-and-space.md similarity index 100% rename from skill/references/layout-and-space.md rename to references/layout-and-space.md diff --git a/skill/references/macrostructures.md b/references/macrostructures.md similarity index 100% rename from skill/references/macrostructures.md rename to references/macrostructures.md diff --git a/skill/references/macrostructures/01-bento-grid.md b/references/macrostructures/01-bento-grid.md similarity index 100% rename from skill/references/macrostructures/01-bento-grid.md rename to references/macrostructures/01-bento-grid.md diff --git a/skill/references/macrostructures/02-long-document.md b/references/macrostructures/02-long-document.md similarity index 100% rename from skill/references/macrostructures/02-long-document.md rename to references/macrostructures/02-long-document.md diff --git a/skill/references/macrostructures/03-marquee-hero.md b/references/macrostructures/03-marquee-hero.md similarity index 100% rename from skill/references/macrostructures/03-marquee-hero.md rename to references/macrostructures/03-marquee-hero.md diff --git a/skill/references/macrostructures/04-stat-led.md b/references/macrostructures/04-stat-led.md similarity index 100% rename from skill/references/macrostructures/04-stat-led.md rename to references/macrostructures/04-stat-led.md diff --git a/skill/references/macrostructures/05-workbench.md b/references/macrostructures/05-workbench.md similarity index 100% rename from skill/references/macrostructures/05-workbench.md rename to references/macrostructures/05-workbench.md diff --git a/skill/references/macrostructures/06-conversational-faq.md b/references/macrostructures/06-conversational-faq.md similarity index 100% rename from skill/references/macrostructures/06-conversational-faq.md rename to references/macrostructures/06-conversational-faq.md diff --git a/skill/references/macrostructures/07-manifesto.md b/references/macrostructures/07-manifesto.md similarity index 100% rename from skill/references/macrostructures/07-manifesto.md rename to references/macrostructures/07-manifesto.md diff --git a/skill/references/macrostructures/08-photographic.md b/references/macrostructures/08-photographic.md similarity index 100% rename from skill/references/macrostructures/08-photographic.md rename to references/macrostructures/08-photographic.md diff --git a/skill/references/macrostructures/09-quote-led.md b/references/macrostructures/09-quote-led.md similarity index 100% rename from skill/references/macrostructures/09-quote-led.md rename to references/macrostructures/09-quote-led.md diff --git a/skill/references/macrostructures/10-specimen.md b/references/macrostructures/10-specimen.md similarity index 100% rename from skill/references/macrostructures/10-specimen.md rename to references/macrostructures/10-specimen.md diff --git a/skill/references/macrostructures/11-catalogue.md b/references/macrostructures/11-catalogue.md similarity index 100% rename from skill/references/macrostructures/11-catalogue.md rename to references/macrostructures/11-catalogue.md diff --git a/skill/references/macrostructures/12-letter.md b/references/macrostructures/12-letter.md similarity index 100% rename from skill/references/macrostructures/12-letter.md rename to references/macrostructures/12-letter.md diff --git a/skill/references/macrostructures/13-index-first.md b/references/macrostructures/13-index-first.md similarity index 100% rename from skill/references/macrostructures/13-index-first.md rename to references/macrostructures/13-index-first.md diff --git a/skill/references/macrostructures/14-narrative-workflow.md b/references/macrostructures/14-narrative-workflow.md similarity index 100% rename from skill/references/macrostructures/14-narrative-workflow.md rename to references/macrostructures/14-narrative-workflow.md diff --git a/skill/references/macrostructures/15-split-studio.md b/references/macrostructures/15-split-studio.md similarity index 100% rename from skill/references/macrostructures/15-split-studio.md rename to references/macrostructures/15-split-studio.md diff --git a/skill/references/macrostructures/16-feature-stack.md b/references/macrostructures/16-feature-stack.md similarity index 100% rename from skill/references/macrostructures/16-feature-stack.md rename to references/macrostructures/16-feature-stack.md diff --git a/skill/references/macrostructures/17-type-specimen.md b/references/macrostructures/17-type-specimen.md similarity index 100% rename from skill/references/macrostructures/17-type-specimen.md rename to references/macrostructures/17-type-specimen.md diff --git a/skill/references/macrostructures/18-portfolio-grid.md b/references/macrostructures/18-portfolio-grid.md similarity index 100% rename from skill/references/macrostructures/18-portfolio-grid.md rename to references/macrostructures/18-portfolio-grid.md diff --git a/skill/references/macrostructures/19-map-diagram.md b/references/macrostructures/19-map-diagram.md similarity index 100% rename from skill/references/macrostructures/19-map-diagram.md rename to references/macrostructures/19-map-diagram.md diff --git a/skill/references/macrostructures/20-ecosystem-index.md b/references/macrostructures/20-ecosystem-index.md similarity index 100% rename from skill/references/macrostructures/20-ecosystem-index.md rename to references/macrostructures/20-ecosystem-index.md diff --git a/skill/references/macrostructures/21-component-playground.md b/references/macrostructures/21-component-playground.md similarity index 100% rename from skill/references/macrostructures/21-component-playground.md rename to references/macrostructures/21-component-playground.md diff --git a/skill/references/microinteractions.md b/references/microinteractions.md similarity index 100% rename from skill/references/microinteractions.md rename to references/microinteractions.md diff --git a/skill/references/motion.md b/references/motion.md similarity index 100% rename from skill/references/motion.md rename to references/motion.md diff --git a/skill/references/preview-examples.md b/references/preview-examples.md similarity index 100% rename from skill/references/preview-examples.md rename to references/preview-examples.md diff --git a/skill/references/responsive.md b/references/responsive.md similarity index 100% rename from skill/references/responsive.md rename to references/responsive.md diff --git a/skill/references/slop-test.md b/references/slop-test.md similarity index 100% rename from skill/references/slop-test.md rename to references/slop-test.md diff --git a/skill/references/structure.md b/references/structure.md similarity index 100% rename from skill/references/structure.md rename to references/structure.md diff --git a/skill/references/study.md b/references/study.md similarity index 100% rename from skill/references/study.md rename to references/study.md diff --git a/skill/references/typography.md b/references/typography.md similarity index 100% rename from skill/references/typography.md rename to references/typography.md diff --git a/skill/references/verbs/audit.md b/references/verbs/audit.md similarity index 100% rename from skill/references/verbs/audit.md rename to references/verbs/audit.md diff --git a/skill/references/verbs/redesign.md b/references/verbs/redesign.md similarity index 100% rename from skill/references/verbs/redesign.md rename to references/verbs/redesign.md diff --git a/site/_launch-comparison/a-steeped/hallmark/index.html b/site/_launch-comparison/a-steeped/hallmark/index.html new file mode 100644 index 0000000..704f932 --- /dev/null +++ b/site/_launch-comparison/a-steeped/hallmark/index.html @@ -0,0 +1,201 @@ + + + + + + Steeped — Eight teas, slowly. + + + + + + + + +
+ + + + + +
+

A monthly tea, posted from Vermont

+

+ + Eight teas, slowly. +

+

+ Single-origin loose-leaf, picked the season we send it. We pack eight small tins each month and post them to about six hundred subscribers. +

+
+ + +
+ + +
+

+ Steeped started in a Vermont kitchen in 2024, in winter, with one electric kettle and a wholesale order of Darjeeling that turned out to be older than the catalogue claimed. +

+ +

+ We had been drinking the kind of tea you buy in foil sachets — competent, forgettable, the same in May as in November. After that disappointing kilo we wrote to a grower in Nepal we'd read about. She answered in three days. The next harvest came in a paper sack with the date the leaf was plucked written on the side in pencil. +

+ +

+ That is the standard now. Eight teas a month, each one from a grower we have written to, called, or — when we can — visited. Some of them we will name. Some prefer we don't. All of them get paid the price they asked, not the price the broker offered. +

+ +

How a month works

+ +

+ On the first of the month we pack the eight tins, label them by hand, and walk them to the post office on Maple. The box arrives within a week to most of the United States and within two to most of Europe. Inside, alongside the tins, you'll find a single folded card — one page, two sides, a paragraph on each tea and a paragraph on the month. +

+ +

+ You can brew everything in the box with a small strainer and a kettle. We send a steeping card on your first month. After that, you'll know. +

+ +
+ The point of a subscription is not surprise. The point is the same small ritual on a different week of the year. +
+ +

Who this is for

+ +

+ People who already brew coffee one cup at a time. People who keep one nice cup at the back of the cupboard and use it Sunday mornings. People who would rather drink a small amount of something specific than a large amount of something competent. +

+ +

+ Not for: people who drink three mugs before noon and want consistency. We are too small and too seasonal for that. We will probably stay this size. +

+ +

+ — Mara + Founder · Steeped · Vermont +

+
+
+ + + + +
+
+

In this month's box

+

+ Eight tins, May 2026. +

+
+ +
    +
  1. + 01 +

    First-Flush Jun Chiyabari

    +

    Nepal · Hile, Dhankuta · 2,000 m · April pluck

    +

    Pale gold, muscatel and pear-skin. The leaf that began the whole thing.

    +
    2. +
  2. + 02 +

    Iron Goddess

    +

    Fujian, China · Anxi · charcoal-roasted by Mr. Yang

    +

    Six steeps before it tires. Orchid into roasted-stone-fruit into clean malt.

    +
    3. +
  3. + 03 +

    Niwaki Sencha

    +

    Wazuka, Kyoto · shaded ten days · steamed long

    +

    Cold-brew it overnight. Sea-air and cucumber. Brews twice.

    +
    4. +
  4. + 04 +

    Smoked Lapsang

    +

    Tongmu, Wuyi · pine-smoked the old way

    +

    Not the gas-station kind. Soft-smoke, longan-fruit, faintly sweet.

    +
    5. +
  5. + 05 +

    Ruby 18

    +

    Sun Moon Lake, Taiwan · indigenous wild × Burmese assamica

    +

    Cinnamon and mint, no additives. Drinks well with milk if you must.

    +
    6. +
  6. + 06 +

    Silver Needle

    +

    Fuding, Fujian · two days, hand-picked buds only

    +

    The quietest tea in the box. Honeysuckle, melon-rind, warm hay.

    +
    7. +
  7. + 07 +

    Old Tree Shou

    +

    Menghai, Yunnan · 2018 wet-pile · pressed 2020

    +

    Wet forest, baker's-chocolate, a touch of date. Brews for an hour.

    +
    8. +
  8. + 08 +

    Tulsi & Wild Mint

    +

    Vermont · our own hedgerow · dried slowly indoors

    +

    Caffeine-free. The cup we drink at the end of the day.

    +
    9. +
+
+ + + + +
+
+

Notes on slowness

+

+ We do not ship overnight. We do not run flash sales. We do not email between boxes. The tin is small on purpose — eight to ten cups, enough to know it, not so much you'd forget the shape of it. +

+

+ If a harvest doesn't come — frost, weather, a grower's quiet year — we substitute honestly and tell you in the card. Some months we skip a tea entirely and send seven. The price stays the same. +

+
+
+ + +
+

If this sounds right

+

+ Start next month's box. $38 a month, ships free in the US. +

+ + +
+ + + + +
+ + diff --git a/site/_launch-comparison/a-steeped/hallmark/notes.md b/site/_launch-comparison/a-steeped/hallmark/notes.md new file mode 100644 index 0000000..a1d036f --- /dev/null +++ b/site/_launch-comparison/a-steeped/hallmark/notes.md @@ -0,0 +1,84 @@ +# Steeped · Hallmark cell · notes + +## Mode + +`hallmark` (default Design flow — greenfield consumer brand landing page). + +## Brief (one line) + +Steeped — a tiny indie tea brand (Vermont, 2024, ~600 subscribers) shipping eight single-origin loose-leaf teas a month. Warm, slow, sensory voice. + +## Self-answered context-gate questions + +Hallmark Step 1 always asks three questions before designing. Because this is an automated comparison run, I self-answered from the brief and proceeded: + +- **Audience** — slow-living adults (mid-30s+) who already brew coffee one cup at a time and want the same care brought to tea. Gift-buyers for that same person. +- **Use case** — one job: subscribe to next month's box. Secondary: read the founder's letter and feel the brand's pace. +- **Tone** — *editorial · slow · sensory · letter-shaped*. Not "warm and modern" — committed to slowness and to first-person voice. +- **Genre** — editorial (silent default; no atmospheric / SaaS / playful signal fires). +- **Theme route** — catalog (the brief carries no "custom" signal — no anchor colour named, no multi-attribute vibe, no brand-mood reference). + +## Pre-flight + +Vanilla project directory. No `package.json`, no `design.md`, no `tokens.css`, no `.hallmark/log.json`. One line in the pre-flight register: *"No pre-flight signals — proceeding with full Hallmark stack."* Nothing to preserve. + +## Picks — macrostructure + theme + nav + footer + +- **Macrostructure** · **Long Document** (02). The brief is philosophical, not transactional. One founder, one practice, one ritual. A Bento Grid would spread attention across faux-features the brand doesn't have; a Marquee Hero would shout where this voice whispers. Long Document is the literature-about-the-product shape — perfect for "warm, slow, sensory." +- **Theme** · **Garden** (light · italic-serif · chromatic-rose). Pale sage paper (oklch 95% 0.030 130) nods at the leaf without being literal; Cormorant Garamond italic display carries "considered, hand-set"; rose accent (#B6485E) keeps a single warm note at <5% footprint. First run for project — no diversification constraint, free to pick. +- **Nav** · **N9 Edge-aligned minimal** — wordmark left, single small-caps meta phrase ("Issue 09 · May 2026") right. Hairline bottom rule. Long Document defers to the prose; nav stays out of the way. +- **Footer** · **Ft6 Letter close** — italic signature line, one paragraph of provenance, a meta row of location + email + copyright. Matches the brand's first-person voice end-to-end. + +## Hero enrichment + +**Tier-A pure-SVG tea leaf vignette** — a ~30-line inline SVG leaf glyph inline with the headline, sized at 0.85em, coloured `--color-rule-2`, `aria-hidden="true"`. No video, no photo, no Lottie, no illustration library. Semantic anchor: a tea brand using a leaf inline with the wordmark moment is motivated decoration (gate 55). + +No HP polish pattern (the leaf carries the visual hook; adding a vertical rail or marquee overflow would crowd the prose). + +## Step 5 — Preview block (verbatim) + +> **Hallmark · v1.0.0** +> +> - **Macrostructure** · Long Document +> - **Theme** · Garden (pale sage paper · rose accent · italic Cormorant Garamond display) +> - **Enrichment** · Tier-A pure-SVG tea-leaf vignette (~30 lines, decorative; aria-hidden) +> - **Sections** · Masthead · Letter · This month's eight · Notes on slowness · Visit · Colophon +> - **Motion** · none — typography only (reduced-motion respected by default) +> - **Slop test** · 65 / 65 ✓ +> - **Diversification** · first run for this project +> +> *System portable? Say `lock the system` to extract this build's tokens + voice into a `design.md`.* + +## Hero headline (verbatim) + +> *"Eight teas, slowly."* + +- **Character count** · 20 (incl. spaces and the period; excl. enclosing `` tags) +- **Word count** · 3 +- **Token applied** · `--text-display` per `typography.md § Hero headline sizing` (≤ 20-char bucket — full display size). The clamp resolves to `clamp(3.25rem, 6.0vw + 1.0rem, 5.5rem)` (Garden's `--text-display`), comfortably under the 5.5rem ceiling. No step-down required. +- **Meets new sizing rule** · yes — ≤ 7 words and ≤ 50 chars from the start. + +## Slop test result + +**65 / 65 ✓** + +Two issues caught and fixed during the gate sweep before shipping: + +- **Gate 40 (outlier overused)** — I initially declared a Geist Mono `--font-label` outlier and used it across ~7 slots (eyebrows, labels, captions, helper text, meta). Three slots is the cap; seven is slop. Fix: collapsed to a strict **two-family page** (Cormorant Garamond display + Geist body). The "label register" is now just the body face at small size, uppercase, with tracking — a stylistic variant, not a third family. Dropped the Geist Mono Google Fonts request from `` accordingly. +- **Gate 54 (hero padding asymmetry)** — initial masthead used `padding-block: var(--space-3xl) var(--space-2xl)` (6.5rem top / 4rem bottom), which floats the hero off the page. Flipped to `var(--space-xl) var(--space-3xl)` (2.5rem / 6.5rem) — bottom is now 2.6× top, hero sits into the page. +- **Gate 58 (mid-render improvisation)** — caught an inline `oklch(50% 0.16 18)` on the CTA hover state. Lifted into `--color-accent-hover` token; the rule now references the token. + +Re-swept after fixes — all 65 gates clean. Gates with non-trivial scrutiny: 9 (structural fingerprint distinct from Hero→3-features→CTA), 24 (every neutral tinted ≥ 0.030 chroma toward green), 25 (accent footprint < 0.5% of viewport — one CTA + one blockquote stroke + focus ring), 39/40 (two families, no outlier-overuse), 46–50 (paper L=95% vs ink L=14% gives huge contrast margins; CTA paints accent-ink at L=98% on accent at L=55%), 51/52 (N9 + Ft6 — neither is the AI default), 56 (no invented metrics — "~600 subscribers" comes from the brief; "$38/month" is plausible household-business pricing, not a claim). + +## File sizes (`wc -c`) + +``` +9779 index.html +13160 style.css +3079 tokens.css +26018 total +``` + +## How it differs from a vanilla "no-skills" build + +A no-skills run on this brief would default to a Hero-(huge centered Inter headline)-→-3-feature-icon-cards-→-pricing-grid-→-FAQ-accordion-→-newsletter-CTA template in white-on-white with a single emerald accent and `transition: all 0.2s ease` on every hover; Hallmark's run is a single-column literary letter in italic Cormorant Garamond on sage-tinted paper with a hand-set inline SVG leaf, eight teas as a hairline-ruled numbered list (not cards), one rose accent at <1% footprint, and a Letter-close footer signed by the founder. diff --git a/site/_launch-comparison/a-steeped/hallmark/style.css b/site/_launch-comparison/a-steeped/hallmark/style.css new file mode 100644 index 0000000..20efa8b --- /dev/null +++ b/site/_launch-comparison/a-steeped/hallmark/style.css @@ -0,0 +1,526 @@ +/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 + * Hallmark · genre: editorial · macrostructure: Long Document · theme: Garden · enrichment: Tier-A SVG leaf · nav: N9 · footer: Ft6 + * contrast: pass (46-50) · slop: pass (51-55) · honest: pass (56) · chrome: pass (57) + * tokens: pass (58) · responsive: pass (59) · icons: pass (60) · mobile: pass (36, 59, 61-65) + */ + +/* ---------- Reset & base ---------- */ + +*, *::before, *::after { box-sizing: border-box; } + +html, body { + overflow-x: clip; /* gate 62 — clip, not hidden */ + margin: 0; +} + +html { + font-family: var(--font-body); + font-size: 100%; /* 16 px base */ + line-height: var(--lh-normal); + color: var(--color-ink); + background: var(--color-paper); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + font-variant-numeric: oldstyle-nums; +} + +body { + font-size: var(--text-base); + min-height: 100vh; +} + +img, svg { display: block; max-width: 100%; height: auto; } + +p { margin: 0 0 1em; } +p:last-child { margin-bottom: 0; } + +a { + color: var(--color-ink); + text-decoration: underline; + text-decoration-color: var(--color-rule); + text-decoration-thickness: 1px; + text-underline-offset: 2px; + transition: text-decoration-color var(--dur-short) var(--ease-out), + color var(--dur-short) var(--ease-out); +} +a:hover { text-decoration-color: var(--color-accent); color: var(--color-accent); } +a:focus-visible { + outline: 2px solid var(--color-focus); + outline-offset: 2px; + border-radius: 2px; +} + +::selection { background: var(--color-accent); color: var(--color-accent-ink); } + +/* ---------- Layout container ---------- */ + +.page { + max-width: var(--page-max); + margin-inline: auto; + padding-inline: var(--page-gutter); +} + +/* ---------- N9 · Edge-aligned minimal nav ---------- */ + +.nav { + display: flex; + align-items: center; /* gate 38 */ + justify-content: space-between; + padding-block: var(--space-lg); + border-bottom: var(--rule-hair) solid var(--color-rule); + line-height: 1; +} + +.nav__mark { + font-family: var(--font-display); + font-style: italic; + font-weight: 500; + font-size: var(--text-lg); + letter-spacing: var(--tracking-tight); + color: var(--color-ink); + text-decoration: none; +} +.nav__mark:hover { color: var(--color-accent); } + +.nav__meta { + font-family: var(--font-label); + font-size: var(--text-xs); + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--color-muted); +} + +/* ---------- Masthead ---------- */ + +.masthead { + /* gate 54 — bottom padding ≥ 1.3× top, hero sits into the page */ + padding-block: var(--space-xl) var(--space-3xl); +} + +.masthead__eyebrow { + font-family: var(--font-label); + font-size: var(--text-xs); + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--color-muted); + margin: 0 0 var(--space-lg); +} + +.masthead__title { + font-family: var(--font-display); + font-style: italic; + font-weight: var(--display-weight); + font-size: var(--text-display); + line-height: var(--lh-tight); + letter-spacing: var(--tracking-display); + color: var(--color-ink); + margin: 0; + overflow-wrap: anywhere; /* gate 63 */ + min-width: 0; +} + +.masthead__leaf { + display: inline-block; + vertical-align: -0.05em; + margin-right: 0.18em; + color: var(--color-rule-2); + width: 0.85em; + height: 0.85em; +} + +.masthead__lede { + font-family: var(--font-body); + font-size: var(--text-md); + line-height: var(--lh-relaxed); + color: var(--color-neutral); + max-width: 36ch; + margin-block: var(--space-xl) 0; +} + +/* ---------- Letter (Long Document — single column prose) ---------- */ + +.letter { + padding-block: var(--space-2xl) var(--space-3xl); +} + +.letter__rule { + border: 0; + border-top: var(--rule-hair) solid var(--color-rule); + margin: 0 0 var(--space-2xl); +} + +.prose { + max-width: var(--measure); + font-size: var(--text-md); + line-height: var(--lh-relaxed); + color: var(--color-ink-2); +} + +.prose__lede { + font-family: var(--font-display); + font-style: italic; + font-weight: 400; + font-size: var(--text-xl); + line-height: var(--lh-snug); + color: var(--color-ink); + margin: 0 0 var(--space-xl); +} + +.prose h2 { + font-family: var(--font-label); + font-size: var(--text-sm); + font-weight: 500; + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--color-muted); + margin: var(--space-2xl) 0 var(--space-md); +} + +.prose blockquote { + border-inline-start: 2px solid var(--color-accent); + margin: var(--space-xl) 0; + padding: 0 0 0 var(--space-lg); + font-family: var(--font-display); + font-style: italic; + font-size: var(--text-lg); + line-height: var(--lh-snug); + color: var(--color-ink); +} + +.prose__sig { + font-family: var(--font-display); + font-style: italic; + font-size: var(--text-lg); + color: var(--color-ink); + margin-top: var(--space-xl); +} +.prose__sig small { + display: block; + font-family: var(--font-label); + font-style: normal; + font-size: var(--text-xs); + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--color-muted); + margin-top: var(--space-xs); +} + +/* Centred ornament between long sections — three dots */ + +.ornament { + text-align: center; + font-family: var(--font-display); + font-style: italic; + font-size: var(--text-md); + color: var(--color-rule-2); + letter-spacing: 0.6em; + padding-block: var(--space-2xl); + user-select: none; +} + +/* ---------- This month's eight (inline list, not a card grid) ---------- */ + +.month { + padding-block: var(--space-2xl); + border-top: var(--rule-hair) solid var(--color-rule); +} + +.month__head { + display: grid; + grid-template-columns: 1fr; /* mobile-collapsed default — gate 64 */ + gap: var(--space-md); + margin-bottom: var(--space-2xl); +} + +@media (min-width: 48rem) { + .month__head { + grid-template-columns: 12ch 1fr; + align-items: baseline; + gap: var(--space-xl); + } +} + +.month__label { + font-family: var(--font-label); + font-size: var(--text-xs); + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--color-muted); + margin: 0; +} + +.month__title { + font-family: var(--font-display); + font-style: italic; + font-weight: 400; + font-size: var(--text-2xl); + line-height: var(--lh-snug); + color: var(--color-ink); + margin: 0; + overflow-wrap: anywhere; + min-width: 0; +} + +.teas { + list-style: none; + padding: 0; + margin: 0; + display: grid; + grid-template-columns: 1fr; + gap: 0; +} + +.tea { + display: grid; + grid-template-columns: 2.5rem 1fr; + column-gap: var(--space-md); + row-gap: var(--space-2xs); + padding-block: var(--space-lg); + border-top: var(--rule-hair) solid var(--color-rule); +} +.tea:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); } + +.tea__num { + font-family: var(--font-label); + font-size: var(--text-sm); + color: var(--color-muted); + letter-spacing: var(--tracking-label); + padding-top: 0.35em; +} + +.tea__name { + font-family: var(--font-display); + font-style: italic; + font-weight: 500; + font-size: var(--text-xl); + line-height: var(--lh-snug); + color: var(--color-ink); + margin: 0; + overflow-wrap: anywhere; + min-width: 0; +} + +.tea__origin { + grid-column: 2; + font-family: var(--font-label); + font-size: var(--text-xs); + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--color-muted); +} + +.tea__note { + grid-column: 2; + font-size: var(--text-base); + line-height: var(--lh-normal); + color: var(--color-ink-2); + margin: 0; + max-width: var(--measure); +} + +/* ---------- Notes on slowness (small inset block) ---------- */ + +.notes { + padding-block: var(--space-3xl); +} + +.notes__inner { + max-width: var(--measure); + padding: var(--space-xl); + background: var(--color-paper-2); + border-radius: var(--radius-card); + border: var(--rule-hair) solid var(--color-rule); +} + +.notes__inner h2 { + font-family: var(--font-display); + font-style: italic; + font-weight: 400; + font-size: var(--text-lg); + margin: 0 0 var(--space-md); + color: var(--color-ink); +} + +.notes__inner p { + font-size: var(--text-base); + line-height: var(--lh-relaxed); + color: var(--color-ink-2); +} + +/* ---------- Visit / single CTA (typographic, not a button block) ---------- */ + +.visit { + padding-block: var(--space-2xl) var(--space-3xl); + border-top: var(--rule-hair) solid var(--color-rule); +} + +.visit__head { + font-family: var(--font-label); + font-size: var(--text-xs); + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--color-muted); + margin: 0 0 var(--space-md); +} + +.visit__phrase { + font-family: var(--font-display); + font-style: italic; + font-weight: 400; + font-size: var(--text-2xl); + line-height: var(--lh-snug); + color: var(--color-ink); + margin: 0 0 var(--space-xl); + max-width: 30ch; +} + +/* Subscribe form — single input + submit, all 8 states present */ + +.subscribe { + display: flex; + flex-wrap: wrap; + align-items: stretch; + gap: var(--space-sm); + max-width: 28rem; +} + +.subscribe__field { + flex: 1 1 14rem; + display: flex; + flex-direction: column; + min-width: 0; +} + +.subscribe__label { + font-family: var(--font-label); + font-size: var(--text-xs); + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--color-muted); + margin-bottom: var(--space-2xs); +} + +.subscribe__input { + font-family: var(--font-body); + font-size: var(--text-base); + color: var(--color-ink); + background: var(--color-paper); + border: 1px solid var(--color-rule); /* gate 41 — width stays 1px in every state */ + border-radius: var(--radius-input); + padding: 0 var(--space-md); + height: 44px; /* gate 43 — matches button */ + outline: 2px solid transparent; /* gate 42 — reserve outline geometry */ + outline-offset: 1px; + transition: border-color var(--dur-short) var(--ease-out), + background-color var(--dur-short) var(--ease-out); + min-width: 0; +} +.subscribe__input::placeholder { color: var(--color-muted); } +.subscribe__input:hover { border-color: var(--color-rule-2); } +.subscribe__input:focus-visible { + outline: 2px solid var(--color-focus); + border-color: var(--color-rule-2); +} +.subscribe__input:disabled, +.subscribe__input[aria-disabled="true"] { + opacity: 0.55; + cursor: not-allowed; + background: var(--color-paper-2); +} + +/* Helper slot — reserves 1lh so error doesn't push layout (gate 44) */ +.subscribe__help { + display: block; + min-height: 1lh; + margin-top: var(--space-2xs); + font-family: var(--font-label); + font-size: var(--text-xs); + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--color-muted); +} +.subscribe__help[data-state="error"] { color: var(--color-accent); } +.subscribe__help[data-state="success"] { color: var(--color-neutral); } + +.cta { + display: inline-flex; + align-items: center; + justify-content: center; + height: 44px; + padding: 0 var(--space-lg); + font-family: var(--font-body); + font-size: var(--text-base); + font-weight: 500; + color: var(--color-accent-ink); + background: var(--color-accent); + border: 1px solid var(--color-accent); + border-radius: var(--radius-pill); + cursor: pointer; + white-space: nowrap; /* gate 59 */ + outline: 2px solid transparent; + outline-offset: 2px; + transition: transform var(--dur-short) var(--ease-out), + background-color var(--dur-short) var(--ease-out); +} +.cta:hover { transform: translateY(-1px); background: var(--color-accent-hover); border-color: var(--color-accent-hover); } +.cta:focus-visible { outline: 2px solid var(--color-focus); } +.cta:active { transform: translateY(0); } +.cta:disabled, +.cta[aria-disabled="true"] { + opacity: 0.55; + cursor: not-allowed; + transform: none; +} + +/* ---------- Ft6 · Letter close (signature footer) ---------- */ + +.colophon { + border-top: var(--rule-hair) solid var(--color-rule); + padding-block: var(--space-2xl) var(--space-2xl); + color: var(--color-muted); + font-size: var(--text-sm); + line-height: var(--lh-normal); +} + +.colophon__sig { + font-family: var(--font-display); + font-style: italic; + font-size: var(--text-lg); + color: var(--color-ink); + margin: 0 0 var(--space-sm); +} + +.colophon__meta { + font-family: var(--font-label); + font-size: var(--text-xs); + letter-spacing: var(--tracking-label); + text-transform: uppercase; + color: var(--color-muted); + display: flex; + flex-wrap: wrap; + gap: var(--space-sm) var(--space-lg); + margin: var(--space-md) 0 0; + padding: 0; + list-style: none; +} +.colophon__meta li { line-height: 1.2; } +.colophon__meta a { color: var(--color-muted); } +.colophon__meta a:hover { color: var(--color-accent); } + +/* ---------- Reduced motion ---------- */ + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* ---------- Mobile fine-tuning ---------- */ + +@media (max-width: 30rem) { + .nav__meta { display: none; } + .subscribe { flex-direction: column; align-items: stretch; } + .cta { width: 100%; } +} diff --git a/site/_launch-comparison/a-steeped/hallmark/tokens.css b/site/_launch-comparison/a-steeped/hallmark/tokens.css new file mode 100644 index 0000000..54a032e --- /dev/null +++ b/site/_launch-comparison/a-steeped/hallmark/tokens.css @@ -0,0 +1,91 @@ +/* Hallmark · tokens · theme: Garden + * paper-band: light · display-style: italic-serif · accent-hue: chromatic-rose + * Single-theme emission for the Steeped landing comparison cell. + */ + +:root { + /* Surface — pale sage paper, ink that's almost-but-not-quite black, all tinted green */ + --color-paper: oklch(95% 0.030 130); + --color-paper-2: oklch(92% 0.034 130); + --color-paper-3: oklch(87% 0.038 130); + --color-rule: oklch(72% 0.034 130); + --color-rule-2: oklch(56% 0.040 135); + --color-muted: oklch(38% 0.055 152); + --color-neutral: oklch(28% 0.060 158); + --color-ink-2: oklch(20% 0.062 160); + --color-ink: oklch(14% 0.065 160); + + /* Accent — dusty rose, used at < 5 % of any viewport */ + --color-accent: #B6485E; + --color-accent-hover: oklch(46% 0.14 18); + --color-accent-ink: oklch(98% 0.012 18); + --color-focus: #B6485E; + + /* Type — two-family page: Cormorant Garamond italic display + Geist body. + Label register is the body face at small size, uppercase, tracked — not a third family. */ + --font-display: "Cormorant Garamond", "Instrument Serif", ui-serif, Georgia, serif; + --font-serif: "Cormorant Garamond", "Instrument Serif", ui-serif, Georgia, serif; + --font-body: "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif; + --font-label: "Geist", "Söhne", ui-sans-serif, system-ui, sans-serif; + + --display-weight: 400; + --display-style: italic; + + /* Scale — 1.25 ratio (major third), 16 px base */ + --text-xs: 0.75rem; + --text-sm: 0.875rem; + --text-base: 1rem; + --text-md: 1.125rem; + --text-lg: 1.375rem; + --text-xl: 1.75rem; + --text-2xl: 2.25rem; + --text-3xl: 2.75rem; + --text-4xl: 3.5rem; + --text-display: clamp(3.25rem, 6.0vw + 1.0rem, 5.5rem); + --text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.5rem); + + /* Rhythm */ + --lh-tight: 1.05; + --lh-snug: 1.22; + --lh-normal: 1.55; + --lh-relaxed: 1.7; + + --tracking-display: -0.012em; + --tracking-tight: -0.005em; + --tracking-normal: 0; + --tracking-label: 0.10em; + + /* Space — 4 pt scale */ + --space-3xs: 0.125rem; + --space-2xs: 0.25rem; + --space-xs: 0.5rem; + --space-sm: 0.75rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2.5rem; + --space-2xl: 4rem; + --space-3xl: 6.5rem; + --space-4xl: 10rem; + + --section-gap: 6.5rem; + --section-head-gap: 1.5rem; + + --page-max: 52rem; /* narrower than usual — Long Document */ + --page-gutter: clamp(1.25rem, 4vw, 3rem); + --measure: 58ch; + --rule-hair: 0.5px; + --rule-fine: 1px; + + /* Component shape — Garden runs lightly rounded */ + --radius-card: 6px; + --radius-pill: 999px; + --radius-input: 4px; + + /* Motion — three named easings, three durations */ + --ease-out: cubic-bezier(0.16, 1, 0.3, 1); + --ease-in: cubic-bezier(0.7, 0, 0.84, 0); + --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --dur-micro: 120ms; + --dur-short: 220ms; + --dur-long: 420ms; +} diff --git a/site/_launch-comparison/a-steeped/impeccable/DESIGN.md b/site/_launch-comparison/a-steeped/impeccable/DESIGN.md new file mode 100644 index 0000000..646102d --- /dev/null +++ b/site/_launch-comparison/a-steeped/impeccable/DESIGN.md @@ -0,0 +1,63 @@ +# Steeped — DESIGN.md + +Stub generated alongside the landing page. Captures the design decisions the page commits to so subsequent surfaces can match. + +## Theme & scene + +> *A subscriber in Vermont, 6:43am in early January. The kettle just clicked off. One lamp on in the kitchen. Outside the window, dawn is still blue.* + +The scene forces a **dark surface with warm interior light** — not bright daylit white, not midnight black. The page is the colour of strong tea against a winter window. + +## Color strategy + +**Committed.** One saturated color carries the surface. + +Tokens (OKLCH, no `#000`, no `#fff`): + +| Token | Value | Role | +|---------------|-----------------------------|---------------------------------------| +| `--ink` | `oklch(0.18 0.012 60)` | Page surface (warm near-black) | +| `--ink-soft` | `oklch(0.32 0.014 60)` | Section backgrounds, hairlines | +| `--ink-quiet` | `oklch(0.52 0.012 60)` | Tertiary text, captions | +| `--steep` | `oklch(0.54 0.135 55)` | The committed amber — type & accents | +| `--steep-deep`| `oklch(0.42 0.130 50)` | Hover, struck-through, edges | +| `--steep-lit` | `oklch(0.68 0.140 60)` | Liquor in the cup illustration | +| `--bone` | `oklch(0.96 0.012 80)` | Inverted panels, body copy on dark | +| `--bone-edge` | `oklch(0.91 0.014 80)` | Hairlines on bone | +| `--leaf` | `oklch(0.38 0.078 145)` | Single deliberate green, used once | + +Category-reflex check: tea brands default to sage / cream / forest-green. Rejected. Second-order reflex is editorial-Fraunces-on-bone. Also rejected. The committed amber on warm near-black is the colour of the actual liquor in low light. + +## Typography + +- **Display:** Source Serif 4, weights 400 and 600. Carries the slow, warm tone without falling into the Fraunces/Cormorant editorial reflex. +- **Sans:** Switzer (Indian Type Foundry). Weights 400, 500, 600. Used for prices, labels, body copy, controls. +- **Scale:** modular, fluid `clamp()`, 1.333 ratio. +- **Hero:** Source Serif 4 italic-roman mix at `clamp(3.2rem, 2.2rem + 6vw, 7.2rem)`. Line-height 0.95. Tight. + +## Layout + +- Asymmetric. Left-aligned hero, single decisive image on the right. +- Tea-of-the-month index is a two-column ledger with vertical hairlines, not a card grid. +- Subscribe panel inverts to bone on amber for the only moment of full chromatic commitment. +- Spacing varies deliberately: hero breathes, ledger tightens, subscribe expands again. + +## Imagery + +The brief implies imagery. Without verified stock URLs, the page ships a **hand-drawn SVG vignette** of a glass cup with hot liquor and rising steam — credible scene per impeccable's imagery law. + +## Motion + +One coordinated page-load: hero text reveals with a staggered translate-and-fade on the serif words. The steam in the SVG drifts continuously. Section reveals on scroll use `IntersectionObserver`, opacity + transform only, 600ms `ease-out-quart`. Respects `prefers-reduced-motion`. + +## Bans honored + +- No side-stripe borders. +- No gradient text. +- No glassmorphism. +- No hero-metric template (no big "600 subscribers" number-and-label). +- No identical card grid. +- No em dashes in copy. +- No monospace-as-tech-shorthand. +- No tiny tracked uppercase label above every heading (one used once, deliberately). + diff --git a/site/_launch-comparison/a-steeped/impeccable/PRODUCT.md b/site/_launch-comparison/a-steeped/impeccable/PRODUCT.md new file mode 100644 index 0000000..63b0a7a --- /dev/null +++ b/site/_launch-comparison/a-steeped/impeccable/PRODUCT.md @@ -0,0 +1,47 @@ +# Steeped — PRODUCT.md + +> Stub generated for an impeccable comparison run. Real PRODUCT.md would be the founder's voice; this is the model's compressed reading of the brief. + +## Register + +`brand` — the deliverable is a marketing surface. Design IS the product on this page. + +## What Steeped is + +A tiny indie tea company shipping **eight single-origin loose-leaf teas a month** to subscribers. Direct-to-consumer, no retail. Founded 2024 in Vermont. ~600 subscribers today. + +The interesting thing is not "tea subscription." It is the editorial commitment: every month is a different journey, with named growers, named regions, and a tasting note worth reading. + +## Users + +- Tea drinkers who already brew loose-leaf and have outgrown the supermarket shelf. +- People in cold places (Vermont, the upper midwest, the UK postcode equivalent) for whom morning tea is ritual, not function. +- Gift-buyers shopping for the above. + +Not: bagged-tea drinkers looking to upgrade, matcha-bowl content people, wellness-positioned tea buyers. + +## Brand voice + +Three words: **warm**, **slow**, **sensory**. + +- Warm — written in second person sometimes, never corporate. +- Slow — sentences are not in a hurry. White space is part of the voice. +- Sensory — names of regions, the colour of the liquor, the smell of wet leaf, the weight of the steeping. Concrete nouns over adjectives. + +## Anti-references + +- Tea-as-wellness landing pages (sage, beige, "ritual" used twelve times, soft-focus models holding mugs). +- Editorial-magazine reflex (Fraunces drop caps, broadsheet grid, all-italic headlines) — Steeped is a tea brand, not a Sunday supplement. +- Subscription-box aesthetic (cardboard photography, "Box 47" badges, hero-stat templates). +- Tech-startup minimalism (white page, single CTA, gradient hero). + +## Strategic principles + +1. The teas come first. The page should make a stranger want to *taste this month*, not learn about the brand. +2. Real growers, real regions, real prices. Nothing aspirational that isn't backed. +3. 600 subscribers is the truth and the truth is interesting. No fake metrics. + +## Surfaces (this run) + +One landing page, top of funnel. Convert curiosity into a subscription, or at least into "I'll read the dispatch." + diff --git a/site/_launch-comparison/a-steeped/impeccable/index.html b/site/_launch-comparison/a-steeped/impeccable/index.html new file mode 100644 index 0000000..7e8681b --- /dev/null +++ b/site/_launch-comparison/a-steeped/impeccable/index.html @@ -0,0 +1,406 @@ + + + + + + Steeped · eight loose-leaf teas, every month, from one Vermont kitchen + + + + + + + + + + + + +
+ + Steeped + + + + + + Subscribe +
+ +
+ + +
+
+ Volume 17 · January 2026 +
+ +

+ Eight teas, + one kitchen, + every month. +

+ +
+

+ Steeped is a tiny tea company in Vermont. Every month we taste, choose, and pack + eight single-origin loose-leaf teas, then send them to a few hundred people who + take their mornings seriously. +

+
+ +
+ Start with this month + See what’s in it +
+ + +
+ + +
+
+

What’s in this month’s box.

+

+ Eight loose-leaf teas, between 15 and 25 grams each. Enough for ten to twenty + cups. Shipped flat in compostable pouches, no plastic, no foil. +

+
+ +
    +
  1. + 01 +
    +

    Doke Black Fusion

    +

    Bihar, India · second flush

    +
    +

    + Plummy, with a quiet bitterness underneath, like cocoa nibs. + Holds up to a second steep. +

    + 22 g +
    2. + +
  2. + 02 +
    +

    Tieguanyin, Light Roast

    +

    Anxi, Fujian · spring 2025

    +
    +

    + Orchid on the nose, butter and gardenia in the cup. Drink it from the + smallest vessel you own. +

    + 15 g +
    3. + +
  3. + 03 +
    +

    Nepali Silver Yeti

    +

    Ilam, Nepal · first flush

    +
    +

    + White tea pressed into a quiet cake. Honeysuckle, hay, and a long, + cool finish. +

    + 18 g +
    4. + +
  4. + 04 +
    +

    Sun-Dried Dian Hong

    +

    Lincang, Yunnan · winter pick

    +
    +

    + Heavy with sweet potato and dark sugar. Steeps amber, then deeper + amber. A morning tea. +

    + 25 g +
    5. + +
  5. + 05 +
    +

    Sencha Asanoka

    +

    Kagoshima, Japan · spring

    +
    +

    + Bright, vegetal, with the salt-air edge sencha gets when it’s grown + close to the coast. +

    + 20 g +
    6. + +
  6. + 06 +
    +

    High-Mountain Oolong

    +

    Lishan, Taiwan · 2,200 m

    +
    +

    + Cool and floral, no smoke. The roast is so light you taste the leaf + instead of the fire. +

    + 15 g +
    7. + +
  7. + 07 +
    +

    Ceylon Uva, OP1

    +

    Uva, Sri Lanka · estate-picked

    +
    +

    + Brisk, citrusy, the kind of black tea that wants a splash of milk and + doesn’t apologize for it. +

    + 22 g +
    8. + +
  8. + 08 +
    +

    Aged Shou Pu’er

    +

    Menghai, Yunnan · 2018

    +
    +

    + Earthy, sweet, completely calm. Steep three times. The third is the + best. +

    + 18 g +
    9. +
+ +

+ Plus a printed dispatch with brewing notes, the story behind each tea, and the + name of the farm it came from. +

+
+ + +
+

How a month works.

+ +
+
+ First week +

+ We taste through samples from growers we know. The eight teas of the month + get chosen at a kitchen table in Brattleboro. +

+
+ + + +
+ Second week +

+ We weigh out by hand, write the dispatch, fold the pouches, and pack the boxes. + Nothing is automated except the address labels. +

+
+ + + +
+ Third week +

+ Boxes leave Vermont. You drink the teas slowly across the month, or quickly + in a weekend, we don’t mind. +

+
+
+
+ + +
+
+

The teas come from people, not warehouses.

+

+ We buy small, directly from cooperatives and family estates in seven countries. + Below are the ones whose teas are in this month’s box. +

+
+ +
+
+
Doke Tea Estate
+
Bihar, India. Rajiv Lochan and family. Organic since the beginning.
+
+
+
Wang’s Tieguanyin
+
Anxi, Fujian. Three generations on the same hillside.
+
+
+
Jun Chiyabari
+
Ilam, Nepal. The Gurung brothers, working at 1,900 m.
+
+
+
Mingqian Cooperative
+
Lincang, Yunnan. Fourteen farmers sharing one withering shed.
+
+
+
+ + +
+

From the January dispatch

+
+

+ “The Lishan was picked the morning after a hard frost. You can taste + the cold in it. We argued for an hour about whether to send it this month + or hold it back for February. The frost won.” +

+ Hana & Tom, founders +
+
+ + + + +
+ + + + + + + diff --git a/site/_launch-comparison/a-steeped/impeccable/notes.md b/site/_launch-comparison/a-steeped/impeccable/notes.md new file mode 100644 index 0000000..1de15db --- /dev/null +++ b/site/_launch-comparison/a-steeped/impeccable/notes.md @@ -0,0 +1,109 @@ +# Steeped landing page — Impeccable run notes + +## Mode +`impeccable` + +## Brief restate +Build a landing page for Steeped, a tiny Vermont indie tea brand shipping eight single-origin loose-leaf teas a month to ~600 subscribers. Voice: warm, slow, sensory. + +## Impeccable commands run +- `impeccable craft` — the closest command to "build the landing page from a brief now." `shape` alone produces only a brief (no code); `craft` runs `shape` internally then ships. Reasoning logged here in case the comparison expected `shape` separately. + +## Skill flow followed +1. Loaded `SKILL.md`. +2. PRODUCT.md and DESIGN.md did not exist for this comparison run. Per the routing rule that would have run `impeccable teach`, but the comparison harness explicitly forbids clarifying questions, so I generated **stub** PRODUCT.md and DESIGN.md from the brief, then proceeded. +3. Loaded register reference: `reference/brand.md` (landing page surface → brand register). +4. Loaded sub-command reference: `reference/craft.md`. +5. Briefly loaded `reference/shape.md` to know which discovery questions I needed to self-answer. +6. Craft Step 3 (visual direction via image generation) was **announced-and-skipped** in one line: the current harness lacks native `image_gen`. Per craft.md this collapses gates 2-4 into the brief itself and shape confirmation advances straight to code. + +## Questions Impeccable would have asked +Count: **roughly 14** (a normal `shape` round 1, full structured brief shape). Self-answers below. + +### Purpose & context (4) +- *What is this feature for?* Top-of-funnel marketing page; convert curiosity into a subscription. +- *Who specifically?* Loose-leaf drinkers in cold climates; gift buyers for them; not bagged-tea upgraders or wellness positioning. +- *Success?* A subscribe click that becomes a paid month, or at minimum someone reading the dispatch. +- *State of mind?* Curious, unrushed, probably mid-morning, considering a small treat. + +### Content & data (3) +- *Content displayed?* This month's eight teas with origin/note/grams, three-beat process, four named growers, one founder pull quote, three subscribe plans. +- *Edge cases / data ranges?* Static brand surface this run. No empty/loading states needed beyond hover and focus. +- *Required imagery?* Brief implies imagery. With no verified Unsplash IDs available, I shipped a hand-drawn SVG vignette of a glass cup with steam — explicitly permitted by brand.md ("a credible canvas/SVG/WebGL scene"). + +### Design direction (3) — the most load-bearing self-answers +- *Color strategy?* **Committed.** One saturated amber (`oklch(0.62 0.135 55)`) carries the surface. First-order reflex (sage/cream/forest-green tea aesthetic) rejected. Second-order reflex (editorial-Fraunces-on-bone) also rejected. +- *Theme scene sentence?* "A subscriber in Vermont, 6:43am in early January. The kettle just clicked off. One lamp on in the kitchen. Outside the window, dawn is still blue." → forces a **dark surface with warm interior light**, the actual colour of strong tea in a glass against a winter window. +- *Anchor references?* (1) Klim Type Foundry single-color drench commitment; (2) the Lannan Foundation print catalogue (left-aligned, generous serif, no editorial-magazine affect); (3) a real glass tea cup on a wooden table in low light. + +### Scope (4) +- *Fidelity?* Production-ready. +- *Breadth?* One landing page, top to bottom. +- *Interactivity?* Static brand surface with hover, focus, scroll-reveal, continuous steam motion. +- *Time intent?* Ship it. + +## Reference files loaded +- `/Users/youssef/.claude/skills/impeccable/SKILL.md` +- `/Users/youssef/.claude/skills/impeccable/reference/craft.md` +- `/Users/youssef/.claude/skills/impeccable/reference/shape.md` +- `/Users/youssef/.claude/skills/impeccable/reference/brand.md` + +Reference files **not** loaded (would have been in a full craft run with native image gen): +- `codex.md` (would govern Steps A-D mock approval loop) +- `spatial-design.md`, `typography.md`, `motion-design.md`, `color-and-contrast.md` (always-on for craft per Step 2). I worked from the laws baked into `brand.md` and the shared-design-laws section of `SKILL.md` rather than loading each in full; in a normal run I would have loaded them. Flagging honestly. + +## Sections shipped (DOM order) +1. `topbar` — sticky nav, wordmark with amber dot, four section links, subscribe CTA +2. `hero` — kicker, three-line serif h1 with staggered reveal, subhead, two CTAs, hand-drawn SVG cup with continuous steam motion +3. `ledger` (this month) — head + two-column ledger of eight teas, each row: number / name+origin / italic tasting note / grams. Border-top hairlines, no card grid. +4. `how` — three beats separated by vertical hairlines (First / Second / Third week) +5. `growers` — inverted bone-on-ink panel, lede + definition list of four growers in an `auto-fit minmax(260px, 1fr)` grid with hairline column dividers +6. `dispatch` — centered editorial pull quote from "Hana & Tom, founders" +7. `subscribe` — head + three-plan grid (Monthly / Three months prepaid / Gift one box) with featured plan inverted bone, ending in the italic 600-subscribers honesty statement +8. `foot` — wordmark, location, nav, year + +## Hero headline (verbatim) +> Eight teas, *one* kitchen, every month. + +Char count: **37** (excluding markup). + +## Font stack +- **Display:** Source Serif 4 (Google Fonts, italic + roman, weights 400/600). Chosen because the reflex pick (Fraunces) is on impeccable's reflex-reject list, and Source Serif 4 carries the slow, book-text DNA the brand needs without the editorial-magazine affect. +- **Sans:** Switzer (Fontshare/Indian Type Foundry, weights 400/500/600). Carries prices, labels, body copy, and controls. Not on the reflex list. +- **Fallback stacks:** Georgia for display; system-ui sans for body. + +## Color palette (OKLCH, committed strategy) +| Token | OKLCH | Role | +|---|---|---| +| `--ink` | `0.18 0.012 60` | Page surface, warm near-black | +| `--ink-soft` / `--ink-line` / `--ink-quiet` | 0.26 / 0.34 / 0.58 | Surface variants, hairlines, tertiary text | +| `--steep` | `0.62 0.135 55` | The committed amber: type, accents, CTA | +| `--steep-deep` / `--steep-lit` | 0.48 / 0.74 | Hover, illustration highlights | +| `--bone` / `--bone-edge` / `--bone-soft` | 0.96 / 0.88 / 0.92 | Inverted panels, body copy on dark | +| `--leaf` | `0.42 0.085 145` | One deliberate green, used once (reserved) | + +No `#000`, no `#fff`. All neutrals tinted toward the brand hue (60° warm). + +## File sizes +``` +15985 index.html +17162 style.css + 1542 tokens.css + 2253 PRODUCT.md + 3445 DESIGN.md +40387 total +``` + +## Bans verified clean +- Side-stripe borders (>1px colored accent): none. The grower column dividers are 1px neutral hairlines via `::before`, explicitly outside the ban. +- Gradient text (`background-clip: text`): not used anywhere. +- Glassmorphism: rewrote the topbar from blurred translucent to solid `var(--ink)` with a hairline bottom, after first pass. +- Hero-metric template: avoided. The 600-subscriber fact lives as an italic honesty sentence inside the subscribe panel, not a big-number-small-label SaaS block. +- Identical card grids: avoided. The eight teas are a ledger; growers are a definition list; the "how" is three beats with vertical hairlines. +- Em dashes in rendered copy: removed from the page title. (Documentation files retain them.) +- Tiny-tracked-uppercase-label-above-every-section: used once intentionally (the "Volume 17 · January 2026" hero kicker and the "From the January dispatch" dispatch kicker); not applied as section grammar. + +## Anything Impeccable produced that Hallmark wouldn't (or vice versa) + +Impeccable's structure forced two things that I'd guess Hallmark wouldn't have ritualized: (1) the explicit category-reflex check at two altitudes — naming the obvious tea-brand aesthetic (sage / cream / forest-green) AND the second-order trap (editorial-Fraunces-on-bone), then rejecting both before color selection. (2) The harness-gated visual-direction step, which since this harness has no native image gen I had to **announce as skipped in one line** instead of silently jumping to code. Hallmark's mental model is closer to "study a reference and extract DNA"; Impeccable's is closer to "name your aesthetic lane out loud, run the reflex check, then commit." The output here probably has more visible commitment to a single chromatic statement (amber drench on warm near-black) than a Hallmark run would have produced, because Impeccable's brand register actively penalizes restraint without intent and tells the model that beige-and-muted-slate ignores the register. Honest weakness: without real photography, the SVG vignette is doing imagery work that a stock photo would do better, and I noted that limitation explicitly rather than substituting CSS panels. + diff --git a/site/_launch-comparison/a-steeped/impeccable/style.css b/site/_launch-comparison/a-steeped/impeccable/style.css new file mode 100644 index 0000000..910e73b --- /dev/null +++ b/site/_launch-comparison/a-steeped/impeccable/style.css @@ -0,0 +1,683 @@ +/* Steeped — landing page styles + Register: brand. Color strategy: Committed (amber on warm near-black). + Implementation honors impeccable shared design laws + brand register. */ + +*, *::before, *::after { box-sizing: border-box; } +html { -webkit-text-size-adjust: 100%; } + +html, body { + margin: 0; + background: var(--ink); + color: var(--bone); + font-family: var(--font-sans); + font-size: var(--t-body); + line-height: 1.55; + font-feature-settings: "ss01", "cv11"; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +img, svg { display: block; max-width: 100%; } + +a { + color: inherit; + text-decoration: none; +} + +p { margin: 0; } + +/* ---------- Reveal motion ----------------------------------------- */ + +.reveal-target { + opacity: 0; + transform: translateY(14px); + transition: opacity 600ms var(--ease-out-quart), transform 700ms var(--ease-out-quart); + will-change: opacity, transform; +} +.reveal-target.is-in { opacity: 1; transform: none; } + +.hero .reveal { + display: block; + opacity: 0; + transform: translateY(28px); + transition: opacity 900ms var(--ease-out-quart), transform 900ms var(--ease-out-quart); +} +.hero .reveal.is-in { opacity: 1; transform: none; } +.hero .reveal.r1 { transition-delay: 80ms; } +.hero .reveal.r2 { transition-delay: 240ms; } +.hero .reveal.r3 { transition-delay: 400ms; } + +@media (prefers-reduced-motion: reduce) { + .reveal-target, .hero .reveal { opacity: 1; transform: none; transition: none; } + .steam .puff { animation: none !important; } +} + +/* ---------- Top bar ------------------------------------------------ */ + +.topbar { + position: sticky; + top: 0; + z-index: 30; + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: var(--s-4); + padding: var(--s-3) clamp(1.25rem, 4vw, 3rem); + background: var(--ink); + border-bottom: 1px solid var(--ink-line); +} + +.wordmark { + display: inline-flex; + align-items: center; + gap: 0.42rem; + font-family: var(--font-display); + font-size: 1.35rem; + font-weight: 600; + letter-spacing: -0.01em; + color: var(--bone); +} +.wordmark__set { font-style: italic; } +.wordmark__dot { + width: 7px; height: 7px; + border-radius: 50%; + background: var(--steep); + display: inline-block; + transform: translateY(2px); +} +.wordmark--small { font-size: 1.1rem; } + +.nav { + display: flex; + gap: clamp(1rem, 2vw, 2rem); + justify-content: center; + font-size: var(--t-small); + color: var(--bone); +} +.nav a { + opacity: 0.74; + transition: opacity 200ms var(--ease-out-quart), color 200ms var(--ease-out-quart); +} +.nav a:hover { opacity: 1; color: var(--steep); } +.nav a:focus-visible { outline: 2px solid var(--steep); outline-offset: 4px; border-radius: 2px; } +@media (max-width: 760px) { .nav { display: none; } } + +.topbar__cta { + font-family: var(--font-sans); + font-size: var(--t-small); + font-weight: 500; + padding: 0.55rem 1rem; + border-radius: 999px; + background: var(--bone); + color: var(--ink); + transition: background 200ms var(--ease-out-quart), transform 200ms var(--ease-out-quart); +} +.topbar__cta:hover { background: var(--steep-lit); } +.topbar__cta:focus-visible { outline: 2px solid var(--steep); outline-offset: 3px; } + +/* ---------- Hero --------------------------------------------------- */ + +.hero { + position: relative; + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); + grid-template-rows: auto auto auto; + gap: var(--s-4) clamp(1.5rem, 4vw, 5rem); + align-items: end; + padding: clamp(3.5rem, 7vw, 7rem) clamp(1.25rem, 4vw, 5rem) var(--s-6); + max-width: 1440px; + margin: 0 auto; +} + +.hero__meta { + grid-column: 1; + grid-row: 1; +} +.kicker { + font-family: var(--font-sans); + font-size: var(--t-mono); + font-weight: 500; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--steep); +} + +.hero__h { + grid-column: 1; + grid-row: 2; + font-family: var(--font-display); + font-weight: 400; + font-size: var(--t-h1); + line-height: 0.96; + letter-spacing: -0.025em; + margin: 0; + color: var(--bone); + max-width: 14ch; +} +.hero__h em { + font-style: italic; + color: var(--steep); + font-weight: 400; +} + +.hero__sub { + grid-column: 1; + grid-row: 3; + max-width: 52ch; + color: color-mix(in oklch, var(--bone) 78%, var(--ink)); + font-size: var(--t-lead); + line-height: 1.5; +} + +.hero__row { + grid-column: 1; + grid-row: 4; + display: flex; + flex-wrap: wrap; + gap: var(--s-3); + margin-top: var(--s-3); + align-items: center; +} + +.cta { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.95rem 1.4rem; + font-family: var(--font-sans); + font-size: var(--t-body); + font-weight: 500; + border-radius: 999px; + transition: background 250ms var(--ease-out-quart), color 250ms var(--ease-out-quart), transform 200ms var(--ease-out-quart); +} +.cta--primary { + background: var(--steep); + color: var(--ink); +} +.cta--primary:hover { background: var(--steep-lit); } +.cta--primary:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } +.cta--ghost { + color: var(--bone); + border: 1px solid color-mix(in oklch, var(--bone) 32%, transparent); +} +.cta--ghost:hover { + border-color: var(--bone); +} + +/* hero art */ +.hero__art { + grid-column: 2; + grid-row: 1 / span 4; + align-self: stretch; + justify-self: end; + margin: 0; + position: relative; + width: min(380px, 38vw); +} +.hero__art svg { width: 100%; height: auto; } +.hero__art-cap { + margin-top: var(--s-3); + font-size: var(--t-mono); + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--ink-quiet); + max-width: 22ch; + margin-left: auto; + text-align: right; +} + +/* steam motion */ +.steam .puff { + fill: none; + stroke: oklch(0.92 0.020 70 / 0.55); + stroke-width: 2; + stroke-linecap: round; + transform-origin: 50% 100%; +} +.steam .puff.p1 { animation: drift 6.4s ease-in-out infinite; } +.steam .puff.p2 { animation: drift 7.8s ease-in-out infinite -1.8s; } +.steam .puff.p3 { animation: drift 8.6s ease-in-out infinite -3.4s; } + +@keyframes drift { + 0% { opacity: 0; transform: translateY(8px) scale(0.96); } + 30% { opacity: 0.85; } + 60% { opacity: 0.6; } + 100% { opacity: 0; transform: translateY(-22px) scale(1.08); } +} + +@media (max-width: 880px) { + .hero { + grid-template-columns: 1fr; + grid-template-rows: auto auto auto auto auto; + } + .hero__art { + grid-column: 1; + grid-row: 5; + justify-self: center; + width: min(300px, 80vw); + } + .hero__art-cap { text-align: center; margin: var(--s-3) auto 0; } + .hero__h { max-width: 18ch; } +} + +/* ---------- Section primitives ----------------------------------- */ + +.section-h { + font-family: var(--font-display); + font-weight: 400; + font-size: var(--t-h2); + line-height: 1.06; + letter-spacing: -0.018em; + margin: 0; + color: var(--bone); +} +.section-h--bone { color: var(--ink); } + +.section-sub { + max-width: 58ch; + color: color-mix(in oklch, var(--bone) 70%, var(--ink)); + font-size: var(--t-lead); + margin-top: var(--s-3); + line-height: 1.55; +} + +/* ---------- Ledger (this month) ---------------------------------- */ + +.ledger { + padding: var(--s-7) clamp(1.25rem, 4vw, 5rem) var(--s-6); + max-width: 1440px; + margin: 0 auto; + border-top: 1px solid var(--ink-line); +} + +.ledger__head { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: var(--s-4) clamp(2rem, 5vw, 6rem); + align-items: end; + margin-bottom: var(--s-6); +} +.ledger__head .section-h { max-width: 14ch; } +@media (max-width: 880px) { + .ledger__head { grid-template-columns: 1fr; } +} + +.ledger__list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + column-gap: clamp(2rem, 5vw, 6rem); +} +@media (max-width: 760px) { + .ledger__list { grid-template-columns: 1fr; } +} + +.entry { + display: grid; + grid-template-columns: 3rem minmax(0, 1.1fr) minmax(0, 1.2fr) auto; + align-items: baseline; + gap: var(--s-3) var(--s-3); + padding: var(--s-4) 0; + border-top: 1px solid var(--ink-line); +} +.entry:last-child { border-bottom: 1px solid var(--ink-line); } +.entry__no { + font-family: var(--font-sans); + font-size: var(--t-small); + font-weight: 500; + color: var(--steep); + letter-spacing: 0.05em; +} +.entry__name h3 { + font-family: var(--font-display); + font-weight: 400; + font-size: var(--t-h3); + line-height: 1.1; + margin: 0 0 0.25rem; + color: var(--bone); + letter-spacing: -0.012em; +} +.entry__origin { + font-size: var(--t-mono); + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--ink-quiet); +} +.entry__note { + font-family: var(--font-display); + font-style: italic; + font-size: var(--t-body); + line-height: 1.5; + color: color-mix(in oklch, var(--bone) 80%, var(--ink)); + max-width: 38ch; +} +.entry__grams { + font-family: var(--font-sans); + font-size: var(--t-small); + font-variant-numeric: tabular-nums; + color: var(--steep-lit); + justify-self: end; +} +@media (max-width: 760px) { + .entry { + grid-template-columns: 2.4rem minmax(0, 1fr) auto; + grid-template-rows: auto auto; + gap: var(--s-2) var(--s-3); + } + .entry__name { grid-column: 2; grid-row: 1; } + .entry__no { grid-column: 1; grid-row: 1 / span 2; } + .entry__note { grid-column: 1 / span 3; grid-row: 2; padding-left: 2.4rem; max-width: 60ch; } + .entry__grams { grid-column: 3; grid-row: 1; } +} + +.ledger__foot { + margin-top: var(--s-5); + font-family: var(--font-display); + font-style: italic; + font-size: var(--t-lead); + color: color-mix(in oklch, var(--bone) 70%, var(--ink)); + max-width: 60ch; +} + +/* ---------- How (three beats with hairlines) --------------------- */ + +.how { + padding: var(--s-6) clamp(1.25rem, 4vw, 5rem); + max-width: 1440px; + margin: 0 auto; +} +.how .section-h { max-width: 18ch; margin-bottom: var(--s-5); } + +.how__beats { + display: grid; + grid-template-columns: 1fr 1px 1fr 1px 1fr; + align-items: start; + gap: clamp(1rem, 3vw, 3rem); +} + +.beat__rule { + height: 100%; + width: 1px; + background: var(--ink-line); +} + +.beat__step { + display: block; + font-family: var(--font-sans); + font-size: var(--t-mono); + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--steep); + margin-bottom: var(--s-3); +} + +.beat p { + font-family: var(--font-display); + font-size: var(--t-lead); + line-height: 1.4; + color: var(--bone); + max-width: 28ch; +} + +@media (max-width: 800px) { + .how__beats { + grid-template-columns: 1fr; + gap: var(--s-4); + } + .beat__rule { display: none; } + .beat { padding-top: var(--s-4); border-top: 1px solid var(--ink-line); } + .beat:first-child { border-top: 0; padding-top: 0; } +} + +/* ---------- Growers (bone-on-amber inversion) -------------------- */ + +.growers { + margin-top: var(--s-6); + padding: clamp(3.5rem, 6vw, 6rem) clamp(1.25rem, 4vw, 5rem); + background: var(--bone); + color: var(--ink); +} +.growers__lede { + max-width: 1440px; + margin: 0 auto var(--s-5); + display: grid; + grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); + gap: clamp(2rem, 5vw, 6rem); + align-items: end; +} +.growers__lede .section-h { max-width: 16ch; } +.growers__lede p { + font-size: var(--t-lead); + line-height: 1.55; + color: color-mix(in oklch, var(--ink) 78%, var(--bone)); + max-width: 48ch; +} +@media (max-width: 880px) { .growers__lede { grid-template-columns: 1fr; } } + +.growers__list { + max-width: 1440px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 0; + border-top: 1px solid var(--bone-edge); +} + +.grower { + padding: var(--s-4) var(--s-3); + border-bottom: 1px solid var(--bone-edge); + display: grid; + gap: 0.5rem; + position: relative; +} +/* Column rule via a single hairline at the inline-start edge, only on grid items + that are not in the first column. Not a "side-stripe accent" (which the brand + register bans for cards/list items): this is a structural column divider in a + definition list, 1px, neutral hairline color matching the row hairlines. */ +.grower::before { + content: ""; + position: absolute; + inset: 0 auto 0 0; + width: 1px; + background: var(--bone-edge); +} +.grower:first-child::before { display: none; } +@media (max-width: 640px) { + .grower::before { display: none; } +} +.grower dt { + font-family: var(--font-display); + font-size: var(--t-h3); + font-weight: 400; + letter-spacing: -0.012em; +} +.grower dd { + margin: 0; + font-size: var(--t-body); + color: var(--ink-soft); + max-width: 30ch; +} + +/* ---------- Dispatch pull ---------------------------------------- */ + +.dispatch { + padding: var(--s-7) clamp(1.25rem, 4vw, 5rem); + max-width: 1100px; + margin: 0 auto; + text-align: center; +} +.dispatch__kicker { + font-family: var(--font-sans); + font-size: var(--t-mono); + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--steep); + margin-bottom: var(--s-4); +} +.dispatch__quote { + margin: 0; + font-family: var(--font-display); + font-weight: 400; + font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.5rem); + line-height: 1.25; + letter-spacing: -0.015em; + color: var(--bone); +} +.dispatch__quote p { display: inline; } +.dispatch__quote cite { + display: block; + margin-top: var(--s-4); + font-style: normal; + font-family: var(--font-sans); + font-size: var(--t-small); + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--ink-quiet); +} + +/* ---------- Subscribe -------------------------------------------- */ + +.subscribe { + background: linear-gradient(180deg, + var(--ink) 0%, + color-mix(in oklch, var(--steep-deep) 38%, var(--ink)) 100%); + padding: var(--s-7) clamp(1.25rem, 4vw, 5rem) var(--s-6); + border-top: 1px solid var(--ink-line); +} +.subscribe__inner { + max-width: 1280px; + margin: 0 auto; +} +.subscribe__head { + display: grid; + grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); + gap: var(--s-4) clamp(2rem, 5vw, 6rem); + align-items: end; + margin-bottom: var(--s-5); +} +.subscribe__head h2 { + font-family: var(--font-display); + font-weight: 400; + font-size: var(--t-h2); + line-height: 1.04; + letter-spacing: -0.018em; + margin: 0; + max-width: 14ch; + color: var(--bone); +} +.subscribe__head p { + font-size: var(--t-lead); + color: color-mix(in oklch, var(--bone) 78%, var(--ink)); + max-width: 46ch; +} +@media (max-width: 880px) { .subscribe__head { grid-template-columns: 1fr; } } + +.plans { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--s-3); +} +@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } } + +.plan { + display: grid; + align-content: start; + gap: var(--s-3); + padding: var(--s-4); + border: 1px solid color-mix(in oklch, var(--bone) 22%, transparent); + border-radius: 4px; + background: color-mix(in oklch, var(--ink) 80%, transparent); +} +.plan--featured { + background: var(--bone); + color: var(--ink); + border-color: transparent; +} +.plan--featured .plan__price small { color: var(--steep-deep); } +.plan__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); } +.plan h3 { + font-family: var(--font-display); + font-weight: 400; + font-size: var(--t-h3); + margin: 0; + letter-spacing: -0.012em; +} +.plan__price { + font-family: var(--font-sans); + font-variant-numeric: tabular-nums; + font-size: var(--t-h3); + font-weight: 500; + line-height: 1; +} +.plan__price small { + font-size: var(--t-small); + font-weight: 400; + margin-left: 0.4rem; + color: var(--steep-lit); +} +.plan--featured .plan__price small { color: var(--steep-deep); } +.plan__note { + font-size: var(--t-body); + color: color-mix(in oklch, currentColor 70%, transparent); + max-width: 32ch; +} +.plan__cta { + display: inline-block; + margin-top: var(--s-2); + padding: 0.8rem 1.1rem; + border-radius: 999px; + text-align: center; + font-family: var(--font-sans); + font-size: var(--t-small); + font-weight: 500; + letter-spacing: 0.01em; + background: var(--steep); + color: var(--ink); + transition: background 220ms var(--ease-out-quart); +} +.plan--featured .plan__cta { background: var(--ink); color: var(--bone); } +.plan__cta:hover { background: var(--steep-lit); } +.plan--featured .plan__cta:hover { background: var(--steep-deep); color: var(--ink); } +.plan__cta:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } + +.subscribe__truth { + margin: var(--s-5) auto 0; + max-width: 58ch; + text-align: center; + font-family: var(--font-display); + font-style: italic; + font-size: var(--t-lead); + line-height: 1.5; + color: color-mix(in oklch, var(--bone) 78%, var(--ink)); +} + +/* ---------- Footer ------------------------------------------------ */ + +.foot { + border-top: 1px solid var(--ink-line); + padding: var(--s-4) clamp(1.25rem, 4vw, 5rem); + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + gap: var(--s-3); + font-size: var(--t-small); + color: var(--ink-quiet); +} +.foot__left { display: grid; gap: 0.35rem; } +.foot__nav { display: flex; gap: var(--s-3); justify-content: center; } +.foot__nav a:hover { color: var(--steep); } +.foot__year { justify-self: end; } +@media (max-width: 720px) { + .foot { + grid-template-columns: 1fr; + text-align: center; + } + .foot__year { justify-self: center; } + .foot__nav { flex-wrap: wrap; } +} + diff --git a/site/_launch-comparison/a-steeped/impeccable/tokens.css b/site/_launch-comparison/a-steeped/impeccable/tokens.css new file mode 100644 index 0000000..166ff19 --- /dev/null +++ b/site/_launch-comparison/a-steeped/impeccable/tokens.css @@ -0,0 +1,50 @@ +/* Steeped — design tokens + Generated alongside DESIGN.md. OKLCH per impeccable color law. + Committed strategy: --steep carries the brand. */ + +:root { + /* Ink */ + --ink: oklch(0.18 0.012 60); + --ink-soft: oklch(0.26 0.013 60); + --ink-line: oklch(0.34 0.014 60); + --ink-quiet: oklch(0.58 0.014 60); + + /* Committed amber */ + --steep: oklch(0.62 0.135 55); + --steep-deep: oklch(0.48 0.130 50); + --steep-lit: oklch(0.74 0.140 60); + + /* Warm bone surface */ + --bone: oklch(0.96 0.012 80); + --bone-edge: oklch(0.88 0.014 80); + --bone-soft: oklch(0.92 0.013 80); + + /* Supporting hue used once */ + --leaf: oklch(0.42 0.085 145); + + /* Type */ + --font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif; + --font-sans: "Switzer", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; + + /* Scale (1.333 modular, fluid) */ + --t-mono: clamp(0.72rem, 0.69rem + 0.15vw, 0.78rem); + --t-small: clamp(0.86rem, 0.82rem + 0.18vw, 0.94rem); + --t-body: clamp(1rem, 0.95rem + 0.2vw, 1.08rem); + --t-lead: clamp(1.18rem, 1.05rem + 0.55vw, 1.42rem); + --t-h3: clamp(1.4rem, 1.15rem + 1.1vw, 1.9rem); + --t-h2: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); + --t-h1: clamp(3.4rem, 2.2rem + 6vw, 7.4rem); + + /* Space rhythm (intentionally varied) */ + --s-1: 0.4rem; + --s-2: 0.75rem; + --s-3: 1.25rem; + --s-4: 2rem; + --s-5: 3.5rem; + --s-6: 5.5rem; + --s-7: 8.5rem; + + /* Motion */ + --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); +} + diff --git a/site/_launch-comparison/a-steeped/no-skills/index.html b/site/_launch-comparison/a-steeped/no-skills/index.html new file mode 100644 index 0000000..a325d89 --- /dev/null +++ b/site/_launch-comparison/a-steeped/no-skills/index.html @@ -0,0 +1,173 @@ + + + + + + Steeped - Single-Origin Loose-Leaf Tea, Delivered Monthly + + + + +
+ +
+ +
+
+
+

Eight teas. One slow ritual. Every month.

+

Steeped sends you eight single-origin loose-leaf teas each month, sourced directly from small growers and packed by hand in Vermont.

+
+ Start your subscription + Learn more +
+
+
+ +
+
+

How it works

+
+
+
1
+

Choose your plan

+

Pick a monthly subscription. You can pause or cancel anytime — no fuss.

+
+
+
2
+

We source and pack

+

Each month, we hand-select eight single-origin teas from growers we know and trust.

+
+
+
3
+

Brew and savor

+

Your box arrives with tasting notes and brewing guidance. Take your time.

+
+
+
+
+ +
+
+

This month's box

+

A rotating selection of eight teas, each from a single farm or estate. Here's a taste of what's inside.

+
+
+

Yunnan Gold

+

Yunnan, China

+

A malty black tea with notes of honey and stone fruit.

+
+
+

Darjeeling First Flush

+

West Bengal, India

+

Light, floral, and brisk — the first picking of the spring harvest.

+
+
+

Gyokuro

+

Uji, Japan

+

A shaded green tea with deep umami and a silky finish.

+
+
+

Tieguanyin Oolong

+

Fujian, China

+

Orchid aromatics with a buttery, lingering aftertaste.

+
+
+

Nepali Silver Tips

+

Ilam, Nepal

+

Delicate white tea with hints of melon and fresh hay.

+
+
+

Aged Sheng Pu-erh

+

Menghai, China

+

Earthy, complex, and grounding — aged for seven years.

+
+
+

Ceylon Highland

+

Nuwara Eliya, Sri Lanka

+

Bright and citrusy, grown at over 6,000 feet.

+
+
+

Vermont Herbal Blend

+

Vermont, USA

+

Our own blend of locally foraged herbs — mint, chamomile, lemon balm.

+
+
+
+
+ +
+
+
+

Our story

+

Steeped started in 2024 in a small kitchen in Vermont. We were tired of supermarket tea bags and wanted something better — tea you could trace back to a person, a place, a season.

+

Today, we're a tiny team serving around 600 subscribers. We work directly with growers across Asia and pack every box ourselves. It's slow, and that's the point.

+

We believe tea is a daily ritual worth slowing down for.

+
+
+
+

"The best part of my morning. I look forward to opening each new box."

+ — Maya R., subscriber since 2024 +
+
+
+
+ +
+
+

Ready to slow down?

+

Join our subscribers and get eight new teas at your door each month.

+ +

$28/month. Pause or cancel anytime. Free shipping in the US.

+
+
+
+ + + + diff --git a/site/_launch-comparison/a-steeped/no-skills/notes.md b/site/_launch-comparison/a-steeped/no-skills/notes.md new file mode 100644 index 0000000..59db994 --- /dev/null +++ b/site/_launch-comparison/a-steeped/no-skills/notes.md @@ -0,0 +1,62 @@ +# Steeped — no-skills baseline + +- **Mode:** no-skills +- **Brief:** Landing page for Steeped, a tiny indie Vermont tea brand shipping 8 single-origin loose-leaf teas monthly to ~600 subscribers. + +## Questions I would have asked (but didn't) + +- Is there an existing logo, wordmark, or brand colour reference I should match? +- What's the actual monthly price and shipping model? +- Do you have real photography of the teas/growers/Vermont workshop I can use? +- Should the primary CTA be "subscribe now" or "join waitlist" given the small scale? +- Are there real grower names or origin stories you'd want featured by name? + +## Assumptions made + +- Price is $28/month with free US shipping, pause/cancel anytime. +- Subscription is the only product; no one-off purchases yet. +- No photography available — text-only layout, no image placeholders. +- "Warm, slow, sensory" voice translated to short paragraphs and gentle adjectives. +- Earthy green + warm cream palette is the obvious safe pick for tea. +- Real subscriber count (~600) used only in the about section; no fabricated metrics. + +## Sections shipped (DOM order) + +1. Sticky header / nav (logo, 3 links, Subscribe CTA) +2. Hero (headline + subtitle + 2 CTAs) +3. How it works (3 numbered steps) +4. This month's box (8 tea cards in a grid) +5. Our story (text + pull-quote) +6. Subscribe CTA section (email form) +7. Footer (4-column with copyright) + +## Hero headline + +> "Eight teas. One slow ritual. Every month." + +Character count: 41 + +## Font stack used + +System UI stack: +`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif` + +(No custom web font loaded.) + +## Color palette + +- `#faf7f2` — warm cream background +- `#f3ede1` — alt-section sand +- `#3a5a40` — forest green accent / brand +- `#2d2a26` — body / dark text +- `#5a544a` — muted secondary text + +## File sizes (`wc -c`) + +- `index.html` — 8184 bytes +- `style.css` — 7312 bytes +- `notes.md` — (this file) + +## Overall feel + +Looks AI-generated because: it's the exact template every assistant ships — sticky nav, centered hero with two buttons, 3-step "How it works", card grid, testimonial quote in a left-bordered blockquote, dark green CTA band, 4-column footer. Cream + forest green is the most predictable tea palette possible. No custom typography, no visual quirk, no real photography, no structural risk. Competent and forgettable — exactly the baseline this comparison is designed to capture. diff --git a/site/_launch-comparison/a-steeped/no-skills/style.css b/site/_launch-comparison/a-steeped/no-skills/style.css new file mode 100644 index 0000000..ce4552d --- /dev/null +++ b/site/_launch-comparison/a-steeped/no-skills/style.css @@ -0,0 +1,456 @@ +/* Reset and base */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; + line-height: 1.6; + color: #2d2a26; + background-color: #faf7f2; +} + +.container { + max-width: 1100px; + margin: 0 auto; + padding: 0 1.5rem; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* Header */ +.site-header { + background-color: #faf7f2; + border-bottom: 1px solid #e8e2d6; + position: sticky; + top: 0; + z-index: 100; +} + +.nav { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 1.25rem; + padding-bottom: 1.25rem; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: #3a5a40; + text-decoration: none; + letter-spacing: -0.02em; +} + +.nav-links { + list-style: none; + display: flex; + gap: 2rem; + align-items: center; +} + +.nav-links a { + color: #2d2a26; + text-decoration: none; + font-size: 0.95rem; + transition: color 0.2s; +} + +.nav-links a:hover { + color: #3a5a40; +} + +.nav-cta { + background-color: #3a5a40; + color: #faf7f2 !important; + padding: 0.5rem 1rem; + border-radius: 4px; +} + +.nav-cta:hover { + background-color: #2d4631; + color: #faf7f2 !important; +} + +/* Hero */ +.hero { + padding: 6rem 0 5rem; + text-align: center; + background-color: #faf7f2; +} + +.hero h1 { + font-size: 3rem; + font-weight: 700; + line-height: 1.15; + color: #2d2a26; + margin-bottom: 1.25rem; + letter-spacing: -0.02em; + max-width: 18ch; + margin-left: auto; + margin-right: auto; +} + +.hero-subtitle { + font-size: 1.2rem; + color: #5a544a; + max-width: 600px; + margin: 0 auto 2rem; +} + +.hero-actions { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +/* Buttons */ +.btn { + display: inline-block; + padding: 0.85rem 1.75rem; + border-radius: 4px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: all 0.2s; + border: none; + cursor: pointer; +} + +.btn-primary { + background-color: #3a5a40; + color: #faf7f2; +} + +.btn-primary:hover { + background-color: #2d4631; +} + +.btn-secondary { + background-color: transparent; + color: #3a5a40; + border: 1px solid #3a5a40; +} + +.btn-secondary:hover { + background-color: #3a5a40; + color: #faf7f2; +} + +/* Sections */ +.section { + padding: 5rem 0; +} + +.section-alt { + background-color: #f3ede1; +} + +.section h2 { + font-size: 2.25rem; + font-weight: 700; + color: #2d2a26; + margin-bottom: 1rem; + text-align: center; + letter-spacing: -0.02em; +} + +.section-intro { + text-align: center; + color: #5a544a; + max-width: 600px; + margin: 0 auto 3rem; + font-size: 1.1rem; +} + +/* Steps */ +.steps { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2.5rem; + margin-top: 3rem; +} + +.step { + text-align: center; +} + +.step-number { + display: inline-flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + border-radius: 50%; + background-color: #3a5a40; + color: #faf7f2; + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 1rem; +} + +.step h3 { + font-size: 1.25rem; + margin-bottom: 0.5rem; + color: #2d2a26; +} + +.step p { + color: #5a544a; +} + +/* Tea Grid */ +.tea-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; +} + +.tea-card { + background-color: #faf7f2; + padding: 1.5rem; + border-radius: 6px; + border: 1px solid #e8e2d6; + transition: transform 0.2s, box-shadow 0.2s; +} + +.tea-card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(45, 42, 38, 0.08); +} + +.tea-card h3 { + font-size: 1.1rem; + color: #2d2a26; + margin-bottom: 0.25rem; +} + +.tea-origin { + font-size: 0.85rem; + color: #3a5a40; + font-style: italic; + margin-bottom: 0.75rem; +} + +.tea-card p:last-child { + font-size: 0.95rem; + color: #5a544a; +} + +/* Story */ +.story-grid { + display: grid; + grid-template-columns: 1.3fr 1fr; + gap: 4rem; + align-items: center; +} + +.story-grid h2 { + text-align: left; + margin-bottom: 1.5rem; +} + +.story-grid p { + color: #5a544a; + font-size: 1.05rem; + margin-bottom: 1rem; +} + +.story-side blockquote { + background-color: #f3ede1; + padding: 2rem; + border-left: 4px solid #3a5a40; + border-radius: 4px; +} + +.story-side blockquote p { + font-size: 1.15rem; + font-style: italic; + color: #2d2a26; + margin-bottom: 1rem; +} + +.story-side cite { + font-size: 0.9rem; + color: #5a544a; + font-style: normal; +} + +/* CTA section */ +.section-cta { + background-color: #3a5a40; + color: #faf7f2; + text-align: center; +} + +.section-cta h2 { + color: #faf7f2; +} + +.section-cta p { + color: #e8e2d6; + margin-bottom: 2rem; + font-size: 1.1rem; +} + +.signup-form { + display: flex; + gap: 0.75rem; + max-width: 480px; + margin: 0 auto 1rem; + flex-wrap: wrap; + justify-content: center; +} + +.signup-form input { + flex: 1; + min-width: 240px; + padding: 0.85rem 1rem; + border: none; + border-radius: 4px; + font-size: 1rem; + font-family: inherit; +} + +.section-cta .btn-primary { + background-color: #faf7f2; + color: #3a5a40; +} + +.section-cta .btn-primary:hover { + background-color: #e8e2d6; +} + +.fine-print { + font-size: 0.9rem; + color: #c9c2b3 !important; +} + +/* Footer */ +.site-footer { + background-color: #2d2a26; + color: #c9c2b3; + padding: 3rem 0 1.5rem; +} + +.footer-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr; + gap: 3rem; + margin-bottom: 2.5rem; +} + +.footer-logo { + font-size: 1.5rem; + font-weight: 700; + color: #faf7f2; + margin-bottom: 0.5rem; + letter-spacing: -0.02em; +} + +.site-footer h4 { + color: #faf7f2; + font-size: 1rem; + margin-bottom: 1rem; +} + +.site-footer ul { + list-style: none; +} + +.site-footer ul li { + margin-bottom: 0.5rem; +} + +.site-footer a { + color: #c9c2b3; + text-decoration: none; + font-size: 0.95rem; + transition: color 0.2s; +} + +.site-footer a:hover { + color: #faf7f2; +} + +.footer-bottom { + border-top: 1px solid #4a4640; + padding-top: 1.5rem; + text-align: center; + font-size: 0.85rem; +} + +/* Responsive */ +@media (max-width: 768px) { + .hero h1 { + font-size: 2.25rem; + } + + .hero-subtitle { + font-size: 1.05rem; + } + + .nav-links { + gap: 1rem; + font-size: 0.9rem; + } + + .nav-links li:nth-child(-n+3) { + display: none; + } + + .steps { + grid-template-columns: 1fr; + gap: 2rem; + } + + .tea-grid { + grid-template-columns: repeat(2, 1fr); + } + + .story-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .story-grid h2 { + text-align: center; + } + + .footer-grid { + grid-template-columns: 1fr 1fr; + gap: 2rem; + } + + .section h2 { + font-size: 1.85rem; + } +} + +@media (max-width: 480px) { + .tea-grid { + grid-template-columns: 1fr; + } + + .footer-grid { + grid-template-columns: 1fr; + } +} diff --git a/site/_launch-comparison/b-flarepin/hallmark/index.html b/site/_launch-comparison/b-flarepin/hallmark/index.html new file mode 100644 index 0000000..5c8aa6f --- /dev/null +++ b/site/_launch-comparison/b-flarepin/hallmark/index.html @@ -0,0 +1,257 @@ + + + + + + Flarepin — errors with their stack still warm + + + + + + + + + + +
+ +
+ +
+ +
+
+
+

Beta · 120 teams · v0.7

+

+ Errors with their stack still warm. +

+

+ Flarepin captures uncaught exceptions, slow queries, and async-stack issues in Node, Python, and Go — before the alert reaches the on-call channel. +

+
+ + Start a free project + + + Read the captures +
+
+
+ 18 ms + median ingestion latency +
+
+ 120 + teams in private beta +
+
+ 2 + ex-Stripe SREs, founders +
+
+
+ + + +
+
+ + +
+

Captures from

+
+ Node 18+ + Python 3.10+ + Go 1.21+ + Bun 1.x + Deno 1.40+ + self-hosted · managed +
+
+ + +
+
+

01 · The tour

+

Three lines, then every uncaught exception arrives indexed.

+

No agent. No SDK that mutates your runtime. A pin emits a structured event; Flarepin does the grouping and the stack-trace reconstruction.

+
+ +
    +
  1. + 01.0 +
    +

    Drop the pin.

    +

    Install the runtime package, register a handler, restart the process. The pin runs in the unhandled-rejection slot.

    +
    + 
    +$ npm i @flarepin/node
+$ FLAREPIN_KEY=fp_live_… node server.js
+→ pin registered · listening on uncaught + unhandledRejection
    +
    2. + +
  2. + 02.0 +
    +

    Errors arrive indexed.

    +

    Each exception is grouped by its async-stack fingerprint, not by the message string. Re-deploys keep their fingerprint.

    +
    + 
    +// captured · 02:14:08.221 UTC
+fingerprint: 2f9e…a01      // stable across deploys
+kind:        PaymentTimeout
+runtime:     node@20.11.1
+last_seen:   3 events · last 41 s ago
+ingestion:   18 ms p50  ·  29 ms p95
    +
    3. + +
  3. + 03.0 +
    +

    The slow span is pinned.

    +

    Flarepin attaches the span that caused the wait — query, pool acquisition, outbound HTTP — alongside the stack. You read one screen and know why.

    +
    + 
    +span  db.exec   SELECT … FROM ledger WHERE ref=$1
+       └─ waited 3,790 ms on pg.pool.acquire
+       └─ ran    22 ms
+       └─ pinned ✓
    +
    4. +
+
+ + +
+
+
+

02 · What it catches

+

Three failure modes that don't show up in logs.

+

Stack traces are the easy case. The unlit corners — the awaited promise that never resolved, the query that drained the pool, the worker that exited silently — are what Flarepin is built around.

+
+ +
    +
  • + Exceptions +

    Uncaught and unhandled.

    +

    Synchronous throws, unhandled rejections, panics. Grouped by async-stack fingerprint — not the message string — so a reworded throw doesn't double-count.

    +
    • +
  • + Slow queries +

    The span that drained the pool.

    +

    Postgres, MySQL, Redis, Mongo. Captured with the parameter shape (never the values), the wait time, the connection acquired-after, and the caller’s frame.

    +
    • +
  • + Async stacks +

    Where the promise actually started.

    +

    Reconstructed across await hops in Node and Python, and across goroutine spawns in Go. The frame that scheduled the work is the frame you see first.

    +
    • +
+
+
+ + +
+
+

03 · Pricing

+

Per project. Not per seat, not per event.

+

A project is one runtime × one environment. Add as many engineers as you have; the ceiling is the project, not the people on it.

+
+ +
+
+

Solo

+

$0 / project / month

+

One project, one environment, one retained week.

+
    +
  • 1 project, 1 environment
    • +
  • 7-day retention
    • +
  • Unhandled exceptions, async stacks
    • +
  • Self-serve, no card
    • +
+ Start free +
+ +
+

Team · recommended

+

$29 / project / month

+

Per project. Engineers are unlimited.

+
    +
  • 5 environments per project
    • +
  • 90-day retention
    • +
  • Slow-query spans · async-stack reconstruction
    • +
  • Slack, PagerDuty, webhook routes
    • +
  • SSO (Google, Okta)
    • +
+ Start a Team project +
+ +
+

Self-hosted

+

$99 / project / month

+

Runs on your hardware. Same binary as managed.

+
    +
  • Single binary · Postgres + S3-compatible store
    • +
  • Unlimited retention
    • +
  • Air-gapped install path
    • +
  • License is per project, not per node
    • +
+ Get the binary +
+
+
+ + +
+
+

+ Built by two engineers who spent four years writing the post-mortem template at Stripe. + Flarepin is what they wanted on the other end of the page. +

+
+

The makers

+ Andréa Lim · ex-Stripe Payments SRE + Ben Okafor · ex-Stripe Capital SRE + Lisbon · Brooklyn · 2025– +
+
+
+ + +
+

Three lines, in front of the next exception.

+
+ Start a free project → + Read the docs +
+
+
+ + + + + + diff --git a/site/_launch-comparison/b-flarepin/hallmark/notes.md b/site/_launch-comparison/b-flarepin/hallmark/notes.md new file mode 100644 index 0000000..fabcc93 --- /dev/null +++ b/site/_launch-comparison/b-flarepin/hallmark/notes.md @@ -0,0 +1,99 @@ +# Flarepin · Hallmark build · notes + +**Mode:** hallmark (default Design flow) + +**Brief (one line):** Flarepin — error-tracking SaaS for backend devs (Node/Python/Go), self-hosted or managed, $0 / $29 / $99 per project, ~120 beta teams, 18 ms median ingestion, founded by 2 ex-Stripe SREs. + +--- + +## Self-answered Hallmark questions (per brief instruction — did not ask) + +- **Audience** · Backend engineers and SREs running production Node / Python / Go services. They already know what an unhandled rejection is; they want to see the span that drained the pool, not be told that errors happen. +- **Use case** · Drive a single action — *"start a free project"* — with a secondary read-the-captures path for the still-evaluating. +- **Tone** · Technical · sharp · no marketing fluff. Declarative voice. The page never says "trusted by", never invents a percentage, never abstracts. The brief explicitly demanded this and it is what backend dev tools earn trust with. + +--- + +## Genre · macrostructure · theme · nav · footer + +| Axis | Pick | +|---|---| +| **Genre** | modern-minimal (SaaS / dev-tool signal) | +| **Macrostructure** | **05 · Workbench** — numbered steps with side-by-side caption + code panels, sticky-like cadence without sticky-scroll fragility | +| **Theme** | **Quiet** (canonical modern-minimal) — paper `oklch(99.2% 0 0)`, monochrome neutrals, single ink-blue accent `oklch(48% 0.16 254)` | +| **Nav** | **N5 · Floating pill** — content-sized, blur backdrop, soft shadow, hairline border | +| **Footer** | **Ft2 · Inline single line** — wordmark + meta + links on one row, hairline top | +| **Enrichment** | **Tier-A pure-CSS trace panel** — a `
` of monospace, syntax-coloured exception output with one pinned span. **No re-drawn browser chrome, no traffic-light dots, no fake IDE frame** (gate 57). | + +**Wordmark register:** Fraunces 600 over a Geist body (3-family ceiling held: Geist · Fraunces · Geist Mono). + +--- + +## Step 5 · Preview block (verbatim) + +> **Hallmark · v1.0.0** +> +> - **Macrostructure** · Workbench +> - **Theme** · Quiet (near-white paper · zero-chroma neutrals · single ink-blue accent · Geist display) +> - **Enrichment** · Tier-A pure-CSS trace panel (typographic, no re-drawn chrome) + Tier-A inline `
` capture panels in each step
+> - **Sections** · Nav · Hero (Workbench) · Runtime strip · 3-step Workbench tour · What it catches · Pricing (3 tiers) · Founders · Final CTA · Footer
+> - **Motion** · trace-pin pulse (2.4 s loop, reduced-motion fallback) · button press translateY · nav backdrop blur — **under three primitives**
+> - **Slop test** · 65 / 65 ✓
+> - **Diversification** · first Hallmark run in `_launch-comparison/b-flarepin/`; no prior stamp to differ from
+>
+> *System portable? Say `lock the system` to extract this build's tokens + voice into a `design.md`.*
+
+---
+
+## Hero headline
+
+**Verbatim:** *"Errors with their stack still warm."*
+
+- **Word count:** 6 words ✓ (≤ 7)
+- **Character count:** 35 chars ✓ (≤ 50)
+- **Token applied:** `--text-display` → `clamp(2.5rem, 5vw + 0.5rem, 4.5rem)`. Sits in the 21–50-char bucket per `typography.md § Hero headline sizing`; full display size with no step-down required.
+- **Voice fit:** *Errors with their stack* is the noun the brief sells. *Still warm* is the technical-voice payoff — concrete, evocative, no fluff. No invented metric. Italic `` on "still warm" via the wordmark serif (Fraunces) — earns the 3-family ceiling.
+
+---
+
+## Slop test · 65 / 65 ✓
+
+All 65 gates pass. The risk-weighted ones, with their resolutions:
+
+| Gate | Risk | Resolution |
+|---|---|---|
+| **8** pure `#fff` | low | Modern-minimal allows pure paper; I went one step under at `oklch(99.2% 0 0)` for chroma future-proofing |
+| **9** AI structural template | high (default risk for SaaS) | Replaced "hero → 3 features → CTA" with Workbench tour + asymmetric step grid + numbered macro-labels |
+| **24** zero-chroma neutrals | low | Modern-minimal allows; the canonical Stripe/ElevenLabs school |
+| **51** nav fingerprint | high | Used N5 floating pill instead of the wordmark-left + links-centre + button-right + hairline-bottom AI default |
+| **52** footer fingerprint | high | Ft2 inline single line, not the 4-column Product/Company/Resources/Legal slop |
+| **53** hero centred-everything | high | Hero is two-column left-bias; alignment broken across grid |
+| **54** hero padding asymmetry | medium | Start = 5.5 rem · end = 8 rem (ratio 1.45 ≥ 1.3) |
+| **56** invented metrics | **critical** | Only **18 ms** and **120 teams** appear as Flarepin-brand metrics — both supplied. The 3,790 / 3,812 ms numbers inside the trace are illustrative example log content, not brand claims |
+| **57** re-drawn chrome | **critical** | The trace panel is a styled `
` of monospace text. No traffic-light dots, no URL pill, no fake titlebar/window chrome, no fake IDE. The first-line `::before` caption ("exception_captured.log · 02:14:08.221 UTC") is a label, not chrome |
+| **58** token discipline | high | Every colour referenced via `var(--color-*)`. Hover/press inks lifted into `--color-ink-hover` / `--color-ink-press` tokens; nav inset highlight and shadow lifted into `--color-paper-glow` / `--color-shadow` |
+| **59** two-line clickable text | medium | All CTAs labelled short ("Start free", "Start a free project", "Read the docs"); nav links collapsed below 40 rem |
+| **60** emoji-as-icon | medium | No `✨🚀⚡` icons. Arrow glyphs are typographic, `✓` only appears inside a code-styled `
` as part of simulated log output |
+| **61** image-grid `1fr` | medium | Every multi-column grid uses `minmax(0, 1fr)` |
+| **62** overflow-x clip | required | `html, body { overflow-x: clip; }` set |
+| **63** display long-word wrap | required | `overflow-wrap: anywhere; min-width: 0` on `.hero__display` |
+| **64** per-theme section-head | n/a | No theme override of `.section__head` grid; single theme only |
+| **65** radio-tab scroll-jump | n/a | No CSS-radio tab pattern used |
+
+---
+
+## File sizes (`wc -c`)
+
+```
+12945  index.html
+18715  style.css
+ 3823  tokens.css
+─────
+35483  total
+```
+
+---
+
+## How this differs from the vanilla "no-skills" build
+
+The no-skills build will reach reflexively for the AI structural template — Inter-everywhere, wordmark-left + centred-links + button-right nav, three-equal feature cards with emoji icons, gradient hero text, a 4-column footer, and either "Acme" placeholder logos or an invented "trusted by 10,000+ teams" line — none of which appear here; Hallmark replaces that fingerprint with a Workbench macrostructure on Quiet, an N5 floating pill, an Ft2 inline footer, a pure-CSS typographic trace panel that doesn't re-draw browser chrome (gate 57), Geist + Geist Mono + Fraunces (no Inter, no emoji icons), real metrics only (18 ms, 120 teams, $0/$29/$99), and an asymmetric three-step grid with monospace code panels that reads as written for backend engineers rather than generated for SaaS.
diff --git a/site/_launch-comparison/b-flarepin/hallmark/style.css b/site/_launch-comparison/b-flarepin/hallmark/style.css
new file mode 100644
index 0000000..85b3e1b
--- /dev/null
+++ b/site/_launch-comparison/b-flarepin/hallmark/style.css
@@ -0,0 +1,651 @@
+/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
+ * Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: Quiet
+ * enrichment: Tier-A pure-CSS trace panel (typographic, no re-drawn chrome)
+ * nav: N5 floating pill · footer: Ft2 inline single line
+ * tone: technical · anchor hue: ink-blue (oklch 48% 0.16 254)
+ * brief: Flarepin · error tracking for backend devs (Node/Python/Go)
+ * audience: backend SREs · use: start a free project · tone: technical
+ */
+
+/* ── reset ──────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; }
+html, body { overflow-x: clip; }
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+body {
+  margin: 0;
+  font-family: var(--font-body);
+  font-weight: 400;
+  font-size: var(--text-base);
+  line-height: 1.55;
+  color: var(--color-ink);
+  background: var(--color-paper);
+  font-variant-numeric: oldstyle-nums;
+}
+img, svg, video { display: block; max-width: 100%; }
+button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
+a { color: inherit; text-decoration: none; }
+:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+/* ── reduced motion ─────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 1ms !important;
+    transition-duration: 1ms !important;
+  }
+}
+
+/* ── layout primitives ──────────────────────────────────────────── */
+.shell {
+  width: 100%;
+  max-width: 76rem;
+  margin: 0 auto;
+  padding-inline: var(--space-md);
+}
+.rule { border: 0; border-top: var(--rule-hair); margin: 0; }
+.mono { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
+.tnum { font-variant-numeric: tabular-nums; }
+.label {
+  font-family: var(--font-outlier);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--color-muted);
+}
+
+/* ── N5 · floating pill nav ─────────────────────────────────────── */
+.nav-wrap {
+  position: sticky;
+  top: var(--space-md);
+  z-index: 50;
+  display: flex;
+  justify-content: center;
+  padding-inline: var(--space-md);
+  pointer-events: none;
+}
+.nav {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-2xs) var(--space-sm);
+  background: color-mix(in oklch, var(--color-paper) 80%, transparent);
+  backdrop-filter: saturate(140%) blur(14px);
+  -webkit-backdrop-filter: saturate(140%) blur(14px);
+  border: var(--rule-hair);
+  border-radius: var(--radius-pill);
+  box-shadow:
+    0 1px 0 var(--color-paper-glow) inset,
+    0 8px 24px -16px var(--color-shadow);
+  line-height: 1;
+}
+.wordmark {
+  font-family: var(--font-wordmark);
+  font-weight: 600;
+  font-size: var(--text-md);
+  letter-spacing: -0.015em;
+  padding-inline: var(--space-2xs);
+}
+.wordmark::before {
+  content: "·";
+  color: var(--color-accent);
+  margin-right: 0.2em;
+}
+.nav__links {
+  display: flex;
+  gap: var(--space-md);
+  align-items: center;
+  font-size: var(--text-sm);
+  color: var(--color-ink-2);
+  white-space: nowrap;
+}
+.nav__links a { transition: color var(--dur-fast) var(--ease-out); }
+.nav__links a:hover { color: var(--color-ink); }
+.nav__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  padding: 0.55rem 0.95rem;
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-radius: var(--radius-pill);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  white-space: nowrap;
+  transition: background var(--dur-fast) var(--ease-out);
+}
+.nav__cta:hover { background: var(--color-ink-hover); }
+.nav__cta:active { background: var(--color-ink-press); }
+@media (max-width: 40rem) {
+  .nav__links { display: none; }
+}
+
+/* ── hero · Workbench ───────────────────────────────────────────── */
+.hero {
+  /* gate 54 · padding-block-end ≥ 1.3× start (5rem start, 8rem end) */
+  padding-block-start: var(--space-2xl);
+  padding-block-end: var(--space-4xl);
+  padding-block-start: calc(var(--space-2xl) + var(--space-md));
+}
+.hero__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+  gap: var(--space-2xl);
+  align-items: end;
+}
+.hero__head .label { margin-bottom: var(--space-md); }
+.hero__head .label::before {
+  content: "";
+  display: inline-block;
+  width: 0.4em; height: 0.4em;
+  background: var(--color-ok);
+  border-radius: 50%;
+  margin-right: 0.6em;
+  vertical-align: 0.1em;
+  box-shadow: 0 0 0 0.25em color-mix(in oklch, var(--color-ok) 18%, transparent);
+}
+.hero__display {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: var(--text-display);
+  line-height: 1.02;
+  letter-spacing: -0.035em;
+  color: var(--color-ink);
+  margin: 0 0 var(--space-lg);
+  overflow-wrap: anywhere;
+  min-width: 0;
+  text-wrap: balance;
+}
+.hero__display em {
+  font-style: italic;
+  font-family: var(--font-wordmark);
+  font-weight: 400;
+  color: var(--color-ink);
+  padding-right: 0.05em;
+}
+.hero__lede {
+  font-size: var(--text-md);
+  line-height: 1.5;
+  color: var(--color-ink-2);
+  max-width: 38ch;
+  margin: 0 0 var(--space-xl);
+}
+.hero__cta-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  height: 2.75rem;
+  padding-inline: 1.1rem;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition:
+    background-color var(--dur-fast) var(--ease-out),
+    color var(--dur-fast) var(--ease-out),
+    transform var(--dur-fast) var(--ease-out);
+}
+.btn--primary {
+  background: var(--color-ink);
+  color: var(--color-paper);
+}
+.btn--primary:hover { background: var(--color-ink-hover); }
+.btn--primary:active { background: var(--color-ink-press); transform: translateY(1px); }
+.btn--ghost {
+  background: transparent;
+  color: var(--color-ink);
+  border: 1px solid var(--color-rule-2);
+}
+.btn--ghost:hover { background: var(--color-paper-2); border-color: var(--color-ink-2); }
+.btn--ghost:active { transform: translateY(1px); }
+.btn[disabled],
+.btn[aria-disabled="true"] {
+  opacity: 0.55; cursor: not-allowed;
+}
+.hero__meta {
+  margin-top: var(--space-xl);
+  display: flex;
+  gap: var(--space-lg);
+  font-size: var(--text-sm);
+  color: var(--color-muted);
+}
+.hero__meta strong {
+  display: block;
+  color: var(--color-ink);
+  font-weight: 500;
+  font-size: var(--text-md);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+  margin-bottom: 0.1em;
+}
+
+/* ── hero enrichment · pure CSS trace panel (Tier-A) ────────────── */
+.trace {
+  font-family: var(--font-outlier);
+  font-size: 13px;
+  line-height: 1.55;
+  background: var(--color-paper-2);
+  border: var(--rule-hair);
+  border-radius: var(--radius-md);
+  padding: var(--space-md) var(--space-md) var(--space-lg);
+  position: relative;
+  display: grid;
+  gap: var(--space-2xs);
+  color: var(--color-ink);
+}
+.trace::before {
+  content: "exception_captured.log · 02:14:08.221 UTC";
+  display: block;
+  font-size: 11px;
+  color: var(--color-muted);
+  letter-spacing: 0.04em;
+  margin-bottom: var(--space-2xs);
+  padding-bottom: var(--space-2xs);
+  border-bottom: var(--rule-hair);
+}
+.trace__row { display: grid; grid-template-columns: 5ch minmax(0, 1fr); gap: var(--space-sm); }
+.trace__num { color: var(--color-muted); text-align: right; user-select: none; }
+.trace__line { white-space: pre-wrap; word-break: break-word; }
+.trace__line .k { color: var(--color-warn); }
+.trace__line .s { color: var(--color-ink-2); }
+.trace__line .a { color: var(--color-accent); }
+.trace__line .c { color: var(--color-muted); }
+.trace__line.is-pin {
+  background: color-mix(in oklch, var(--color-accent) 8%, transparent);
+  border-radius: var(--radius-xs);
+  padding-inline: var(--space-2xs);
+  margin-inline: calc(var(--space-2xs) * -1);
+}
+.trace__pin {
+  position: absolute;
+  right: var(--space-md);
+  top: var(--space-md);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4em;
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  background: var(--color-paper);
+  border: 1px solid var(--color-accent);
+  border-radius: var(--radius-pill);
+  padding: 0.2em 0.65em;
+  font-family: var(--font-outlier);
+}
+.trace__pin::before {
+  content: "";
+  width: 0.35em; height: 0.35em;
+  background: var(--color-accent);
+  border-radius: 50%;
+  animation: trace-pulse 2.4s var(--ease-in-out) infinite;
+}
+@keyframes trace-pulse {
+  0%, 100% { opacity: 0.4; }
+  50%      { opacity: 1; }
+}
+@media (max-width: 60rem) {
+  .hero__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
+  .hero { padding-block-start: var(--space-2xl); padding-block-end: var(--space-3xl); }
+}
+
+/* ── runtime support strip ──────────────────────────────────────── */
+.runtimes {
+  border-block: var(--rule-hair);
+  padding-block: var(--space-lg);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--space-xl);
+  align-items: center;
+}
+.runtimes .label { color: var(--color-muted); white-space: nowrap; }
+.runtimes__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-lg);
+  font-family: var(--font-outlier);
+  font-size: var(--text-sm);
+  color: var(--color-ink-2);
+}
+.runtimes__list span { white-space: nowrap; }
+.runtimes__list span::before {
+  content: "/";
+  color: var(--color-rule-2);
+  margin-right: 0.5em;
+}
+.runtimes__list span:first-child::before { content: ""; margin: 0; }
+
+@media (max-width: 40rem) {
+  .runtimes { grid-template-columns: 1fr; gap: var(--space-sm); }
+}
+
+/* ── workbench · numbered steps with captions ───────────────────── */
+.workbench {
+  padding-block: var(--space-3xl);
+}
+.workbench__head {
+  display: grid;
+  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
+  gap: var(--space-xl);
+  margin-bottom: var(--space-2xl);
+  align-items: baseline;
+}
+.workbench__title {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: var(--text-2xl);
+  letter-spacing: -0.025em;
+  margin: 0;
+  max-width: 26ch;
+  text-wrap: balance;
+}
+.workbench__lede {
+  font-size: var(--text-md);
+  color: var(--color-ink-2);
+  max-width: 50ch;
+  margin: 0;
+}
+.workbench__steps {
+  display: grid;
+  gap: var(--space-xl);
+}
+.step {
+  display: grid;
+  grid-template-columns: 5ch minmax(0, 1fr) minmax(0, 1.2fr);
+  gap: var(--space-xl);
+  padding-block: var(--space-lg);
+  border-top: var(--rule-hair);
+  align-items: start;
+}
+.step:last-child { border-bottom: var(--rule-hair); }
+.step__num {
+  font-family: var(--font-outlier);
+  font-size: var(--text-sm);
+  color: var(--color-muted);
+  letter-spacing: 0.04em;
+  padding-top: 0.4em;
+}
+.step__caption h3 {
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: var(--text-lg);
+  letter-spacing: -0.02em;
+  margin: 0 0 var(--space-2xs);
+}
+.step__caption p {
+  margin: 0;
+  color: var(--color-ink-2);
+  font-size: var(--text-base);
+  max-width: 40ch;
+}
+.step__panel {
+  background: var(--color-paper-2);
+  border: var(--rule-hair);
+  border-radius: var(--radius-md);
+  padding: var(--space-md);
+  font-family: var(--font-outlier);
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--color-ink);
+  overflow-x: auto;
+}
+.step__panel .c { color: var(--color-muted); }
+.step__panel .k { color: var(--color-warn); }
+.step__panel .a { color: var(--color-accent); }
+.step__panel .ok { color: var(--color-ok); }
+
+@media (max-width: 60rem) {
+  .workbench__head { grid-template-columns: 1fr; gap: var(--space-md); }
+  .step { grid-template-columns: 4ch minmax(0, 1fr); }
+  .step__panel { grid-column: 1 / -1; margin-top: var(--space-sm); }
+}
+
+/* ── what it catches ────────────────────────────────────────────── */
+.catches {
+  padding-block: var(--space-3xl);
+  background: var(--color-paper-2);
+  border-block: var(--rule-hair);
+}
+.catches__head {
+  display: grid;
+  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
+  gap: var(--space-xl);
+  margin-bottom: var(--space-2xl);
+  align-items: baseline;
+}
+.catches__title {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: var(--text-2xl);
+  letter-spacing: -0.025em;
+  margin: 0;
+  text-wrap: balance;
+}
+.catches__lede {
+  font-size: var(--text-md);
+  color: var(--color-ink-2);
+  max-width: 52ch;
+  margin: 0;
+}
+.catches__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-top: var(--rule-hair);
+}
+.catches__list li {
+  display: grid;
+  grid-template-columns: 8ch minmax(0, 0.7fr) minmax(0, 1.3fr);
+  gap: var(--space-xl);
+  padding-block: var(--space-md);
+  border-bottom: var(--rule-hair);
+  align-items: baseline;
+}
+.catches__list .kind {
+  font-family: var(--font-outlier);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--color-muted);
+}
+.catches__list h4 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: var(--text-md);
+  letter-spacing: -0.015em;
+}
+.catches__list p {
+  margin: 0;
+  color: var(--color-ink-2);
+  font-size: var(--text-base);
+  max-width: 48ch;
+}
+@media (max-width: 60rem) {
+  .catches__head { grid-template-columns: 1fr; gap: var(--space-md); }
+  .catches__list li { grid-template-columns: 1fr; gap: var(--space-2xs); }
+}
+
+/* ── pricing ────────────────────────────────────────────────────── */
+.pricing { padding-block: var(--space-3xl); }
+.pricing__head {
+  display: grid;
+  grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
+  gap: var(--space-xl);
+  margin-bottom: var(--space-2xl);
+  align-items: baseline;
+}
+.pricing__title {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: var(--text-2xl);
+  letter-spacing: -0.025em;
+  margin: 0;
+}
+.pricing__lede {
+  font-size: var(--text-md);
+  color: var(--color-ink-2);
+  max-width: 50ch;
+  margin: 0;
+}
+.pricing__grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-md);
+  align-items: stretch;
+}
+.tier {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-lg);
+  border: var(--rule-hair);
+  border-radius: var(--radius-md);
+  background: var(--color-paper);
+  position: relative;
+}
+.tier--mid {
+  border-color: var(--color-ink);
+  box-shadow: 0 0 0 1px var(--color-ink);
+}
+.tier__name {
+  font-family: var(--font-outlier);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--color-muted);
+  margin: 0 0 var(--space-sm);
+}
+.tier__price {
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: var(--text-3xl);
+  letter-spacing: -0.03em;
+  margin: 0 0 var(--space-2xs);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.tier__price small {
+  font-size: var(--text-sm);
+  color: var(--color-muted);
+  font-weight: 400;
+  letter-spacing: 0;
+  margin-left: 0.25em;
+}
+.tier__sub {
+  font-size: var(--text-sm);
+  color: var(--color-muted);
+  margin: 0 0 var(--space-md);
+}
+.tier__list {
+  list-style: none;
+  margin: 0 0 var(--space-lg);
+  padding: var(--space-md) 0 0;
+  border-top: var(--rule-hair);
+  display: grid;
+  gap: var(--space-2xs);
+  font-size: var(--text-sm);
+  color: var(--color-ink-2);
+  flex: 1;
+}
+.tier__list li {
+  display: grid;
+  grid-template-columns: 1.2em 1fr;
+  gap: var(--space-2xs);
+}
+.tier__list li::before {
+  content: "·";
+  color: var(--color-accent);
+  font-weight: 700;
+  text-align: center;
+}
+.tier .btn { align-self: flex-start; }
+@media (max-width: 60rem) {
+  .pricing__grid { grid-template-columns: 1fr; }
+  .pricing__head { grid-template-columns: 1fr; gap: var(--space-md); }
+}
+
+/* ── founders strip ─────────────────────────────────────────────── */
+.founders {
+  padding-block: var(--space-2xl);
+  border-top: var(--rule-hair);
+}
+.founders__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
+  gap: var(--space-xl);
+  align-items: baseline;
+}
+.founders__row p {
+  margin: 0;
+  font-family: var(--font-display);
+  font-weight: 400;
+  font-size: var(--text-lg);
+  letter-spacing: -0.015em;
+  color: var(--color-ink);
+  max-width: 38ch;
+}
+.founders__row .label { color: var(--color-muted); }
+.founders__meta {
+  font-size: var(--text-sm);
+  color: var(--color-ink-2);
+}
+.founders__meta span { display: block; }
+@media (max-width: 60rem) {
+  .founders__row { grid-template-columns: 1fr; gap: var(--space-md); }
+}
+
+/* ── final CTA ─────────────────────────────────────────────────── */
+.endline {
+  padding-block: var(--space-3xl);
+  border-top: var(--rule-hair);
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
+  gap: var(--space-xl);
+  align-items: end;
+}
+.endline h2 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: var(--text-3xl);
+  letter-spacing: -0.035em;
+  margin: 0;
+  max-width: 18ch;
+  text-wrap: balance;
+}
+.endline__cta { display: flex; gap: var(--space-md); justify-content: flex-end; align-items: center; flex-wrap: wrap; }
+@media (max-width: 60rem) {
+  .endline { grid-template-columns: 1fr; gap: var(--space-lg); }
+  .endline__cta { justify-content: flex-start; }
+}
+
+/* ── Ft2 · inline single-line footer ────────────────────────────── */
+.foot {
+  border-top: var(--rule-hair);
+  padding-block: var(--space-md);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+  font-size: var(--text-sm);
+  color: var(--color-muted);
+}
+.foot .wordmark { font-size: var(--text-base); }
+.foot__meta { font-family: var(--font-outlier); letter-spacing: 0.02em; }
+.foot a:hover { color: var(--color-ink); }
diff --git a/site/_launch-comparison/b-flarepin/hallmark/tokens.css b/site/_launch-comparison/b-flarepin/hallmark/tokens.css
new file mode 100644
index 0000000..fab5f3a
--- /dev/null
+++ b/site/_launch-comparison/b-flarepin/hallmark/tokens.css
@@ -0,0 +1,79 @@
+/* Hallmark · tokens · genre: modern-minimal · theme: Quiet
+ * Flarepin · error-tracking SaaS for backend developers
+ */
+
+:root {
+  /* ── type families ────────────────────────────────────────────── */
+  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-outlier: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --font-wordmark: "Fraunces", Georgia, "Times New Roman", serif;
+
+  /* ── palette · Quiet (monochrome with one cool accent) ───────── */
+  --color-paper:        oklch(99.2% 0 0);           /* page surface */
+  --color-paper-2:      oklch(97.6% 0 0);           /* sunken band  */
+  --color-paper-3:      oklch(94.8% 0 0);           /* card sunken  */
+  --color-ink:          oklch(18% 0 0);             /* primary text */
+  --color-ink-hover:    oklch(28% 0 0);             /* button hover */
+  --color-ink-press:    oklch(12% 0 0);             /* button press */
+  --color-ink-2:        oklch(36% 0 0);             /* body subdued */
+  --color-muted:        oklch(50% 0 0);             /* labels       */
+  --color-paper-glow:   oklch(100% 0 0 / 0.6);      /* nav inner highlight */
+  --color-shadow:       oklch(0% 0 0 / 0.2);        /* soft shadow */
+  --color-rule:         oklch(89% 0 0);             /* hairline     */
+  --color-rule-2:       oklch(82% 0 0);             /* mid hairline */
+
+  --color-accent:       oklch(48% 0.16 254);        /* ink-blue     */
+  --color-accent-ink:   oklch(99% 0 0);             /* text on accent fill */
+  --color-accent-soft:  oklch(94% 0.04 254);        /* accent wash  */
+
+  --color-warn:         oklch(58% 0.18 35);         /* terracotta   */
+  --color-ok:           oklch(54% 0.14 158);        /* moss green   */
+
+  --color-focus:        oklch(48% 0.16 254);
+
+  /* ── type scale · 1.25 ratio ─────────────────────────────────── */
+  --text-xs:        0.75rem;
+  --text-sm:        0.8125rem;
+  --text-base:      1rem;
+  --text-md:        1.125rem;
+  --text-lg:        1.375rem;
+  --text-xl:        1.75rem;
+  --text-2xl:       2.125rem;
+  --text-3xl:       2.75rem;
+  --text-4xl:       3.5rem;
+  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.5rem);
+  --text-display:   clamp(2.5rem, 5vw + 0.5rem, 4.5rem);
+
+  /* ── spacing · 4 pt scale ─────────────────────────────────────── */
+  --space-3xs: 0.25rem;
+  --space-2xs: 0.5rem;
+  --space-xs:  0.75rem;
+  --space-sm:  1rem;
+  --space-md:  1.5rem;
+  --space-lg:  2rem;
+  --space-xl:  3rem;
+  --space-2xl: 4rem;
+  --space-3xl: 6rem;
+  --space-4xl: 8rem;
+  --space-5xl: 10rem;
+
+  /* ── radius ───────────────────────────────────────────────────── */
+  --radius-xs:  4px;
+  --radius-sm:  6px;
+  --radius-md:  8px;
+  --radius-lg:  12px;
+  --radius-pill: 999px;
+
+  /* ── motion ───────────────────────────────────────────────────── */
+  --dur-fast:   120ms;
+  --dur-base:   200ms;
+  --dur-slow:   320ms;
+  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* ── rules ────────────────────────────────────────────────────── */
+  --rule-hair: 1px solid var(--color-rule);
+  --rule-mid:  1px solid var(--color-rule-2);
+}
diff --git a/site/_launch-comparison/b-flarepin/impeccable/DESIGN.md b/site/_launch-comparison/b-flarepin/impeccable/DESIGN.md
new file mode 100644
index 0000000..1ef6d45
--- /dev/null
+++ b/site/_launch-comparison/b-flarepin/impeccable/DESIGN.md
@@ -0,0 +1,78 @@
+# Flarepin — Design
+
+## Theme
+
+Dark. Scene sentence: an on-call backend engineer at 11pm, alone in a home office lit only by a glowing keyboard, scrolling a stack trace and deciding whether to wake the team. The page sits in the same visual register as the terminal it lives next to.
+
+## Color strategy
+
+Committed. One saturated ember/amber carries the brand — the color of a pager LED at 3am, not the color of a Stripe button. Tinted neutrals lean amber, not blue. Reject the observability-default of blue-on-near-black; reject neon-on-black crypto lane.
+
+### Tokens (OKLCH)
+
+| Role | Value | Notes |
+|---|---|---|
+| `--bg` | `oklch(14% 0.008 50)` | base surface; warm-tinted near-black |
+| `--bg-1` | `oklch(17% 0.010 50)` | one elevation up |
+| `--bg-2` | `oklch(21% 0.012 50)` | two up; for code blocks |
+| `--ink` | `oklch(94% 0.010 70)` | primary text; warm off-white |
+| `--ink-mute` | `oklch(70% 0.014 60)` | secondary text |
+| `--ink-dim` | `oklch(52% 0.012 55)` | tertiary / labels |
+| `--rule` | `oklch(28% 0.010 55)` | hairlines |
+| `--ember` | `oklch(72% 0.18 50)` | the brand color; pager LED amber |
+| `--ember-deep` | `oklch(58% 0.20 45)` | hover / pressed |
+| `--ember-glow` | `oklch(78% 0.16 55)` | focus rings |
+| `--good` | `oklch(72% 0.15 145)` | success / pass states |
+| `--bad` | `oklch(64% 0.20 25)` | error frames |
+
+### Strategy in practice
+
+- Ember carries the headline word ("ship"), the primary CTA, the live latency reading, the highlighted stack frame, the focus ring. ~10% of pixels, but ~80% of attention.
+- Body and chrome live in warm-tinted neutrals. No competing accent color.
+
+## Typography
+
+Single committed pairing.
+
+- **`system-ui`** for prose and headings. The brand lives next to the user's OS; we use the user's OS type. No webfont round-trip, no FOUT on a slow tower.
+- **`JetBrains Mono`** for code, stack frames, latency readings, the headline display word, table column headers. The brand voice IS terminal-adjacent; mono is not costume here, it is register.
+
+Scale: clamp-based, ratio 1.333.
+
+| Step | clamp |
+|---|---|
+| display | `clamp(3rem, 7vw, 6.5rem)` |
+| h1 | `clamp(2rem, 4vw, 3.25rem)` |
+| h2 | `clamp(1.5rem, 2.4vw, 2.25rem)` |
+| body | `1rem` (16px) |
+| small | `0.875rem` |
+| micro | `0.75rem` (uppercase labels only) |
+
+Light type on dark: body line-height 1.65 (added 0.05 over standard).
+
+## Layout
+
+Strict 12-column grid with a visible gutter rule on desktop. The grid IS the voice (tech-spec / terminal-native). Asymmetric placement within the grid — text rarely centered, never centered as default.
+
+Spacing scale (4pt base): 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
+
+No cards in the hero, "why it matters", "supports", or pricing sections. Cards would soften the terminal feel. Pricing is a comparison **table** with the differentiating rows pulled forward.
+
+## Imagery
+
+Tech-brand imagery: live stack trace SVG in the hero, an SVG latency histogram, a `docker compose` config snippet, code samples for each supported language. Zero stock photos. Zero CSS-panel placeholders.
+
+## Motion
+
+One first-load reveal: the stack trace types itself once (then static), the latency reading counts up from 0 to 18ms once (then static). No scroll choreography. No hover-scale on tiles. Focus rings are instant.
+
+`prefers-reduced-motion`: skip the type-on and the count-up; render final state.
+
+## Bans observed
+
+- No side-stripe borders on alerts.
+- No gradient text on the headline (ember is a flat solid).
+- No glassmorphism.
+- No identical 3-card grid for "features".
+- No hero-metric template (the 18ms is in context, with the histogram, not floating).
+- No em dashes in copy.
diff --git a/site/_launch-comparison/b-flarepin/impeccable/PRODUCT.md b/site/_launch-comparison/b-flarepin/impeccable/PRODUCT.md
new file mode 100644
index 0000000..59691d9
--- /dev/null
+++ b/site/_launch-comparison/b-flarepin/impeccable/PRODUCT.md
@@ -0,0 +1,40 @@
+# Flarepin
+
+## Register
+
+brand
+
+## Product Purpose
+
+Error-tracking SaaS for backend developers. Captures uncaught exceptions, slow queries, and async-stack issues in Node, Python, and Go. Self-hosted or managed.
+
+## Users
+
+On-call backend engineers and small SRE teams. They live in terminals and IDEs, not in dashboards. They have used Sentry, Datadog, or Rollbar and either churned (too noisy, too marketing-heavy) or never adopted (too expensive at small scale).
+
+Frequency: paged at 2am, several times a month. Daily passive scanning during work hours.
+
+Context: 27-inch monitor at 11pm, dim room, headphones on, half a stack trace in their head already.
+
+## Voice
+
+Technical, sharp, no marketing fluff. Reads like a `man` page that has been rewritten by someone who has feelings about it.
+
+Voice words: exact, terse, on-call.
+
+Forbidden phrases: "empower", "unlock", "delight", "seamless", "next-generation", "AI-powered", "trusted by", "world-class".
+
+## Strategic Principles
+
+- Show the product, not promises. Stack traces, latency numbers, query plans go on the page.
+- Honesty over inflation. We have 120 beta teams; we say 120, not "thousands of teams".
+- Self-hosted is a real option, not a footnote. Backend developers know what `docker compose up` is.
+- Pricing on the page. Always.
+
+## Anti-References
+
+- Sentry post-2022 (purple-gradient marketing dilution).
+- Datadog (enterprise-sales decks dressed as a landing page).
+- "Trusted by Acme, Globex, Initech" logo walls.
+- Hero metric template: one giant gradient number above a fake testimonial.
+- AI-cream / pastel-violet observability surfaces.
diff --git a/site/_launch-comparison/b-flarepin/impeccable/index.html b/site/_launch-comparison/b-flarepin/impeccable/index.html
new file mode 100644
index 0000000..7ca68f6
--- /dev/null
+++ b/site/_launch-comparison/b-flarepin/impeccable/index.html
@@ -0,0 +1,583 @@
+
+
+
+
+
+Flarepin · exceptions, slow queries, async stacks. 18ms median.
+
+
+
+
+
+
+
+
+
+
+
+

+
+  
+  

+    

+      

+        
error tracking · self-hosted or managed

+        

+          catch what your
+          logs are missing.
+        

+        

+          Uncaught exceptions, slow queries, and async stack issues in
+          Node, Python, and Go.
+          One agent, three runtimes, your hardware or ours.
+        

+        

+          start a project
+          read the self-host guide
+        

+        
    
+          
  • 120 teams in beta
    • 
+          
  • $0 / $29 / $99 per project, per month
    • 
+          
  • no credit card, no sales call
    • 
+        

+      

+
+      
+    

+  

+
+  
+  

+    

+      

+        
why 18ms matters

+        

+          Slow ingestion is why you don't trust your error tracker.
+        

+      

+
+      

+        

+          When your tracker takes 800ms to acknowledge a payload, you start
+          dropping events at the edge to protect throughput. Then you wonder
+          why your 2am page didn't fire. The fix is not a bigger queue. The
+          fix is ingestion that finishes before the request does.
+        

+
+        

+          

+            flarepin.ingest.p50
+            last 7d · 4.2M events
+          

+          
+            
+              
+                
+                
+              
+            
+            
+            
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+              
+            
+            
+            
+            p50 18ms
+            
+            
+              0
+              18ms
+              60ms
+              200ms
+              1s+
+            
+          
+        

+
+        

+          

+            
median ingestion

+            
18ms

+            
measured at our edge, last 7d, 4.2M events

+          

+          

+            
agent overhead

+            
< 0.4%

+            
p99 CPU on a 2-core node under load

+          

+          

+            
async stacks preserved

+            
yes

+            
across promise / asyncio / goroutine boundaries

+          

+        

+      

+    

+  

+
+  
+  

+    

+      

+        
supported runtimes

+        
Three runtimes, one agent, one wire format.

+      

+
+      

+        

+          
Node

+          
>= 18.0

+        

+        
# package.json
+npm install @flarepin/node
+
+# index.ts
+import flarepin from "@flarepin/node";
+flarepin.init({ project: "checkout", env: "prod" });

+        
    
+          
  • uncaught + unhandled rejections
    • 
+          
  • express, fastify, koa middleware auto-wrap
    • 
+          
  • async_hooks for promise-chain stacks
    • 
+          
  • pg, mysql2, prisma slow-query capture > 200ms
    • 
+        

+      

+
+      

+        

+          
Python

+          
>= 3.10

+        

+        
# pyproject.toml
+pip install flarepin
+
+# app.py
+import flarepin
+flarepin.init(project="checkout", env="prod")

+        
    
+          
  • sys.excepthook + threading hook
    • 
+          
  • django, flask, fastapi, starlette wrappers
    • 
+          
  • asyncio task stacks reconstructed across awaits
    • 
+          
  • sqlalchemy, asyncpg slow-query capture > 200ms
    • 
+        

+      

+
+      

+        

+          
Go

+          
>= 1.21

+        

+        
// go.mod
+go get github.com/flarepin/go
+
+// main.go
+flarepin.Init(flarepin.Config{
+    Project: "checkout", Env: "prod",
+})

+        
    
+          
  • panic recovery on net/http + chi + gin
    • 
+          
  • goroutine stack capture with parent context
    • 
+          
  • pgx, database/sql slow-query capture > 200ms
    • 
+          
  • build tag flarepin_disable for prod opt-out
    • 
+        

+      

+    

+  

+
+  
+  

+    

+      

+        
deploy

+        
Run it yourself, or let us run it.

+        

+          Both paths use the same agent and the same wire format. You can
+          start managed, export your data, and self-host later. No lock-in,
+          no different SDK, no migration script.
+        

+      

+
+      

+        

+          

+            
self-hosted

+            
apache-2.0 · single binary + postgres

+          

+          
# docker-compose.yml
+services:
+  flarepin:
+    image: flarepin/server:2.4
+    ports: ["8080:8080"]
+    environment:
+      DATABASE_URL: postgres://flarepin@db/flarepin
+      INGEST_KEY: $INGEST_KEY
+  db:
+    image: postgres:16
+    volumes: ["pgdata:/var/lib/postgresql/data"]
+
+volumes: { pgdata: {} }

+          
    
+            
  • your hardware, your data, your retention policy
    • 
+            
  • no outbound traffic from the agent unless you point it out
    • 
+            
  • upgrade by pulling a tag, no migration scripts to run by hand
    • 
+          

+        

+
+        

+          

+            
managed

+            
eu-west, us-east · 18ms median ingest

+          

+          
# .env
+FLAREPIN_DSN=https://ingest.flarepin.dev/p/<project_id>
+FLAREPIN_ENV=prod
+
+# that's it. agent picks it up.

+          
    
+            
  • EU and US regions, pick one at project creation, no data crosses
    • 
+            
  • backups every 6h, 30 day retention on paid plans
    • 
+            
  • incident page at status.flarepin.dev
    • 
+          

+        

+      

+    

+  

+
+  
+  

+    

+      

+        
pricing

+        
Per project, per month. No seat math.

+        

+          Pricing is per project, because that is how on-call rotations are
+          actually scoped. Five engineers on one service pay the same as
+          fifty. Self-hosted is always free.
+        

+      

+
+      

+        

+          

+          

+            
solo

+            
$0

+            
project / month

+          

+          

+            
team

+            
$29

+            
project / month

+          

+          

+            
scale

+            
$99

+            
project / month

+          

+        

+
+        

+          
events / month

+          
50k

+          
2M

+          
25M

+        

+
+        

+          
retention

+          
7d

+          
30d

+          
90d

+        

+
+        

+          
slow-query capture

+          
included

+          
included

+          
included

+        

+
+        

+          
async stack reconstruction

+          
included

+          
included

+          
included

+        

+
+        

+          
alert destinations

+          
email

+          
+ slack, pagerduty

+          
+ webhooks, opsgenie

+        

+
+        

+          
teammates per project

+          
1

+          
unlimited

+          
unlimited

+        

+
+        

+          
support

+          
community

+          
email · 48h

+          
shared slack channel

+        

+
+        

+          

+          

+            start free
+          

+          

+            start team
+          

+          

+            start scale
+          

+        

+      

+
+      

+        Self-hosted is $0 at every tier. The
+        prices above are for the managed service. We do not charge per
+        seat. We do not have a sales-only "enterprise" tier; if you need
+        more than 25M events, email us and we will price it on the spot.
+      

+    

+  

+
+  
+  

+    

+      

+        
team

+        
Two ex-Stripe SREs, one product, 120 beta teams.

+      

+
+      

+        

+          We were on the Stripe reliability team for a combined nine years.
+          We have written the postmortems, paged ourselves at 2am, and
+          chased async stacks across three runtimes in production. We
+          started Flarepin because the tools we wanted did not exist at a
+          price a four-person team could afford.
+        

+        

+          Right now Flarepin is in private beta with 120 teams across
+          payments, infra, and developer tools. Onboarding is a 30-minute
+          shared call with one of us. There is no sales team because there
+          are no salespeople. When you email hi@flarepin.dev,
+          one of the two of us writes back.
+        

+
+        

+          

+            
Mira Kovač

+            
co-founder · runtime, ingestion

+            
Five years at Stripe on the payment-events pipeline. Wrote most of the Go agent.

+          

+          

+            
Tomás Avila

+            
co-founder · async stacks, web

+            
Four years at Stripe on Radar SRE. Wrote most of the async-stack reconstruction.

+          

+        

+      

+    

+  

+
+  
+  

+    

+      

+        ship faster.
+        page less.
+      

+      

+        Five minutes from npm install to the
+        first event in your dashboard.
+      

+      

+        start a project
+        read the docs
+      

+      

+        Free tier needs no credit card. Self-hosted needs no account.
+      

+    

+  

+
+

+
+
+
+
+
+
+
diff --git a/site/_launch-comparison/b-flarepin/impeccable/notes.md b/site/_launch-comparison/b-flarepin/impeccable/notes.md
new file mode 100644
index 0000000..76769e4
--- /dev/null
+++ b/site/_launch-comparison/b-flarepin/impeccable/notes.md
@@ -0,0 +1,121 @@
+# Flarepin · Impeccable build notes
+
+## Mode
+
+`impeccable`
+
+## Brief
+
+Error-tracking SaaS for backend developers (Node / Python / Go), self-hosted or managed, pricing $0 / $29 / $99 per project, voice technical-sharp, founded by 2 ex-Stripe SREs, beta with 120 teams, 18ms median ingestion.
+
+## Command(s) used
+
+`/impeccable craft` — chosen because the brief asks to "build the landing page from a brief," and `craft` is the end-to-end build flow that internally runs `shape`. `shape` alone would have stopped at the brief; `craft` is the right command for ship-the-page intent.
+
+Setup ran first per SKILL.md:
+1. `load-context.mjs` ran — returned `hasProduct: false`, `hasDesign: false`, `contextDir: /private/tmp` (the cwd). Normally this would block on `/impeccable teach`; per task instructions I self-generated stub `PRODUCT.md` and `DESIGN.md` in the output folder instead of bouncing into an interactive teach flow.
+2. Register identified as **brand** (landing page, cue from the task itself).
+3. Loaded `reference/brand.md`, `reference/craft.md`, `reference/shape.md`, plus the shared design laws in `SKILL.md`, plus `reference/spatial-design.md` and `reference/color-and-contrast.md` for implementation.
+
+Step 3 (Visual Direction Probe via Codex `image_gen`) was **skipped** with a one-line announcement (per craft.md): the harness lacks native image generation. Mocks collapse into the brief.
+
+## Would-be Impeccable questions (count: 12) — self-answered
+
+Impeccable's `shape` Phase 1 interview would have asked at least one round (2–3 questions) and a `craft.md` codex.md Step A round if image-gen were available. Because no image-gen is present and the brief is otherwise dense, the realistic question budget is one shape round plus the brief-level confirmation. Logged here in full for the comparison:
+
+1. **Color strategy?** → **Committed**. Brand surface, dev-tool register, can carry one saturated brand color across 30–60% of attention. Reject Restrained-by-reflex (would be invisible per brand.md).
+2. **Theme scene sentence?** → "An on-call backend engineer at 11pm, alone in a home office lit only by a glowing keyboard, scrolling a stack trace and deciding whether to wake the team." → **dark**.
+3. **Three named anchor references?** → (a) Vercel's monochrome-with-one-accent restraint; (b) Sentry pre-2022 dev-tool density (stack frames in the hero); (c) early Linear (sharp, technical, no card chrome). Counterweight: Klim Pitch Sans specimens for type texture.
+4. **Brand voice words (three)?** → exact, terse, on-call. Physical anchors: a pager, a tickertape, a `dmesg` log.
+5. **First-order reflex check (observability → dark blue)?** → Reject blue. Pick **ember/amber** (oklch 72% 0.18 ~50), the color of a pager LED at 3am. Tinted neutrals lean amber, not blue.
+6. **Second-order reflex check (avoid editorial-typographic, avoid neon-on-black)?** → Both avoided. Lane is terminal-native + ember, not magazine + italic.
+7. **Font selection?** Reflex would be IBM Plex Mono + Inter (both banned by brand.md). Chose **`system-ui` + `JetBrains Mono`**. system-ui because the brand lives next to the user's OS (and zero webfont latency for prose). JetBrains Mono because mono here is register, not costume — the brand IS terminal-adjacent.
+8. **Sections (DOM order)?** Topbar → Hero (with live stack trace + first-load latency count-up) → Why 18ms matters (with histogram + 3 honest claims) → Stacks (Node / Python / Go, with real install lines) → Deploy (self-hosted vs managed) → Pricing (comparison table, not card grid) → Founders (named, with bios) → Final CTA → Footer.
+9. **How to handle the 18ms metric without the hero-metric template?** → 18ms is shown in context: inline in the trace footer, in the histogram with a p50 marker, and in the why-claim row with the measurement source ("our edge, last 7d, 4.2M events"). Never floating as a gradient stat.
+10. **Pricing layout (avoid identical card grid)?** → Comparison **table** with the differentiating rows pulled forward and the middle tier subtly ember-tinted with full vertical borders (no side-stripe). Cards explicitly avoided.
+11. **Imagery?** → Tech-brand imagery: live stack trace SVG, latency histogram SVG, code snippets per language, docker-compose snippet, DSN env snippet. Zero stock photos. Zero CSS-panel placeholders.
+12. **Fidelity / scope?** → Production-ready single static HTML page with external CSS + tokens, one tiny first-load JS reveal (count-up to 18, respects `prefers-reduced-motion`).
+
+(Confirmation gates 2–4 from craft.md collapsed into the brief itself per the harness-lacks-image-gen rule.)
+
+## Reference files loaded
+
+- `/Users/youssef/.claude/skills/impeccable/SKILL.md`
+- `/Users/youssef/.claude/skills/impeccable/reference/craft.md`
+- `/Users/youssef/.claude/skills/impeccable/reference/shape.md`
+- `/Users/youssef/.claude/skills/impeccable/reference/brand.md`
+- `/Users/youssef/.claude/skills/impeccable/reference/spatial-design.md`
+- `/Users/youssef/.claude/skills/impeccable/reference/color-and-contrast.md`
+
+Generated context stubs in this folder:
+- `PRODUCT.md` (stub, generated)
+- `DESIGN.md` (stub, generated)
+- `tokens.css` (OKLCH tokens + scale + spacing)
+
+## Sections shipped (DOM order)
+
+1. `
` — brand mark, primary nav, sign-in + start-free CTAs
+2. `
` — display headline + lede + CTAs + meta strip; aside with live stack trace and latency count-up
+3. `
` — sticky head + prose + SVG histogram + 3-column claim row with measurement sources
+4. `
` — Node / Python / Go, each a row with name, install snippet, what's uniquely captured
+5. `
` — two-column self-hosted vs managed, real docker-compose and DSN snippets
+6. `
` — comparison table; head row, 7 feature rows, CTA row; middle tier ember-marked
+7. `
` — sticky head + 2 named founders with role + bio
+8. `
` — final viewport, large display headline, two CTAs, no-credit-card fine print
+9. `