Vauban Docs
Design System

Token Reference

VDL Token Reference

Complete reference for all design tokens in packages/design-tokens/src/tokens.css.

Reference Scales

Neutral Scales

Three neutral scales provide backgrounds, text, and borders across themes.

Slate (Navy theme)

Indigo-tinted dark neutral. Hue ~264, subtle blue depth.

StepHexOKLCHPurpose
1#050810oklch(0.135 0.019 264)App background
2#0A0F1Aoklch(0.169 0.025 265)Subtle background
3#111827oklch(0.210 0.032 265)UI element background
4#1a202doklch(0.244 0.027 265)Hovered UI element
5#1F2937oklch(0.278 0.030 257)Active UI element
6#2A3548oklch(0.328 0.037 261)Subtle border
7#374151oklch(0.373 0.031 260)UI element border
8#4b505aoklch(0.430 0.018 264)Hovered border
9#6B7280oklch(0.551 0.023 264)Solid background
10#9CA3AFoklch(0.714 0.019 261)Hovered solid
11#cbced3oklch(0.851 0.008 261)Low-contrast text
12#F9FAFBoklch(0.985 0.002 248)High-contrast text

Zinc (Zinc theme)

Pure neutral dark. Hue ~286, achromatic -- zero color bias.

StepHexOKLCHPurpose
1#09090boklch(0.141 0.004 286)App background
2#18181boklch(0.210 0.006 286)Subtle background
3#27272aoklch(0.274 0.006 286)UI element background
4#333337oklch(0.323 0.007 286)Hovered UI element
5#3f3f46oklch(0.370 0.012 286)Active UI element
6#52525boklch(0.442 0.015 286)Subtle border
7#626169oklch(0.496 0.013 292)UI element border
8#71717aoklch(0.552 0.014 286)Hovered border
9#898990oklch(0.632 0.010 286)Solid background
10#a1a1aaoklch(0.712 0.013 286)Hovered solid
11#cdcdd0oklch(0.849 0.004 286)Low-contrast text
12#fafafaoklch(0.985 0.000 0)High-contrast text

Stone (Light theme)

Warm limestone sandstone. Hue ~60-68, Vauban-fortress inspired.

StepHexOKLCHPurpose
1#F5F0EBoklch(0.958 0.009 68)App background
2#FAF7F4oklch(0.978 0.005 68)Subtle background
3#FFFFFFoklch(1.000 0.000 0)UI element background
4#f8f4f0oklch(0.969 0.007 68)Hovered UI element
5#F0EBE5oklch(0.942 0.010 73)Active UI element
6#E7E5E4oklch(0.923 0.003 49)Subtle border
7#D6D3D1oklch(0.869 0.004 56)UI element border
8#A8A29Eoklch(0.716 0.009 56)Hovered border
9#8d8884oklch(0.630 0.008 60)Solid background
10#706b67oklch(0.530 0.009 60)Hovered solid
11#57534Eoklch(0.444 0.010 74)Low-contrast text
12#1C1917oklch(0.216 0.006 56)High-contrast text

Accent Scales

See Zones for complete accent scale tables.

Semantic Tokens

Semantic tokens reference scale steps and change per theme.

Backgrounds

TokenNavyZincLight
--vdl-bg-voidslate-1zinc-1stone-1
--vdl-bg-baseslate-2zinc-2stone-2
--vdl-bg-surfaceslate-3zinc-3stone-3
--vdl-bg-elevatedslate-5zinc-5stone-3
--vdl-bg-hoverslate-6zinc-6stone-5

Text

TokenNavyZincLight
--vdl-text-primaryslate-12zinc-12stone-12
--vdl-text-secondaryslate-10zinc-10stone-11
--vdl-text-tertiaryslate-9zinc-8stone-8
--vdl-text-inverseslate-3zinc-2#FAFAF9

Borders

TokenNavyZincLight
--vdl-border-defaultslate-5zinc-6stone-7
--vdl-border-hoverslate-7zinc-8stone-8
--vdl-border-subtleslate-6zinc-5stone-6

Brand

Legacy aliases mapping to indigo scale. Use --vdl-indigo-* directly in new code.

TokenMaps To
--vdl-brand-500--vdl-indigo-9
--vdl-brand-600--vdl-indigo-8
--vdl-brand-400--vdl-indigo-10
--vdl-brand-300--vdl-indigo-11

Zone Accents

TokenValueScale
--vdl-zone-bastion--vdl-indigo-9#6366F1
--vdl-zone-rempart--vdl-violet-9#8B5CF6
--vdl-zone-citadel--vdl-amber-9#F59E0B
--vdl-zone-brain--vdl-cyan-9#06B6D4
--vdl-zone-glacis--vdl-emerald-9#10B981

Typography Tokens

TokenValue
--vdl-font-display'Geist', system-ui, sans-serif
--vdl-font-heading'Inter', system-ui, sans-serif
--vdl-font-body'Inter', system-ui, sans-serif
--vdl-font-mono'JetBrains Mono', ui-monospace, monospace

Size Scale

TokenValuePx
--vdl-text-display3rem48
--vdl-text-h12.25rem36
--vdl-text-h21.75rem28
--vdl-text-h31.5rem24
--vdl-text-h41.375rem22
--vdl-text-body1rem16
--vdl-text-sm0.875rem14
--vdl-text-xs0.75rem12

Spacing Tokens

Based on a 4px unit, 8px grid.

TokenValuePx
--vdl-space-10.25rem4
--vdl-space-20.5rem8
--vdl-space-30.75rem12
--vdl-space-41rem16
--vdl-space-61.5rem24
--vdl-space-82rem32
--vdl-space-123rem48
--vdl-space-164rem64
--vdl-space-246rem96

Shadow Tokens

TokenDescription
--vdl-shadow-smSubtle elevation
--vdl-shadow-mdCard elevation
--vdl-shadow-lgDropdown/popover
--vdl-shadow-xlModal
--vdl-shadow-2xlMaximum elevation

Glow Scale

TokenOpacityUse Case
--vdl-glow-xs6%Idle state
--vdl-glow-sm8%Subtle highlight
--vdl-glow-brand15%Default brand glow
--vdl-glow-brand-strong25%Emphasized elements
--vdl-glow-md12%Medium emphasis
--vdl-glow-lg18%High emphasis
--vdl-glow-xl25%Maximum glow

Layout Tokens

TokenValue
--vdl-header-height56px
--vdl-sidebar-width256px
--vdl-max-width-content1280px
--vdl-max-width-narrow768px

Z-Index Scale

TokenValueUse
--vdl-z-base0Default
--vdl-z-dropdown10Dropdowns
--vdl-z-sticky20Sticky headers
--vdl-z-overlay30Overlays
--vdl-z-modal40Modals
--vdl-z-toast50Toast notifications
--vdl-z-command60Command palette

Special Tokens

Crypto Colors

TokenHexAsset
--vdl-crypto-btc#F7931ABitcoin
--vdl-crypto-eth#627EEAEthereum
--vdl-crypto-strk#EC796BStarknet
--vdl-crypto-usdc#2775CAUSDC
--vdl-crypto-usdt#26A17BTether
--vdl-crypto-dai#F5AC37DAI

Chart Palette

8 perceptually-spaced colors for data visualization:

TokenHex
--vdl-chart-1#6366F1 (indigo)
--vdl-chart-2#8B5CF6 (violet)
--vdl-chart-3#06B6D4 (cyan)
--vdl-chart-4#10B981 (emerald)
--vdl-chart-5#F59E0B (amber)
--vdl-chart-6#EF4444 (red)
--vdl-chart-7#EC4899 (pink)
--vdl-chart-8#F97316 (orange)

Brand Identity

Previous Page

Product Zones

Next Page

On this page

VDL Token ReferenceReference ScalesNeutral ScalesSlate (Navy theme)Zinc (Zinc theme)Stone (Light theme)Accent ScalesSemantic TokensBackgroundsTextBordersBrandZone AccentsTypography TokensSize ScaleSpacing TokensShadow TokensGlow ScaleLayout TokensZ-Index ScaleSpecial TokensCrypto ColorsChart Palette