avanier's banner

style

palette

Colours are derived from manipulating saturation and lightness of an accent colour. Surfaces are ordered from lightest to darkest in light mode, and vice versa in dark mode. Inverse variants 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 mute should be visible if there are no set contrast preferences on your device.

base muteaccentlayer muteaccentaccentmuteaccentlayer-i muteaccentbase-i muteaccent

Some pages have their own accents as visual Easter eggs. The HTML page for example has its accent set to #e54c21 (derived from the HTML logo). The Noodles page is completely in black-and-white.

Every October, the accent is set to ff8000, in line with the Merveilles tradition of donning orange avatars throughout the month.

typography

I arbitrarily oscillate between tritonic, tetratonic, and golden ratio scales, though I tend to gravitate towards φ. f1 is the base size (1em = 16px). 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.

fi=f1φ0.5(i-1)--f0 --f1 --f2 --f3 --f4 --f5

Internal links are like this.
Outgoing links are like this.

lists

  1. one
  2. two
  3. three
  • one
  • two
  • three

components

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

This is a tooltip

table

table caption
columncolumn
rowrow
rowrow
rowrow

experimental

Voluptatem quis ea corrupti. Quia illo non amet.

Voluptatem quis ea corrupti. Quia illo non amet. Asperiores perferendis sequi et mollitia libero. Excepturi voluptate dolorum iste non quae odit. Voluptatem repellat qui optio ab. Quas sit dolores quod dicta accusamus. Culpa quo esse et aut sint a eos. Nesciunt et ad quo assumenda voluptas iste. Enim laudantium temporibus enim et quibusdam. Qui ullam facere earum et perspiciatis est voluptatem in. Itaque molestias sint eveniet tenetur omnis exercitationem aut sint. Incidunt blanditiis aut expedita dolore qui.