The design system behind this site
This portfolio runs on a small design system of its own: color tokens, three modes and a few shared components. Every value on this page comes from the site's own stylesheet. The Day, Night and Focus modes mirror my Figma variables experiment, One file, three moods.
One set of tokens, three modes
Components never use raw colors. They use tokens, and each mode changes the token values, so the whole site switches at once. Try the switch here or in the top right.
Light porcelain background, frosted glass and soft color in the background. The default when your device is in light mode.
The same layout on dark surfaces, with lighter accent and status colors so they stay readable.
A low-distraction view: no motion, no blur, solid surfaces, larger text and darker body text. It starts on its own when a device asks for more contrast.
Color tokens
Fourteen color tokens cover the whole site. Focus mode keeps the Day or Night values and changes only the ones listed.
| Token | Used for | Day | Night | Focus |
|---|---|---|---|---|
--bg | Page background | #eceef1 | #0e0f12 | same |
--surface | Cards and panels | #ffffff | #1a1c22 | replaces glass |
--surface-2 | Quiet fills | #f5f6f8 | #22252c | same |
--ink | Headings and main text | #14161b | #eef0f4 | same |
--ink-2 | Body text | #4b505c | #b5bac5 | set to ink, for more contrast |
--ink-3 | Labels and captions | #757b88 | #868c99 | same |
--line | Borders and dividers | #d5d9e0 | #2e323b | same |
--sun | Accent, from the sunflower photos | #f2b300 | #ffc533 | same |
--sun-ink | Accent text | #7a5600 | #ffd66b | same |
--sel | Focus rings and selection | #0d99ff | #2ea8ff | same |
--ok | Success | #1a7f4b | #4cc38a | same |
--warn | Warning | #a15c00 | #f0a43a | same |
--bad | Error | #c2312f | #ff6b66 | same |
--glass | Frosted nav and cards | rgba(255,255,255,.72) | rgba(28,30,36,.70) | solid surface, no blur |
Three typefaces, one job each
Case studies
Headings and big numbers.
I make complex information clear for the people who use it.
Paragraphs, buttons and interface text.
Client work · 2018 – now
Small labels, dates and code.
Layout and corners
One 1180px column with a side gutter that shrinks from 40px to 16px on phones. Corners get rounder as elements get bigger.
The pieces every page is built from
Used for the nav, project cards and pop-ups.
- Number on the left, text flows beside it.
- Used for annotated screenshots.
The “Full story / 60-second version” control on every case study, for people who skim.
See it on DESE →Built in, not added later
- Follows the device's light or dark setting until you choose a mode.
- Turns off motion when the device asks for reduced motion, and in Focus mode.
- Starts in Focus mode when the device asks for more contrast.
- Visible focus rings on links, buttons and controls.
- The before-and-after sliders, the XCQ search and the reading switch all work with a keyboard.