Theme & message

Palette

Royal
Primary — buttons, headline base, dark bands
#1B5FA8
oklch(0.484 0.134 253.8)
Sky
Bright blue — links, highlights, headline top
#3AA5E0
oklch(0.687 0.129 237.4)
Ice
Soft wash behind the hero, cards, tints
#BFE3F7
oklch(0.896 0.047 232.3)
Sun
Accent — map pin, bands, emphasis
#F5C518
oklch(0.842 0.168 90.4)
Teal
Progress bar, family teams, confirmations
#0E9F8C
oklch(0.631 0.112 180.1)
Ink Navy
Body type, footer, deep contrast
#0B2545
oklch(0.264 0.068 255.3)
White
Page background — artwork sits on white
#FFFFFF
oklch(1 0 0)
Alert Red
Errors and required-field flags only
#E5484D
oklch(0.626 0.193 23)

Contrast rule: Sun, Ice and white always carry Ink Navy type; Royal, Sky, Teal and Ink Navy always carry white type.

Typography

Anton

Headlines, theme lockup, race numbers

All caps, single weight. Leading 0.95, tracking +1%. Big headlines get a blue vertical gradient (Ice → Sky → Royal) and a 6° left skew, matching the “Join the Journey” lockup.

Public Sans

Body copy, buttons, labels, tables

Weights 400 / 500 / 600. Labels uppercase at 12 px with 0.15em tracking.

Logo & lockup rules

  • Clear space around the logo equals the height of the "5" in "5K".
  • Minimum size: 120 px wide on screen, 1 in wide in print.
  • Two versions required: full color on light, all-white knockout on Ink Navy.
  • Leave 8% internal padding inside the artboard.
  • Never re-color, stretch, rotate or outline the mark.
  • No drop shadows or glows — the site applies its own.
  • Don't place the logo on a busy photo area; use a solid band instead.
  • Don't retype the theme line in a substitute font.

Voice

DoDon't

Every graphic below is a temporary stand-in built for this mockup. Each one is wired to a Brand Kit slot: upload the final artwork on the admin page and it replaces the placeholder on the public site right away — no code change, no redeploy. Delete an upload to fall back to the placeholder.

Every slot below has a downloadable template at the exact pixel size, with a dashed safe area 8% in from each edge, centre crosshairs, a light grid and the spec printed on the canvas. Keep type, faces and logos inside the dashed box — banners and social cards get cropped on narrow screens. Delete the guide layer before exporting the final file.

Tick each graphic as it’s produced — required pieces first. Progress is saved in your browser and prints with this document, so it doubles as a sign-off sheet.

SlotSizeFormatNotes

Registration, donations and sponsorships run on CrowdSpark, so the campaign and checkout pages need their own set of crops. Same artwork and palette as the event site — different dimensions. Show participants of all ages, modestly dressed.

SlotSizeStatusNotes