Skip to main content
The openboa palette is organized by role:
  • Green: brand and emphasis
  • Gray: text and structure
  • Sand: warm surfaces and background layers
Do not use green tokens (#8CC92A, #478D24) for long paragraph text on light backgrounds.
#EDDBB7 and #EEDCB6 are extremely close tones and should be treated as one sand family in practical UI usage.

​
Green Palette

green-50

#EEF7DFUltra-light brand wash.

green-100

#DFF1C4Light background tint.

green-200

#C9E69ASoft highlight surface.

green-300

#ACD968Gentle emphasis color.

green-400

#97CF45Active and hover accent.

green-500 (primary)

#8CC92AMain brand accent color.

green-600

#67A525Strong accent for interactive controls.

green-700

#478D24Secondary accent for borders and underlines.

green-800

#163525Dark panel surface for dark mode layers.

green-900

#050D0ANear-black green background anchor (deepest green token).

​
Gray Palette

gray-50

#FEF6E2Softest neutral tint.

gray-100

#EDE5D4Very light neutral surface.

gray-200

#D7D1C8Default border and neutral divider.

gray-300

#B8B3AASecondary divider and disabled text.

gray-400

#9AA09AMuted UI labels.

gray-500

#768688Metadata and helper text.

gray-600

#5E6C67Strong helper text.

gray-700

#44504BSecondary body text on light backgrounds.

gray-800

#2E3C38Dark panel and chrome tone.

gray-900

#162D24Primary body text color in light mode.

​
Sand Palette

sand-50

#FEF6E2Main warm canvas.

sand-100

#F7ECCFLight warm section background.

sand-200

#EEDCB6Warm elevated surface.

sand-300

#EDDBB7Alternate warm panel tone.

sand-400

#E3CB9EElevated warm panel.

sand-500

#D8BE89Warm UI accent background.

sand-600

#CDAE7BStrong warm divider.

sand-700

#BDAA75Decorative accent line.

sand-800

#9D8E61Deep warm accent.

sand-900

#7A6E4DDark warm anchor.

​
Semantic Mapping

  • --boa-bg → sand-50 (light), green-900 (dark)
  • --boa-surface → near-white elevated panel
  • --boa-panel → warm sand panel (light), deep green panel (dark)
  • --boa-text → gray-900 (light), sand-50 (dark)
  • --boa-border → gray-200 (light), dark neutral border in dark mode
  • --boa-accent → green-500 (light), green-600 (dark)
  • --boa-accent-strong → green-700 (light), green-500 (dark)