Colors

Bumi's color system is built on warm neutrals with a single, restrained brand color. Every color has a purpose.

Complete Palette

Brand

Name	Hex	Usage
Forest Green	#2D6B4A	Primary buttons, active nav, checkmarks, links
Forest Green Hover	#245A3E	Button hover state
Forest Green Light	#E8F0EC	Selected row bg, badge bg
Forest Green Subtle	#F0F5F2	Very light emphasis bg

Forest Green

#2D6B4A

Hover

#245A3E

Light

#E8F0EC

Subtle

#F0F5F2

Strict usage rules

Forest Green appears ONLY in these contexts: filled primary buttons, active navigation indicators (left border + text), success checkmarks, text links, and the brand logo. Never use it for card borders, section backgrounds, decorative elements, or secondary UI.

Accent (Destructive)

Name	Hex	Usage
Warm Red	#C4463A	Danger buttons, error states, delete actions
Warm Red Hover	#A93B30	Destructive button hover
Warm Red Light	#FCEAE8	Error badge bg, alert bg

Warm Red

#C4463A

Hover

#A93B30

Light

#FCEAE8

Semantic Colors

Role	Hex	Usage
Success	#2D7D46	Confirmation, positive deltas, completed states
Warning	#D4910A	Alerts, pending states, low stock indicators
Danger	#C4463A	Errors, destructive actions, negative deltas
Info	#2563EB	Informational badges, help text, external links

Success

#2D7D46

Warning

#D4910A

Danger

#C4463A

Info

#2563EB

Neutrals (Light Mode)

Token	Hex	Usage
bg-body	#FAFAF7	Page background, sidebar bg
bg-card	#FFFFFF	Card surfaces, modal surfaces
bg-inset	#F3F1EC	Inset panels, code blocks, table headers
bg-hover	#EDEAE3	Row hover, button hover (ghost)
border	#E5E2DB	Card borders, dividers, input borders
border-strong	#D4D0C8	Emphasized borders, active input borders

bg-body

#FAFAF7

bg-card

#FFFFFF

bg-inset

#F3F1EC

bg-hover

#EDEAE3

border

#E5E2DB

border-strong

#D4D0C8

Text Colors (Light Mode)

Token	Hex	Usage	Min Contrast on #FAFAF7
text-1	#1A1816	Primary text, headings	15.8:1
text-2	#57534E	Secondary text, labels, descriptions	6.9:1
text-3	#A8A29E	Tertiary text, placeholders, disabled	3.2:1

text-1

#1A1816

text-2

#57534E

text-3

#A8A29E

Dark Mode

Token	Light	Dark
bg-body	#FAFAF7	#1C1A17
bg-card	#FFFFFF	#262420
bg-inset	#F3F1EC	#2E2C28
bg-hover	#EDEAE3	#363330
border	#E5E2DB	#3D3A35
border-strong	#D4D0C8	#4A4640
text-1	#1A1816	#F5F3EF
text-2	#57534E	#B5B0A8
text-3	#A8A29E	#6E6A64
Brand Green	#2D6B4A	#4A9E72
Danger Red	#C4463A	#E05A4E
Warning	#D4910A	#E8A820
Info	#2563EB	#4A8AFF

Dark Mode Preview

bg-body

#1C1A17

bg-card

#262420

bg-inset

#2E2C28

bg-hover

#363330

Brand

#4A9E72

Danger

#E05A4E

Warning

#E8A820

Info

#4A8AFF

Per-App Accent Overrides

Each portal shares the Bumi base palette but may define an accent color for its own identity.

App	Accent	Hex	Usage
POS Electron	Forest Green	#2D6B4A	Default brand
Store Admin	Forest Green	#2D6B4A	Default brand
HO Finance	Indigo	#4F46E5	Finance-specific badges, charts
HR Portal	Teal	#0D9488	HR-specific badges
Purchasing	Amber	#D97706	Procurement-specific badges
Customer App	Forest Green	#2D6B4A	Default brand
Stock App	Forest Green	#2D6B4A	Default brand

POS / Store

#2D6B4A

HO Finance

#4F46E5

HR Portal

#0D9488

Purchasing

#D97706

TIP

Accent overrides only apply to app-specific badges and chart colors. Primary buttons, navigation, and success states always use Forest Green across all apps.

CSS Custom Properties

:root {
  /* Brand */
  --color-brand: #2D6B4A;
  --color-brand-hover: #245A3E;
  --color-brand-light: #E8F0EC;
  --color-brand-subtle: #F0F5F2;

  /* Destructive */
  --color-danger: #C4463A;
  --color-danger-hover: #A93B30;
  --color-danger-light: #FCEAE8;

  /* Semantic */
  --color-success: #2D7D46;
  --color-warning: #D4910A;
  --color-info: #2563EB;

  /* Neutrals */
  --bg-body: #FAFAF7;
  --bg-card: #FFFFFF;
  --bg-inset: #F3F1EC;
  --bg-hover: #EDEAE3;
  --border: #E5E2DB;
  --border-strong: #D4D0C8;

  /* Text */
  --text-1: #1A1816;
  --text-2: #57534E;
  --text-3: #A8A29E;
}

.dark {
  --color-brand: #4A9E72;
  --color-danger: #E05A4E;
  --color-warning: #E8A820;
  --color-info: #4A8AFF;

  --bg-body: #1C1A17;
  --bg-card: #262420;
  --bg-inset: #2E2C28;
  --bg-hover: #363330;
  --border: #3D3A35;
  --border-strong: #4A4640;

  --text-1: #F5F3EF;
  --text-2: #B5B0A8;
  --text-3: #6E6A64;
}

Accessibility

All text/background combinations meet WCAG AA (4.5:1 for normal text, 3:1 for large text).

Combination	Contrast Ratio	WCAG AA
text-1 on bg-body	15.8:1	Pass
text-1 on bg-card	17.4:1	Pass
text-2 on bg-body	6.9:1	Pass
text-2 on bg-card	7.6:1	Pass
text-3 on bg-body	3.2:1	Pass (large text only)
Brand on bg-card	5.8:1	Pass
Danger on bg-card	4.9:1	Pass
Dark text-1 on dark bg-body	14.2:1	Pass
Dark text-2 on dark bg-body	6.1:1	Pass

text-3 limitation

text-3 (#A8A29E) only meets WCAG AA for large text (18px+ or 14px bold). Use it only for placeholder text, disabled labels, and tertiary metadata --- never for essential content.

DO and DON'T

DO

• Use bg-body (#FAFAF7) as your page background, not white
• Use border (#E5E2DB) for card borders, not Tailwind's default gray-200
• Use brand green only for actionable, interactive elements
• Test all color combinations in both light and dark mode

DON'T

• Don't use pure gray (#F5F5F5, #E5E7EB) --- always use the warm equivalents
• Don't use brand green for decorative borders, backgrounds, or section headers
• Don't add new colors without updating this document and the token files
• Don't rely on color alone to communicate state --- always pair with icons or text