Substrate Industrial Ice

Industrial material dark. 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.

Substrate Industrial Ice

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.17 0.009 64);
  --color-surface-1: oklch(0.215 0.011 64);
  --color-surface-2: color-mix(in oklab, oklch(0.215 0.011 64), oklch(0.95 0.005 72) 18%);
  --color-surface-3: color-mix(in oklab, oklch(0.215 0.011 64), oklch(0.95 0.005 72) 40%);
  --color-ink: oklch(0.95 0.005 72);
  --color-ink-muted: color-mix(in oklab, oklch(0.95 0.005 72), oklch(0.17 0.009 64) 32%);
  --color-ink-faint: color-mix(in oklab, oklch(0.95 0.005 72), oklch(0.17 0.009 64) 54%);
  --color-accent: oklch(0.78 0.12 235);
  --color-accent-2: oklch(0.31 0.015 64);
  --color-ink-invert: oklch(0.17 0.009 64);
  --color-line: color-mix(in oklab, oklch(0.95 0.005 72), transparent 90%);
  --radius-base: 0.75rem;
  --color-field: oklch(0.78 0.12 235);
  --color-field-ink: oklch(0.17 0.009 64);
  --color-inverse: oklch(0.95 0.005 72);
  --color-inverse-ink: oklch(0.17 0.009 64);
}

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.