Brand Guide
v1.0 · lockedAndamio brand guidelines
How Andamio looks and sounds. These values are canonical — the marketing site and the app both build from them.
Restraint
Orange marks one thing per view — the primary action or a verified state. Nothing else.
Ink on paper
Near-black on white carries the page. Blue is for links and wayfinding only.
Deliberate motion
Credentials resolve with a physical reveal, not a fade.
Logo
Mark + logotype
Primary lockup: the mark with the ANDAMIO wordmark. The mark uses the brand orange #FF6B35, so the logo and UI accent always match. Leave clear space of at least the mark's height around it.
- Use the lockup in nav (~22px) and footer (~30px).
- On dark surfaces, use the dark / orange-bg variant.
- Don't recolor, stretch, or add effects.
- Don't split mark from wordmark in primary placements.
Color
One ink, one paper, three accents, four states.
Neutrals
Background
Primary text · rules
Body text
Tertiary labels
Faint meta
Oversized numerals
Inner dividers · edges
Structural grid
Accents
Brand signal — sparing. Mark · the one primary CTA · live pulse · VERIFIED.
Wayfinding + data only — links, nav-active, the rail. Never a fill.
Credential-plate background tint only. Never type.
Semantic states · coexist with accents, never override them
Errors · destructive confirm
Success · completion
Caution (ink foreground)
Neutral information
Accent discipline
Where each accent is allowed.
Orange marks one action or state per view; blue is for links and wayfinding. Used sparingly, the accents stay meaningful.
- Orange: the mark, the one primary CTA, live, verified.
- Blue: links, nav-active, the rail, data — only.
- Never orange headings, body, or a second CTA.
- Never blue as a button fill (the shadcn `secondary` trap).
Don't
Orange headlines & two CTAs — the brand signal goes mute.
Typography
Two typefaces: Inter and JetBrains Mono.
Inter — sans
Aa Bb Cc
Weights 400 · 500 · 600. Display at 600, tracking −0.045em.
JetBrains Mono — labels & data
Aa 0123 — //
Kicker · sentence case · orange tile · never all-caps
Spacing
A 4px scale, used through roles.
Every margin, padding, and gap is a step on the scale, applied through a named role. Same role, same step — on both surfaces.
Step scale · px
Roles
Motion
LiveCredentials resolve with motion.
The signature gesture: a credential is withheld, then revealed by a deliberate, physical motion. Scroll the frame to see it. Reuse the feel — not the frame — for mint and verify moments in the app.
A real credential, issued on Andamio. The rings encode where it came from and what it certifies.
Voice
Confident, plain, human.
The promise
Verifiable credentials that keep working after you issue them — a credentialing company that happens to use blockchain.
Hero by surface
Marketing leads with the issuer; the app leads with the learner. One hero per surface, never mixed.
Restraint
Say the one important thing and stop. No hype, no blockchain-maximalism.
Components
One primary action per view.
One primary (orange) action per view; everything else is ink, outline, or ghost. Blue is never a fill. Section-header rules carry no trailing text. Build a shared PageHeader before broad use.
Accessibility
Color contrast.
- Ink on paper ≈ 20:1. Blue links ≈ 4.5:1 — passes AA for body.
- Orange on white ≈ 3:1 — fails AA for small text. Use it as a fill with large bold labels, never small text.
- Warning amber needs an ink foreground, not white.
- Never encode meaning in color alone — pair with an icon or label.
Assets
Downloads & references.
Machine-readable tokens: src/ui/system/tokens.ts. Full written canon & conformance checklist: docs/design-system/andamio-brand-guide.md.