The colors, type, spacing, and components this site is built from. The page is generated from one tokens file.
Mostly type. Boxes, shadows, and color only show up when they have a job to do.
There is one accent color, green. It marks the timeline, link hovers, and focus.
Borders are 1px lines that separate things. Home, resume, blog, and this page all use the same layout: a sticky label on the left, a column to read on the right.
Components never hard-code a color, size, or space. Change a token in static/css/tokens.css and the whole site follows.
Weights: regular 400 medium 510 semibold 590 display 500. Headings track tighter (-0.022em) as they get larger; body text uses the font default.
sm · 6px
md · 8px
lg · 12px
full · 999px
| Token | Value |
|---|---|
--container | 70rem |
--gutter | clamp(1.25rem, 4vw, 2.5rem) |
--column-meta | 11.5rem |
--column-content | 40rem |
--header-height | 3.5rem |
--duration | 140ms |
--ease | cubic-bezier(0.2, 0, 0, 1) |
Body copy with a link, strong text, and inline code.
Quotes get an accent rule and step up to the large size.
A neutral callout for asides.
An accent callout for the thing to remember.
.entry { display: grid; }| Tool | What it does |
|---|---|
| Tables | Hairline rows, no vertical rules |
The signature layout. A sticky label with an accent dot sits on the left of a continuous rule, and content sits in a 40rem column on the right. On narrow screens the rule is dropped and the label stacks above the content. The blog index uses a date as the label; the home and resume pages use section names.