Styleguide

Colours, type and parts used across this template.

Colour

Background/Page

Background/Page

#FFFFFF

Background/Soft

Background/Soft

#EEF2F4

Background/SoftHover

Background/SoftHover

#E3E9EC

Background/Sea

Background/Sea

#04395A

Text/Primary

Text/Primary

#0F1B24

Text/Secondary

Text/Secondary

#0F1B24 at 62%

Text/OnSea

Text/OnSea

#FFFFFF

Text/OnSeaSecondary

Text/OnSeaSecondary

#FFFFFF at 70%

Background/Frost

#FFFFFF at 88%

Background/Glass

#FFFFFF at 62%

Text/Tertiary

#0F1B24 at 48%

Background/SeaHover

#0A4A73

Accent/Signal

Accent/Signal

#F2542D

Accent/SignalHover

Accent/SignalHover

#E0461F

Type

Display · 88 / 68 / 48 px

Display · 88 / 68 / 48 px

Sail between the islands

Title · 44 / 38 / 32 px

Title · 44 / 38 / 32 px

Sail between the islands

Sail between the islands

Heading · 20 / 19 / 18 px

A ship sails between three islands.

Body · 17 / 17 / 16 px

Body · 17 / 17 / 16 px

A ship sails between three islands.

Body Medium · 17 / 17 / 16 px

Body Medium · 17 / 17 / 16 px

A ship sails between three islands.

Small · 14 / 14 / 14 px

Small · 14 / 14 / 14 px

A ship sails between three islands.

UI · 16 / 16 / 15 px

UI · 16 / 16 / 15 px

A ship sails between three islands.

Parts

Hover states answer in 0.15 s: buttons darken their fill, the close button deepens and project covers zoom inside their frame. In the header a glass droplet glides to the link under the pointer.

Hover states answer in 0.15 s: buttons darken their fill, the close button deepens and project covers zoom inside their frame. In the header a glass droplet glides to the link under the pointer.

Archipelago

Models

The ship, the three island buildings, palms, rowboat, crates, shrubs and gulls are GLB files. Swap any of them in the component controls.

Colours

Deep sea, open sea, shallows, sky, horizon, sand, grass, rock, glass and button each have their own control.

Waves

Wave height and ship speed are sliders. Music, music volume and sea volume set the sound. Reduced motion calms the sea on its own.

Sun

Sun height and sun angle set the light. Time of day starts the scene by day, by night or by the visitor’s clock.

Planning a campaign or a film?

Corran Studio

Rua do Vento Leste 27

Lisbon, Portugal

© 2026 Teo Corran

Planning a campaign or a film?

Corran Studio

Rua do Vento Leste 27

Lisbon, Portugal

© 2026 Teo Corran

Planning a campaign or a film?

Corran Studio

Rua do Vento Leste 27

Lisbon, Portugal

© 2026 Teo Corran

Create a free website with Framer, the website builder loved by startups, designers and agencies.