Lumen Firelit Flour

Warm firelit editorial. 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.

Lumen Firelit Flour

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.972 0.012 75);
  --color-surface-1: oklch(0.995 0.006 75);
  --color-surface-2: color-mix(in oklab, oklch(0.995 0.006 75), oklch(0.24 0.02 55) 18%);
  --color-surface-3: color-mix(in oklab, oklch(0.995 0.006 75), oklch(0.24 0.02 55) 40%);
  --color-ink: oklch(0.24 0.02 55);
  --color-ink-muted: color-mix(in oklab, oklch(0.24 0.02 55), oklch(0.972 0.012 75) 32%);
  --color-ink-faint: color-mix(in oklab, oklch(0.24 0.02 55), oklch(0.972 0.012 75) 54%);
  --color-accent: oklch(0.555 0.15 48);
  --color-accent-2: oklch(0.19 0.02 45);
  --color-ink-invert: oklch(0.972 0.012 75);
  --color-line: color-mix(in oklab, oklch(0.24 0.02 55), transparent 90%);
  --radius-base: 0.75rem;
  --color-field: oklch(0.555 0.15 48);
  --color-field-ink: oklch(0.972 0.012 75);
  --color-inverse: oklch(0.24 0.02 55);
  --color-inverse-ink: oklch(0.972 0.012 75);
}

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 Story led sets it with Serif Editorial.

Next: The icons every build uses

Give your AI the direction.

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