Design
A public reference for the colours, typography, components, and content patterns used across this site.
Palette Tokens
-
paper
#f8f8f2 -
steel
#9ca3af -
slate
#44475a -
graphite
#5d6371 -
mist
#e4e5ee -
ink
#181818 -
midnight
#282a36 -
ember
#ffb86c -
purple
#bd93f9 -
red
#ff5555 -
rose
#f51a6f
Theme Modes
The palette is shared between light and dark modes. Each mode assigns those colours to page backgrounds, text, borders, surfaces, and accents.
Light
- colour scheme
light- background
- paper
- body text
- ink
- muted text
- graphite
- border
- slate
- surface
- mist
- primary accent
- rose
Dark
- colour scheme
dark- background
- ink
- body text
- paper
- muted text
- steel
- border
- slate
- surface
- midnight
- primary accent
- ember
Theme Comparison
Light component
Body text sits on the page background with the primary accent above it.
Muted text recedes from the main copy, while borders describe the surrounding chrome.
Dark component
Body text sits on the page background with the primary accent above it.
Muted text recedes from the main copy, while borders describe the surrounding chrome.
Typography
Heading One
Long-form prose combines regular links,
strong text, emphasis, and inline code within the
same reading texture.
Heading Two
Headings and link underlines carry the ember accent, while paragraphs keep to the foreground colour for sustained reading.
Blockquotes use the border colour to separate quoted material from the surrounding body copy.
- Unordered list item
- Another item with a feed link
- Ordered list item
- Second ordered item
body {
color: var(--color-foreground);
background-color: var(--color-background);
}Navigation
Social Icons
Post Entries
Media
Image Grid
Webmentions
Grouped Responses
1 Reply
replied
A short response with an avatar, author link, timestamp, and body text.
1 Like
Individual Mentions
replied
A short response with an avatar, author link, timestamp, and body text.bookmarked this
A short note about why this page was bookmarked.