Product idea, UX flows, Identity and app icon, Design system, App screens, Lock screen and Live Activity, Harbour map, Working prototype, Live WebGL hero
Copenhagen swims all year. Before a swim you check three things in three places: is the water clean, how cold is it, and is the sauna free? Put them in one glance.
The approach
Tide has one rule: its colour is the water's temperature, ice white in February and sky blue by June, so the screen answers before you read it. Its mark is the degree sign drawn as a ring, which at a harbour bath is also a lifebuoy. I designed the flows, the system and the screens, built the app as a working prototype in the browser, drew its map from OpenStreetMap data, and made the page's hero a live harbour bath you can stir.
Before a swim, three questions
Is the water clean?Clean, tested 06:00
How cold is it?17.4 degrees
Is the sauna free?08:00 is free
Today that means three places: the city's bathing-water forecast, a weather app and a booking page. Tide answers all three on one screen, before you've left the house.
12m
07.12
TideTirsdag
Islands Brygge6 min. gang
17,4 grader
Rent vand, roligt, og saunaen er ledig kl. 08.00.
Luft 19°4 V04.25
RentTestet 06.00
Roligt14 her nu
08.00Sauna ledig
Badesteder nær digefter gåtid
01
01 · Clean or closed
A closed bath loses its colour.
After heavy rain the city closes a bath. Tide turns it grey and tells you when it reopens.
After a cloudburst, Copenhagen's sewers can overflow into the harbour, and the city closes the nearest baths until the water tests clean. Tide shows it the moment it happens: the bath turns grey, a red flag goes up and the next test time is right there. Switch on one alert and you're told when it reopens.
07:12 Every bath, nearest first
07:12 Svanemølle closes after the rain
07:13 Why, and when it's tested again
12:00 Clean again, and you hear first
17.4
02 · The colour is the temperature
Ice white in February.Sky blue by June.Turquoise in a heatwave.
Every screen takes the colour of the water, so you know how cold it is before you read the number.
Tide takes its colour from the water. Every screen is tinted by the temperature of the bath on it, so you know how cold it is before you read the number, and every bath in a list has a colour of its own. One ramp from 0° to 24°, ice white to turquoise, mixed in OKLab so each degree is an even step; ink type reads on all of it.
16 June at Islands Brygge
2.6°17.4°24.0°
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
08:00
03 · The sauna
Cold water, then heat. Two taps.
Book the next free slot in two taps; it waits on your lock screen, counting down.
Saunas have spread along the harbour, and the morning slots go first. Tide lists every free slot, books one in two taps and keeps it on your lock screen, counting down, with the temperature of the water you'll get into afterwards.
Every free slot this morning
Pick one
Booked
On the lock screen, counting down
In the Dynamic Island
06:00
04 · A day at the bath
The scroll is the clock.
Islands Brygge on 16 June, from the first swim at six to the evening light. The phone shows the same hour.
Islands Brygge on 16 June, from the first swim at six to the evening light. The harbour, the quay and the city are built from the national orthophoto, height model and OpenStreetMap, and the bath is measured from them. The crowd follows the app's own forecast hour by hour, and the phone shows the same hour as the water below it.
Drawn from OpenStreetMap data; each bath in its own water colour.
The map is drawn from OpenStreetMap data: the coastline, the lakes and the old moats, so it reads as Copenhagen at a glance. Each bath is a drop of its own water colour; a closed one turns white with a red flag.
The colour is the temperature.Ice white near freezing, sky blue by midsummer, turquoise on the warmest days. A closed bath loses its colour.
The degree sign is the mark.Drawn as a ring, it's also a lifebuoy, the one thing every harbour bath has.
Every screen has a waterline.Above it the answer, in the colour of the water; below it the detail, on white.
Direction
The first direction was dark.
The first version was the harbour at dawn: dark screens and bright numbers. On a pier at six in the morning it hid the one thing you came for, how cold the water is. So the water's own colour became the screen.
The water's colour is the world. Ink carries every word; heat and red are the two exceptions, and they mean one thing each.
Sky#52AEED · 58%The water on a June morning, 17.4°, and this page
Ice#EEF5F9 · 22%Winter water, and the paper below the waterline
Ink#0B2233 · 13%Every word, on every colour
Heat#FF6B3D · 5%The sauna, and nothing else
Flag#E5392B · 2%A closed bath
The mark
A ring on the waterline.
The degree sign is a ring, and a ring at a harbour bath is a lifebuoy. On the app icon it floats on the waterline; below the line the water bends it to the right and cuts it with three bands of light.
17The degree sign
A lifebuoy
The icon, on its grid
17.4
Albert Sans, two ends of one axis. Thin for the numbers you read from across a changing room, heavy for the few words you act on. Tabular figures, so temperatures line up in a list.
17.4°Temperature · 128 / 200
Islands BryggeTitle · 34 / 800
Clean water, quiet, and the sauna is free at 08:00.Answer · 17 / 500
FisketorvetRow · 16 / 650
Harbour bath · 14 min walkCaption · 12.5 / 450
Icons
Drawn for a wet thumb.
One 24 px grid and a 1.6 px stroke with round ends. Nothing finer than the stroke and nothing smaller than 3 px, so they hold up in low sun on a cold morning.
wave
thermo
check
flag
people
sauna
walk
ladder
buoy
tower
kayak
cafe
shower
changing
sun
sunrise
wind
bell
pin
user
beach
drop
clock
offline
Components
The parts, at size.
Rows carry the bath's own water in a swatch. Pills say one thing each. Heat appears only where there's a sauna; red only on a flag.
08:30Sauna 08:00ClosedQuiet
07 · Flows
Four paths, and what goes wrong on them.
A bath closes after rain, someone books your slot first, the pier has one bar, a visitor won't share their location. Each has its screen, and each screen leads somewhere.
Danish first, English one tap away
01
First open
Something useful before anything is asked, and a way round the one question.
Welcome / Location, Use my location: Today / Nearest first
Welcome / Location, Pick a bath: Welcome / Pick a bath
Today / Nearest first, You: You / First day
Welcome / Pick a bath, Fisketorvet: Today / Your bath
Welcome / Location
12m
07.12
Tide
Havnen i morges
17,2 grader
Nærmeste badested først.
Tide sorterer badestederne efter, hvor langt du skal gå. Din placering bliver på telefonen.
Today / Nearest first
12m
07.12
TideTirsdag
Islands Brygge6 min. gang
17,4 grader
Rent vand, roligt, og saunaen er ledig kl. 08.00.
Luft 19°4 V04.25
RentTestet 06.00
Roligt14 her nu
08.00Sauna ledig
Badesteder nær digefter gåtid
You / First day
12m
07.12
Dig
Siden i dag
Dukkerter
0
Koldeste
–
Morgener i træk
0
Hver dukkert i vandets farve0 indtil nu
J
F
M
A
M
J
J
A
S
O
N
D
Intet endnu. Hver dukkert farver sin dag i vandets farve.
Giv besked, når
Sprog
Welcome / Pick a bath
12m
07.12
Dit badested
Uden din placering er der ingen gåtider.
Today / Your bath
12m
07.12
TideTirsdag
FisketorvetDit badested
17,1 grader
Rent vand, roligt, og saunaen er ledig kl. 07.30.
Luft 19°4 V04.25
RentTestet 06.00
Roligt9 her nu
07.30Sauna ledig
Andre badestedernord til syd
02
After rain
A closed bath stays on the list, grey, with the next test time and one switch.
Today / Bath closed, Svanemølle: Bath / Closed
Bath / Closed, Tell me: Bath / Alert on
Bath / Alert on, 12:00, tested clean: Notification / Clean again
Today / Bath closed
12m
07.12
TideTirsdag
Islands Brygge6 min. gang
17,4 grader
Rent vand, roligt, og saunaen er ledig kl. 08.00.
Luft 19°4 V04.25
RentTestet 06.00
Roligt14 her nu
08.00Sauna ledig
Badesteder nær digefter gåtid
Bath / Closed
12m
07.12
TideTirsdag
Islands Brygge6 min. gang
17,4 grader
Rent vand, roligt, og saunaen er ledig kl. 08.00.
Luft 19°4 V04.25
RentTestet 06.00
Roligt14 her nu
08.00Sauna ledig
Badesteder nær digefter gåtid
Strand
Svanemølle Strand
16,0 grader
Ingen badning i dag. Kloakken løb over efter nattens regn.
Lukket efter skybrudKommunen tester igen kl. 12.00.
Giv besked, når vandet er rent
I dag
06Vandet i dag; søjlerne er badegæster21
Året her°C pr. måned
J
F
M
A
M
J
J
A
S
O
N
D
Sandstrand
Brusere
Bath / Alert on
12m
07.12
TideTirsdag
Islands Brygge6 min. gang
17,4 grader
Rent vand, roligt, og saunaen er ledig kl. 08.00.
Luft 19°4 V04.25
RentTestet 06.00
Roligt14 her nu
08.00Sauna ledig
Badesteder nær digefter gåtid
Strand
Svanemølle Strand
16,0 grader
Ingen badning i dag. Kloakken løb over efter nattens regn.
Lukket efter skybrudKommunen tester igen kl. 12.00.
Du får besked, så snart vandet er rent.
I dag
06Vandet i dag; søjlerne er badegæster21
Året her°C pr. måned
J
F
M
A
M
J
J
A
S
O
N
D
Sandstrand
Brusere
Notification / Clean again
12m
12.01
TideTirsdag
Islands Brygge6 min. gang
17,4 grader
Rent vand, roligt, og saunaen er ledig kl. 08.00.
Luft 19°4 V04.25
RentTestet 06.00
Roligt14 her nu
08.00Sauna ledig
Badesteder nær digefter gåtid
TidenuSvanemølle Strand er ren igenTestet kl. 12.00. Vandet er 16,0°.
03
The sauna
Two taps to book. If someone was faster, the next slot is one tap away.
Sauna / Free slots, 08:00: Sheet / Confirm
Sheet / Confirm, Book: Sauna / Booked
Sheet / Confirm, If it just went: Sheet / Slot taken
Sauna / Booked, Side button: Lock screen / Live Activity
Sheet / Slot taken, Book 08:30: Sauna / Booked 08:30
Sauna / Free slots
12m
07.12
Sauna
Ledig
08.00
Ledig ved Islands Brygge, 6 min. gang. Bagefter 17,4° vand.
Ledige tider i dag30 min. hver
Islands Brygge17,4° vand
Fisketorvet17,1° vand
La Banchina16,7° vand
Sandkaj16,4° vand
Sheet / Confirm
12m
07.12
Sauna
Ledig
08.00
Ledig ved Islands Brygge, 6 min. gang. Bagefter 17,4° vand.
Ledige tider i dag30 min. hver
Islands Brygge17,4° vand
Fisketorvet17,1° vand
La Banchina16,7° vand
Sandkaj16,4° vand
Islands Brygge
Sauna kl. 08.00?
30 minutter, bagefter 17,4° vand. Tag et håndklæde med; omklædningen åbner kl. 07.00.
Sauna / Booked
12m
07.12
Sauna
Booket
08.00
Din sauna ved Islands Brygge. Bagefter 17,4° vand; den er på låseskærmen, til du er der.
Ledige tider i dag30 min. hver
Islands Brygge17,4° vand
Fisketorvet17,1° vand
La Banchina16,7° vand
Sandkaj16,4° vand
Lock screen / Live Activity
12m
Sauna
Booket
08.00
Din sauna ved Islands Brygge. Bagefter 17,4° vand; den er på låseskærmen, til du er der.
Ledige tider i dag30 min. hver
Islands Brygge17,4° vand
Fisketorvet17,1° vand
La Banchina16,7° vand
Sandkaj16,4° vand
tirsdag 16. juni
07.48
17,4°BryggeRentTestet 06.00
Sauna 08.00Islands Brygge · vand 17,4°
12min
Gå senest 07.536 min. gang
Sheet / Slot taken
12m
07.12
Sauna
Ledig
08.30
Ledig ved Islands Brygge, 6 min. gang. Bagefter 17,4° vand.
Ledige tider i dag30 min. hver
Islands Brygge17,4° vand
Fisketorvet17,1° vand
La Banchina16,7° vand
Sandkaj16,4° vand
Islands Brygge
Kl. 08.00 blev lige taget.
En anden bookede den, mens du kiggede. Kl. 08.30 er ledig, bagefter 17,4° vand.
Sauna / Booked 08:30
12m
07.12
Sauna
Booket
08.30
Din sauna ved Islands Brygge. Bagefter 17,4° vand; den er på låseskærmen, til du er der.
Ledige tider i dag30 min. hver
Islands Brygge17,4° vand
Fisketorvet17,1° vand
La Banchina16,7° vand
Sandkaj16,4° vand
04
Bad signal
On a pier with one bar, the last answer stays, with its time on it.
Today / Loading, No answer in 8 s: Today / Offline
Today / Offline, Try again: Today / Updated
Today / Loading
12m
07.12
TideTirsdag
Tjekker vandet
Badesteder nær digefter gåtid
Today / Offline
12m
07.12
TideTirsdag
Offline · fra kl. 06.40
Islands Brygge6 min. gang
17,4 grader
Fra kl. 06.40. Regn kan lukke et badested, så tjek igen, før du hopper i.
Luft 19°4 V04.25
RentTestet 06.00
RoligtFra kl. 06.40
08.00Sauna ledig
Badesteder nær digefter gåtid
Today / Updated
12m
07.12
TideTirsdag
Islands Brygge6 min. gang
17,4 grader
Rent vand, roligt, og saunaen er ledig kl. 08.00.
Luft 19°4 V04.25
RentTestet 06.00
Roligt14 her nu
08.00Sauna ledig
Badesteder nær digefter gåtid
Opdateret 07.13
Under the hood
Measured 18 October 2026, Chrome on a MacBook Pro
Triangles a frame
94
None of it is modelled: the water is simulated and lit per pixel, in 47 passes of two triangles each. WebGL2.
Download
17.0 MB
0.8 MB before the first frame, 13.5 MB on a phone.
Slow phone
60 fps
95 % of frames under 16.8 ms, on a phone screen with the CPU slowed four times.
If 3D can't run
Flat sky blue in place of the water. The phone and its app work the same.
