The parts that make up this site.
This page shows the colors, fonts, and pieces, like buttons and forms, that every page on this site is built from.
Colors / 01
Colors.
I use nine colors across the whole site. There are no bright colors and no gradients. Most pages are dark text on a light background, with one blue accent color used sparingly.
Where the colors come from
The colors come from a real photo.
I picked these colors from a single photo of me at home. The light from the window became the white background. The wood shelf and blanket became the warm tan color. The blue in the blanket became the one accent color used across the site.
- --paper
- Daylight through the window
- --surface-warm
- The blanket and wood shelf
- --ink
- The picture frame and dark shadows
- --accent
- The blue in the blanket
--paper
Page background
--raised
Cards and input boxes
--surface-warm
Warm background for personal sections
--ink
Headings, text, and dark sections
--ink-muted
Most body text
--ink-faint
Decoration only, never for text you read
--line
Thin borders and dividers
--line-strong
A slightly darker border
--accent
The one accent color, used sparingly
Easy to read
Text stays dark enough to read clearly on every background, light or dark. I follow standard accessibility guidelines so people with low vision can read the site too.
Fonts / 02
The fonts I use.
I use two fonts. Hanken Grotesk is for headings and paragraphs. Geist Mono, a monospace font, is for small labels.
Biggest
The biggest heading
Large
A large heading
Medium
A medium heading
Section
A section heading
Subsection
A subsection heading
Small
A small heading
Paragraph sizes
Extra large: for intro paragraphs.
Large: for secondary text.
Normal: everyday paragraph text.
Small: captions and notes.
Extra small: fine print.
Small labels
Colors / 01
A small label at the top of each section. The number helps you keep track of where you are.
const tokens = await build();
This font is also used to show code, like the line above.
Basic parts / 03
The basic parts.
These are the small pieces, like buttons and icons, that make up every page. They look and work the same everywhere on the site.
Buttons
Solid buttons are for light backgrounds. On dark backgrounds, I switch to an outlined button instead.
Buttons on dark backgrounds
These versions are only used on dark backgrounds.
Links
Tags
Small tags I use to highlight or label something.
Logo
My name in a handwritten script. It's real text, so screen readers can read it aloud. The browser tab icon uses the same style.
Icons
Most icons are just decoration. When an icon means something on its own, I add a label so screen readers can announce it.
Groups / 04
Bigger pieces, built from small parts.
These are bigger pieces built from the parts above: a section header, a row of numbers, a code sample, and a list of questions and answers.
Numbers and results
colors used across the site
fonts used across the site
parts work with a keyboard
way to build a button
These numbers are just examples.
Code samples
// Field.astro: accessibility wired in by construction.
// label[for], input id, aria-describedby (hint + error),
// aria-invalid and aria-required are all derived, never hand-set.
const hintId = hint ? `${id}-hint` : undefined;
const errorId = error ? `${id}-error` : undefined;
const describedBy =
[hintId, errorId].filter(Boolean).join(' ') || undefined;
// You cannot create a mislabeled input through this API.Common questions
Why only one accent color?
How do you make sure everyone can use the site?
What moves on the page?
Forms / 05
Forms everyone can use.
Every field has a clear label. Hints and error messages are connected to the field, so screen readers announce them too.
Multiple choice
Status messages
Thanks. Your message is on its way.
I’ll reply within one business day, usually sooner.
We couldn’t send your message.
Please check the highlighted fields.
Movement & spacing / 06
Movement on the page.
Animations are small and simple. Nothing spins or loops forever, and the site turns them off if your device is set to reduce motion.
Scroll reveal
Sections fade in gently as you scroll down the page.
Smooth start
Used when something appears, like on hover or a button nudge.
Smooth start and stop
Used for motion that moves back and forth.
Spacing between sections
Pages use consistent spacing between sections. Extra whitespace, not boxes or lines, keeps everything easy to scan.