Frame System · Vol. 01EB Garamond · Inter · JetBrains Mono

Cream, ink & one coral.

A warm-editorial frame system — EB Garamond at optical sizes for display, Inter for body, JetBrains Mono for the index and code, and a single terracotta coral held as scarce voltage.
Warm cream paper · hairline elevation1920 × 1080
01 — Palette

The trinity, plus a code surface

Ink
#141413
Warm near-black — the voice. Every word, every hairline; never pure #000.
Cream
#FAF9F5
Warm paper — the ~60% floor. Never pure white, never cool.
Coral
#CC785C
Terracotta voltage — the one accent. CTA / inline link / band, once per frame.
Tile
#EFE9DE
Half-step content surface — where cards gather.
Tile Strong
#ECE3D4
Pressed / deepest warm-paper step.
Navy
#181715
Warm code / terminal surface — structural anchor, not a brand hue.
Navy Elev
#252320
Title bars + status strips on the code surface.
Syntax
#5DB8A6 · #E8A55A
Teal strings · amber numbers — fixed code decoration, not remixable.
keywords strings numbers added removed
02 — Typography

EB Garamond display · Inter body · Mono index

display-cover
EB Garamond · 500 · 190px · −0.028em · sentence
Streaming, end to end.
display
EB Garamond · 500 · 140px · −0.022em
A serif that thinks.
number-hero
EB Garamond · 500 · 180px · figure + mono unit
+1,204 lines
body / lead
Inter · 400 · line 1.5

The body reads first and answers second — Inter at weight 400, sentence case, with its qualifiers kept. No hype, no exclamation.

kicker / code
JetBrains Mono · 500 uppercase 0.16em · code 400
✱ Pull Request · #1842   async for tok in stream()
quote-pull
EB Garamond · 400 · italic · the expressive register
Ship it when it reads like a person wrote it.
03 — Components

Hairline elevation · scarce coral

card-hairline — 1px ink hairline + one soft warm shadow
Reads first, answers second
The editorial content card. Elevation is the hairline plus one soft warm shadow — never a heavy drop, glow, or gradient.
Gathers on a half-step tile
Content collects on a warm tile surface, half a step down from the cream floor.
kicker-spike + coral-callout
For the considered worker
Start a projectCTA
Coral is rationed — one moment per frame.
number-lockup — EB Garamond figure + mono unit
Impact
2.1× faster
Figure is serif; the unit is always mono, never the serif.
code-surface — the warm-navy code / terminal surface (code-* blocks render here)
transport.py
- def respond(q):
-     return model.answer(q)
+ async def respond(q):
+     async for tok in model.stream(q, n=3):
+         yield tok
pull-quote — EB Garamond italic + mono cite
Refactor the transport so streaming isn't a special case — it's the default.
Commit a1b2c3d · a. chen
04 — Frames

Six treatments ↔ PR beats

05 — Rules

Frame Rules

Do

  • Stand every frame on the warm cream floor; gather content on a half-step tile.
  • Set display in EB Garamond 400, sentence case, optical size, negative-tracked.
  • Ration coral to one moment per frame — CTA, inline link, or full-bleed band.
  • Elevate with a 1px hairline + at most one soft warm shadow.
  • Reserve warm navy for the code surface; pair every figure with a mono unit.

Don't

  • No pure white, no cool gray, no pure black; no fourth brand hue.
  • No heavy drop shadow, glow, gradient on content, or tilt.
  • No uppercase or title-case EB Garamond; no sans headline; no serif label.
  • No two corals in one frame; coral never sets a headline or body run.
  • Don't cram edge-to-edge — the considered voice needs cream.
06 — Captions

Lower-Third Karaoke

Claude Frame Showcase · Atoms Sacred · Composition Free