Colors

The Greenscale palette uses OKLCH color space for perceptual uniformity. All colors have a subtle green tint for brand cohesion.

Brandscale

Dynamic color palette that follows --brand-hue. Same lightness/chroma as greenscale but responds to hue slider changes.

Current hue: var(--brand-hue) — Adjust with the hue slider in the sidebar

Token Value Description
--brandscale-25 oklch(0.99 0.001 var(--brand-hue)) Almost pure white
--brandscale-50 oklch(0.98 0.002 var(--brand-hue)) Barely tinted white
--brandscale-75 oklch(0.97 0.002 var(--brand-hue)) Very very light
--brandscale-100 oklch(0.96 0.003 var(--brand-hue)) Very light with hint of hue
--brandscale-150 oklch(0.93 0.003 var(--brand-hue)) Extra light
--brandscale-200 oklch(0.9 0.004 var(--brand-hue)) Light with subtle tint
--brandscale-300 oklch(0.81 0.005 var(--brand-hue)) Medium-light
--brandscale-400 oklch(0.71 0.006 var(--brand-hue)) Medium
--brandscale-500 oklch(0.61 0.008 var(--brand-hue)) Medium - slightly more chroma
--brandscale-600 oklch(0.51 0.01 var(--brand-hue)) Dark - visible tint
--brandscale-700 oklch(0.41 0.012 var(--brand-hue)) Darker
--brandscale-800 oklch(0.33 0.014 var(--brand-hue)) Very dark
--brandscale-850 oklch(0.27 0.016 var(--brand-hue)) Extra dark
--brandscale-900 oklch(0.21 0.018 var(--brand-hue)) Near-black
--brandscale-925 oklch(0.16 0.02 var(--brand-hue)) Deeper
--brandscale-950 oklch(0.12 0.022 var(--brand-hue)) Almost black
--brandscale-975 oklch(0.08 0.024 var(--brand-hue)) Darkest

Alpha Variants

Greenscale colors with transparency for layering effects.

5% opacity
10% opacity
20% opacity
30% opacity
50% opacity

Semantic Colors

Theme-aware tokens that automatically adapt to light/dark mode.

Backgrounds

--g-color-bg-app Application background
--g-color-bg-panel Panel/card surface
--g-color-bg-subtle Subtle background for sections
--g-color-bg-surface Primary surface color
--g-color-bg-titlebar Title bar background

Foreground / Text

--g-color-fg-primary Primary text color
--g-color-fg-muted Secondary/muted text
--g-color-fg-soft Tertiary/soft text
--g-color-fg-icon Icon color
--g-color-fg-icon-muted Muted icon color

Borders

--g-color-border-subtle Subtle borders
--g-color-border-strong Strong/visible borders

Accent

--accent-teal-light Lighter teal (#194449)
--accent-teal-dark Darker teal (#0b3035)
--g-color-accent-quiet Quiet accent (theme-aware)
--g-color-accent-active Active accent (theme-aware)
--g-color-accent-foreground Accent for text/lines

Status Colors

Semantic colors for feedback and states.

--g-color-status-success Success/positive
--g-color-status-warning Warning/caution
--g-color-status-danger Danger/error
--g-color-status-info Info/neutral

🎨 Data Visualization

8-color palette optimized for charts and graphs. Designed for colorblind accessibility with maximally divergent hues around the OKLCH color wheel.

vis-1 --g-color-vis-1 Coral/Orange (25°)
vis-2 --g-color-vis-2 Yellow/Gold (70°)
vis-3 --g-color-vis-3 Green (135°)
vis-4 --g-color-vis-4 Cyan/Teal (190°)
vis-5 --g-color-vis-5 Blue (245°)
vis-6 --g-color-vis-6 Purple/Violet (285°)
vis-7 --g-color-vis-7 Magenta/Pink (325°)
vis-8 --g-color-vis-8 Red/Rose (10°)

Chart Preview

💡 These colors maintain ~45° hue separation for maximum perceptual difference. They're designed to remain distinguishable for deuteranopia and protanopia.

Usage Guidelines

  • Use --g-color-vis-1 through --g-color-vis-8 for categorical data
  • For sequential data, consider using a single hue with varying lightness
  • In dark mode, these colors maintain similar perceptual lightness
  • Avoid using more than 8 categories—consider grouping if needed

Text on Surface

Preview text colors on different backgrounds.

--g-color-bg-app

Primary text

Muted text

Soft text

--g-color-bg-panel

Primary text

Muted text

Soft text

--g-color-accent-active

White text on accent