LOXIHART SIGNAL · DESIGN SYSTEM v1.2

Restrained chrome. Theatrical stage.

Three-tier design tokens, tree-shakeable CVA primitives, bespoke 1.55px effect glyphs, and automated contrast and bundle governance for Loxihart Signal Studio, Share, Connect, and 3D Lab.

WCAG 2.2 AA Semantic Contrast Matrix

Computed directly from src/design-system/tokens.json during npm run tokens:build.

Min 4.5:1

Aa · 01:60fps18.78:1

Primary text on Canvas#f4f8fb on #06080bAAA PASS

Aa · 01:60fps18.00:1

Primary text on Surface#f4f8fb on #0b0f14AAA PASS

Aa · 01:60fps10.74:1

Secondary text on Surface#b7c3d0 on #0b0f14AAA PASS

Aa · 01:60fps6.61:1

Muted text on Surface#8a99aa on #0b0f14AA PASS

Aa · 01:60fps6.74:1

Muted text on Quiet well#8a99aa on #080c11AA PASS

Aa · 01:60fps17.89:1

Primary action Ink on Cyan surface#071016 on #e9faffAAA PASS

Aa · 01:60fps11.58:1

Brand Cyan signal on Surface#61d8f5 on #0b0f14AAA PASS

Aa · 01:60fps12.86:1

Online Emerald on Quiet chip#6ee7b7 on #080c11AAA PASS

Aa · 01:60fps13.09:1

Danger Coral text on Error banner#fecaca on #1a0d10AAA PASS

Three-Tier Token Registry (96)

Primitive palette values feed semantic roles, which feed component-scoped tokens.

Tier	CSS Custom Property	Resolved Value	Source / Alias
primitive	`--ds-primitive-color-obsidian-600`	`#15252b`	`literal`
primitive	`--ds-primitive-color-obsidian-650`	`#111111`	`literal`
primitive	`--ds-primitive-color-obsidian-700`	`#10161d`	`literal`
primitive	`--ds-primitive-color-obsidian-750`	`#0e1720`	`literal`
primitive	`--ds-primitive-color-obsidian-800`	`#0b0f14`	`literal`
primitive	`--ds-primitive-color-obsidian-825`	`#091017`	`literal`
primitive	`--ds-primitive-color-obsidian-850`	`#080c11`	`literal`
primitive	`--ds-primitive-color-obsidian-900`	`#06080b`	`literal`
primitive	`--ds-primitive-color-obsidian-925`	`#05090e`	`literal`
primitive	`--ds-primitive-color-obsidian-950`	`#030509`	`literal`
primitive	`--ds-primitive-color-slate-50`	`#f4f8fb`	`literal`
primitive	`--ds-primitive-color-slate-200`	`#b7c3d0`	`literal`
primitive	`--ds-primitive-color-slate-300`	`#a2b3bb`	`literal`
primitive	`--ds-primitive-color-slate-400`	`#8a99aa`	`literal`
primitive	`--ds-primitive-color-slate-500`	`#6f7b8b`	`literal`
primitive	`--ds-primitive-color-slate-700`	`#3a4a5b`	`literal`
primitive	`--ds-primitive-color-slate-750`	`#263744`	`literal`
primitive	`--ds-primitive-color-slate-800`	`#26313e`	`literal`
primitive	`--ds-primitive-color-cyan-50`	`#e9faff`	`literal`
primitive	`--ds-primitive-color-cyan-200`	`#b9eef4`	`literal`
primitive	`--ds-primitive-color-cyan-400`	`#61d8f5`	`literal`
primitive	`--ds-primitive-color-cyan-950`	`#071016`	`literal`
primitive	`--ds-primitive-color-emerald-300`	`#6ee7b7`	`literal`
primitive	`--ds-primitive-color-coral-200`	`#fecaca`	`literal`
primitive	`--ds-primitive-color-coral-300`	`#fca5a5`	`literal`
primitive	`--ds-primitive-color-coral-950`	`#1a0d10`	`literal`
primitive	`--ds-primitive-color-brass-300`	`#d5c29e`	`literal`
primitive	`--ds-primitive-font-sans`	`'Manrope', ui-sans-serif, system-ui, sans-serif`	`literal`
primitive	`--ds-primitive-font-mono`	`'IBM Plex Mono', ui-monospace, monospace`	`literal`
primitive	`--ds-primitive-radius-xs`	`8px`	`literal`
primitive	`--ds-primitive-radius-sm`	`10px`	`literal`
primitive	`--ds-primitive-radius-md`	`14px`	`literal`
primitive	`--ds-primitive-radius-lg`	`16px`	`literal`
primitive	`--ds-primitive-radius-pill`	`999px`	`literal`
primitive	`--ds-primitive-space-1`	`4px`	`literal`
primitive	`--ds-primitive-space-2`	`8px`	`literal`
primitive	`--ds-primitive-space-3`	`12px`	`literal`
primitive	`--ds-primitive-space-4`	`16px`	`literal`
primitive	`--ds-primitive-space-5`	`20px`	`literal`
primitive	`--ds-primitive-space-6`	`24px`	`literal`
primitive	`--ds-primitive-space-7`	`28px`	`literal`
primitive	`--ds-primitive-space-8`	`32px`	`literal`
primitive	`--ds-primitive-size-touch-min`	`44px`	`literal`
primitive	`--ds-primitive-size-action-md`	`48px`	`literal`
primitive	`--ds-primitive-size-action-lg`	`52px`	`literal`
primitive	`--ds-primitive-motion-fast`	`150ms`	`literal`
primitive	`--ds-primitive-motion-base`	`165ms`	`literal`
primitive	`--ds-primitive-motion-ease-standard`	`cubic-bezier(0.2, 0, 0, 1)`	`literal`
semantic	`--ds-semantic-bg-canvas`	`#06080b`	`primitive.color.obsidian.900`
semantic	`--ds-semantic-bg-stage`	`#030509`	`primitive.color.obsidian.950`
semantic	`--ds-semantic-bg-hybrid`	`#05090e`	`primitive.color.obsidian.925`
semantic	`--ds-semantic-surface-default`	`#0b0f14`	`primitive.color.obsidian.800`
semantic	`--ds-semantic-surface-raised`	`#10161d`	`primitive.color.obsidian.700`
semantic	`--ds-semantic-surface-quiet`	`#080c11`	`primitive.color.obsidian.850`
semantic	`--ds-semantic-surface-band`	`#111111`	`primitive.color.obsidian.650`
semantic	`--ds-semantic-surface-hybrid`	`#091017`	`primitive.color.obsidian.825`
semantic	`--ds-semantic-border-subtle`	`#26313e`	`primitive.color.slate.800`
semantic	`--ds-semantic-border-strong`	`#3a4a5b`	`primitive.color.slate.700`
semantic	`--ds-semantic-border-accent`	`#61d8f5`	`primitive.color.cyan.400`
semantic	`--ds-semantic-border-hybrid`	`#263744`	`primitive.color.slate.750`
semantic	`--ds-semantic-text-primary`	`#f4f8fb`	`primitive.color.slate.50`
semantic	`--ds-semantic-text-secondary`	`#b7c3d0`	`primitive.color.slate.200`
semantic	`--ds-semantic-text-muted`	`#8a99aa`	`primitive.color.slate.400`
semantic	`--ds-semantic-text-inverse`	`#071016`	`primitive.color.cyan.950`
semantic	`--ds-semantic-accent-surface`	`#e9faff`	`primitive.color.cyan.50`
semantic	`--ds-semantic-accent-signal`	`#61d8f5`	`primitive.color.cyan.400`
semantic	`--ds-semantic-accent-brass`	`#d5c29e`	`primitive.color.brass.300`
semantic	`--ds-semantic-status-online`	`#6ee7b7`	`primitive.color.emerald.300`
semantic	`--ds-semantic-status-danger`	`#fca5a5`	`primitive.color.coral.300`
semantic	`--ds-semantic-status-danger-text`	`#fecaca`	`primitive.color.coral.200`
semantic	`--ds-semantic-status-danger-bg`	`#1a0d10`	`primitive.color.coral.950`
component	`--ds-comp-button-primary-bg`	`#e9faff`	`semantic.accent.surface`
component	`--ds-comp-button-primary-text`	`#071016`	`semantic.text.inverse`
component	`--ds-comp-button-primary-border`	`#61d8f5`	`semantic.border.accent`
component	`--ds-comp-button-secondary-bg`	`#080c11`	`semantic.surface.quiet`
component	`--ds-comp-button-secondary-text`	`#f4f8fb`	`semantic.text.primary`
component	`--ds-comp-button-secondary-border`	`#3a4a5b`	`semantic.border.strong`
component	`--ds-comp-button-min-height`	`48px`	`primitive.size.actionMd`
component	`--ds-comp-button-radius`	`14px`	`primitive.radius.md`
component	`--ds-comp-panel-bg`	`#0b0f14`	`semantic.surface.default`
component	`--ds-comp-panel-border`	`#26313e`	`semantic.border.subtle`
component	`--ds-comp-panel-radius`	`16px`	`primitive.radius.lg`
component	`--ds-comp-tile-bg`	`#080c11`	`semantic.surface.quiet`
component	`--ds-comp-tile-active-bg`	`#10161d`	`semantic.surface.raised`
component	`--ds-comp-tile-border`	`#26313e`	`semantic.border.subtle`
component	`--ds-comp-tile-active-border`	`#61d8f5`	`semantic.border.accent`
component	`--ds-comp-tile-radius`	`14px`	`primitive.radius.md`
component	`--ds-comp-chip-bg`	`#080c11`	`semantic.surface.quiet`
component	`--ds-comp-chip-active-bg`	`#e9faff`	`semantic.accent.surface`
component	`--ds-comp-chip-active-text`	`#071016`	`semantic.text.inverse`
component	`--ds-comp-chip-radius`	`999px`	`primitive.radius.pill`
component	`--ds-comp-badge-height`	`44px`	`primitive.size.touchMin`
component	`--ds-comp-badge-radius`	`999px`	`primitive.radius.pill`
component	`--ds-comp-hybrid-option-bg`	`#0e1720`	`primitive.color.obsidian.750`
component	`--ds-comp-hybrid-option-active-bg`	`#15252b`	`primitive.color.obsidian.600`
component	`--ds-comp-hybrid-muted-text`	`#a2b3bb`	`primitive.color.slate.300`