Vault · Brand Identity System

Identity built for trust.

Visual identity, design tokens, and component patterns for designers, developers, and partners.

v2.0 · Brand Guide · 2026
Brand Foundation

What Vault Stands For

Vault strips away the complexity of digital security. One vault, one key, total peace of mind — encrypted entirely client-side.

Mission

Make Security Invisible

Every person deserves airtight security without the friction. Vault encrypts client-side and gets out of your way.

Vision

Privacy for Everyone

Not just for the technically literate. Vault is built for every generation, every device, every habit.

Values

Private · Enduring · Calm

We remove friction, never add it. Every design decision, copy line, and product choice serves clarity.

Color System

The Palette

Vault inherits a deep, confident purple core — premium and precise, with careful use of white and near-black to keep surfaces clean.

Core Purple — Primary Brand
Purple 900
#060A10
Deep bg, overlays
Purple 700
#5b21b6
Buttons, active
Purple 500
#0EA5E9
Primary brand
Purple 300
#BAE6FD
Labels, accents
Purple 100
#f4f0ff
Ghost body, light bg
Dark Surfaces
Black
#060A10
Page background
Surface 1
#0d0d1c
Cards, panels
Surface 2
#0E1620
Elevated elements
Surface 3
#181835
Inputs, hover
Border
rgba(255,255,255,0.07)
Dividers, edges
Semantic — Status
Success Dark
#052e16
Strong password bg
Success
#6ee7b7
Verified, secure
Danger
#fca5a5
Breach alert
Warning
#fde68a
Weak password
Neutral
#f4f0ff
Info states
Gradients
Brand Primary · #060A10 → #0EA5E9
Brand Soft · #0EA5E9 → #BAE6FD
Brand Fade · #5B21B6 → #F4F0FF
Surface Depth · Dark
Ghost Body · Light mode
Hero Full · Campaign
Typography

Type System

Satoshi for all display and UI text — geometric, authoritative, and distinctive. IBM Plex Mono for technical strings, data, and code.

Your vault, secured.
Encrypted by default.
Family
Satoshi
Weight
800 ExtraBold
Size
56px / 3.5rem
Tracking
-0.05em
Leading
1.0
vault.unlock("••••••••••••")
// 128 entries decrypted · 0ms
Family
IBM Plex Mono
Weight
400 Regular
Usage
Code, passwords, IDs
TokenExampleSize · WeightUsage
displayYour vault, secured.38–92px · 800Hero headlines
h1Encrypted by default.28px · 800Page titles
h2All credentials22px · 700Section headings
h3Bank card · Chase17px · 700Card titles
bodyVault encrypts client-side before data leaves your device.15px · 400Body copy
smallLast updated 3 days ago13px · 400Meta, captions
labelVAULT SECTION10px · 600Eyebrows, tags
monoaes-256-gcm · 128 entries13px · 400Keys, IDs, code
Visual Language

Abstract Geometry

Vault uses abstract geometric patterns as its secondary visual system. Diamonds, concentric rings, and grid lines suggest precision, structure, and layers of security — without literal iconography.

Concentric Rings
Layers of protection, depth of encryption
Nested Diamonds
Precision, key-like structure, access layers
Grid Field
Systematic organisation, data structure
Usage Principles
→Always use patterns at low opacity (4–10%) as background textures
→Never use as primary design elements — they support, not lead
→Combine patterns only when creating hero / marketing surfaces
Voice & Tone

How Vault Speaks

Calm and confident, never boastful. Vault never talks down, never over-explains. Short sentences. Active voice. Real language.

✓ Do

Lead with safety, not mechanics

Users want to feel protected — give them that first. Keep the encryption details one layer down.

"Your vault is locked. 128 items, encrypted."
✓ Do

Be calm in moments of risk

Security issues don't need alarming language. State the problem, give the action, move on.

"This password appeared in a breach. Easy fix — tap to update."
✕ Don't

Over-explain the cryptography

Users don't need to know how AES-256-GCM works. They need to know their data is safe.

"Vault uses AES-256-GCM with PBKDF2 key derivation to ensure..."
✕ Don't

Use fear or urgency tactics

We invite people into security. We never frighten them into it.

"WARNING: You may have been compromised. Act NOW."
Copy Examples
Onboarding
Your vault is ready. Add your first item.
First action — direct and frictionless
Empty state
Nothing here yet. Let's change that.
Encouraging, not clinical
Breach alert
Heads up — this password showed up in a breach. Easy fix.
Calm and actionable, not alarming
Success
Saved. You're good.
Brief confirmation, reassuring
Legacy
Your trusted contacts will receive access when the time comes.
Dignified, forward-looking
🔒

Private

Your key, your data. We never see it.

⚡

Confident

We know Vault works. Our copy reflects that.

🧊

Calm

Security can be stressful. We are the antidote.

🌿

Enduring

Built for decades, not just today.

UI Components

Component System

All components are built on the same dark surface stack. Purple is the action colour. Semantic greens and reds for security states only.

Buttons — Primary, Ghost, Small
STRONGSYNCEDBREACHPREMIUM
Status Badges
Password strength
Input + Strength Indicator
🐙
GitHub
dev@vault.app
🏦
Chase Bank
j.doe@email.com
Vault Item Row
Spacing

Spacing Scale

4px base unit. Every gap, padding, and margin in Vault UI is derived from this scale — never arbitrary values.

space-1
Micro — icon nudges4px
space-2
XS — tight groupings8px
space-3
S — list items, labels12px
space-4
Base — standard UI gap16px
space-6
M — card padding24px
space-8
L — content blocks32px
space-12
XL — section padding48px
space-16
2XL — hero spacing64px
Motion

Motion Tokens

Motion should feel calm and precise — reflecting Vault's character. No bouncy or energetic animations. Ease-out for entrances, ease-in-out for transitions.

Micro

120ms ease-out

Hover states, toggles, icon changes

Fast

200ms ease-out

Button feedback, badge updates

Default

300ms ease-in-out

State transitions, tab switches

Medium

450ms ease-in-out

Modal opens, panel reveals

Slow

650ms ease-in-out

Page loads, vault unlock sequence

Stagger

80ms per item

Vault list entry, grid reveals

Vault · Brand Guide v2.0 · 2026

Client-side encrypted · Built to endure

Internal use only