Design System

vault1984 Styleguide

Single source of truth. One stylesheet: vault1984.css. No inline styles in HTML.

Colors

Backgrounds

--bg

#0A1628

--surface

#0d1627

--surface-alt

#0a1a0a

--surface-gold

#2a1f00

Text

--text

#f1f5f9

--muted

#94a3b8

--subtle

#64748b

Accent

--accent

#22C55E

--gold

#D4AF37

--red

#EF4444

Typography

h1 — Your vault. Wherever you want it.

h2 — Sealed fields: jurisdiction irrelevant.

h3 — Only you. Only in person.

p.lead — We run it. You own it. Pick your region — your data stays there.

p — Passwords and private notes are encrypted on your device with a key derived from your fingerprint or hardware token. We store a locked box. No key ever reaches our servers.

label (default)

label.accent

label.gold

label.red

vault1984 — vaultname in body text

Cards

card (default)

Default surface

Use for neutral content. Background is --surface.

card.alt

Sealed fields

Green-tinted surface. Use for sealed layer content.

card.gold

Zürich, Switzerland

Gold-tinted surface. Use exclusively for Zürich/HQ.

card.red

Self-hosted

Red-tinted surface. Use for self-hosted / warning contexts.

card + card-hover

Hover state

Hover this card — lifts on hover. Add to any clickable card.

Buttons

btn-primary btn-ghost btn-accent btn-gold btn-red

btn-accent btn-block btn-gold btn-block btn-red btn-block

Grid

grid-2

col 1

Always 1fr.

col 2

Always 1fr.

grid-3

col 1

Always 1fr.

col 2

Always 1fr.

col 3

Always 1fr.

Spacing scale

All spacing via utility classes: .mt-2 .mt-3 .mt-4 .mt-6 .mt-8 .mt-12 and matching .mb-*.

Container: max-width 1100px, padding 2rem each side. Used everywhere.

Section: padding 4rem top/bottom. Separated by hr.divider.

End of styleguide