style
palette
Colours are based on the accent. Surfaces are ordered from lightest to darkest in light mode, and vice versa in dark mode. Inverse variants, relative to current mode, use the -inv
suffix. You’ll need CSS enabled to see the following colour chart:
Text has two colour variants, with accent
being a tertiary option—I mostly use it for text selection and link hovers. Variations between text1
and text2
should be visible if there are no set preferences for contrast on your device.
october
Every October, #ff8000
is set as the accent in line with the Merveilles tradition of donning orange avatars throughout the month.
typography
I arbitrarily oscillate between tritonic, tetratonic, and golden ratio scales. --f1
is default. --f0
is used for small texts such as captions, tooltips, and footers.
HTML has six headings, but I rarely need more than three: article heading in <h1>
, section headings in <h2>
, and, if necessary, subsection headings in <h3>
.
links
Internal links are styled this way.
Outgoing links are styled this way.
components
Topo tooltips are found throughout the site when you hover over some abbreviations, images, and timestamps.