Color System
Brand Palette
Dark Theme
- Brand 1:
#4DAEFF - Brand 2:
#78C2FF - Brand 3:
#A8D8FF
Light Theme
- Brand 1:
#2F7BE5 - Brand 2:
#2367C9 - Brand 3:
#1852AA
Palette Derivation
OKLCH
L= LightnessC= ChromaH= Hue
Dark:
D1 = (L, C, H)D2 = (L + Δ, C - ε, H)D3 = (L + 2Δ, C - 2ε, H)
Light:
L1 = (L - K, C, H)L2 = (L - K - Δ, C, H)L3 = (L - K - 2Δ, C, H)
Typical Values
Δ = 0.06–0.08K = 0.13–0.15ε = 0.01–0.04
Soft Colors
css
/* Dark */
rgba(77, 174, 255, 0.16)
/* Light */
rgba(47, 123, 229, 0.15)Brand Color Derivation
The dark-theme primary brand color is chosen first:
- Dark Brand 1:
#4DAEFF - OKLCH:
L 0.729, C 0.149, H 247° - HSV:
H 207.3°, S 69.8%, V 100%
Dark Theme
Starting from #4DAEFF, Brand 2 and Brand 3 are created by increasing lightness and reducing chroma.
| Token | HEX | OKLCH | Derivation from Dark Brand 1 |
|---|---|---|---|
| Brand 1 | #4DAEFF | 0.729 0.149 247° | Base |
| Brand 2 | #78C2FF | 0.790 0.115 245° | L + 0.061, C - 0.034 |
| Brand 3 | #A8D8FF | 0.862 0.074 243° | L + 0.133, C - 0.075 |
The hue remains within the same blue family while lightness increases and chroma decreases.
Soft uses Brand 1 with reduced opacity:
css
--vp-c-brand-soft: rgba(77, 174, 255, 0.16);Light Theme
The light-theme base is derived from Dark Brand 1 by reducing lightness and slightly increasing chroma.
Dark Brand 1:
- HEX:
#4DAEFF - OKLCH:
L 0.729, C 0.149, H 247° - HSV:
H 207.3°, S 69.8%, V 100%
Light Brand 1:
- HEX:
#2F7BE5 - OKLCH:
L 0.593, C 0.177, H 258° - HSV:
H 215.0°, S 79.5%, V 89.8%
The lightness offset from the dark base is:
text
K = 0.729 - 0.593
K ≈ 0.136The remaining light-theme colors are derived by progressively reducing lightness and chroma.
| Token | HEX | OKLCH | Derivation from Light Brand 1 |
|---|---|---|---|
| Brand 1 | #2F7BE5 | 0.593 0.177 258° | Base |
| Brand 2 | #2367C9 | 0.527 0.167 258° | L - 0.066, C - 0.010 |
| Brand 3 | #1852AA | 0.455 0.153 259° | L - 0.138, C - 0.024 |
Soft uses Brand 1 with reduced opacity:
css
--vp-c-brand-soft: rgba(47, 123, 229, 0.15);Final Palette
css
/* Dark */
--vp-c-brand-1: #4daeff;
--vp-c-brand-2: #78c2ff;
--vp-c-brand-3: #a8d8ff;
--vp-c-brand-soft: rgba(77, 174, 255, 0.16);
/* Light */
--vp-c-brand-1: #2f7be5;
--vp-c-brand-2: #2367c9;
--vp-c-brand-3: #1852aa;
--vp-c-brand-soft: rgba(47, 123, 229, 0.15);The lightness offset K is approximately 0.136, rather than 0.195, because the updated light-theme base is lighter than the previous one.