Before a single product is built, an architecture must hold its own weight. What follows is the visual grammar of Matrix — three candidate marks, a disciplined palette, a typographic system, and the iconography that carries ideas across every surface the studio will ever touch.
An M assembled from five nodes and the relations between them. Read close — a constellation. Read at a glance — a letter. The mark is a graph: every node is a discipline, every edge a collaboration.
5 nodes · 6 edges · stroke 1.25 on 40-grid · centre node is the only weighted point — the studio.
Scientific, infrastructural, calm. Best for research surfaces, papers, and engineering.
Two angular gold panels frame an X-thread suspended between them — the moment intelligence becomes architecture. Inspired by the brand reference: structure on the outside, cognition within.
2 mirrored trapezoids · 4 corner nodes · centre point in gold · thin X cross of currentColor.
Editorial, ceremonial, jewel-like. Best for the cover, brand book, and presentation systems.
A structural M dissected by a single horizontal gold line — the meridian where intelligence meets impact. The most reductive mark in the family: pure geometry plus one decisive cut.
4-stroke M · 1 horizon stroke in gold · 1 centre node · square line caps for archival weight.
Sovereign, monumental, archival. Best for signatures, awards, certificates, civic work.
Recommendation: Direction II — Aperture as the primary, with Lattice as the small-scale glyph (favicon, app icon at <24px), and Meridian reserved for monograms, foiling, embossing.
The palette is monochrome by ratio — 90% ink and grey, 10% gold. Gold is never decorative; it appears only where the system makes a decision: an anchor, a hyperlink, a rule, an instrument.
The quiet
architecture.
Inter carries the studio's voice in body, navigation, and interface. Used at weights 300 and 400, with measured tracking for editorial calm. Numerals are tabular. Quotes are typographic. Hyphens are deliberate.
0.000 — for indices, eyebrows, and instruments.
No emoji. No ligatures. Only signal.
| --background | #050505 |
| --foreground | #F2F2F2 |
| --accent | #C9A14A |
| --muted-foreground | #9E9E9E |
| --border | rgba(255,255,255,.08) |
| --font-display | Instrument Serif |
| --font-sans | Inter |
| --font-mono | IBM Plex Mono |
| tracking-tight | -0.015em |
| tracking-eyebrow | 0.22em |
| grid-max | 1440px |
| gutter | 32 / 56 px |
| section-y | 160 px |
| radius | 0 |
| hairline | 1px |
| breathe | 9s ease-in-out ∞ |
| rise | 1.2s cubic-bezier(.2,.7,.2,1) |
| draw | 3.4s ease-out |
| drift | 11s ease-in-out ∞ |
| duration-default | 500ms |
Each chapter of the studio earns one symbol. Drawn at 0.6 stroke, on a generous grid, without ornament. A library of figures rather than icons — meant to be contemplated, not clicked.
Next chapters in the system: motion language, mobile UI, dashboard grammar, brand book (100+ pages), packaging philosophy, environmental signage.
Return to the Cover →