Boilerplate
A living reference for every token, element, component and pattern used on this site. Browse by category below, or use the sidebar to jump straight to a topic.
Foundations
Design tokens and primitives that everything else builds on.
-
Border radius
The radius scale from sharp to circle.
-
Breakpoints
The two breakpoints used to switch between mobile, tablet and desktop layouts.
-
Colours
Brand, foreground, background, neutrals, grays and accent palettes.
-
Colour scheme
How light and dark modes are handled via light-dark() and prefers-color-scheme.
-
Elevation
Shadow scale and when to lift surfaces.
-
Focus and outline
Focus rings, outline tokens and keyboard accessibility.
-
Sizing and spacing
The pad scale, borders, radii, outlines and shadows.
-
Layout
The named grid regions — content, popout, full-width — plus layout primitives.
-
Motion
Transitions, scroll-driven animations and reduced-motion handling.
-
Typography
Typefaces, font-size scale, headings, text formatting, code and keyboard input.
-
Z-index
The named z-index scale used across the site.
Elements
Styled HTML elements: links, lists, tables, forms, media and icons.
-
Buttons
Native buttons and links styled as buttons.
-
Code
Inline code, pre blocks, keyboard input, sample output and variables.
-
Icons
Interaction icons and arrows.
-
Figure and caption
Grouping content with an associated caption.
-
Forms
Inputs, selects, checkboxes, radios, progress, range, meter.
-
Links
Default, secondary, no-underline, dark, button-as-link.
-
Lists
Unordered, ordered and description lists.
-
Media
Figures, captions, composite images.
-
Tables
Tables and captions.
Components
Composed UI patterns — chiplets, alerts, cards, speech bubbles and more.
-
Accordion
Grouped disclosure panels built on <details>.
-
Alerts
Inline status messages — info, success, warning, error.
-
Avatar
Circular portraits with size and stack variants.
-
Blockquote
Pull quotes with citation.
-
Breadcrumbs
Hierarchical navigation trail.
-
Card
Bordered surface for grouping related content.
-
Chiplets
Inline pills for counts, statuses, tags and categories.
-
Details and summary
Expandable disclosure widget.
-
Dialog
Native HTML dialog with styled backdrop.
-
Empty state
Placeholder shown when a list or page has no content.
-
Stats
Headline data points — large numbers with a heading above and a label below.
-
Global footer
Site footer with author card and social links.
-
Horizontal rule
Section break.
-
Kanban
Column-based lists for task-tracking pages.
-
Key-value list
Two-column list pairing a label with a value.
-
Meter
Scalar-value bar based on <progress>.
-
Objects
Decorative SVG illustrations — Game Boy, Switch, iPod, calendars, Polaroid and more.
-
Pagination
Paged navigation through lists.
-
Polka background
Full-bleed polka-dot background used behind related posts.
-
Post-it note
Coloured paper note, typically used for short asides.
-
Progress
Task-completion bar based on <progress>.
-
Speech bubbles
Chat-style bubbles for notes, replies and webmentions.
-
Status dot
Small solid circle paired with inline text.
-
Skeleton
Loading placeholder shapes.
-
Skip link
Keyboard shortcut to jump past the global header.
-
Spinner
Loading indicator.
-
Toggles
Mutually-exclusive filter buttons.
-
Tooltip
Small label shown on hover or focus.
-
Webmentions
Submission form and reply/interaction counts.
Patterns
Higher-level compositions built from the primitives.
-
Article header
Post titles with date, image or object variants.
-
Author card
Avatar, name and bio block.
-
App list and app sheet
Writing about apps, subscriptions and in-app purchases.
-
Error page
404 and 500 layouts with clear recovery actions.
-
Related posts
Polka + card + key-value list.
-
Search results
Query input, filter chips and result list.
-
Utilities
Hidden and screen-reader helpers.