Skip to content


My website: Styling

This meta-page was published on


  • 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




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:

  • --layout-legroom - top padding for page layouts
  • --layout-headroom - bottom padding for page layouts

For horizontal spacing:

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

For vertical spacing:

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

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

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

Although I am using atomic design nomenclature in some docs, I decided to drop these from the names of components, tokens, and file system groupings. See Conventions: atomic semantics to know why.

Go back to top of the page