Fashion Contrast

A type pairing from the Struq library: Bodoni Moda for the display, Urbanist for the text, and Bodoni Moda italic for the one word that turns a line.

All type pairings

Which faces, for what?

Three roles, each set in its own face. Click a stack to copy it.

DisplayHeadlines, at weight 400.
Bodoni Moda
TextEverything you read after the headline.
Urbanist
AccentItalic, on one word per page at most.
Bodoni Moda

How does it set a page?

At its own scale: clamp(3.5rem, 13vw, 18rem), weight 400, line height 0.9, tracking -0.02em.

Set the page in one voice.

The text face carries everything after the headline: the reading, the captions, the buttons.

It sits quiet so the display face can be loud. The italic accent appears once on a page, on the one word that turns the line, and nowhere else. Two faces and one italic are enough for a whole site; a third face is where a page starts to look assembled.

What do I copy?

The stacks and the display scale as CSS, or the whole pairing as a prompt with the font link in it.

:root {
  --font-display: "Bodoni Moda", Georgia, serif;
  --font-body: "Urbanist", ui-sans-serif, system-ui, sans-serif;
  --font-accent: "Bodoni Moda", Georgia, serif;
}
h1 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 13vw, 18rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
body {
  font-family: var(--font-body);
}
em.turn {
  font-family: var(--font-accent);
  font-style: italic;
}

How does the skill use it?

Your agent chooses a pairing by temperament in the plan, and the skill loads its faces at their real weights and writes the scale into the token block.

The skill carries the pairings, so it needs no connection. With the Struq MCP connected, struq_richting returns a pairing like this one for any brief, together with a palette 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.