Site components

BackLink

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

Button

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

CaseStudyCard

Case study card with featured, secondary, and row variants. Supports per-slug cover blocks (brand-coloured) or a card image. Row is the homepage-preview shape: 64px tile, client-prefixed title+meta, year — see the case-studies-row-list container below. Featured and secondary are the case-studies index shape, and are also embedded live as worked exhibits in the Rule of 3 guide — kept in their current shape (phase 7B decision 6). View source on GitHub →

DetailNav

Prev/next navigation at the bottom of case-study and guide detail pages. No design board — a system extension added in sprint 7.6 to close a known phase-6 finding. Renders whichever of prev/next it's given; a spacer keeps the "next" link right-aligned when there's no previous entry. View source on GitHub →

DisplayControls Legacy

Segmented radio groups (bordered chips, stacked legends, "Currently: …" captions) — the phase-6 panel design. Superseded in the site footer by DisplayControlsV2, but still live as a worked exhibit in the Rule of 3 guide (variant="panel", shown below), so this component and its CSS stay in the repo unchanged.

• Theme: System / Light / Dark
• Contrast: Low / High / System
• Flourish: Full / Minimal / Raw — whether the decorative layer (and, at Raw, the site stylesheet itself) renders

View source on GitHub →

DisplayControlsV2

Board-exact (gap 10) inline display-settings row: DISPLAY label + Theme/Contrast/Flourish groups side by side. Selected = ink pill + amber dot; unselected = borderless text with a growing amber underline + radius flip on hover. No visible "Currently: …" captions — a visually-hidden aria-live line per group keeps the change-announcement contract for screen-reader users. Rendered in the footer settings row on every page — see the footer. View source on GitHub →

EthosList

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

Footer

Three bands: the settings row (DisplayControlsV2, shown below), link columns (Work / About / Connect), and a meta bar with strapline, copyright, and availability note. Visible at the bottom of every page. View source on GitHub →

GuideCard

Row-card for guide listings: title + description, date · read time trailing. Same leaf-radius/keyline treatment as CaseStudyCard's row variant. View source on GitHub →

Hero

Homepage opener: amber-tick eyebrow, 54px stance H1 (weight 650, flourish-gated amber highlighter), lead, and primary/secondary CTAs. View source on GitHub →

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 →

LogCard

Row-card for log listings: title + description, year trailing. Same leaf-radius/keyline treatment as GuideCard. View source on GitHub →

Monogram

DM monogram SVG. Sizable via the size prop. currentColor fill so it inherits theme colour. Active in two places: SiteHeader's logo mark, and Footer's link-columns band (right-hand dead space, phase 7B decision 3). View source on GitHub →

PageIntro

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

PullQuote

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

SectionHeader

Eyebrow + heading. Used to introduce homepage preview sections; nav and card rows carry navigation, so there's no 'View all' link (board 4a). View source on GitHub →

SiteHeader

Floating glass-pill top header at all widths: leaf logo mark, pill nav with amber current-page dot, and a menu toggle (with its own id="site-nav" and toggle script) for narrow viewports. Linked only, not embedded — it's already rendered at the top of this page, and a second live instance would collide with the real header's ids and toggle wiring. View source on GitHub →

SkipLink

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. Still earns its place — used live in the Aviva and Coursera case studies for outcome stats. View source on GitHub →

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 →

Button icon timing Experiment

Icon-forward interaction on the secondary button. Shipped behaviour: sweep fill delayed 60ms, icon slides 6px and scales to 1.2× at 200ms cubic-bezier(0.2, 0, 0, 1). The third button shows an alternative at the same 200ms using ease-out for comparison. Guarded by prefers-reduced-motion.

Legacy

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

ThemeDrawer & DisplaySettings

Removed in sprint 7.2 — theme/contrast/flourish controls now live in one DisplayControlsV2 instance in the footer on every page. Files deleted from the repo.

Sidebar & Identity

Removed in sprint 7.3 — the 320px sidebar and its dual-rendered Identity block are replaced by SiteHeader, a single floating pill header at all widths. Files deleted from the repo.

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 →

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. CaseStudyGrid owns the featured/secondary grid layout around CaseStudyCard (shown above) and is also used directly in the Rule of 3 guide's MDX content — not shown standalone here since it has no visual form of its own.