Live demo of the Full brandbook blueprint · Onda is a fictional brand.All blueprintsJoin the waitlist
Skip to content
Onda
Colour5/12

Chapter 5 of 12

Colour

From first light to the last swim

Our palette comes straight from a day on the coast: the sun going down, the harbour at noon, the sky after a swim and the deep blue of a summer night. Warm, but never loud.

Primary palette

Four colours do most of the work

Click a value to copy it. Use the CMYK values on coated paper and the Pantone references for signage, textiles and merchandise.

Sunset
Our signature. Accents, key buttons and big moments.
Harbour
Links, sea and secondary actions.
Night
Text, the logo and dark backgrounds.
Shell
Our 'white'. Backgrounds and space.

Supporting palette

Colours for warmth and detail

Use these in illustrations, tiles, charts and backgrounds for quieter content. They never replace Sunset as the accent.

Sky
Light backgrounds, maps and calm panels.
Apricot
Soft warmth behind photos and quotes.
Lemon
Small highlights only: icons, food, labels.
Olive
Nature, gardens and our sustainability content.

Proportion

Mostly light, a little sun

A typical Onda layout is mostly Shell and Night, with Sunset as the one accent that draws the eye. Supporting colours appear in small doses. If a page feels orange, there's too much Sunset.

  • Shell 38% · Backgrounds and space
  • Night 20% · Text, logo and dark panels
  • Sunset 16% · The one accent: buttons, highlights
  • Harbour 12% · Links, sea, information panels
  • Sky 6% · Light panels and maps
  • Apricot 4% · Warmth behind photos and quotes
  • Lemon 2% · Tiny highlights only
  • Olive 2% · Nature and sustainability

Accessibility

Pairs that pass

We follow WCAG 2.2 AA: at least 4.5:1 for body text and 3:1 for large text (24 px, or 19 px bold) and icons. The ratios below are calculated live — try your own text, or swap the colours. The last two pairs fail on purpose.

Preview as
Aa
15.0:1
Night on Shell

The quick brown fox jumps over the lazy dog.

AAA
Aa
4.7:1
Night on Sunset

The quick brown fox jumps over the lazy dog.

AA
Aa
5.1:1
Shell on Harbour

The quick brown fox jumps over the lazy dog.

AA
Aa
9.0:1
Night on Sky

The quick brown fox jumps over the lazy dog.

AAA
Aa
8.6:1
Night on Apricot

The quick brown fox jumps over the lazy dog.

AAA
Aa
4.5:1
Shell on Olive

The quick brown fox jumps over the lazy dog.

AA
Aa
3.1:1
Sunset on Shell

The quick brown fox jumps over the lazy dog.

AA large text only
Aa
3.3:1
White on Sunset

The quick brown fox jumps over the lazy dog.

AA large text only
Aa
1.5:1
Lemon on Shell

The quick brown fox jumps over the lazy dog.

Not for text

Contrast is calculated with the WCAG 2.2 formula. AA: at least 4.5:1 for body text and 3:1 for large text (24 px, or 19 px bold); AAA: 7:1.

Do
  • Use Night for all body text, on Shell, white, Sky or Apricot.
  • Use Sunset for one thing per screen: the main button, a highlight or a headline.
  • Pair Harbour with Shell text for calm, informative panels.
Don't
  • Don't set small white or Shell text on Sunset — it fails contrast.
  • Don't use Lemon for text or large backgrounds.
  • Don't create new tints, gradients or neon versions of our colours.

Details

Colour in production

Print: coated and uncoated paper
Use the CMYK values on coated stock. On uncoated paper, Sunset prints darker and duller: use Pantone 7579 U or ask the printer for a proof. Shell is never printed — it's the paper. We use a warm white uncoated stock (about 90% whiteness) for menus and stationery.
Screen
Use HEX or RGB values on screens. Button states: hover is Sunset at 90%, pressed is #C9542A. Focus rings are 2 px Harbour with a 2 px Shell offset, so they're visible on every background.
Tints and muted text
The only tints we use are Night at 70% (#5A6485) for secondary text and Night at 10% for lines and dividers. Supporting colours may be used at 40% behind photos. Nothing else.
Charts and maps
Order for data series: Harbour, Sunset, Olive, Sky, Apricot. Label lines directly instead of using a legend. On maps, the sea is Sky, land is Shell and our houses are Sunset dots.

Questions about this guide?

Contact Lucía

Last updated 24 Sept 2026

Made with brandbooks