Design Palette
I made this page as a way to work out the general design of the site, but I thought it might be interesting to leave up.
Design tokens are defined with CSS custom properties, which are then used
throughout the site to ensure consistency. For type size, I use a dynamic
type scale as described by Utopia. For
small screens I use a minor third scale with a base size (--step-0) of 16px. For large screens I use a major third scale with a base of
18px. These scales are interpolated using the CSS clamp function
for font sizes that look basically OK at any intermediate screen width, with
a tendency towards greater sizes and larger jumps between steps on wider screens.
Spacing also uses a dynamic scale based on the Utopia system. It gets airier as the screen width increases.
--space-3xs --space-2xs --space-xs --space-s --space-m --space-l --space-xl --space-2xl --space-3xl The main font is Zeitung Pro Variable. Because it's a variable font I can use it in a fair number of situations while keeping download size to a minimum. It's alright. Some glyphs are oddly bugged in Chromium but I kind of like the effect.
The main monospaced font is Berkeley Mono.
I use palettes based around colours: a base colour and two accent colours. I use different shades of each for basically everything. The base hues are consistent across light and dark modes.
In declining order of importance, my main design goals for this website are that it should
- be accessible
- look interesting
- look kind of nice
You can judge for yourself how successful I've been.