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.

type scale
step--2
The quick brown fox jumps over the lazy dog
step--1
The quick brown fox jumps over the lazy dog
step-0
The quick brown fox jumps over the lazy dog
step-1
The quick brown fox jumps over the lazy dog
step-2
The quick brown fox jumps over the lazy dog
step-3
The quick brown fox jumps over the lazy dog
step-4
The quick brown fox jumps over the lazy dog
step-5
The quick brown fox jumps over the lazy dog

Spacing also uses a dynamic scale based on the Utopia system. It gets airier as the screen width increases.

space scale
--space-3xs
--space-2xs
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-2xl
--space-3xl

The main body font is Lora. Headings use Inter, the most boring font in the world.

The monospaced font is Berkeley Mono.

variable font
400
15
0
The quick brown fox jumps over the lazy dog

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.

swatches

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.