Colors
Color palette, semantic tokens, alpha translucent borders, and contrast standards.
Overview
Space UI relies on high-contrast semantic color tokens paired with subtle alpha-translucent borders (--alpha(...)) and layered drop shadows to produce visual hierarchy and depth.
Palette & Semantic Tokens
| Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
background | hsl(0 0% 100%) | hsl(0 0% 9%) | Application canvas background |
foreground | hsl(222 46% 11%) | hsl(0 0% 100%) | Default body text |
card | hsl(0 0% 100%) | hsl(0 0% 4%) | Cards, panels, surfaces |
primary | hsl(0 0% 4%) | hsl(0 0% 98%) | Primary buttons & highlights |
secondary | hsl(240 5% 96%) | hsl(240 4% 16%) | Secondary actions & badges |
muted | hsl(240 5% 96%) | hsl(240 4% 16%) | Subtle container backgrounds |
destructive | hsl(0 84% 60%) | hsl(0 84% 60%) | Errors, delete actions |
info | hsl(220 96% 57%) | hsl(220 96% 57%) | Informational callouts |
success | hsl(122 61% 42%) | hsl(122 61% 42%) | Completed/success states |
warning | hsl(38 95% 50%) | hsl(38 95% 50%) | Cautionary warnings |
border | --alpha(var(--color-black) / 8%) | --alpha(var(--color-white) / 8%) | Translucent borders |
CSS Variables Definition
app/globals.css
:root {
--radius: 0.625rem;
--background: hsl(0 0% 100%);
--foreground: hsl(222 46% 11%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(0 0% 4%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(0 0% 4%);
--primary: hsl(0 0% 4%);
--primary-foreground: hsl(0 0% 100%);
--secondary: hsl(240 5% 96%);
--secondary-foreground: hsl(240 5% 34%);
--muted: hsl(0 0% 96%);
--muted-foreground: hsl(0 0% 45%);
--accent: hsl(240 5% 96%);
--accent-foreground: hsl(0 0% 4%);
--destructive: var(--color-red-500);
--destructive-foreground: var(--color-red-500);
--info: var(--color-blue-500);
--info-foreground: var(--color-blue-500);
--success: var(--color-emerald-500);
--success-foreground: var(--color-emerald-500);
--warning: var(--color-amber-500);
--warning-foreground: var(--color-amber-500);
--border: --alpha(var(--color-black) / 8%);
--input: --alpha(var(--color-black) / 8%);
--ring: transparent;
--pill-active-bg: --alpha(var(--color-black) / 10%);
}
.dark {
--background: hsl(0 0% 9%);
--foreground: hsl(0 0% 100%);
--card: hsl(0 0% 4%);
--card-foreground: hsl(0 0% 98%);
--popover: hsl(0 0% 4%);
--popover-foreground: hsl(0 0% 98%);
--primary: hsl(0 0% 98%);
--primary-foreground: hsl(0 0% 4%);
--secondary: hsl(240 4% 16%);
--secondary-foreground: hsl(0 0% 98%);
--muted: hsl(240 4% 16%);
--muted-foreground: hsl(0 0% 64%);
--accent: hsl(0 0% 9%);
--accent-foreground: hsl(0 0% 98%);
--destructive: var(--color-red-900);
--destructive-foreground: var(--color-red-400);
--info: var(--color-blue-500);
--info-foreground: var(--color-blue-400);
--success: var(--color-emerald-500);
--success-foreground: var(--color-emerald-400);
--warning: var(--color-amber-500);
--warning-foreground: var(--color-amber-400);
--border: --alpha(var(--color-white) / 8%);
--input: --alpha(var(--color-white) / 15%);
--ring: transparent;
--pill-active-bg: --alpha(var(--color-white) / 14%);
}