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:

1 x y zx y z2 x y zx y z3 x y zx y zaccentx y zx y z3 x y zx y z2 x y zx y z1 x y zx y z

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

--f0, --f1, --f2, --f3, --f4, --f5

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>.

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.

This is a tooltip