Brand

The identity is two pieces: a solid black square and the wordmark matter set in Funnel Display 800. They lock up off a single --logo-size token — every secondary measurement (mark side, gap, tagline) is a ratio of that em, so a single knob scales the whole signature.

Color is always currentColor; the wordmark stays monochrome and inherits from its surface. Reach for canonical class hooks .matter-lockup / .matter-mark / .matter-wordmark / .matter-tagline in product — never re-implement the geometry locally.

Philosophy

Freedom · open spaces · dreamy textures · colour · abstract. Five words that govern every brand decision — what we put on the page, what we leave off, how the surfaces breathe, how colour earns its place. The mark and the wordmark are deliberately reduced so the surfaces around them can be expansive; the colour layer (peach, lavender, sage, amber) carries the dream.

These five words are the canonical brand frame. Any visual decision — a layout, a colour application, a component composition, a page hero — should land obviously on at least three of them. If a design doesn't, it's drifting; reach for fewer elements, more space, more saturated colour, or a more abstract surface, in that order.

Tone

Precise · confident · humble · future. The four-word tone Matter writes in, across marketing, docs, dashboard, OpenAPI descriptions, error messages, CMS body content. Long form at Usage / Voice — Tone. Brand and tone are read together: the philosophy governs the surface, the tone governs the words on it.

Identity at hero scale

Five sub-pages

• Mark — the solid square; safe area; minimum size.
• Wordmark — Funnel Display 800, lowercase, locked tracking.
• Lockup — parametric mark + wordmark with the --logo-asc-ratio / --logo-gap-ratio knobs.
• Tagline — canonical token strings: title-case, all-caps, mid-dotted mono.
• Tokens — the full surface of --brand-* and --logo-* tokens.