Design system
Style guide
Cool glass surfaces, warm accents, and space for the writing. This is the shared foundation for the site.
Colors
void
--color-void Page background
ink
--color-ink Input background
charcoal
--color-charcoal Subtle dividers
graphite
--color-graphite Stronger borders
smoke
--color-smoke Secondary text
ash
--color-ash Body text
bone
--color-bone Links and emphasis
cream
--color-cream Headings
flame
--color-flame Primary action
ember
--color-ember Action hover
Use cream for headings and ash for body copy. Orange signals a link, an action, or a small point of emphasis. It is not a success state. Swatches use the actual shared color variables.
Typography
Two fonts, each with a clear role: Syne for headings; IBM Plex Sans for body copy, articles, labels, and controls. Code uses the system monospace font. Both fonts are self-hosted as WOFF2 with swap enabled so text stays visible while they load.
Hero
font-display text-glass-heroMaking sense of AI.
Section heading
font-display text-3xl font-medium tracking-tightLatest writing
Card heading
font-display text-2xl font-medium leading-snugLessons from building software
Introduction
font-body text-xl leading-relaxedI run two companies and write about what I learn.
Body
text-bodyPractical perspectives on software, web design, and AI.
Action
font-body text-smRead the articles
Metadata
font-body text-label tracking-[0.08em] uppercase01 / Articles
Hero text scales from 40 to 76.8px, with 1.09 line height and medium weight. Use 13px for secondary metadata, 14px for actions, and 18px with 1.65 line height for body copy. Long articles use 19px with 1.7 line height; introductions use 20px.
Surfaces and borders
Article card
Latest writing
A cool translucent gradient, a fine border, and a restrained shadow. Hover to see the warmer edge.
Read the articles
Continuous surface
Newsletter and footer share this background and the same container width.
bg-glass-surface/60Fading page rail
Outer borders fade from transparent to 5% white over the first 100px. Section dividers use 15% white.
bg-glass-railUse square corners for panels and primary actions. Reserve a small radius for form controls. Depth comes from subtle gradients, not large glows or movement.
Actions and inputs
One clear primary action
Solid orange for the primary action; an underlined text link for the secondary. Both have a minimum 44px height. Tab through them to inspect the focus ring.
Email input
Style preview only; nothing is submitted or saved.
Long-form reading
Use a 720px column, 19px body text, and 1.7 line height. Keep decorative panels outside the main reading flow. Code keeps the system monospace font.
A small experiment, explained clearly
Start with the problem and what you tried. Give readers enough context to follow the result, then show the detail that makes the lesson useful.
A useful result includes its limits: what changed, what stayed uncertain, and what you would test next.
const result = await runExperiment();Compact tools
Lead with the task, followed by status, controls, and results. Use 16px for inputs and working text, at least 14px for supporting tool text, and larger tabular numbers for key metrics. Keep wide tables in their own scrollable region.
Experiment results
Example · no live data- Samples processed
- 240
- Duration
- 12s
Advanced settings
Keep optional parameters here. The selected preset and primary action stay visible outside this section.
Feedback and states
Name the state and the next step. Don’t use zeros to represent unavailable measurements. Use a live status region for changing feedback and an alert for an error that needs attention. These are static examples.
Empty
No results yet. Choose a preset and run an experiment to see the results here.
Loading
Loading recorded prices… The chart will appear when the data arrives.
Success
Message sent. Thanks for reaching out.
Error
Results could not be loaded. Refresh to try again.
Enter a complete email address, such as name@example.com. Style preview only.
Header and scrolling
At the top, the header shares the hero’s atmosphere. After 24px of scrolling, a glass background keeps navigation readable.
The transition takes 200ms and is disabled for reduced motion. Pages without a hero background start with the glass header. Scroll this page to try the real header, or use the toggle to compare states.
Spacing and layout
- Page width
- max-w-350 / 1400px, centered. Header, content, newsletter, and footer align.
- Horizontal padding
- 24px on mobile, 48px from 768px, 64px from 1024px.
- Section spacing
- 48px vertical padding, increasing to 64px. Hero padding reaches 80px on desktop.
- Cards
- 16px gaps; 24px padding, increasing to 28px. One column on mobile, three from 768px.
- Reading width
- Keep paragraphs narrow: 448px for hero copy, up to 720px for long-form prose.
- Content order
- Introduction, latest writing, companies, then subscription. Labels add context rather than repeat headings.