Colors
A two-layer token system. Primitives are the raw color ramps — they flip across light/dark at the primitive level. Semantic tokens reference primitives via var() and give every color a role (primary, foreground, destructive). Components use semantics; the palette swaps by toggling .dark on <html>.
60 / 30 / 10 color balance
MiHCM uses the 60/30/10 composition rule as a hierarchy check: most screen area stays neutral, brand blue supports structure and primary actions, and orange is reserved for small emphasis. These percentages are practical guidelines, not a runtime measurement.
60% dominant
Page background, app canvas, large cards, table bodies, form fields, panels.
- Token
- --color-ratio-60
- Utility
- bg-ratio-60 text-ratio-60-foreground
30% supporting
Primary actions, active navigation, app-shell anchors, chart key series, focus systems.
- Token
- --color-ratio-30
- Utility
- bg-ratio-30 text-ratio-30-foreground
10% accent
Orange emphasis, selected hints, active underlines, notification marks, small highlights.
- Token
- --color-ratio-10
- Utility
- bg-ratio-10 text-ratio-10-foreground
Primary (MiHCM Navy)
The action colour. 500 (#003385) is the hero — buttons, links, active states, focus rings. The full 11-step ramp provides tints for backgrounds and shades for hover/press states.
Brand Neutral
The grey ramp tuned to MiHCM's brand. Numeric names are lumens (50 = lightest surface, 821 = near-black). Drives foreground, muted, border, and surface tokens.
Accent (MiHCM Orange)
The emphasis colour — switch thumbs, active sidebar indicators, secondary CTA hovers, the 'Edit' access-level button. 500 is #f16012.
Status
Three status pairs — each has a strong foreground (500) and a tint background (100). The tint flips to a dark shade in dark mode so contrast holds.
Semantic tokens
Role-based tokens consumed by components. Each references a primitive via var() — dark-mode flips happen at the primitive layer, not here. Use these in component code; never raw hex.
Tailwind CSS built-in colors
These are available out of the box with Tailwind 4. Use them for consumer pages and non-branded surfaces. For design-system components, prefer the MiHCM ramps above.
Use as bg-red-500, text-slate-700, etc. Full reference at tailwindcss.com/docs/colors.
Usage
/* Tailwind utility (preferred) */
<div className="bg-primary text-primary-foreground" />
<div className="bg-primary-50 text-primary" />
/* CSS variable */
.custom { color: var(--color-foreground); }
.tint { background: var(--color-accent-50); }
/* TypeScript (React Native) */
import { colors, primary, accent } from '@mihcm/tokens';
const navy = colors.light.primary; // #003385
const step = primary.light[300]; // #96abcd
const orange = accent.light[500]; // #f16012