tl;dr

• CSS vars for the win
• Responsive and fluid scales for spacing and type
• Color schemes are not themes
• Color schemes can be more than just dark/light mode
• Everything is fluid!

Foundational tokens

Space

• --t-space-* - using an utopia space scale calculator

Typography:

• --t-type-size-* - using utopia type scale calculator
• --t-type-*- - basic set of families, weights, heights

Color

• colors: 4 simple proto palettes
  • --t-palette-white
  • --t-palette-red
  • --t-palette-cyan
  • --t-palette-black

Color schemes

• --scheme-* - 4 color schemes
  • base ::root - the page, the <main> content
  • cs-primary - main header and site nav
  • cs-secondary - site section nav
  • cs-tertiary - site footer

Only 1 of the color schemes is overridden when prefers-color-scheme: dark and the secondary, and tertiary are merely tweaked as they are already pretty dark.

Note: I didn’t consider adding theme support to this website.

Layout tokens

Note: Because things are very responsive and fluid around here, make sure to also check My website: Layout.

The --layout-* are semantic tokens for organising scale and rhythm in a responsive way:

• --gap-v-legroom - top padding for page layouts
• --gap-v-headroom - bottom padding for page layouts

For horizontal spacing:

• --layout-unit - minimum space between atoms
• --gap-h-gutter - on small screens
• --gap-h-gutter-min

For vertical spacing:

• --layout-unit - minimum space between atoms
• --gap-h-s - space between blocks
• --gap-v-space - between molecules
• --gap-v-pause - between page sections (organisms)

Along with some extra tokens for tweaking space proportionally, but with precision:

• --layout-shift and --layout-unshift
• --proportional-quarter, --proportional-half, --proportional-one - in relation to 1em
• --layout-border-thin - outline-offsets and thin borders should not be scalable