Design

Style Guide

A reference for the typography, color, and components that make up this site.

Typography

Display faces are set in Playfair Display. Body copy, UI, and labels are set in Inter. Both are served from Bunny Fonts.

H1 display · Playfair Display italic · 400

Designer, engineer, and publisher.

H2 section · Playfair Display italic · 400

Projects I build and maintain.

H3 · Playfair Display · 600

Selected Work

Eyebrow · Inter · uppercase · tracked

Section Label

Body · Inter · 400 · 1.6

Whether shaping an interface, editing a feature story, or modeling a workflow, the approach is the same: clarity first, craft everywhere, and respect for the person on the other side of the screen.

Link

A typical inline link uses the accent color with a subtle underline.

Color

A warm editorial palette — ivory paper with deep navy accent in light mode; near-black with soft cream in dark. Swatch labels show the CSS custom-property name.

  • --bg

    Page background

  • --surface

    Card surface

  • --surface-2

    Secondary surface

  • --ink

    Primary text

  • --ink-muted

    Secondary text

  • --accent

    Accent (links, CTA)

  • --border

    Hairline rules

Buttons

Form elements

Project card

  1. 01 Example

    Sample Project

    A concise one-line description of the project's purpose.

Spacing scale

Fluid spacing tokens, scaled with clamp().

  • --space-xs
  • --space-sm
  • --space-md
  • --space-lg
  • --space-xl
  • --space-2xl