Design system
Every token, every ring state, every base component. This page is how the system gets checked.
Colour
Blues and greens only. Four ramps of four steps, two neutrals.
sky
sky-100
#a9e3ec
sky-300
#5fc4d8
sky-500
#3aa7b5
sky-700
#1e7f8c
ocean
ocean-100
#5a97dd
ocean-300
#2a6fc0
ocean-500
#0f3f7a
ocean-700
#082a55
leaf
leaf-100
#93d67f
leaf-300
#5cb85c
leaf-500
#2e8b3f
leaf-700
#1d6b2e
stone
stone-100
#5f9498
stone-300
#3f6b72
stone-500
#2b4c52
stone-700
#0c2125
ink #0e1a17
paper #f6f9f7
line #d7e1dd
Type
Manrope for the wordmark and headings. Noto Sans for body and UI. Sentence case everywhere except the wordmark.
Display 48
Heading 32
Heading 24
Body 20 — the Sol Sequence is fourteen.
Body 16 — the ring is fixed and what fills it changes by context. Measure is capped at sixty-five characters.
UI 14 — water is the interactive ramp.
Caption 12 — Water · 18:00 local
1,280,000
Radii, shadows and motion
One UI transition: 200ms cubic-bezier(0.22, 0.61, 0.36, 1). Nothing bounces. Reduced motion is honoured globally.
Ring · wave
The master mark. Onboarding, splash, anywhere the brand signs off.
Ring · Sol Sequence
Fourteen equal segments, clockwise from Sydney.
Ring · sound-wave
Live broadcast only. Blending here is a live-state behaviour.
Ring · audio
The live-counter treatment. Its core is dark by design, so it sits on stone-700. The hole holds the counter and nothing else.
Four-band icon
Below 100px the ring closes up. Avatars, list rows, favicons.
Counter
Tabular lining figures, ticking from 1,280,000.
1,280,000
Actions logged worldwide
Action areas · default icons
An 8px keyline along the top edge in the area's colour. Influence carries the full multi-band blend.
Energy
Switch tariff, cut standby load, shift usage off peak.
12,480 actions logged
Move
Swap a journey. Walk, cycle, rail instead of air.
12,480 actions logged
Water
Fix the leak, shorten the shower, catch the rain.
12,480 actions logged
Nature
Plant, rewild a verge, join a local restoration day.
12,480 actions logged
Food
One plant-based day a week. Waste nothing edible.
12,480 actions logged
Waste
Repair before replacing. Refuse single use.
12,480 actions logged
Influence
Write, vote, switch bank, ask your employer.
12,480 actions logged
Action areas · on-dark icons
An 8px keyline along the top edge in the area's colour. Influence carries the full multi-band blend.
Energy
Switch tariff, cut standby load, shift usage off peak.
12,480 actions logged
Move
Swap a journey. Walk, cycle, rail instead of air.
12,480 actions logged
Water
Fix the leak, shorten the shower, catch the rain.
12,480 actions logged
Nature
Plant, rewild a verge, join a local restoration day.
12,480 actions logged
Food
One plant-based day a week. Waste nothing edible.
12,480 actions logged
Waste
Repair before replacing. Refuse single use.
12,480 actions logged
Influence
Write, vote, switch bank, ask your employer.
12,480 actions logged
Action areas · small icons
An 8px keyline along the top edge in the area's colour. Influence carries the full multi-band blend.
Energy
Switch tariff, cut standby load, shift usage off peak.
12,480 actions logged
Move
Swap a journey. Walk, cycle, rail instead of air.
12,480 actions logged
Water
Fix the leak, shorten the shower, catch the rain.
12,480 actions logged
Nature
Plant, rewild a verge, join a local restoration day.
12,480 actions logged
Food
One plant-based day a week. Waste nothing edible.
12,480 actions logged
Waste
Repair before replacing. Refuse single use.
12,480 actions logged
Influence
Write, vote, switch bank, ask your employer.
12,480 actions logged
Action areas · currentcolor icons
An 8px keyline along the top edge in the area's colour. Influence carries the full multi-band blend.
Energy
Switch tariff, cut standby load, shift usage off peak.
12,480 actions logged
Move
Swap a journey. Walk, cycle, rail instead of air.
12,480 actions logged
Water
Fix the leak, shorten the shower, catch the rain.
12,480 actions logged
Nature
Plant, rewild a verge, join a local restoration day.
12,480 actions logged
Food
One plant-based day a week. Waste nothing edible.
12,480 actions logged
Waste
Repair before replacing. Refuse single use.
12,480 actions logged
Influence
Write, vote, switch bank, ask your employer.
12,480 actions logged
Action icons
Each icon carries its action area colour baked in. Never recoloured.
Energy
Move
Water
Nature
Food
Waste
Influence
Buttons
Pills. Hover and press move down the water ramp. No opacity, no scale.
Card
Flat. White, hairline border, 8px radius, 1px shadow.
Light card
Hairlines before shadows. No gradients, no coloured left borders.
Dark card
On stone-700 with a #1d3b3f border and no shadow.
Tags
Pills, ramp-keyed. stone-700 text on light tints, white on deep ones.
Fields
44px, 4px radius, hairline border, 3px sky-500 focus ring.
Your city sets your Sol Sequence slot.
Enter a valid email address.
Alerts
The only component allowed warm colour.
The Sol Sequence is fourteen
Action logged
Set time moved
Action could not be logged
Wave band · blend
All eight bands. Section headers, footers, the dashboard header.
Wave band · single ramp
Use for a quieter band. Stretched to width, never tiled.
sky
ocean
leaf
stone
The heart
Donate screen only. It has no hole, so the counter sits beneath it. Never a logo, never a like glyph.
1,280,000