Per-App Themes

Every RetailOS application shares the Bumi base palette but can define a unique accent color for brand identity. This page documents each app's accent and how to apply overrides.

App Accent Table

App	Accent Hex	Accent Name	Usage Context
Store Admin	#2D6B4A	Forest Green	Primary store management portal
HO Finance	#1E3A5F	Navy	Financial seriousness, trust
HR Portal	#92400E	Warm Brown	People-focused, approachable
Purchasing Portal	#065F46	Teal	Supply chain operations
Finance Portal	#1E3A5F	Navy	Accounting, ledgers
GA Portal	#78350F	Earth Brown	Facilities and assets
Promo Portal	#9A3412	Warm Orange	Marketing energy, campaigns
POS Electron	#2D6B4A	Forest Green	Fast cashier interface
Customer App	#2D6B4A	Forest Green	Brand-consistent customer-facing
Stock App (Mobile)	#065F46	Teal	Inventory operations
Stock App (Web)	#065F46	Teal	Warehouse management
Buyer App	#92400E	Warm Brown	Field purchasing

What the Accent Affects

The accent color replaces the default Forest Green (#2D6B4A) in these specific contexts:

Element	Accent Applied
Primary buttons	Fill color
Active sidebar item	Left border + text color
Links	Text color
Focus rings	Ring color
Active tab indicator	Bottom border
Progress bars	Fill color
Toggle switches (on)	Background

What stays the same

Semantic colors (success, warning, danger, info) are NOT affected by accent overrides. Success green (#2D7D46), warning amber (#D4910A), and danger red (#C4463A) remain constant across all apps.

Implementation

CSS Variable Override

In each app's globals.css, override the brand token:

/* ho-finance/app/globals.css */
:root {
  --color-brand: #1E3A5F;
  --color-brand-hover: #162D4A;
  --color-brand-light: #E4EAF0;
  --color-brand-subtle: #EEF2F6;
}

[data-theme='dark'] {
  --color-brand: #4A7AB0;
  --color-brand-hover: #3D6A9A;
  --color-brand-light: #1A2A3D;
  --color-brand-subtle: #152233;
}

Generating Variants

For each accent, generate these variants:

Variant	Formula	Example (Navy #1E3A5F)
brand	Base color	#1E3A5F
brand-hover	15% darker	#162D4A
brand-light	95% lightness, 20% saturation	#E4EAF0
brand-subtle	97% lightness, 10% saturation	#EEF2F6
brand (dark)	40% lighter	#4A7AB0
brand-hover (dark)	30% lighter	#3D6A9A

Full Override Reference

HO Finance / Finance Portal (Navy)

:root { --color-brand: #1E3A5F; --color-brand-hover: #162D4A; --color-brand-light: #E4EAF0; --color-brand-subtle: #EEF2F6; }
[data-theme='dark'] { --color-brand: #4A7AB0; --color-brand-hover: #3D6A9A; --color-brand-light: #1A2A3D; --color-brand-subtle: #152233; }

HR Portal / Buyer App (Warm Brown)

:root { --color-brand: #92400E; --color-brand-hover: #78350F; --color-brand-light: #FEF3C7; --color-brand-subtle: #FFFBEB; }
[data-theme='dark'] { --color-brand: #D97706; --color-brand-hover: #B45309; --color-brand-light: #3D2E0A; --color-brand-subtle: #2D2208; }

Purchasing / Stock App (Teal)

:root { --color-brand: #065F46; --color-brand-hover: #064E3B; --color-brand-light: #D1FAE5; --color-brand-subtle: #ECFDF5; }
[data-theme='dark'] { --color-brand: #34D399; --color-brand-hover: #2AB884; --color-brand-light: #0A3328; --color-brand-subtle: #072A20; }

GA Portal (Earth Brown)

:root { --color-brand: #78350F; --color-brand-hover: #652D0C; --color-brand-light: #FFEDD5; --color-brand-subtle: #FFF7ED; }
[data-theme='dark'] { --color-brand: #C2712C; --color-brand-hover: #A86124; --color-brand-light: #3D2510; --color-brand-subtle: #2D1B0C; }

Promo Portal (Warm Orange)

:root { --color-brand: #9A3412; --color-brand-hover: #7C2D12; --color-brand-light: #FFEDD5; --color-brand-subtle: #FFF7ED; }
[data-theme='dark'] { --color-brand: #EA580C; --color-brand-hover: #C2410C; --color-brand-light: #3D1F0A; --color-brand-subtle: #2D1708; }

Mobile App Themes

For React Native apps, override the theme constants:

// stock-app-mobile/lib/theme.ts
import { BumiColors } from '@retailos/tokens'

export const AppColors = {
  ...BumiColors,
  brand: '#065F46',       // Teal override
  brandHover: '#064E3B',
  brandLight: '#D1FAE5',
}

Contrast Verification

All accent colors must pass WCAG AA contrast requirements:

Accent	On White (light)	On #1C1A17 (dark)
Forest Green #2D6B4A	5.2:1 pass	(use #4A9E72 4.8:1)
Navy #1E3A5F	7.1:1 pass	(use #4A7AB0 5.1:1)
Warm Brown #92400E	5.4:1 pass	(use #D97706 6.2:1)
Teal #065F46	5.8:1 pass	(use #34D399 8.4:1)
Earth Brown #78350F	5.9:1 pass	(use #C2712C 5.3:1)
Warm Orange #9A3412	4.8:1 pass	(use #EA580C 4.6:1)

Shared components

Shared component libraries should never hard-code colors. Always reference CSS variables so the accent automatically adapts per app.

Don't

• Don't use accent colors for semantic meaning (success/danger/warning) --- those are fixed
• Don't create more than 4 variants per accent (base, hover, light, subtle)
• Don't change the accent color at runtime --- it is fixed per application build