Vauban Brand Identity

Vauban is named after Sebastien Le Prestre de Vauban (1633--1707), the French military engineer who designed over 300 fortifications across France. His work embodies the core values of the platform: security through architecture, defense in depth, and methodical precision.

Brand Essence

"Fortify your capital."

Vauban treats user capital the way Vauban treated French borders: with layered defenses, transparent mechanics, and zero shortcuts.

Logo System

The Vauban mark is a geometric star fortress viewed from above -- 4 angular bastions radiating from a central citadel, with a V chevron carved as negative space. It references Vauban's iconic fortification blueprints.

Variants

All logos are available in packages/design-tokens/logos/ and on the Brand page.

Usage Rules

• Minimum clear space: 1x mark height on all sides
• Minimum display size: 16px for mark, 80px for lockup
• On dark backgrounds: use *-dark.svg or *-mono-white.svg
• On light backgrounds: use *-light.svg or *-mono-black.svg
• Never stretch, rotate, add effects, or modify colors

Visual Identity

Primary Color: Indigo

Indigo (#6366F1, oklch 0.585 0.204 277) is the ecosystem-wide brand color. It conveys technology, trust, and depth without the cliche of "crypto blue" or "fintech green".

The full 12-step scale provides tinted backgrounds, borders, solid fills, and text variants:

Glow Effect

The signature VDL visual is the indigo glow -- a subtle luminous halo on primary interactive elements:

--vdl-glow-brand: 0 0 20px rgba(99, 102, 241, 0.15);
--vdl-glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.25);

A 7-intensity scale (--vdl-glow-intensity-idle through --vdl-glow-intensity-max) maps glow brightness to application state -- idle, active, high-value transactions.

This evokes the idea of energy contained within fortress walls -- power that's visible but controlled.

Zone Colors

Each product has a unique color zone with a complete 12-step scale:

See Zones for complete scale tables and usage guidelines.

Typography

Font Stack

Geist is the display font -- used for hero sections, brand text, and the wordmark. Its geometric sans-serif character complements Inter while providing distinction for display contexts.

Inter handles headings and body -- a professional, highly legible typeface with excellent tabular figures for financial data.

JetBrains Mono handles code, addresses, and numerical data. Its ligatures make technical content immediately recognizable.

Dark Mode Weight Compensation

Text appears thinner on dark backgrounds due to halation. VDL compensates:

Font Features

/* Body — Inter alternate forms for readability */
font-feature-settings: 'cv01' 1, 'cv02' 1;

/* Data — Tabular lining numerals for financial displays */
font-feature-settings: 'tnum' 1, 'lnum' 1, 'cv01' 1;

/* Mono — Code ligatures */
font-feature-settings: 'liga' 1, 'calt' 1;

The Fortress Metaphor

Every product in the ecosystem is named after a component of Vauban's fortification system:

This naming creates a coherent mental model: Vauban is a fortress system for DeFi, where each component has a clear defensive role.

Theme Personality

Navy (Default)

The primary experience. Deep blue-tinted backgrounds create a sense of depth and sophistication, like looking into deep water. This is the "war room" -- where decisions are made with clarity.

• Background: #0A0F1A (deep navy, oklch 0.169 0.025 265)
• Neutral scale: --vdl-slate-{1-12} (indigo-tinted)
• Character: Professional, immersive, focused

Zinc

Pure neutral gray with zero color temperature. For users who prefer minimal visual noise -- the interface disappears, leaving only the data.

• Background: #18181b (true dark gray, oklch 0.210 0.006 286)
• Neutral scale: --vdl-zinc-{1-12} (achromatic)
• Character: Minimal, clinical, efficient

Light ("Fortress Stone")

Warm sandstone tones inspired by the limestone of Vauban's actual fortifications. Not cold white, but warm, natural, and grounded.

• Background: #FAF7F4 (warm off-white, oklch 0.978 0.005 68)
• Neutral scale: --vdl-stone-{1-12} (warm sandstone)
• Character: Approachable, daytime-friendly, accessible

Status Colors

Favicons & App Icons

Favicon files are in packages/design-tokens/favicons/. Use the appropriate format per context:

Writing Voice

Vauban communicates with precision and confidence, never hype:

The tone is institutional but not cold. Think Bloomberg Terminal meets a well-designed banking app.