Design reference

Specifications

A working design reference for this site’s typography, color tokens, spacing, surfaces, and interaction patterns, with live specimens.

This reference collects the parts already in use as a starting point for the site’s design system. The specimens use live site styles and follow your selected color mode. The colophon credits the making of the site.

Typography

Reading and rhythm

Inter is self-hosted from src/assets/fonts through the Astro Fonts API as a Latin-focused variable WOFF2 subset. The normal face is preloaded; italic loads on demand. OpenType features include standard ligatures, contextual alternates, and slashed zeros, with font-optical-sizing: auto. Body and UI text keep normal letter spacing; headings tighten on a small tracking scale (-0.006em to -0.02em) as sizes grow, following Inter’s dynamic metrics.

JetBrains Mono carries code and metadata with tabular figures and slashed zeros. Both fonts are self-hosted variable WOFF2 files; Inter includes weights 100–900 and real italics.

Display 36–48px specimen · 600 · tracking-display · leading-golden-display: Field notes on paper
Heading 30px · 600 · tracking-heading · leading-golden-heading: A quiet, durable archive
Title 20px · 600 · tracking-title · leading-golden-heading: Card titles and list links carry the middle register
Prose 17px · text-prose · 60ch measure: Body copy sits at 17px with 1.75 leading on a 60ch measure. Ligatures and slashed zeros are on everywhere, so 0 never reads as O. Links inside prose are quiet cyan with a soft underline.
Weight range one variable file covers all nine: Aa 100 thin
Aa 200 extralight
Aa 300 light
Aa 400 regular
Aa 500 medium
Aa 600 semibold
Aa 700 bold
Aa 800 extrabold
Aa 900 black
Aa 400 italic
Metadata 13px mono · tracking-meta · slashed zero, tabular figures: 2026-05-08 · --leading-golden-heading: 1.382
Uppercase eyebrow label

Color

Tokens and contrast

--color-* · light and dark

CSS custom properties in src/styles/foundations/tokens.css define the palette below. Cyan marks interactions; magenta adds editorial emphasis. The electric colors are reserved for the favicon, gradients, and soft page glows.

Light, dark, and system modes resolve before paint via an inline script in BaseLayout.astro, stored in localStorage as site-theme. Hex and rgba values are the baseline; browsers on wide-gamut P3 displays get OKLCH overrides. Text selection inverts the ink/paper pairing so highlighted copy stays readable in both modes.

Ink and paper indigo-tinted neutral ramp

ink primary text

paper page background

surface cards, panels

muted body copy

soft secondary text

faint metadata

line hairline borders, transparent

quiet hover wash, transparent

line-strong control borders, transparent

Accents signal, editorial, and glow-only stops

cyan links, focus

blue structural accent

violet highlight accent

magenta editorial accent

electric-cyan glow only, not text

periwinkle-violet glow only, not text

electric-magenta glow only, not text

disabled disabled controls

Roles in use how the tokens read on paper

A quiet cyan link Gradient label Selection Faint metadata

Spacing and layout

Room to read

The page shell stops at 72rem; prose stops at 60ch. Broad layouts use a 1:1.618 split where it helps the content, then stack on smaller screens.

DESIGN.md suggests 10, 16, 26, 42, and 68px as proportioning references. The implementation uses nearby Tailwind steps below. These are rem-based, so they grow with the reader’s text settings; pixel labels assume a 16px root.

gap-2.5 10px: Small groups
gap-4 16px: Related elements
gap-6 24px: Content groups
gap-10 40px: Section divisions
gap-16 64px: Major breaks

Surfaces and patterns

Flat by default

Paper carries the page. Hairline borders divide content. Notes, projects, and search results use rows; cards frame portfolio work and tools. Cards never nest inside cards.

Controls use 4px corners, panels 8px. A fine one-pixel shadow separates a panel from the page; elevated shadows belong to floating menus and dialogs.

Row specimen border-line · py-6

How This Site Uses Design Tokens

The foundation, semantic roles, and scoped decisions behind these specimens.

Panel specimen surface · rounded-lg · shadow-fine

A framed surface

A panel contains a distinct tool or visual item. Ordinary text stays on the page.

Interaction

Small, clear signals

Cyan marks links, hover, and keyboard focus. A 2px focus outline sits 4px outside the control, with a soft halo. Touch controls allow at least 44px for a comfortable target.

Motion uses shared duration tokens from 120 to 320ms. Page travel is a short fade and lift; reduced-motion preferences remove the choreography. Content stays available without animation.

Use Tab to inspect focus, hover the row above, or change the color mode in the footer to see the same foundations in use.

How contrast is checked explains the build’s APCA floors and the role of rendered-page review.