01 — Tri
Tri and lattice.
The logo. Three bars of an equilateral triangle that unlock, turn 120° and lock again. Every upward triangle of a triangle grid holds one, so the pattern is made of nothing but marks.
Download SVG
Brand
Style guide.
Three marks that share one idea: three bars with three-fold symmetry. Each tessellates into its own pattern. Then the colour, type and parts every page is built from.
Marks and patterns
One mark, three ways to tile it.
The Tri is the logo; use it on its own. Shell and Spoke are its family, for product marks and backgrounds. Patterns are inspired by kikkō and interlocking hex designs, drawn from the Tri's own bars. Motion turns each mark by its own symmetry, so it always lands where it began.
02 — Shell
Shell and honeycomb.
Kikkō, the Japanese tortoiseshell hexagon. Three chevrons wind round it the way the Tri's bars do, with the Tri at its centre. It tiles as a honeycomb; the centres turn while the shells stay still.
Download SVG
03 — Spoke
Spoke and interlock.
The inverse. The Tri's three bars turned outward into a Y, held in a contour. On a triangle grid the arms leave hexagonal gaps, each filled by a small hex. A 60° turn swaps every Y for its mirror.
Download SVG
Colour
Paper, ink and one accent.
Everything is paper and ink. The accent marks the one action that matters on a view. Status colours belong to the hypothesis tree only.
Paper#F4F4F1 ·
--paperPage backgroundPaper raised#FFFFFF ·
--paper-raisedCards, menus, fieldsPaper sunk#FBFBF8 ·
--paper-sunkHover, drop areasInk#16171A ·
--inkText, marks, ink sectionsInk 2#35383D ·
--ink-2Body copyInk 4#5A5D63 ·
--ink-4Labels, captionsAccent#1F4D4A ·
--accentOne filled button per view, the second tone in patternsAccent on ink#7A9A95 ·
—Second tone of a pattern on ink onlyLine#D9D9D2 ·
--line1px hairlinesLine strong#C7C7BF ·
--line-strongField and card bordersType
IBM Plex Mono, and nothing else.
One typeface at weights 400, 500 and 600. Headlines are sentences that end with a full stop.
Display · 500
Find the right investors.
Section title · 500
Build a hypothesis tree.
Lead · 400
A short line that says what the page is for, in plain words.
Body · 400
Body copy stays short. No hype words, emoji or exclamation marks.
Eyebrow · 400
Capital markets · Technology
Components
Square, hairline, flat.
1px hairlines, never shadows. Square corners everywhere; the status pill is the only rounded shape. One filled accent button per view.
Primary action.btn
Small.btn--sm
Text linkLinks end in an arrow
Supported Testing.pill
On ink.btn--inverse
TextureHero, closing ink section, footer
Rules
How to use the marks.
- One colour. A mark is ink on paper or paper on ink. Never the accent, a gradient or an outline of itself.
- Clear space. Keep a margin of half the mark's height on every side. Smallest size: 16 px.
- Turn, don't tilt. Marks only move by their own symmetry: 120° for Tri and Shell, 60° for Spoke. Never rotate one to an arbitrary angle or distort it.
- Patterns stay quiet. Use a pattern where texture goes (hero, closing ink section, footer), behind no more than a headline, and fade it out under text.
- Motion is optional. Every animation stops for people who prefer reduced motion, and the static version must work on its own.