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.