Designing This Site

I wanted this site to feel like a workshop, not a showroom. Dark, focused, and built around readability. Here’s how the design came together.

The Palette

The color system is built on a neutral scale that moves from near-black to near-white, with each shade named for what it evokes:

• Void #0a0a0b — the deepest background, almost pure black
• Ink #141416 — card surfaces and secondary backgrounds
• Charcoal #1c1c1f — borders and dividers
• Graphite #2a2a2e — hover states on borders
• Smoke #8a8a8f — secondary text, labels
• Ash #b0b0b5 — body text
• Bone #e8e8ea — headings and emphasis
• Cream #f5f5f3 — primary headings, highest contrast

The accent is Flame #ff6b35 — a warm orange that cuts through the dark neutrals without being aggressive. It gradients into Ember #ff8c5a for hover states and subtle depth. There’s also a Glow — a low-opacity flame used for box shadows and focus rings that gives interactive elements a soft warmth.

The whole palette lives in CSS custom properties inside Tailwind’s @theme block. No config file, no JavaScript — just CSS.

Typography

Three fonts, each with a clear job:

Syne handles display and headings. It’s geometric and modern with tight tracking, which gives headlines a technical edge. It scales from clamp(1.5rem, 3vw, 2.25rem) for section headers up to clamp(2.25rem, 5vw, 3.5rem) for the hero — fluid sizing that works across screen sizes without breakpoint jumps.

Source Serif 4 is the reading font. Articles are set at 19px with 1.6 line-height — a combination optimized for long-form screen reading. Paragraph spacing is generous at 1.75rem to give each thought room to breathe.

Space Mono handles everything functional: navigation, labels, metadata, code snippets. The monospace rhythm gives the UI a technical feel and creates clear visual separation from the editorial content.

Layout Principles

The site uses a consistent layout system:

• 1400px max-width container for all page content
• Responsive padding — 1.5rem on mobile, 4rem on desktop
• 12-column grid for content sections, typically split 4/8 between section labels and content
• Alternating backgrounds — sections alternate between Void and Ink to create visual rhythm without heavy borders

Borders are Charcoal — visible enough to define sections, subtle enough to disappear when you’re reading.

Interactions

Every interactive element follows the same pattern: subtle, consistent, and never distracting.

Buttons come in two styles. Primary buttons use a Flame-to-Ember gradient with a lift effect on hover — they translate up slightly and gain a glow shadow. Secondary buttons are bordered with Graphite and transition to Flame on hover.

Links in body text are Flame with a thin underline. Navigation links use an animated underline that scales from right to left on hover — a small detail that makes the UI feel responsive without being flashy.

Cards gain a glow shadow on hover: 0 0 30px of the Glow color. It’s barely visible but gives the impression that the card is reacting to attention.

The Noise

There’s a subtle SVG noise texture overlaid on the entire page at 3% opacity. You probably don’t notice it consciously, but it prevents the dark backgrounds from feeling flat and digital. It adds just enough grain to make the surface feel physical.

Dark by Default

This isn’t a light theme with a dark mode toggle. It’s dark, period. The Void-to-Cream neutral scale was designed for dark backgrounds first. Text contrast ratios are calibrated for dark surfaces. The Flame accent was chosen specifically because warm oranges read well against near-black without the harshness of pure white or the coldness of blue accents.

Selection and Focus

Text selection uses Flame background with Void text — it’s a small thing, but it reinforces the color system even in moments you don’t usually design for. Focus rings are 2px solid Flame with a 2px offset, visible enough for keyboard navigation without cluttering the visual design.

The Reading Experience

Articles get special treatment. A reading progress bar tracks scroll position — a 3px gradient line from Flame to Ember fixed to the top of the viewport. Prose content is capped at 720px for optimal line length. Blockquotes get a Flame left border and bump up to 1.375rem italic. Code blocks use Ink backgrounds with Charcoal borders, and inline code gets Ember-colored text on Charcoal pills.

The goal is that reading an article should feel like the design disappears. The typography, spacing, and color all serve the content — nothing competes for attention.