Color
VibeUI uses a two-layer color system: palette tokens (raw values) and semantic tokens (intent-based aliases). Always use semantic tokens in component code. Only use palette tokens when creating new semantic aliases.
Palette — Dark Theme (default)
Background
Border
Text
Accent palette
Semantic
Semantic text
Semantic backgrounds (10% tint)
Glass / Frosted
--glass-bg: rgba(22,24,33,0.75)
--glass-border: rgba(255,255,255,0.08)
--glass-blur: 16px
Elevation (shadows)
--elevation-1: 0 1px 2px rgba(0,0,0,0.30)
--elevation-2: 0 4px 12px rgba(0,0,0,0.35)
--elevation-3: 0 8px 30px rgba(0,0,0,0.45)
--glow-accent: 0 0 20px rgba(108,140,255,0.15)
--card-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25)
Palette — Light Theme ([data-theme="light"])
Background
Border
Text
Accent & semantic
Semantic backgrounds
Semantic Color Decision Tree
Is it communicating status?
├─ Success / pass / active / healthy → --success-color / --text-success / --success-bg
├─ Error / fail / critical → --error-color / --text-danger / --error-bg
├─ Warning / slow / degraded → --warning-color / --text-warning / --warning-bg
└─ Info / in-progress / neutral → --info-color / --text-info / --info-bg
Is it interactive?
├─ Primary action (one per view) → --accent-color
└─ Secondary / ghost → --text-secondary, --border-color
Is it text?
├─ Body copy, values → --text-primary
├─ Labels, captions, metadata → --text-secondary
└─ Timestamps, disabled, placeholder → --text-muted
Is it a surface?
├─ Page background → --bg-primary
├─ Card, panel body → --bg-secondary
├─ Input, hover background → --bg-tertiary
└─ Floating (modal, dropdown, tooltip) → --bg-elevated
CSS Utility Classes
/* Text color */
.text-success → color: var(--success-color)
.text-error → color: var(--error-color)
.text-warning → color: var(--warning-color)
.text-info → color: var(--info-color)
.text-muted → color: var(--text-muted)
.text-accent → color: var(--accent-color)
/* Background tint */
.bg-success → background: var(--success-bg)
.bg-error → background: var(--error-bg)
.bg-warning → background: var(--warning-bg)
.bg-info → background: var(--info-bg)
/* Filled badges */
.badge-success → background: --success-color, white text
.badge-error → background: --error-color, white text
.badge-warning → background: --warning-color, white text
.badge-info → background: --info-color, white text
.badge-neutral → background: --bg-tertiary, secondary text
Usage Rules
Always
// Use semantic tokens for status colors
color: "var(--success-color)"
color: "var(--text-danger)"
background: "var(--error-bg)"
// Dynamic color from data — inline is fine
style={{ color: score > 80 ? "var(--success-color)" : "var(--warning-color)" }}
Never
// Hardcoded hex — breaks both themes
color: "#4caf50" // → var(--success-color)
color: "#f44336" // → var(--error-color)
color: "#ff9800" // → var(--warning-color)
color: "#2196f3" // → var(--info-color)
color: "white" // → var(--btn-primary-fg)
color: "#fff" // → var(--btn-primary-fg)
background: "rgba(239,68,68,0.1)" // → var(--error-bg)
Score / Health Color Pattern
A common pattern for health scores, confidence values, and quality metrics:
// Tri-state: good / warning / bad
const scoreColor = (n: number) =>
n >= 80 ? "var(--success-color)"
: n >= 60 ? "var(--warning-color)"
: "var(--error-color)";
// Confidence (0–1)
const confColor = (c: number) =>
c > 0.85 ? "var(--success-color)"
: c > 0.70 ? "var(--warning-color)"
: "var(--error-color)";
Status Tag Pattern
const statusTag = (s: string): string => {
const lower = s.toLowerCase();
if (lower.includes("pass") || lower.includes("ok") || lower.includes("success") || lower.includes("complete"))
return "panel-tag panel-tag-success";
if (lower.includes("warn") || lower.includes("slow") || lower.includes("progress"))
return "panel-tag panel-tag-warning";
if (lower.includes("fail") || lower.includes("error") || lower.includes("critical"))
return "panel-tag panel-tag-danger";
if (lower.includes("info") || lower.includes("run"))
return "panel-tag panel-tag-info";
return "panel-tag panel-tag-neutral";
};
<span className={statusTag(item.status)}>{item.status}</span>
Accent Colors — Decorative Use Only
Use --accent-purple, --accent-gold, --accent-rose only for decoration (language chips, syntax highlighting, category indicators). Never for semantic status.
const LANG_COLOR: Record<string, string> = {
Rust: "#dea584",
TypeScript: "#3178c6",
Python: "#4584b6",
// etc — these are decorative, not semantic
};