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 -i suffix. You’ll need CSS enabled to see the following colour chart:

Text has two colour variants, with accent being a tertiary option. Variations between text and muted should be visible if there are no set contrast preferences on your device.

Some pages have their own custom accents, based on their topics. The HTML page for example has its accent set to #e54c21 (derived from the HTML logo).

Each 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, optionally, subsection headings in h3.

components

Tooltips are found throughout the site when you hover over some abbreviations, images, and timestamps.