Velar Graphite Scarlet

Mechanical performance 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.

Velar Graphite Scarlet

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.16 0.005 40);
  --color-surface-1: oklch(0.205 0.006 40);
  --color-surface-2: color-mix(in oklab, oklch(0.205 0.006 40), oklch(0.96 0.004 60) 18%);
  --color-surface-3: color-mix(in oklab, oklch(0.205 0.006 40), oklch(0.96 0.004 60) 40%);
  --color-ink: oklch(0.96 0.004 60);
  --color-ink-muted: color-mix(in oklab, oklch(0.96 0.004 60), oklch(0.16 0.005 40) 32%);
  --color-ink-faint: color-mix(in oklab, oklch(0.96 0.004 60), oklch(0.16 0.005 40) 54%);
  --color-accent: oklch(0.63 0.225 25);
  --color-accent-2: oklch(0.305 0.008 40);
  --color-ink-invert: oklch(0.16 0.005 40);
  --color-line: color-mix(in oklab, oklch(0.96 0.004 60), transparent 90%);
  --radius-base: 0.75rem;
  --color-field: oklch(0.63 0.225 25);
  --color-field-ink: oklch(0.16 0.005 40);
  --color-inverse: oklch(0.96 0.004 60);
  --color-inverse-ink: oklch(0.16 0.005 40);
}

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.