Design system

The building blocks of this website: every size, space and colour, shown live. They all come from one small settings file, so changing a value there changes it everywhere. Sizes grow smoothly from 360px to 1280px wide; resize your window to watch them move.

Window: —

How the rest of the site is made: the Colophon.

Text sizes

Body copy is --text-m. Ratio 1.14 on phones, 1.2 on desktop.

  1. --text-2xl 26.67 → 34.56px · now —

    Making complex tech a lot less daunting, one small step at a time.

  2. --text-xl 23.39 → 28.8px · now —

    Making complex tech a lot less daunting, one small step at a time.

  3. --text-l 20.52 → 24px · now —

    Making complex tech a lot less daunting, one small step at a time.

  4. --text-m 18 → 20px · now —

    Making complex tech a lot less daunting, one small step at a time.

  5. --text-s 15.79 → 16.67px · now —

    Making complex tech a lot less daunting, one small step at a time.

  6. --text-xs 13.85 → 13.89px · now —

    Making complex tech a lot less daunting, one small step at a time.

Heading sizes

--h4 is body size (--text-m); each step up multiplies by 1.28 on phones and 1.5 on desktop. The size is separate from the level: an h2 can use --h3.

  1. --h-display 48.32 → 101.25px · now —

    The One-Person AI Agency

  2. --h1 37.75 → 67.5px · now —

    The One-Person AI Agency

  3. --h2 29.49 → 45px · now —

    The One-Person AI Agency

  4. --h3 23.04 → 30px · now —

    The One-Person AI Agency

  5. --h4 18 → 20px · now —

    The One-Person AI Agency

Spacing

Element spacing

Gaps and padding in and between components. Ratio 1.25 on phones, 1.333 on desktop.

  1. --space-2xs 12.29 → 16.89px · now —

  2. --space-xs 15.36 → 22.51px · now —

  3. --space-s 19.2 → 30.01px · now —

  4. --space-m 24 → 40px · now —

  5. --space-l 30 → 53.32px · now —

  6. --space-xl 37.5 → 71.08px · now —

  7. --space-2xl 46.88 → 94.74px · now —

Section spacing

Top and bottom padding of sections; --section-space-m is the default.

  1. --section-space-xs 50 → 81.92px · now —

  2. --section-space-s 60 → 102.4px · now —

  3. --section-space-m 72 → 128px · now —

  4. --section-space-l 86.4 → 160px · now —

  5. --section-space-xl 103.68 → 200px · now —

Contextual spacing

Named for the job, each pointing at a step, so a job can be retuned in one place. Paragraph spacing in prose stays in em, so it grows with the text.

  • --content-gap-s → --space-2xs
  • --content-gap-m → --space-s
  • --content-gap-l → --space-m
  • --grid-gap → --space-m
  • --container-gap → --space-l
  • --gutter → --space-m

  • --content-gap-s

    Live workshop

    Two hours with Dave and Gareth, building your AI team as you go.

    Book your place

  • --content-gap-m

    Live workshop

    Two hours with Dave and Gareth, building your AI team as you go.

    Book your place

  • --content-gap-l

    Live workshop

    Two hours with Dave and Gareth, building your AI team as you go.

    Book your place

Colour

Palette

  • --primary#ff4d6a
  • --primary-hover#e63956
  • --accent#a6ebfa
  • --accent-linergb(166 235 250 / 0.22)
  • --accent-deep#137186
  • --white#ffffff
  • --neutral-50#f5f7fa
  • --neutral-100#e8edf3
  • --neutral-200#dbe3ee
  • --neutral-300#b9c4d2
  • --neutral-600#46566b
  • --neutral-700#34445a
  • --neutral-800#243142
  • --neutral-900#1b2636
  • --neutral-950#151e2b
  • --error#b3261e
  • --error-wash#fbe9e7
  • --error-text#8c1d18
  • --success-text#1d7a4a

Roles on each ground

A section sets data-ground and the roles switch, so the same component works on light and dark.

  • data-ground="base"

    The AI Agency Launchpad

    28 October, 15:00 UK

    Muted text, for descriptions and secondary lines.

    • List bullets in --color-marker
    • Two weeks of community support
    Book your place

  • data-ground="subtle"

    The AI Agency Launchpad

    28 October, 15:00 UK

    Muted text, for descriptions and secondary lines.

    • List bullets in --color-marker
    • Two weeks of community support
    Book your place

  • data-ground="muted"

    The AI Agency Launchpad

    28 October, 15:00 UK

    Muted text, for descriptions and secondary lines.

    • List bullets in --color-marker
    • Two weeks of community support
    Book your place

  • data-ground="dark"

    The AI Agency Launchpad

    28 October, 15:00 UK

    Muted text, for descriptions and secondary lines.

    • List bullets in --color-marker
    • Two weeks of community support
    Book your place

  • data-ground="deep"

    The AI Agency Launchpad

    28 October, 15:00 UK

    Muted text, for descriptions and secondary lines.

    • List bullets in --color-marker
    • Two weeks of community support
    Book your place

Other tokens

Widths
--width-container72rem
--width-narrow48rem
--width-article38rem
Radius
--radius-s
--radius-m
--radius-full
Line heights
--line-height-text1.6
--line-height-heading0.98
Font weights
--weight-regular400
--weight-medium500
--weight-semibold650
--weight-bold750
--weight-black900
Shadows
--shadow-button0 0.5rem 1.5rem -0.5rem rgb(0 0 0 / 0.45)
--shadow-dialog0 2rem 4rem -1rem rgb(10 16 26 / 0.6)
Motion
--ease-outcubic-bezier(0.16, 1, 0.3, 1)
--duration-quick0.2s
Fonts
--font-display'Barlow', 'Arial Narrow', sans-serif
--font-body'Funnel Sans Variable', system-ui, sans-serif

Be first to hear when The One-Person AI Agency opens