Ocean Breeze

Clean professional depth. A colour palette from the Struq library, with a role for every colour: a ground, a surface, an ink, two accents, a full-strength field and a contrasting section.

All palettes

Which colour does what?

Seven roles. Click a band to copy its value.

How does it look on a page?

This page section reads the palette’s sixteen tokens and nothing else, the way every Struq block does.

Ocean Breeze

A ground, an ink and one accent.

Text sits on surface-0 in the ink. Everything raised steps up the surface ladder.

Primary actionA quiet link

Surface 1

A panel, one step up from the page.

Surface 2

An input or a hovered row, a step further.

The field.

One scene at full strength, in its own ink.

The inverse: one section that turns the page around.

What do I copy?

The palette as the sixteen tokens every Struq block reads. Paste them into your stylesheet, or give the prompt to your agent.

:root {
  --color-surface-0: #EDF2F4;
  --color-surface-1: #D9E2EC;
  --color-surface-2: color-mix(in oklab, #D9E2EC, #0D2740 18%);
  --color-surface-3: color-mix(in oklab, #D9E2EC, #0D2740 40%);
  --color-ink: #0D2740;
  --color-ink-muted: color-mix(in oklab, #0D2740, #EDF2F4 32%);
  --color-ink-faint: color-mix(in oklab, #0D2740, #EDF2F4 54%);
  --color-accent: #0A6C74;
  --color-accent-2: #486581;
  --color-ink-invert: #EDF2F4;
  --color-line: color-mix(in oklab, #0D2740, transparent 90%);
  --radius-base: 0.75rem;
  --color-field: #0A6C74;
  --color-field-ink: #EDF2F4;
  --color-inverse: #0D2740;
  --color-inverse-ink: #EDF2F4;
}

How does the skill use it?

When a brief calls for this mood, your agent picks it in the plan, and the skill writes these tokens into your project as the one block every part of the site reads.

The skill carries the palettes, so it needs no connection. With the Struq MCP connected, struq_richting returns a palette like this one for any brief, together with a type pairing and a photo pack.

Next: The icons every build uses

Give your AI the direction.

Paste it into Claude Code. It runs the install, then /struq is ready.