Color System
Human’s color system is built on a Fidelity-inspired palette with three accent families and three theme modes.
Philosophy
Section titled “Philosophy”Colors in Human combine a corporate-clean Fidelity green accent with deep ocean-midnight dark surfaces and warm amber/indigo secondaries. Every color is purposeful:
- Fidelity Green — primary actions, links, focus rings
- Amber — secondary emphasis, warnings, warmth
- Indigo — tertiary accents, tags, decorative elements
Color Scales
Section titled “Color Scales”Neutral Scale (Ocean Depth)
Section titled “Neutral Scale (Ocean Depth)”The neutral scale progresses from deep ocean midnight (50) to coastal sky-white (1000):
| Step | Hex | Usage |
|---|---|---|
| 0 | #000000 | True black (high-contrast bg) |
| 50 | #060b12 | Dark theme background |
| 100 | #0b1219 | Dark theme inset |
| 150 | #101a24 | Dark theme surface |
| 200 | #162230 | Dark theme elevated |
| 250 | #1c2a3a | Dark theme overlay |
| 300 | #233345 | Dark borders |
| 400 | #3d5468 | Faint text (dark) |
| 500 | #5e7a94 | Muted text (dark) |
| 600 | #8aa0b8 | Faint text (light) |
| 700 | #c0d0e0 | Light borders |
| 750 | #d8e4f0 | Primary text (dark) |
| 800 | #e6edf4 | Light theme inset |
| 850 | #f0f5fa | Light theme elevated |
| 900 | #f7f9fc | Light theme background |
| 1000 | #ffffff | Pure white |
Fidelity Green Scale (Primary Accent)
Section titled “Fidelity Green Scale (Primary Accent)”| Step | Hex | Usage |
|---|---|---|
| 300 | #a3d46a | Strong accent (dark) |
| 400 | #8DC63F | Hover/text accent (dark) |
| 500 | #7AB648 | Default accent |
| 600 | #5A9A30 | Light hover accent |
| 700 | #47802A | Text accent (light) |
Amber Scale (Secondary Accent)
Section titled “Amber Scale (Secondary Accent)”| Step | Hex | Usage |
|---|---|---|
| 300 | #fcd34d | Strong amber (dark) |
| 400 | #fbbf24 | Hover amber (dark) |
| 500 | #f59e0b | Default amber |
| 600 | #d97706 | Light hover amber |
Status Colors
Section titled “Status Colors”| Status | Dark | Light | Purpose |
|---|---|---|---|
| Success | Seafoam #10b981 | #008000 | Confirmations, healthy states |
| Warning | Yellow #eab308 | #ca8a04 | Caution, pending states |
| Error | Coral #f97066 | #CC0000 | Errors, destructive actions |
| Info | Blue #3b82f6 | #2563eb | Informational messages |
Theme Modes
Section titled “Theme Modes”Dark Theme (Deep Ocean)
Section titled “Dark Theme (Deep Ocean)”Default theme. Navy backgrounds with high-luminance text. Accent colors are bright and saturated for maximum visibility against dark surfaces.
Light Theme (Fidelity Corporate Clean)
Section titled “Light Theme (Fidelity Corporate Clean)”Clean white/gray surfaces with charcoal text and Fidelity green accents. Crisp #D9D9D9 borders, minimal shadows, and #F5F5F5 canvas background. All text/background pairs meet WCAG AA (4.5:1 minimum).
High Contrast
Section titled “High Contrast”Maximum contrast for accessibility. Backgrounds are pure black or white, text uses extreme values. All pairs exceed WCAG AAA (7:1 minimum). Focus rings use maximum contrast.
Contrast Requirements
Section titled “Contrast Requirements”All semantic color pairings are validated:
| Pairing | Minimum Ratio | Standard |
|---|---|---|
| Text on background | 4.5:1 | WCAG AA |
| Large text on background | 3:1 | WCAG AA |
| UI components on background | 3:1 | WCAG AA |
| High-contrast text | 7:1 | WCAG AAA |
| Focus ring on background | 3:1 | WCAG 2.2 |
.card { background: var(--hu-bg-surface); color: var(--hu-text); border: 1px solid var(--hu-border-subtle);}
.badge-success { background: var(--hu-success-dim); color: var(--hu-success);}Text("Hello") .foregroundColor(HUTokens.accent) .background(HUTokens.bgSurface)Kotlin
Section titled “Kotlin”Text( text = "Hello", color = HUTokens.accent, modifier = Modifier.background(HUTokens.bgSurface))C (Terminal)
Section titled “C (Terminal)”printf(HU_COLOR_ACCENT "Connected" HU_COLOR_RESET "\n");printf(HU_COLOR_ERROR_TC "Error: %s" HU_COLOR_RESET "\n", msg);