Color Palette

Vanduo's default palette is Open Color (MIT) — the friendly, battle-tested scale you already know. For a look that shares the same DNA as Vanduo's spacing, type, and grid, opt into the Fibonacci palette — a golden-angle generated system where hues rotate by the golden angle (~137.5°) and every shade sits on a golden-ratio lightness ramp — via the runtime data-palette switch.

Switching palettes

Open Color is the :root default; opt into the Fibonacci (golden-angle) palette at runtime — every component follows automatically. 

<!-- Default: Open Color palette -->
<html data-palette="open-color">

<!-- Opt in to the Fibonacci (golden-angle) palette -->
<html data-palette="fibonacci"></html>

Prefer a UI? The Theme Customizer exposes the same live controls.

Semantic surfaces — light & dark

The raw scales below are fixed values. The semantic tokens (--vd-bg-*, --vd-text-*, --vd-border-color) remap per theme, so the same markup adapts automatically. Here is the same set in both modes:

Light

--vd-bg-secondary
--vd-bg-tertiary
--vd-color-primary

Text primary · muted

Dark

--vd-bg-secondary
--vd-bg-tertiary
--vd-color-primary

Text primary · muted

Contrast & accessibility. The ★ marks each family's main step; its badge shows the WCAG rating against the most legible text colour, and hovering any swatch reveals the exact ratio. Because the Theme Customizer lets users pick any primary, verify contrast for custom colors — see Accessibility Essentials.
Primary — Brand

The default brand color — primary actions and emphasis

primary-0#edf2ff
primary-1#dbe4ff
primary-2#bac8ff
primary-3#91a7ff
primary-4#748ffc
primary-5 ★AA Large#5c7cfa
primary-6#4c6ef5
primary-7#4263eb
primary-8#3b5bdb
primary-9#364fc7
Secondary

Secondary actions and accents

secondary-0#e6fcf5
secondary-1#c3fae8
secondary-2#96f2d7
secondary-3#63e6be
secondary-4#38d9a9
secondary-5 ★AAA#20c997
secondary-6#12b886
secondary-7#0ca678
secondary-8#099268
secondary-9#087f5b
Gray — Neutrals

Backgrounds, borders, text, and UI structure

gray-0#f8f9fa
gray-1#f1f3f5
gray-2#e9ecef
gray-3#dee2e6
gray-4#ced4da
gray-5#adb5bd
gray-6 ★AA#868e96
gray-7#495057
gray-8#343a40
gray-9#212529
Danger — Red

Error states, destructive actions

danger-0#fff5f5
danger-1#ffe3e3
danger-2#ffc9c9
danger-3#ffa8a8
danger-4#ff8787
danger-5#ff6b6b
danger-6 ★AA#fa5252
danger-7#f03e3e
danger-8#e03131
danger-9#c92a2a
Success — Green

Success states, confirmations

success-0#ebfbee
success-1#d3f9d8
success-2#b2f2bb
success-3#8ce99a
success-4#69db7c
success-5#51cf66
success-6 ★AA#40c057
success-7#37b24d
success-8#2f9e44
success-9#2b8a3e
Warning — Yellow

Warnings, cautions, attention

warning-0#fff9db
warning-1#fff3bf
warning-2#ffec99
warning-3#ffe066
warning-4#ffd43b
warning-5#fcc419
warning-6 ★AAA#fab005
warning-7#f59f00
warning-8#f08c00
warning-9#e67700
Info — Blue

Information, help, neutral feedback

info-0#e7f5ff
info-1#d0ebff
info-2#a5d8ff
info-3#74c0fc
info-4#4dabf7
info-5#339af0
info-6 ★AA Large#228be6
info-7#1c7ed6
info-8#1971c2
info-9#1864ab
Named hues & utility classes

Every hue keeps its recognizable name. Use vd-bg-{color}-{shade} / vd-text-{color}-{shade}.

redorangeyellowlimegreentealcyanblueindigovioletgrapepink
Fibonacci palette optional

A golden-angle generated system — hues stepped by ≈137.5° on golden-ratio shade ramps. Opt in with data-palette="fibonacci" and every scale follows.

Golden accent track — --vd-golden-1 … --vd-golden-8, the signature of the Fibonacci palette.

golden-1#008d93
golden-2#b5509d
golden-3#7a8400
golden-4#227dd7
golden-5#c94e3e
golden-6#00926e
golden-7#935fc7
golden-8#9f7400

Primary (Fibonacci "Water")

primary-0#e4fbfc
primary-1#c1f3f5
primary-2#8fe6eb
primary-3#51d6dd
primary-4#00bfc7
primary-5 ★AA#00a6ad
primary-6#008d93
primary-7#007176
primary-8#005559
primary-9#003b3e

Gray (Fibonacci)

gray-0#f5f6f6
gray-1#e7e8e9
gray-2#d3d5d7
gray-3#bdc0c2
gray-4#a6a9ac
gray-5#8f9296
gray-6#797c80
gray-7#616366
gray-8#494b4d
gray-9#323334
CSS Variable Usage
/* Active scales follow the active palette (Open Color by default) */
.my-element {
  background: var(--vd-primary-0);  /* Lightest */
  color: var(--vd-primary-9);       /* Darkest */
}

/* Semantic aliases (recommended) */
.my-button {
  background: var(--vd-color-primary);
  border-color: var(--vd-color-primary-dark);
}

/* Golden accent track (Fibonacci-only) */
.badge-accent {
  background: var(--vd-golden-1);
}
Addressing a specific palette

Active scales follow data-palette. To pin a palette or reference a raw scale directly: 

:root {
  /* Pin a specific palette regardless of the runtime switch */
  --vd-primary-5: var(--vd-oc-primary-5);
}

/* Or address either palette's raw scale directly */
.swatch-oc  { background: var(--vd-oc-primary-5); }   /* Open Color */
.swatch-fib { background: var(--vd-fib-primary-5); }  /* Fibonacci  */

Both --vd-oc-* and --vd-fib-* are always defined, regardless of the active palette.

Default palette: Open Color by Heeyeun Jeong — MIT Licensed · optional Fibonacci palette generated by @vanduo-oss/vd3