Brand guidelines
Ink, paper and one sealed signal
How UMBR looks and sounds. Follow these rules for anything that carries the name: the product, decks, posts and partner pages.
Logo
The mark is an eclipse: a full disc with a second one pushed in from the upper right, leaving a crescent of shadow. Something is there, and only part of it shows. Set the wordmark in Geist Medium, tracked a little wide. Use the files below, never a redraw.
Clear space
Leave a margin on every side at least as wide as the bite's radius (r), about a third of the mark. Keep text, edges and other logos out of it.
Minimum size
The mark down to 16 px, the lockup down to 72 px wide. Smaller than that, use the mark on its own.
Colour
Ink and paper carry everything. The greys lean slightly cool so they look chosen, not default. One green, sealed, means private, verified or live, and it means nothing else. Hierarchy comes from value and size, not from more colours.
Roughly how a screen divides. Green stays at or under five percent: a dot, a badge, a check, never a fill.
Ink
Type, the mark, the one primary button
--ink · RGB 11 12 14
Paper
The ground. Most of every screen
--background · RGB 255 255 255
Surface
Tiles, wells, tracks
--surface · RGB 243 244 245
Surface 2
Hover and pressed tiles
--surface-2 · RGB 234 235 237
Line
Hairlines and dividers
--line · RGB 228 230 233
Mute
Secondary text
--mute · RGB 95 99 106
Night
The dark ground
--background (dark) · RGB 8 9 10
Sealed
Private, verified, live. Nothing else
--sealed · RGB 46 125 83
Sealed soft
Behind a sealed badge
--sealed-soft · RGB 230 242 234
Sealed on night
The signal on the dark ground
--sealed (dark) · RGB 143 211 173
Do
- Use green for a sealed dot, a "Private" badge or a verified check.
- Let one ink button be the loudest thing on the screen.
- Design light and dark together. Both are first-class.
Don't
- Make buttons, backgrounds or headlines green.
- Bring in blue, purple or orange accents.
- Use flat #808080 greys. Ours have a cool cast.
Type
One family, Geist, in three weights. Big type is light and quiet, and emphasis comes from size and space rather than weight. Amounts and addresses use tabular figures so columns line up.
Aa
Light 300Display and big numbers
Regular 400Body and titles
Medium 500Labels, buttons, the wordmark
Geist is open source under the SIL Open Font License.
Display XL
Light 300 · up to 76 / 1.02 · -2.8%
Private money
Display L
Light 300 · up to 48 / 1.06 · -2.2%
Pay the whole team at once
Display M
Light 300 · up to 34 / 1.1
Your private balance
Title
Regular 400 · 20 / 1.3
November payroll, 7 people
Body
Regular 400 · 16 / 1.6
Each payment leaves from your private balance, so the amount stays off the public record.
Label
Medium 500 · 11 · caps · +8%
Private balance
Sentence case
Headings and buttons read like sentences. No Title Case, no all-caps headlines.
Money stays light
Balances are set large in Light 300 with tabular figures. Never bold an amount.
One family
Addresses, hashes and code samples stay in Geist. Tabular figures keep them aligned.
The field
Our one atmospheric device: a soft haze inside a rounded panel. Silver by day, graphite by night, with a single green glint low in one corner. One field per view. Never a full-page background, never behind body text.
Interface
The product follows the same rules as the site, so moving from one to the other feels like the same object.
Private balance
Only you8,240 USDG
One primary action
A single ink pill per screen. Everything else is a ghost button or a quiet link.
Hidden amounts are dots
A short row of dots, never black bars or blur. It should read as sealed, not broken.
Sealed is a dot plus a word
Private, verified, live. The green never appears without a label.
Cards float on soft ground
White cards on a pale grey ground by day, graphite on near-black by night.
Big, light numbers
The amount is the largest thing on the screen and the lightest weight on it.
Voice
Plain, specific and calm. We describe what happens to the money in words a finance lead would use, and let the facts carry the confidence.
Plain
Call things what people already call them.
“Pay your team without showing the amounts.”
Specific
Say what happens, where, and what it costs.
“The payment is checked by a proof before it settles.”
Calm
No hype, no exclamation marks, no emoji.
“You decide what anyone else gets to see.”
We say
Rather than
- Private balanceShielded notes, UTXO set
- Make it privateShield into the pool
- Move to publicUnshield to an EOA
- Payment linkBearer claim ticket
- ProveSelective disclosure proof
- Keep your wallet out of itRoute through the relayer
- Private transferNullifiers, commitments, Merkle roots
Never call UMBR the first, the only, audited or trustless. Say what it does and where it runs today.
Downloads
Every logo file as an outlined SVG, so no font is needed. PNGs are rendered in your browser at print size. Colours come as JSON for design tools.
UMBR logo files
The mark, the wordmark and the lockup, in ink and in white. Use them as they are: no recolouring, no effects.
6 SVG files, under 2 KB each
Download the lockup
