Foundations

Typography

The Bricolage + Hanken type scale, from display to caption.

Type scale

Bricolage Grotesque for display, Hanken Grotesk for body — wired to the --font-display / --font-sans tokens.

Spira

Bricolage Grotesque, large & bold

Hanken Grotesk handles body copy — readable, warm, and rounded.

Muted text for secondary information and captions.

<div className="flex flex-col gap-4">
  <p className="font-display text-display-2xl leading-none tracking-tight">Spira</p>
  <p className="font-display text-display-lg tracking-tight">
    Bricolage Grotesque, large & bold
  </p>
  <p className="text-lg">
    Hanken Grotesk handles body copy — readable, warm, and rounded.
  </p>
  <p className="text-sm text-muted">
    Muted text for secondary information and captions.
  </p>
</div>