Andy WilsonEvery page on this site is built from one stylesheet. This is that stylesheet, drawn with its own tokens and classes, so it changes whenever the stylesheet does. Switch between light and dark in the settings menu and the colours and values update with it.
Colour
--bg
Page background
--bg-raised
Panels, menus, embeds
--fg
Text
--fg-muted
Subtitles, dates, labels
--accent
Links, hovers, highlights
--border
Dividers and outlines
--danger
Errors
Typefaces
JetBrains Mono
--font-mono · --font-sans
Headings, nav, labels, buttons
Inter
--font-body
Paragraphs and lists
Type scale
Closing the gap
Closing the gap
Closing the gap
Closing the gap
Regular 400Bold 700
Spacing
--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
Components
.button
.section-heading
Areas of expertise
.post-list · .post-title · .post-subtitle
Building the design system
Replacing inconsistent design files with Keystone, a design system built together with engineering.
.muted · .mono · ::selection
Regular text, muted text, mono text. Select this sentence to see the selection colour.
Writing
Journal posts, case studies and lab write-ups share one set of styles for their text. This section is written the same way they are.
A smaller heading
Paragraphs are set in Inter at body size, with links in the accent colour that underline on hover.
- Lists sit at the same indent as the CV
- Each item gets a little room
- The last one doesn’t
Quotes get a rule down the side and a muted colour.
The last line is the attribution
| Token | Used for |
|---|---|
--text-label |
Tables, dates, buttons |
--fg-muted |
Table headings |