Product Zones

Every product in the Vauban ecosystem is a zone -- a distinct section of the fortress, each with its own accent color and 12-step scale. The zone system provides instant visual identification while maintaining ecosystem coherence.

The Fortification Metaphor

                    ┌─────────────┐
                    │   CITADEL   │  Amber - Inner stronghold (Trading)
                    │   (amber)   │
               ┌────┴─────────────┴────┐
               │        BASTION        │  Indigo - Forward defense (Staking)
               │       (indigo)        │
          ┌────┴───────────────────────┴────┐
          │           REMPART               │  Violet - Main wall (Blog)
          │          (violet)               │
     ┌────┴─────────────────────────────────┴────┐
     │              GLACIS                       │  Emerald - Approach (Bridge)
     │            (emerald)                      │
     └───────────────────────────────────────────┘
                  BRAIN (cyan) - Commander's intelligence

Zone Scales

Each zone has a complete 12-step OKLCH-derived scale. Step 9 is the anchor -- the primary solid color used for buttons, badges, and brand touches.

Bastion (Indigo) — Staking dApp

The ecosystem's primary zone. Indigo conveys authority and technological depth.

Step	Hex	OKLCH	Purpose
1	`#080a18`	`oklch(0.151 0.030 276)`	Tinted background
2	`#0f1128`	`oklch(0.190 0.046 277)`	Subtle tinted bg
3	`#1E1B4B`	`oklch(0.257 0.086 281)`	Component bg
4	`#272566`	`oklch(0.310 0.111 279)`	Hovered component
5	`#312E81`	`oklch(0.359 0.135 279)`	Active component
6	`#3730A3`	`oklch(0.398 0.177 277)`	Subtle border
7	`#4338CA`	`oklch(0.457 0.215 277)`	Default border
8	`#4F46E5`	`oklch(0.511 0.230 277)`	Active state
9	`#6366F1`	`oklch(0.585 0.204 277)`	Anchor
10	`#818CF8`	`oklch(0.680 0.158 277)`	Hover solid
11	`#A5B4FC`	`oklch(0.785 0.104 275)`	Low-contrast text
12	`#E0E7FF`	`oklch(0.930 0.033 273)`	High-contrast text

Rempart (Violet) — Decentralized Blog

Violet adds creative warmth to the editorial experience.

Step	Hex	OKLCH	Purpose
1	`#090711`	`oklch(0.138 0.023 293)`	Tinted background
2	`#100d1c`	`oklch(0.171 0.031 292)`	Subtle tinted bg
3	`#1c1434`	`oklch(0.221 0.061 292)`	Component bg
4	`#291d48`	`oklch(0.270 0.077 293)`	Hovered component
5	`#36275d`	`oklch(0.320 0.093 293)`	Active component
6	`#463476`	`oklch(0.380 0.109 293)`	Subtle border
7	`#583d98`	`oklch(0.439 0.143 293)`	Default border
8	`#6d4abf`	`oklch(0.510 0.175 293)`	Active state
9	`#8B5CF6`	`oklch(0.606 0.219 293)`	Anchor
10	`#a38af4`	`oklch(0.701 0.153 293)`	Hover solid
11	`#c0b2f8`	`oklch(0.800 0.099 293)`	Low-contrast text
12	`#e8e5f8`	`oklch(0.930 0.026 293)`	High-contrast text

Citadel (Amber) — Trading Platform

Amber evokes urgency and warmth -- appropriate for real-time trading.

Step	Hex	OKLCH	Purpose
1	`#0d0803`	`oklch(0.139 0.017 76)`	Tinted background
2	`#160e05`	`oklch(0.171 0.023 72)`	Subtle tinted bg
3	`#281601`	`oklch(0.220 0.046 69)`	Component bg
4	`#382001`	`oklch(0.269 0.057 69)`	Hovered component
5	`#492b00`	`oklch(0.319 0.070 69)`	Active component
6	`#5e3900`	`oklch(0.380 0.083 70)`	Subtle border
7	`#774500`	`oklch(0.440 0.099 65)`	Default border
8	`#955500`	`oklch(0.513 0.117 63)`	Active state
9	`#F59E0B`	`oklch(0.769 0.165 70)`	Anchor
10	`#cc9147`	`oklch(0.700 0.115 70)`	Hover solid
11	`#ddb689`	`oklch(0.800 0.075 70)`	Low-contrast text
12	`#f1e6da`	`oklch(0.930 0.020 70)`	High-contrast text

Brain (Cyan) — Knowledge Protocol

Cyan signals intelligence and analytical clarity.

Step	Hex	OKLCH	Purpose
1	`#040a0c`	`oklch(0.138 0.013 216)`	Tinted background
2	`#061114`	`oklch(0.168 0.018 216)`	Subtle tinted bg
3	`#031f25`	`oklch(0.221 0.035 214)`	Component bg
4	`#052c34`	`oklch(0.271 0.044 215)`	Hovered component
5	`#063944`	`oklch(0.319 0.053 217)`	Active component
6	`#0a4b57`	`oklch(0.381 0.063 214)`	Subtle border
7	`#005d6f`	`oklch(0.441 0.079 217)`	Default border
8	`#00748a`	`oklch(0.515 0.092 217)`	Active state
9	`#06B6D4`	`oklch(0.715 0.126 215)`	Anchor
10	`#56acc1`	`oklch(0.699 0.088 216)`	Hover solid
11	`#94c8d5`	`oklch(0.801 0.057 215)`	Low-contrast text
12	`#ddebee`	`oklch(0.930 0.016 212)`	High-contrast text

Glacis (Emerald) — Bridge Protocol

Emerald represents growth and cross-chain connectivity.

Step	Hex	OKLCH	Purpose
1	`#040b07`	`oklch(0.139 0.016 161)`	Tinted background
2	`#07120d`	`oklch(0.169 0.020 164)`	Subtle tinted bg
3	`#042115`	`oklch(0.222 0.043 163)`	Component bg
4	`#072e1f`	`oklch(0.270 0.052 163)`	Hovered component
5	`#0a3d29`	`oklch(0.321 0.064 162)`	Active component
6	`#0f4e37`	`oklch(0.379 0.074 164)`	Subtle border
7	`#006343`	`oklch(0.442 0.096 163)`	Default border
8	`#007a52`	`oklch(0.512 0.113 162)`	Active state
9	`#10B981`	`oklch(0.696 0.149 162)`	Anchor
10	`#5ab38c`	`oklch(0.701 0.105 163)`	Hover solid
11	`#96ccb1`	`oklch(0.800 0.068 163)`	Low-contrast text
12	`#deece4`	`oklch(0.930 0.018 161)`	High-contrast text

Setting a Zone

Each app sets its zone via CSS:

:root {
  --vdl-zone-rgb: 139, 92, 246; /* Rempart = Violet */
}

This variable drives the --vdl-glow-zone shadow and zone-specific highlights. The --vdl-zone-rgb value should match step 9 of the zone's scale.

Using Zone Colors

Tailwind Utilities

<!-- Direct scale access -->
<div class="bg-indigo-3 border-indigo-7 text-indigo-11">
  Bastion-tinted card
</div>

<!-- Zone accent (step 9) -->
<button class="bg-zone-rempart text-white">
  Publish
</button>

CSS Custom Properties

.zone-badge {
  background: var(--vdl-violet-3);
  border: 1px solid var(--vdl-violet-7);
  color: var(--vdl-violet-11);
}

.zone-badge-solid {
  background: var(--vdl-violet-9);
  color: white;
}

Zone Favicons

Each zone uses the star fortress mark in its accent color. The mark's V chevron is filled with the zone's step 1 (darkest) for dark contexts, or white for light contexts.

Product Zones

On this page