I for on, O for off. Together, a P.
Our mark is built from the two halves of the power symbol. Consent is an on-or-off decision, so the letter says what we do before anyone reads the name.
Construction
Two shapes on a 24-unit grid. The ring is drawn slightly lighter than the stem because circles read heavier than bars at the same weight.
- Stem (I)
- 3.6u wide, 18u tall, fully rounded ends
- Ring (O)
- Outer radius 6u, counter 2.6u
- Ring weight
- 3.4u, optically equal to the stem
- Gap
- 1u between I and O
- Alignment
- Ring top sits on the stem's top line
Lockups
Use the horizontal lockup by default, the stacked one for square spaces, and the app icon wherever a container is expected.
Clear space and size
Leave a margin equal to the ring's diameter on every side. Below 16 pixels, use the app icon instead of the bare mark.
Colour
Each colour has one job. Ultramarine asks you to act. Jade, amber and rose mean consent states and are never decoration. Ratios below are calculated live.
Proportion: 60, 30, 10
Every page and screen keeps roughly this balance. If ultramarine starts to cover large areas, it stops pointing at anything.
60% · White and Paper
Page and card backgrounds, alternating section bands, quiet panels.
30% · Ink
Text, primary marketing buttons, dark sections and code panels. At most two dark sections per page.
10% · Ultramarine
Links, selected and focused states, the one key highlight in a section, and in-app primary actions.
Outside the split: jade, amber and rose only ever mean released, held and declined consent (rose also marks form errors).
| Colour | Role | On white | On ink |
|---|---|---|---|
| Ultramarine#2E2BD6 | The brand and primary actions. One per view. | On white 8.63 : 1 AAA | On ink 2.19 : 1 Fails |
| Ink#0B1020 | Text, dark surfaces and the main call to action on light pages. | On white 18.93 : 1 AAA | On ink 1.00 : 1 Fails |
| Paper#F4F5F8 | Alternate section background. White panels sit on it without shadows. | On white 1.09 : 1 Fails | On ink 17.37 : 1 AAA |
| Jade#08765A | Released: a tracker allowed by consent. Success. | On white 5.60 : 1 AA | On ink 3.38 : 1 AA large |
| Amber#9A5C06 | Held: a tracker waiting for a decision. Warnings. | On white 5.37 : 1 AA | On ink 3.52 : 1 AA large |
| Rose#C2283B | Declined, destructive actions and errors. | On white 5.74 : 1 AA | On ink 3.30 : 1 AA large |
Typography
Geist for everything we say, Geist Mono for code, keys and receipt hashes. Headlines are semibold with tight tracking; body text stays at 16 pixels.
Wordmark: Geist Semibold, tracked −3.5%.
9f2c41e0…e41a
Geist Mono, never for labels or headings.
- 4xl72/72Consent people understandHero headline
- 3xl52/54Consent people understandPage headline
- 2xl36/40Consent people understandSection headline
- xl24/30Consent people understandCard title, KPI value
- lg18/28Consent people understandLead paragraph
- base16/26Consent people understandBody
- sm14/21Consent people understandControls, table cells
- xs12.5/18Consent people understandCaptions, metadata
Iconography
Drawn for this product on a 24-pixel grid with a 1.75-pixel stroke and round joins: held and released states, receipts, chains and regions.
- Alert
- Analytics
- ArrowRight
- Balance
- Billing
- Book
- Brush
- Building
- Chain
- Check
- ChevronDown
- ChevronRight
- Clock
- Close
- Code
- Copy
- Declined
- Desktop
- Download
- Dpo
- Edge
- Essential
- External
- Eye
- Feather
- Fingerprint
- Held
- Info
- Install
- LayoutBar
- LayoutModal
- LayoutToast
- Lifebuoy
- Lock
- Logs
- Marketing
- Menu
- MobileApp
- Overview
- Partners
- PlainText
- Plug
- Plus
- Preferences
- Receipt
- Region
- Released
- Revoke
- Scan
- Server
- Settings
- ShieldCheck
- SignOut
- Sites
- Spark
- Tablet
- Tag
- Team
- Trash
Please don't
The mark only works when its geometry and colour stay exact.
- Don't
Stretch or squash it
- Don't
Recolour it outside the palette
- Don't
Rotate it
- Don't
Add shadows or effects