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.
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.
links
Internal links are like this.
Outgoing links are like this.
lists
- one
- two
- three
- one
- two
- three
components
Tooltips are found throughout the site when you hover over some abbreviations, images, and timestamps.
table
| column | column |
|---|---|
| row | row |
| row | row |
| row | row |
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.