Color System

Human’s color system is built on a Human green primary with amber and steel blue accents, across three theme modes.

Philosophy

Colors in Human combine a corporate-clean Human green accent with warm charcoal dark surfaces and warm amber secondaries. Every color is purposeful:

• Human Green — primary actions, links, focus rings
• Amber — secondary emphasis, warnings, warmth
• Steel Blue — tertiary accents, tags, decorative elements (institutional blue)

Color Scales

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 |

Human 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)

| Step | Hex | Usage | | ---- | --------- | ------------------- | | 300 | #fcd34d | Strong amber (dark) | | 400 | #fbbf24 | Hover amber (dark) | | 500 | #f59e0b | Default amber | | 600 | #d97706 | Light hover amber |

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

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 (Corporate Clean)

Clean white/gray surfaces with charcoal text and Human green accents. Crisp #D9D9D9 borders, minimal shadows, and #F5F5F5 canvas background. All text/background pairs meet WCAG AA (4.5:1 minimum).

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

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 |

Usage

CSS

.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);
}

Swift

Text("Hello")
  .foregroundColor(HUTokens.accent)
  .background(HUTokens.bgSurface)

Kotlin

Text(
  text = "Hello",
  color = HUTokens.accent,
  modifier = Modifier.background(HUTokens.bgSurface)
)

C (Terminal)

printf(HU_COLOR_ACCENT "Connected" HU_COLOR_RESET "\n");
printf(HU_COLOR_ERROR_TC "Error: %s" HU_COLOR_RESET "\n", msg);