Lockup

The lockup is parametric. Set font-size on .matter-lockup (or use the presets .matter-lockup--app/--nav/--hero/--print) and the mark side, gap, and tagline scale together off a single em.

Five named presets

hero · 96matter

print · 40matter

nav · 26matter

app · 18matter

Light and dark

light surface · defaultmatter

dark surface · invertedmatter

Em ratios

Token	Ratio	Role
`--logo-asc-ratio`	`0.78`	Mark side / em
`--logo-gap-ratio`	`0.20`	Gap between mark and wordmark / em
`--logo-tag-italic-ratio`	`0.20`	Title-case tagline / em
`--logo-tag-caps-ratio`	`0.105`	All-caps tagline / em

Surface presets

Token	Value	Use
`--logo-size-app`	`18px`	App-shell topbar
`--logo-size-nav`	`26px`	Marketing nav
`--logo-size-print`	`40px`	Print and PDF
`--logo-size-hero`	`96px`	Brand splash / OG images

Below 28 px, drop to mark-only.

Markup

<a href="/" class="matter-lockup matter-lockup--app">
  <span class="matter-mark" aria-hidden="true" />
  <span class="matter-wordmark">ma<span class="tt-pull">tt</span>er</span>
</a>

Apply .matter-lockup--app / --nav / --hero / --print and let the ratios resolve the geometry.

Don't hard-code the gap in px. Every secondary measurement is a ratio of the em.