I.
The 369 color system
One rule generates the entire palette: every hex digit must be a 3, a 6, or a 9. From the thousands of colors a picker offers, the rule leaves a handful — and we keep nine, arranged as three triads of three.
A constraint this hard sounds limiting. It is the opposite: it ends debate. No near-duplicate blues, no drift between screens — any color either belongs to the system or it does not.
Triad 3
--steel
#336699
primary structural
--terra
#993333
heat, error
--void
#000000
background — absolute
Triad 6
--indigo
#333399
depth, info
--umber
#996633
warm caution
--deep
#000033
background — surface
Triad 9
--teal
#339999
interactive, live
--clay
#996666
soft warm
--lift
#003366
background — elevated
#369369 — the ceremonial seal, the one color that is the rule. Reserved for moments of meaning: the logo glow, the certified mark, the live signal.
Void #000 is a deliberate exception — like #fff, it carries a digit outside 3·6·9 on purpose, so the system keeps a floor for contrast and shadow, and an ink. And the ink rule itself: type is always white — never another color — varied only by opacity.
II.
The tokens we choose, and why
Atoms alone are just paint. Tokens give them grammar: named decisions that components consume so that no one ever chooses a color, a size, or a corner at the moment of building.
Atom → token → component
01 · Atom
Steel
#336699
A raw 369 color. Just paint — no meaning yet.
02 · Token
--interactive
The atom, given a semantic name: “this is what buttons use.”
03 · Component
Asks for the token, never the hex. Rendered live from the system.
Components ask for --interactive or --surface, never a hex. Rebrand the atom once and every screen follows — meaning survives, values are allowed to change.
Status speaks 369 — each state is an atom
No traffic-light green, no alarm yellow. System states borrow the brand's own atoms, so feedback never looks bolted on.
A perceptual neutral spine — 50 → 950
Eleven greys built in OKLCH with a subtle blue undertone, stepped by perceived lightness rather than RGB math — so contrast behaves predictably end to end.
Two typefaces, two jobs
Aa 369
JetBrains Mono — headings & code. Technical, exact.
Aa 369
IBM Plex Sans — body. Readable, professional.
Hierarchy comes from the pairing, not from decoration — and type itself stays white, varied only by opacity (the ink rule).
III.
Grids & geometry
The same 3–6–9 progression that governs color governs shape. Three figures recur across every Trinity surface, each carrying its own register:
3 · Triangle / IVM
Foundations
The indeformable base. Diamond’s tetrahedral network.
3 × 120°
6 · Hexagon
Organic · Emergent
Graphene, honeycomb, swarm. Nature’s way of scaling.
6 × 60°
9 · Square / Cubic
Holy · Complete
The square that returns to itself. Closure, the One.
4 × 90°
Underneath it all sits the isotropic vector matrix — the triangle lattice you saw breathing behind the headline. Margins, gutters, and type rhythm snap to it, so unrelated pages still feel like rooms of the same building.
IsotropicVectorMatrix
The background plane
The triangle lattice every Trinity surface is built on — margins, gutters and rhythm all snap to it. The red dot is the origin vertex.
TriCoordinatenSystem
The Tri-Cube coordinates
Three families of lanes give every triangle a unique (a, b, c) address that sums to 1 or 2. Click to light a cell and read its coordinate.
IV.
The components — live
These aren't screenshots. Every element below is imported from @trinity/design-system — the same package behind this header, this page, and every Trinity product.
CTA Button — the flagship, triangle-mesh on hover
TrinitySymbol & NumberTicker — the brand, in motion
0 h
saved / year · evidence in motion
Badge — status states speak 369
HexCheckbox — the 6-tier geometry, as an input
MagicCard — a surface that follows the cursor
Your design system
Atoms → tokens → primitives → product. Move your cursor across the card — the border-glow tracks it. Every element on this page ships from one package.
Built once, felt everywhere
Change an atom, and the whole brand follows — across web, Mail and PDF. Sharp corners, 369 color, one geometry.
The full library — primitives, Mail & PDF
Why a design system makes a brand resonate
Resonance is repetition with intent. When the same nine colors, the same two typefaces, and the same geometry meet your audience on every page, recognition stops being a logo and becomes a feeling — this is them, before a single word is read.
And resonance is why people love a platform. Loved platforms get used, trusted, recommended; unloved ones get worked around — that is where the time goes to die. A design system is how the love survives growth: new features, new pages, new hands on the codebase, and the brand never dilutes.
Your project can have this too. Not a template — a system of your own, built from your brand's constraints, that makes every surface unmistakably yours.
Live components, every token, every state — in Storybook.