style

palette

Text and surface colours are calculated using the accent colour.

Inverse variants. These can be used using the -inv suffix.

Text has two colour variants. accent may be used sparingly.

Text set in text1 colour
Text set in text2 colour.
Text set in accent colour.

typography

Typography scale. --f1 is default. This site arbitrarily oscillates between tritonic, tetratonic, and golden ratio scales.

HTML has 6 heading tags, but I rarely need more than 3: page heading in <h1>, page section headings in <h2>, and, if necessary, page section subsection headings in <h3>

--f0 is used for small texts such as captions, tooltips, footers.

components

Topo tooltips are found throughout the site when you hover over some images, timestamps, or abbreviations.