Colors & Design Tokens

SiberUI exports individual color scales directly (e.g., red[500], cyan[500], blue[600]) alongside semantic tokens:

import { red, blue, cyan, slate, colors, surface, signal } from '@siberui/react';

// 1. Direct Shade Scale Usage
const dangerButtonBg = red[500];   // '#ef4444'
const primaryAccent  = cyan[500];  // '#00d9e8'
const secondaryBlue  = blue[600];  // '#2563eb'
const surfaceDark    = slate[950]; // '#05070a'

// 2. Semantic Token Usage
<div style={{ background: surface.level1, color: signal.cyan }}>
  Cyber Core
</div>

Select a color family and copy any shade scale (50 - 950). Includes real-time WCAG 2.2 contrast ratio calculations against low-light background (#05070a).

Signal colors carry semantic meaning across SiberUI interfaces. They guide the user's focus during high-density operations and critical events.

SiberUI uses a multi-tiered surface hierarchy (near-black rather than pure black) to establish depth and spatial awareness in low-light cyber displays.

Standardized text opacity scale to ensure strict contrast compliance on dark surfaces.

<div className="flex flex-col gap-3 p-4 bg-[#080b10] rounded-xl border border-white/10">
  <p style={{ color: text.primary }} className="text-lg font-bold">
    Primary Text (Headings & Key Metrics) — {text.primary}
  </p>
  <p style={{ color: text.secondary }} className="text-base">
    Secondary Text (Body copy & descriptions) — {text.secondary}
  </p>
  <p style={{ color: text.muted }} className="text-sm">
    Muted Text (Labels & metadata) — {text.muted}
  </p>
  <p style={{ color: text.disabled }} className="text-xs">
    Disabled Text (Inactive items) — {text.disabled}
  </p>
</div>

Pre-paired solid colors and muted backgrounds for status badges, alert banners, and telemetry feeds.

Controlled glow shadows and backdrop blur opacity presets designed for high-impact cards and command modals.

Standardized duration and bezier curve presets for ultra-responsive UI micro-animations.

In addition to design tokens, @siberui/react exports the cn utility for easy conditional class construction.

import { cn } from '@siberui/react';

// Merge classes safely without conflicts
const className = cn(
  'px-4 py-2 rounded-md bg-surface-1 text-fg-muted transition-colors',
  isActive && 'bg-signal-cyan/10 text-signal-cyan border-l-2 border-signal-cyan',
  customClassName
);