Style guide

By Timothy Moore

The style guide this website uses. Minimal, fast.

The page

One HTML file plus the required headers for phones not to use compatibility mode. Styles go in a <style> element.

Type

System fonts only, with the body text at the default size and headers scaled from there. Body text uses a serif font, headers use a sans-serif font.

h1 @ 1.5rem
h2 @ 1.25rem
h3 @ 1.125rem

Lines stop at 52ch, which is about 64 characters of running prose.

Color

White old paper palette. Has a bit of personality, but AAA contrast. Supports dark-mode

:root {
  --brand-050: #f9f2ee;
  --brand-100: #f2e5dc;
  --brand-200: #ebd6c9;
  --brand-300: #e3c6b4;
  --brand-400: #ca9472;
  --brand-500: #b16e43;
  --brand-600: #895534;
  --brand-700: #623d25;
  --brand-800: #372215;
  --brand-900: #24160e;
  --brand-950: #160e08;
  --secondary-050: #f9f3eb;
  --secondary-100: #f2e6d5;
  --secondary-200: #ead7be;
  --secondary-300: #e2c8a4;
  --secondary-400: #c89753;
  --secondary-500: #a47535;
  --secondary-600: #7e5a29;
  --secondary-700: #5a411d;
  --secondary-800: #332410;
  --secondary-900: #21180b;
  --secondary-950: #140f07;
  --link-unvisited: #0000EE;
  --link-visited: #800080;
  --link-hovered: #FF0000;
  --link-unvisited-dark: #8AB4F8;
  --link-visited-dark: #D7A8E8;
  --link-hovered-dark: #FF9E9E;
}

typical choice: background: brand-200 background. brand-800 for headers, brand-900 for text.

In dark mode, background: brand-800 background, brand-200 for headers, brand-100 for text

Interaction

Links are underlined and have a different color, they do not inherit the ink. Better to just follow what people know here.

Link to home. Link to here.

Javascript

Progressive enhancement where appropriate, like for the light/dark mode swap