Styleguide

A reference page for all the design tokens and markdown content elements used on this site.

Design tokens #

Font families #

Colours #

Semantic colours resolved through light-dark() and dependent on the active theme:

Base palette of primitive colour tokens:

Font sizes #

Font weights #

Line heights #

Spacing #

Border radius #

--token-border-radius-default: 3px

Content elements #

Headings #

Sections in a post use ## for the top level and ### for subsections, as seen above. There's no # in the body: the layout renders its own <h1> from the front matter title, and .common-main-content h1 is hidden by CSS to prevent a second one.

Paragraphs and inline text #

A paragraph can hold bold text, italic text, inline code, and a link. Here's a second paragraph, so the spacing between paragraphs is visible too.

Lists #

An unordered list:

• Tennis
• Rugby
• Soccer

An ordered list:

1. First
2. Second
3. Third

Blockquotes #

An observable is a collection whose values arrive over time, or in other words, an asynchronous collection.

Horizontal rule #

A paragraph before the rule.

A paragraph after the rule.

Tables #

Maths #

Inline LaTeX like $E = mc^2$ sits within a sentence.

A block equation:

$$\int_0^\infty e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}$$

Code #

Inline code like const x = 1 sits within a sentence.

A fenced code block:

function debounce(fn, wait) {
	let timeout;
	return (...args) => {
		clearTimeout(timeout);
		timeout = setTimeout(() => fn(...args), wait);
	};
}

The same highlighter covers other languages used across posts:

.common-main-content blockquote {
	border: 1px solid var(--color-border);
	padding: var(--token-spacing-sm) var(--token-spacing-md);
}

<button type="button" aria-pressed="false">Toggle</button>

npx @11ty/eleventy --serve

{ "name": "blog", "private": true }

A line can be marked as highlighted, added, or removed. This block highlights line 2:

const els = document.querySelectorAll(".item");
els.forEach((el) => el.classList.add("active"));
console.log(els.length);

This block marks line 2 as removed and line 3 as added:

const response = await fetch(url);
const data = await response.json().then((res) => res);
const data = await response.json();

A unified diff, using Prism's diff language:

- axios.get("/users").then((res) => res.data);
+ fetch("/users").then((res) => res.json());