Overview

Site styleguide

This is the styleguide for danny.is. It mostly exists for my own use when I'm working on the site, both as a place to check how everything renders and as an occasional reference. Since I'm always interested to see how other folks build their personal sites, I figured I should make it public.

This site is a bit of a playground for me: it's where I experiment with CSS and design and new stuff, so the styleguide doubles as a place to see everything (visual) working together, including quite a few features which I use occasionally enough that you might never see them anywhere else.

The site is typographically-driven and leans on constructivist and modernist influences design-wise. It's also static HTML and CSS with as little client-side JavaScript as possible.

Two other styleguides live in the content itself rather than here: the Article Styleguide shows how a long-form article renders, and the Note Styleguide does the same for a note. These are an actual article and note, so they faithfully represent how things work in those contexts, but neither is intended to be at all comprehensive.

This main styleguide is split into five sections...

Section	What it covers
Foundations	The fundamentals of my "design system" including colours, design tokens, type and spacing scales, plus some global utility classes.
Typography	Shows the various type treatments and other typographic features.
Content	Shows the various components I use in my content.
UI	A reference for other reusable components used in the design and layout of the site.
HTML	Reference for native HTML elements which aren't covered elsewhere but are styled in the site.