Dave Musson

Design systems and accessibility specialist. 16 years helping product teams build things that work regardless of how you access them.

Site components

A reference of the components used on this site, mostly built during phase 6 QA. Each entry links to its source on GitHub.

Page-chrome components (Sidebar, Footer, SkipLink, ThemeDrawer, DisplaySettings) are linked only — they're already rendered as part of this page.

Back-arrow link used at the top of detail pages to return to the parent index. View source on GitHub →

← Case studies

Button

Three variants: primary (filled), secondary (outlined), and utility (compact, used for inline controls). View source on GitHub →

CaseStudyCard

Case study card with featured and secondary variants. Supports per-slug cover blocks (brand-coloured) or a card image. View source on GitHub →

Featured + secondary, with cover blocks

Sample featured case study

A short summary that wraps onto two lines when the description is more than a sentence.

Design systemsStrategy

Sample secondary case study

Short summary.

2023Accessibility

Another case study

Short summary.

2022Tokens

DisplayControls

Two segmented radio groups (Contrast + Colour mode) shared between the homepage panel and the theme drawer. View source on GitHub →

Contrast

Currently: low

Colour mode

Currently: system

DisplaySettings

Inline display-settings panel rendered on the homepage after the hero. Wraps DisplayControls with eyebrow + Hide/Show button. Visible on the homepage. View source on GitHub →

EthosList

Section heading + list of icon/heading/body items. Used on the About page. View source on GitHub →

My ethos

  • Sample principle one

    Short body for the principle, kept to a couple of sentences for the showcase.

  • Sample principle two

    Another body paragraph.

Site-wide footer with secondary navigation, monogram link, strapline, and copyright. Visible at the bottom of every page. View source on GitHub →

GuideCard

Guide card with a primary tag badge by default. Optional showTags exposes the full tag list. View source on GitHub →

Default — primary tag as badge

Sample guide title

A short description that wraps onto two lines when there's more to say.

5 min

With showTags

Sample guide title

Same card, full tag list shown.

5 min

Hero

Homepage stance line. Italic Instrument Serif at large size. View source on GitHub →

Principal designer · a11y & design systems

Press ⌘ + ⇧ + K to toggle display settings

Accessibility isn't a feature.
It's a usability amplifier.

IconButton

Icon-with-label button. Default and small sizes. Renders as a <button> or <a> depending on whether href is supplied. View source on GitHub →

Identity

Name + tagline block. Renders as h1 on the homepage and as a paragraph + link elsewhere. Sidebar variant shown. View source on GitHub →

Dave Musson

Design systems and accessibility specialist. 16 years helping product teams build things that work regardless of how you access them.

LogCard

Log card with title, description, tags, and year. View source on GitHub →

Sample log entry

Curated resources or notes — shorter form than guides.

2025

Monogram

DM monogram SVG. Sizable via the size prop. currentColor fill so it inherits theme colour. View source on GitHub →

PageIntro

Intro text block for the top of pages. Accepts paragraph slot content. View source on GitHub →

Example intro paragraph for the showcase. Used on About and About this site pages.

PullQuote

Block-quote with optional citation. Used inside long-form prose. View source on GitHub →

Accessibility isn't a feature. It's a usability amplifier.

— Dave Musson

SectionHeader

Eyebrow + heading + optional 'View all' link. Used to introduce homepage preview sections. View source on GitHub →

With 'View all' link

Selected work

Case studies

View all →

Without 'View all' link

Recent

Logs

Left-column site chrome on desktop: monogram, nav, identity, theme toggle, LinkedIn. Visible as the left column of every page on desktop. View source on GitHub →

First focusable element on every page. Skips to #main-content. Tab from the URL bar to reveal. View source on GitHub →

StatBlock

Heading + description-list of stats. Used in case studies for outcomes. View source on GitHub →

Outcomes

Faster time to market
40%
Teams adopted
12
Component reuse
3×

TagFilterList

Filterable tag pills with an aria-live status region. Filters a sibling list by data-tags. View source on GitHub →

TagList

Inline list of tags. Default and xs sizes. View source on GitHub →

Default

AccessibilityDesign systemsTokens

Extra small

AccessibilityDesign systemsTokens

ThemeDrawer

Modal dialog with full theme + contrast controls. Open via the theme toggle in the sidebar. View source on GitHub →

Radio group Experiment

Experiment

Native radio inputs with custom indicator styling. Used in the ThemeDrawer for theme and contrast selection. Rendered with accent-color for system-painted state.

Contrast

Legacy

Components that have been superseded but remain in the repo for reference.

Card

Generic content card. Used pre-Phase-7 for guides, logs, and case studies. Being retired in favour of GuideCard, LogCard, and CaseStudyCard. View source on GitHub →

Sample card

Generic card body, replaced by purpose-specific cards.

Legacy

Internal

Components used as page wrappers rather than embedded surfaces: CaseStudyLayout wraps every case study page with header, lede, tags, hero image, and prose body.

Display settings

System high-contrast is active. These settings will have no visual effect.

Theme
Contrast

Decorative is a lower-contrast mode for visual enjoyment. Some text and UI may not meet WCAG AA. Choose Low or High if readability matters to you.