⟨/⟩ HTML Capsule design memo 02
v2 · sans · color taxonomy · 2026-05-22

Proposal · visual enhancements across seven files

A modern, accessible system — color and weight do the work.

All sans. One paper. Five semantic hues mapped to section kinds — observations get teal, questions violet, answers amber, the brand stays indigo, pain reads rose. Typography stays system-style; weight contrast (300 / 500 / 700 / 800) replaces italics and serifs for emphasis. The page looks like the site, only louder where it matters.

Direction

Modern · accessible · sans

Type

Geist · 300 → 800

Palette

5 semantic hues

Files in scope

7 of 7

Status

For review

What's working, three moves to fix the rest.

The current pages are restrained in the right way — no SaaS bombast, no AI-tropes. What they're missing is taxonomy: every section reads with the same weight, so the eye has nothing to anchor on. The fix is structural, not stylistic.

Working keep
  • Tone is honest. Reads as a research project, not a product launch — preserve that.
  • System sans was a good call. Don't change it; just use more of its weight range.
  • Section bg colors on the index page hint at taxonomy — make it explicit.
  • 5-block anatomy is a real visual asset waiting to be used as one.
Not yet working fix
  • One accent, one weight. Everything emphasized is blue 600 — observations, questions, answers all look identical.
  • Long paragraphs dominate findings & answers. Should be cards, scannable.
  • Italic emphasis in headlines doesn't carry on screen; weight contrast does.
  • Lifecycle on positioning & research v2 is a list pretending to be a diagram.
Move 01

Color is taxonomy.

Map five hues to five section kinds. Observations are teal, questions violet, answers amber, brand indigo, pain rose. The eye learns to skim by color in two scrolls.

Move 02

Weight is emphasis.

Use 300 / 500 / 700 / 800 from the same family. The 300 sets context, the 800 lands the claim, and the 500 does everything between. No italics, no serifs.

Move 03

Cards over paragraphs.

Findings, answers, observations all collapse into colored cards. The findings page goes from a wall of text to a 2×3 grid you can read in 10 seconds.

One family, six weights, five hues.

Everything that follows in the four worked examples is built from the three cards below. Nothing else is needed. Spacing scales from the same 4-unit base; radii live at 8px (controls), 14px (cards), 999px (pills).

Type · Geist

300 → 800
Light HTML you can keep. 300
Regular HTML you can keep. 400
Medium HTML you can keep. 500
Semi HTML you can keep. 600
Bold HTML you can keep. 700
Black HTML you can keep. 800

Color · semantic taxonomy

5 hues · paired tints
Indigo
brand · primary CTA · headline emphasis
#4f46e5
#eef0fe
Teal
observations · evidence · quotes
#0d9488
#e0f5f1
Violet
questions · open work · research
#7c3aed
#f3edff
Amber
answers · maintainer voice · essay
#b45309
#fbeed5
Rose
pain · negation · "shouldn't die"
#be123c
#fce4ea

Components

primitives

Section tags

Obs · O1 Q · 03 A · 02b spec

Buttons

Stat block

12
rules
5
blocks
0
network

The landing page.

Headline keeps its existing wording — "HTML you can keep." — but the emphasis word "keep" jumps to weight 800 and indigo while the rest sits at 300. The buried 5-block primitives list is promoted to a real anatomy panel; the manifest row is highlighted because it carries identity.

III · a · "HTML you can keep." as a system, not a slogan.

replaces
landing-sketch · landing-sketch-v2
Design moves
  • Weight contrast in the headline does the italicizing work — no serif italic needed.
  • Pill eyebrow with teal dot signals freshness without shouting.
  • Anatomy card — 5 blocks as rows; manifest highlighted in indigo because it's the identity layer.
  • Two CTAs only, ink + ghost. Indigo on hover.
  • Topnav as soft chips, not links — feels like a doc site, not a marketing site.
  • Version badge sits inside the wordmark as a soft pill.
https://htmlcapsule.org/
⟨/⟩ HTML Capsule v0.3.5
Spec Research Notes Examples GitHub →

Open spec · since may 2026 · core v0.3.5

HTML you can keep.

A discipline for sealed, self-contained HTML artifacts. One file. Twelve rules. Zero network — so the work survives the chat that produced it, the platform that hosted it, and the year it was made.

Anatomy · one file, five inline blocks

CAPSULE_CORE.md · rule 01
01 capsule-manifest identity · provenance · integrity required
02 capsule-data the snapshot, as JSON required
03 capsule-style all CSS, inlined required
04 capsule-root the pre-rendered artifact required
05 capsule-runtime optional enhancement optional

The research page.

Five findings (O1–O5) get five different colored cards. The eye sees the structure of the research before reading a word. Stats row breaks out the four numbers that matter (12 rules, 5 blocks, 0 deps, 30+ capsules) — each in its taxonomy color.

IV · a · findings as a scannable grid, not a wall.

replaces
research-sketch · research-sketch-v2
Design moves
  • Eyebrow pill in teal signals "this is observations / evidence."
  • Stat row — four key numbers in their semantic colors, immediately above the abstract.
  • Findings as cards in a 2×3 grid; each card carries its own tinted background.
  • O1–O5 chips in mono, so the reader can reference findings the way the research log does.
  • Weight contrast inside claims — the noun-phrase that matters is 700; the rest is 500.
  • Headline drops italic-em entirely — color + weight carry it.
https://htmlcapsule.org/research

Research note · v0.3.5 · sealed 2026 — 05 — 19

HTML Capsule.

An open spec for sealed, self-contained HTML artifacts — and the empirical evidence that the contract holds across producers.

12
numbered rules
5
required blocks
0
network deps
30+
LLM-emitted capsules

Findings · observations across producers, O1 — O5

five total
O1 · substrate

HTML is becoming the default output format for AI-assisted work.

O2 · principle

File over app remains the durable preservation primitive.

O3 · lineage

Lineage is a more tractable problem than HTML diffs.

O4 · live edit

A live-editing layer is emerging upstream of the seal step.

O5 · share links

Share links inside LLM platforms do not compose across platforms.

more in RESEARCH.md

F1 — F25 in the research log. Same shape; tracked there to keep this page short.

The positioning page.

Headline leads with the pain in rose — "die" is the punch — and the indigo "seal" lands the answer in the same line. The lifecycle becomes a real horizontal timeline with weighted nodes; the seal stage is twice the size of the others, indigo on a soft halo.

V · a · lead with the pain, resolve with the seal.

replaces
positioning-sketch
Design moves
  • Two-color headline — rose carries the problem, indigo carries the answer, light grey scaffolds between.
  • Rose eyebrow primes the "pain" frame before the claim lands.
  • Lifecycle as a weighted timeline — nodes colored by stage kind, seal stage 30% larger.
  • Gradient rule through the timeline carries each section's color forward.
  • Halo around the seal node so it reads as the destination, not just a step.
https://htmlcapsule.org/positioning

The pain · anti-context-loss

Your AI work shouldn't die when the chat closes — it should seal.

HTML Capsule sits between live editing and durable archive. Not a SaaS. Not a new file format. The contract that lets a useful artifact travel.

Where Capsule fits · five-stage lifecycle

Figure 01
01

Substrate

Karpathy · Thariq

02

Live edit

Canvas · Artifacts · html-docs · Workplane

03

Seal

HTML Capsule

04

Host

htmlbin · MinDev

05

Discover

llms.txt

The notes essay.

The maintainer voice gets its own color (amber). Margin numerals on the left make the essay scannable without breaking the prose. A pull quote in amber tint marks the pivot — Steph Ango's "file over app" moment.

VI · a · the essay, scannable.

replaces
notes.html
Design moves
  • Amber category chip — maintainer / field-notes register.
  • Margin numerals — large 700 weight numbers anchor each section.
  • Topic labels in mono caps next to each numeral — table-of-contents at a glance.
  • Pull quote in amber tint marks the pivot moment; no serifs needed.
  • 18px body with looser line-height — closer to a Medium read than a docs page.
  • Byline row with author, location, version, read time as mono colophon.
https://htmlcapsule.org/notes
HTML Capsule / Notes
2026 — 05 — 20 · capsule v1.2.0

Field notes · spec authorship · journey

What I do with all the HTML I get from AI.

A first-person account of writing down a contract for HTML artifacts — and the year of copy-paste between AI tools that made one feel necessary.

01
Copy-paste
era

Just want to give you my journey here with AI tools. I've been using all the chat systems — ChatGPT, Claude, Gemini — and more recently the CLI and harness forms. For the longest time I was doing work in each, then copying and pasting in and out, trying to reliably get my info out of these systems into a format I could archive or share. It was a mess.

The share buttons exist, but something doesn't sit right. The chats get lost, or I'm not confident what version they show. Are they still updating? Will the link still work next month?

The .md files were portable. The experience wasn't. The themes, the plugins, the rendered output all lived in the app — not the file.
02
The HTML
pivot

Around then I came across Steph Ango's File over App. The principle is right — your work should live in files you control, in formats that outlive any specific app. But my struggle with Obsidian was the same principle taken one step further than the essay intends.

So I stopped converting. I started keeping what the LLM gave me as HTML, then writing down what HTML would need to be to be trustworthy as an artifact.

End of memo · ready for your call

One kit, five hues, seven pages that read as siblings.

The remaining three files (index.html, landing-sketch.html, research-sketch.html) collapse naturally into the v2 mockups above. The big exploration page (index.html) gets the most lift: its observation / question / answer sections finally get the taxonomy they were already hinting at.

landing-sketch-v2 · indigo research-sketch-v2 · teal positioning-sketch · rose → indigo notes · amber index.html · system applied landing-sketch · merged → v2 research-sketch · merged → v2