Design System

Every token this template uses, and what it is for.

Re-skinning this template means changing the values in the :root block of src/styles/global.css and nothing else. This page renders whatever is in there right now, so it stays true after you have changed it.

Colour

Contrast ratios are stated because this is a trade site read on a phone in a driveway, not on a calibrated screen. Every text pair here clears WCAG AA; most clear AAA.

Ground

  • --color-bg Page ground
  • --color-bg-alt Alternating band
  • --color-surface Cards and panels
  • --color-border Hairlines

Ink

  • --color-text Body and headings 17.9:1 AAA
  • --color-text-faint Labels and eyebrows 9.84:1 AAA
  • --color-text-muted Secondary prose 7.24:1 AAA

Accent

  • --color-accent Buttons and rules 7.36:1 AAA
  • --color-accent-hover Pressed state 9.5:1 AAA
  • --color-accent-text Accent-coloured text 7.36:1 AAA
  • --color-emergency Storm bar only 5.9:1 AA

Dark sections

  • --color-dark-bg Hero and dark bands
  • --color-dark-text Text on dark 16.4:1 AAA
  • --color-dark-muted Secondary on dark 6.71:1 AA
  • --color-dark-accent Accent on dark 7.9:1 AAA

Type

Roboto Slab for display, Asap for body. A slab serif because roofing sells on solidity; both faces are unused anywhere else in the 365.

  • Display clamp(2.5rem, 6vw, 4rem) · heading · 800

    Hail hit.

  • Section clamp(1.75rem, 4vw, 2.5rem) · heading · 700

    Recent work

  • Card title 1.125rem · heading · 700

    Standing seam over a 12/12 pitch

  • Body 1rem · body · 400

    Water rarely enters where it appears inside, so we trace it from the stain up before quoting.

  • Small 0.875rem · body · 400

    Free, and yours to keep either way.

  • Eyebrow 0.75rem · body · 700

    RECENT WORK

Interaction states

Every interactive element carries a themed hover and a visible keyboard focus ring. Tab through the row below rather than clicking it — the focus ring is the part most templates leave as the browser default, and it is the one a keyboard user depends on.

Primary action Secondary action A text link

Spacing and radii

Sections are separated by --section-gap. Cards use a 0.75rem radius, pills use 999px. Nothing else invents a value.

  • 0.5rem tight stacks
  • 1rem inside cards
  • 1.5rem between cards
  • --section-gap between sections