Logo
The wordmark and the mark.
The wordmark is the primary logo. The mark, the D on a petrol tile, is for square contexts like favicons and app icons. Give both clear space of at least the height of the D on every side.
Color
Petrol on a tinted monochrome.
Near-white and near-black tinted toward petrol, with one restrained petrol accent used only where something is interactive or active.
Light
Paper
#FBFCFC
--background
Ink
#0F1C1C
--foreground
Graphite
#3C4A4A
body
Mist
#6E7B7B
--muted-foreground
Hairline
#DCE3E1
--border
Petrol
#123F42
--primary
Petrol wash
#E7EFEE
--secondary
Petrol line
#B7D0CD
--accent-line
Dark
Ground
#0B1413
--background
Raised
#111E1D
--card
Ink
#EDF2F0
--foreground
Mist
#7E8E8B
--muted-foreground
Hairline
rgba(237,242,240,.13)
--border
Petrol
#58ACA2
--primary
Typography
Three faces, three jobs.
Urbanist · headings and body
Capable AI agents.
Tight tracking for headings, comfortable for body. The workhorse of the system.
Newsreader · quotes and numerals
Software should notice the right things.
$18,420 · 2 min · 1,000+
Geist Mono · labels and data
By the numbers
Motif
Hairlines that carry meaning.
The signature is a field of ultra-thin lines and a vertical fluted-glass panel. The same vocabulary encodes different functions across the product.
Motif · applications
One motif, eight jobs.
Every variant keeps the same vocabulary, thin strokes with petrol only where it means something, but each encodes a different function. Presence reacts to the cursor; the rest animate on their own.
Reactive
Presence
Heroes, empty states, and the moment the agent is listening.
Data
Signal
Metrics, digests, and status at a glance.
Process
Working
Loading, a running task, and a streaming reply.
Static
Structure
Decks, documents, and dense dashboards.
Live
Pulse
Background monitoring, scheduled runs, an idle agent still awake.
Connection
Flow
Connected tools, integrations, and routing.
Threshold
Alert
Anomalies, thresholds, and things that need a look.
Attention
Focus
A primary call to action, an onboarding step, or notice this.
Motif · patterns
Backgrounds and dividers from the same hairlines.
A fine dot grid, fine vertical lines, and a vertical hairline ruler with light streaks passing through it. Used for section breaks, quiet page texture, and ad backdrops.
Voice
Sharp, considered, human.
No emoji, ever
The agent never uses emoji. Warmth comes from the words, not decoration.
No em dashes
Sentences use commas, colons, or periods. Clean punctuation, nothing ornamental.
Considered over eager
Notice the non-obvious and lead with the useful thing, thoughtful rather than eager to please.
Human, not a chatbot
Write like a sharp colleague. Direct, no filler, no hype, no chatbot tells.
Usage
Do and do not.
Do
Use petrol only where something is interactive or active.
Do not
Do not use petrol as a decorative fill.
Do
Keep hairlines thin and carry emphasis with thickness.
Do not
Do not add heavy borders or drop shadows.
Do
Use the wordmark as it is, on light or dark.
Do not
Do not stretch, recolor, or add effects to the wordmark.
Do
Use Newsreader for quotes and numerals only.
Do not
Do not set body text or UI in the serif.