Brand Book
Visual Language
The design system behind this site. Near-black warmth, CRT texture, teal accents, and clean structure.
No light mode. Dark is the experience, not a preference.
Not true black, not gray. A warm near-black that takes the edge off without losing depth.
Film grain, scanlines, phosphor glow. Subtle enough to feel, not see. The retro layer is felt, not performed.
Monospace fonts signal system, data, machine. Labels and values, not body text.
Teal is interactive. Everything else stays neutral. No decorative colour.
Solid borders with gentle radius. Information-dense without feeling cramped.
Body — Space Grotesk
The quick brown fox jumps over the lazy dog.
Sans-serif. Used for body text, navigation, and UI elements.
Headings — Playfair Display
The quick brown fox jumps over the lazy dog.
Serif. Used for page titles, section headings, and blog post headers.
Labels — Geist Mono
The quick brown fox jumps over the lazy dog.
Monospace. Used for terminal labels, tags, code, and data values. Always uppercase with letter-spacing.
Minimal by design. Neutrals do the heavy lifting, teal carries the interaction.
Surfaces
Text
Accent
| Token | Value |
|---|---|
| --background | #0f0e0e |
| --foreground | #C5C9C5 |
| --card | #171614 |
| --card-hover | #1f1e1b |
| --border-color | #2e2d2b |
| --accent | #5bb8b8 |
| --accent-hover | #72cece |
| --accent-gold | #5aada0 |
| --muted | #737C73 |
Terminal Label
Section title
Geist Mono, uppercase, 0.25em letter-spacing, teal accent. Prefixed with > via CSS pseudo-element.
Tag Pills
Geist Mono, 0.7rem, subtle border with radius, muted text. Hover transitions to accent colour.
Ornamental Divider
Solid lines flanking a centered label. Geist Mono, teal.
Card
Project
Card Title
Description text goes here. Solid border, subtle radius, card background.
Solid border, subtle radius, card background. Hover state transitions to card-hover.
CRT Phosphor Glow
Testing in Production
Teal text-shadow at 10px, 40px, and 80px radii. Applied to the hero typewriter and site title.
Subtle texture effects applied globally via CSS pseudo-elements. These sit on top of the entire page at near-zero opacity — invisible until you look for them.
SVG fractal noise pattern via body::before. Opacity 0.025. Adds analog warmth to flat surfaces.
Repeating 2px gradient via body::after. Barely visible horizontal lines that evoke CRT monitors.
Teal text-shadow at 10px, 40px, and 80px radii. Applied to the hero typewriter.
Built with Next.js 16, Tailwind CSS v4, and a CRT that never fully turned off.