Brand · Illustration & icon system
The visual kit
Every mark on this site descends from the championship badge. Six navigation illustrations, twenty-four interface icons, one palette — all vector, all in the same hand.
#0B2231page base, panels#F4EFE6paper, primary text#E14B33the single accent#F2A93Beyebrows, tags#2E7D4Fgo states, environment#2E8FA3press, waterNavigation
Six panel illustrations.
One per mega-menu section, each a small visual idea rather than a stock photo — they sit on cream plates inside the dark panels.
Icon pack
Twenty-four interface icons.
Monoline, uniform stroke, drawn in the badge's geometry. Cream on ink for the dark UI; pass onCream to invert them for light surfaces.
calendar
trophy
pin
camera
play
waves
board
stopwatch
coral
lifering
people
sun
wind
jersey
flag
clipboard
envelope
compass
megaphone
mountain
shield
scoreboard
tide
fishWeather library
Thirty-two weather icons.
Every sky, wind, tide and sea state the conditions feed can return — same monoline hand as the interface pack. Used by <Conditions />.
clear
partly-cloudy
cloudy
overcast
light-rain
heavy-rain
showers
thunderstorm
squall
fog
night-clear
cyclone
wind-offshore
wind-onshore
wind-cross
wind-calm
gust
tide-rising
tide-falling
tide-high
tide-low
swell-period
sea-glassy
sea-choppy
sea-blown
sunrise
sunset
uv
water-temp
visibility
pressure
humiditySix condition scenes.
One per broad condition. CONDITION[code] maps every code to a scene, so the panel header always matches the reading.
glassy
blown-out
groundswell
storm
flat
squall-rainIn use
Where they go.
Stat rows and card headers.
Condition rows on surf spots.
Rules and conduct sections.
Icons are square SVGs with built-in margin. Render at 20–24px inline, 40px in cards, 64px+ as section marks. Never below 18px — the stroke closes up.
<Icon name="calendar" size={24} />Recraft V4.1, vector mode, colours locked to cream + amber, background ink. Prompt: “Single minimal line icon, cream stroke on deep navy background, uniform thick rounded stroke weight, geometric, centred with generous margin, no fill, no text. Icon: …”