System.

1. 01

   Paper, not chrome

   Cool-neutral ink on a paper surface. Hairline rules do the work that cards, shadows, and fills would do elsewhere.

2. 02

   Three faces, three jobs

   Instrument Serif is voice. Geist Sans is reading. Geist Mono is metadata, keys, and counts. Never swap those jobs.

3. 03

   One column, 760

   Everything lives in a 760px column with a 24px gutter. Density comes from type and rules, not from a second rail.

4. 04

   Hover dims the room

   A list hover fades siblings and lifts the row. Motion is 150-200ms on color and transform only, with ease-editorial.

5. 05

   Keyboard is first-class

   R opens the résumé. ⌘K opens everything. Shortcuts are labeled in mono, not buried in a help modal.

OKLCH, hue 250. Surfaces, ink, rules, then one accent. No brand color.

Instrument Serif for voice. Geist Sans for reading. Geist Mono for metadata. Ligatures on, tracking tight.

One column. Compact breakpoint at 580px. Radius stays small.

Column

760px

Gutter

24px

Compact

580px

Section

40px

Row

16px

Measure

56ch

Kbd, chips, tab pills · Dock, tab lists · Panels, terminal window · Unused. Do not invent larger.

Color and transform only. Never layout. Reduced motion: All motion collapses to 0.001ms.

Ease

cubic-bezier(0.2, 0, 0, 1)

Fast

150ms · color, links

Base

200ms · transform, row hover

Hover the list below. Siblings fade. The arrow walks northeast.

Editorial primitives. shadcn is infrastructure underneath. These are the ones the site actually speaks.

1. 01

   Plain dash

   Never an em dash. A hyphen with spaces: React, TypeScript, Node - shipping user-centric apps.

2. 02

   Sentence case

   Buttons, nav, and labels stay sentence case. Uppercase is reserved for eyebrows and chips.

3. 03

   Name the action

   Press R for résumé. ⌘K for everything. Copy says what happens, not how it is built.

4. 04

   Short, then stop

   One job per sentence. No newsletter voice. No filler. The empty state tells you where to go next.