Mizu Greige Bronze

Slow ceramic restraint. 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.

Mizu Greige Bronze

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: oklch(0.945 0.006 80);
  --color-surface-1: oklch(0.92 0.008 80);
  --color-surface-2: color-mix(in oklab, oklch(0.92 0.008 80), oklch(0.27 0.012 80) 18%);
  --color-surface-3: color-mix(in oklab, oklch(0.92 0.008 80), oklch(0.27 0.012 80) 40%);
  --color-ink: oklch(0.27 0.012 80);
  --color-ink-muted: color-mix(in oklab, oklch(0.27 0.012 80), oklch(0.945 0.006 80) 32%);
  --color-ink-faint: color-mix(in oklab, oklch(0.27 0.012 80), oklch(0.945 0.006 80) 54%);
  --color-accent: oklch(0.51 0.07 70);
  --color-accent-2: oklch(0.85 0.012 80);
  --color-ink-invert: oklch(0.945 0.006 80);
  --color-line: color-mix(in oklab, oklch(0.27 0.012 80), transparent 90%);
  --radius-base: 0.75rem;
  --color-field: oklch(0.51 0.07 70);
  --color-field-ink: oklch(0.945 0.006 80);
  --color-inverse: oklch(0.27 0.012 80);
  --color-inverse-ink: oklch(0.945 0.006 80);
}

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.

The design system Gallery first sets it with Editorial Sans Precision.

Next: The icons every build uses

Give your AI the direction.

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