Skip to content

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 = Lightness
  • C = Chroma
  • H = 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.08
  • K = 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.

TokenHEXOKLCHDerivation from Dark Brand 1
Brand 1#4DAEFF0.729 0.149 247°Base
Brand 2#78C2FF0.790 0.115 245°L + 0.061, C - 0.034
Brand 3#A8D8FF0.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.136

The remaining light-theme colors are derived by progressively reducing lightness and chroma.

TokenHEXOKLCHDerivation from Light Brand 1
Brand 1#2F7BE50.593 0.177 258°Base
Brand 2#2367C90.527 0.167 258°L - 0.066, C - 0.010
Brand 3#1852AA0.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.