Design System

The living style guide

Every token, type style and component this portfolio is built from, rendered live from source. Amend a component here and it updates everywhere it ships.

Selection paints accent on the background. Focus is a 2px accent outline at a 3px offset, handled once globally. The image placeholder now references its own placeholder tokens, so every surface resolves on-palette.

1. 01Eyebrow colour now has a rule

   The same uppercase overline was accent in some places and ink-soft in others, sometimes within one file.

   Canonical: Reconciled: quiet page, section and metadata eyebrows are now ink-soft, with accent reserved for counters and impact labels such as Step 01 or The impact.

2. 02Eyebrow tracking unified

   CaseStudyCard used tracking-[0.16em] while everywhere else was 0.14em.

   Canonical: Reconciled: tracking-[0.14em] is now used everywhere.

3. 03Headings no longer set family and weight inline

   Almost every heading set font and weight via a style object rather than utilities, and a couple relied on an unset-weight fallback.

   Canonical: Reconciled: headings now use the font-display and font-semibold utilities, with no reliance on a weight fallback.

4. 04Feature-text weight unified at 500

   Pull-quotes were 500, testimonials and PrincipleCard 400, headings 600, the footer line unset.

   Canonical: Reconciled: headings stay 600 and quote and feature text now use font-medium (500) consistently.

5. 05Nav weight brought to 600

   Nothing else used 700; the wordmark beside it was 600.

   Canonical: Reconciled: the nav is now 600, matching the wordmark.

6. 06Heading sizes mapped to the scale

   The hero H1, card H3, case-study lead and a text-[0.95rem] card summary bypassed the token scale.

   Canonical: Reconciled: off-scale sizes now map to tokens, the card summary is text-sm, and a single page-H1 ramp is used.

7. 07H2 reduced to two structural levels

   Section H2 was 52px on home, 40px on leadership and 32px in case studies.

   Canonical: Reconciled: two levels only, big section H2 at text-3xl→5xl and nested section H2 at text-2xl/3xl, applied by level not by file.

8. 08Heading leading collapsed

   Six different leading values were used across large headings.

   Canonical: Reconciled: large display headings use leading-[1.1], the rest leading-tight, with leading-snug only on the pull quote.

9. 09Secondary button hover unified

   The home outline button hovered border and text to accent; the 404 one hovered border to ink only.

   Canonical: Reconciled: secondary buttons now hover border and text to accent, matching the site-wide convention.

10. 10Tag pills unified

    Previously three hand-rolled variants at different sizes and colours: TagList was muted grey, the hero pills white, the card tags a third near-copy.

    Canonical: Reconciled: every tag now routes through TagList at white text, text-sm.

11. 11Stat-value emphasis colour fixed

    The same headline figure was accent in the impact block and ink lower on the same page.

    Canonical: Reconciled: headline figures are accent everywhere.

12. 12Quote marks unified

    Testimonial marks were accent; the case-study lead marks were ink-soft.

    Canonical: Reconciled: all quote ornaments are now accent.

13. 13Bullet-dot colour and size unified

    Accent 1.5px dots were used in most lists; ink-soft 1px dots in the case-study bullets helper.

    Canonical: Reconciled: all bullet dots are now accent at w-1.5 h-1.5.

14. 14Off-token surface tokenised

    ImagePlaceholder used raw #f0ede5 and #1a1a1a, near-twins of existing tokens.

    Canonical: Reconciled: placeholder tokens were added and ImagePlaceholder now references them, so nothing renders off-palette.

15. 15Mask stops unified

    WorkScroller and LogoMarquee used #000 mask stops with mismatched fade widths (4/96 vs 5/95).

    Canonical: Reconciled: both use a single 6% / 94% edge fade.

16. 16Stat duplication removed

    Three stat components existed: StatRow (canonical), the hand-rolled impact list, and StatBand (superseded).

    Canonical: Reconciled: StatRow is the canonical stat block and the superseded StatBand is gone. The case-study overview keeps a distinct vertical headline-impact treatment by choice.

17. 17Mobile nav now has an active underline

    Desktop active got a 2px accent underline; mobile active was colour-only.

    Canonical: Reconciled: the mobile active link now carries the same 2px accent underline as desktop.

18. 18Superseded components removed

    Eight earlier components remained in the folder and were shown for reference only.

    Canonical: Reconciled: the build now uses only the canonical set and the superseded components have been retired.