Mark
The mark is a single solid square sized by --logo-asc-ratio × --logo-size (default 0.78 × em). It carries no rounded corners, no inner cut-out, no proprietary glyph — the square is the identity.
Mark at every preset scale
hero · 96
print · 40
nav · 26
app · 18
favicon · 16
Color
currentColor only. The mark inherits ink from its surface:
- Light surface →
var(--fg)=#0D0D0D. - Dark surface →
#F4F1EC(warm white). Never pure#FFF.
Don't apply a brand orange. The wordmark is monochrome by rule.
light surface
dark surface
Minimum size
- Screen: 16 px (favicon).
- Below 28 px, drop to mark-only — the wordmark loses optical weight.
- Print: 8 mm.
Class hook
.matter-mark — sized as width: calc(var(--logo-size) * var(--logo-asc-ratio)).
Use
.matter-mark and let it inherit color from its parent surface.Don't fork a SVG to recolor the mark — the system has one source of truth.