The Bulletin.
In one document.
Tokens, type, components and patterns for building d8m.io pages in the v2 voice — bright, mechanical, near-white. A reference, not a rulebook; every page on this site is also a working example.
§ 01 · Voice & principlesThe Bulletin in one paragraph.
d8m.io v2 reads like a research-lab bulletin: near-white paper, ink-black type, one signature red. Headlines are Geist Medium — tightly tracked, set very large. Substance is Geist regular. Facts, numbers and labels are JetBrains Mono. No editorial italics, no rounded corners, no gradient washes.
- 01Receipts, not reassurance. Reference numbers, endpoint paths, version stamps. The vocabulary is "on file," not "trust us."
- 02One accent at a time. Red is for the live, the recoverable, the in-force. Use it for highlights, signal blocks, and the underline on a single phrase per headline — not as a wash.
- 03Mono is for facts. Numbers, codes, endpoint paths, eyebrows, labels. Anything the reader parses as data, not prose.
- 04No emoji, no decorative SVG. Iconography is reserved for actual diagrams (architecture, schematic). If a metaphor is needed, a placeholder card is better than a drawn glyph.
- 05Whitespace earns trust. Section gutters scale with the viewport; type tracking is tight; rhythm is generous. Don't tighten to fit — earn the space.
§ 02 · ColorNear-white. Ink. Signal.
A three-axis palette: a near-white warm bg, a deep ink for substance, and one bright signal red. Two darker panels (ink, blackout) host the architecture diagram and inverse content. Use red sparingly; it has to keep meaning something.
Surface → --bg · --bg-alt · --bg-deep · --bg-blackout
Ink & line → --ink · --ink-soft · --ink-mute · --line
Signal → --red · --red-deep · --red-wash
CSS tokens
/* signal.css :root */ --bg: #FAF8F3; --bg-alt: #F1EEE5; --ink: #0E0E0C; --ink-soft: #3A3833; --ink-mute: #7A766B; --line: #D9D4C3; --red: oklch(0.625 0.225 27); --red-deep: oklch(0.515 0.215 28); --red-wash: oklch(0.92 0.06 28);
§ 03 · TypographyTwo families. Discipline.
Geist for everything that's read; JetBrains Mono for everything that's parsed. Headlines are always Geist Medium with a tight letter-spacing (-0.035 to -0.04em). Never italic; never serif.
Red discipline
Use red for at most one phrase per headline, via .mark-red. Reserve .mark-line (red underline beneath the baseline) for the surprising word. Don't bold-and-color the same word — pick one.
Font imports
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap">
§ 04 · Layout & spacingWide gutters. Tight type.
Two container widths and a fluid section padding. Spacing inside layouts uses CSS gap, not margins. Every section's contents wrap in .wrap — never style sections directly with horizontal padding.
Section skeleton
<section class="section" data-screen-label="Page · Topic"> <div class="wrap"> <div class="sec-head"> <div class="meta"> <span class="num">§ 03 / Architecture</span> <span class="kind">Three layers</span> </div> <div> <h2 class="display h-2">…</h2> <p class="lede">…</p> </div> </div> <!-- body --> </div> </section>
§ 05 · MotionTwo motions only.
Live status (pulsing red dot) and data flow (red dots riding along SVG arrows in the architecture diagram). Hover transitions use --t-fast / --t-med with --ease. Never animate for ornament.
§ 06 · ComponentsThe catalog.
All components are unscoped CSS classes in signal.css. No JS dependencies.
Buttons .btn · .btn-red · .btn-ghost · .btn-lg
Chips, tags & eyebrows .chip · .chip.live · .tag · .eyebrow
Endpoint pill .endpoint · .verb · .verb.post
Figure number .figure-num · .figure-num .unit · .plus
Cards .card · .card.hairline · .card.dark · .card.red · .reg
Marquee strip .strip · .strip-track
Compare row .compare · .compare-row · .cell.them/.us
Pull quote .pull
Every team was rebuilding the floor.
§ 07 · PatternsHow sections combine.
A page is usually: nav, hero, marquee strip, sample exhibit, ledger stats, editorial body, architecture diagram, endpoints grid, compare, trust three-up, pull quote, two-door filing CTA, footer. Vary the order; keep the cadence.
Hero .section / .display.h-1 + .lede + dual buttons
Open with a chip-eyebrow row, then a giant 14–18ch headline with one .mark-red phrase. Lede in left column; primary + ghost CTAs stacked in right column.
Section header .sec-head · .meta · num + kind
Every section opens with a 1fr/2fr grid: .meta on the left with a red § number and a kind label; headline and lede on the right. The black top rule sets a strong rhythm.
Architecture band .section.band-dark + svg
Diagrams live in the dark band. Stage cards are #1A1A18 on #0B0B0A; arrows use SVG animateMotion with red dots.
Filing CTA .filing · two doors
Closing CTA is always two doors side-by-side: one on paper (primary), one on red (ghost-over-red). Title format is "Door 01 / Door 02" + a giant headline each. Every page ends with one of these before the footer.
§ 08 · Brand markOne wordmark. One dot.
The wordmark is Geist Medium at tight tracking. The dot before io is always red — that's the entire identity system. Don't outline, italicize, or letter-spread the mark.
§ 09 · Building a pageThe cheat sheet.
Copy the section closest to what you need. Keep the page rhythm: nav → hero → strip → exhibit → stats → editorial → diagram → grid → compare → trust → quote → filing → footer. Skip 2–4 of these per page; never reorder them.
Page shell
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="signal.css"/> </head> <body> <header class="nav">…</header> <main> <!-- hero / strip / sections --> </main> <footer class="foot">…</footer> </body> </html>
When in doubt, view source on the homepage — every section in this system is in production there.