Skip to content

Color System

Human’s color system is built on a Fidelity-inspired palette with three accent families and three theme modes.

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

The neutral scale progresses from deep ocean midnight (50) to coastal sky-white (1000):

StepHexUsage
0#000000True black (high-contrast bg)
50#060b12Dark theme background
100#0b1219Dark theme inset
150#101a24Dark theme surface
200#162230Dark theme elevated
250#1c2a3aDark theme overlay
300#233345Dark borders
400#3d5468Faint text (dark)
500#5e7a94Muted text (dark)
600#8aa0b8Faint text (light)
700#c0d0e0Light borders
750#d8e4f0Primary text (dark)
800#e6edf4Light theme inset
850#f0f5faLight theme elevated
900#f7f9fcLight theme background
1000#ffffffPure white
StepHexUsage
300#a3d46aStrong accent (dark)
400#8DC63FHover/text accent (dark)
500#7AB648Default accent
600#5A9A30Light hover accent
700#47802AText accent (light)
StepHexUsage
300#fcd34dStrong amber (dark)
400#fbbf24Hover amber (dark)
500#f59e0bDefault amber
600#d97706Light hover amber
StatusDarkLightPurpose
SuccessSeafoam #10b981#008000Confirmations, healthy states
WarningYellow #eab308#ca8a04Caution, pending states
ErrorCoral #f97066#CC0000Errors, destructive actions
InfoBlue #3b82f6#2563ebInformational messages

Default theme. Navy backgrounds with high-luminance text. Accent colors are bright and saturated for maximum visibility against dark surfaces.

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

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.

All semantic color pairings are validated:

PairingMinimum RatioStandard
Text on background4.5:1WCAG AA
Large text on background3:1WCAG AA
UI components on background3:1WCAG AA
High-contrast text7:1WCAG AAA
Focus ring on background3:1WCAG 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)
Text(
text = "Hello",
color = HUTokens.accent,
modifier = Modifier.background(HUTokens.bgSurface)
)
printf(HU_COLOR_ACCENT "Connected" HU_COLOR_RESET "\n");
printf(HU_COLOR_ERROR_TC "Error: %s" HU_COLOR_RESET "\n", msg);