--ui-bg-canvas📋 | surface | #ffffff | #09090b | Main document canvas & background |
--ui-bg-surface📋 | surface | #ffffff | #09090b | Card, dialog, and panel surface container |
--ui-bg-surface-elevated📋 | surface | #f4f4f5 | #18181b | Floating popovers, dropdowns, and elevated cards |
--ui-bg-subtle📋 | surface | #f4f4f5 | #27272a | Secondary backgrounds, pill buttons, alternate rows |
--ui-bg-hover📋 | surface | #e4e4e7 | #27272a | Interactive item hover state |
--ui-bg-active📋 | surface | #d4d4d8 | #3f3f46 | Active/pressed button or item state |
--ui-bg📋 | surface | var(--ui-bg-canvas) | var(--ui-bg-canvas) | Canonical convenience shortcut alias for canvas |
--ui-text-primary📋 | text | #09090b | #fafafa | Headings and high-contrast body copy |
--ui-text-secondary📋 | text | #52525b | #a1a1aa | Subheadings, field labels, and secondary copy |
--ui-text-muted📋 | text | #71717a | #71717a | Placeholders, helper captions, and subtle timestamps |
--ui-text-inverted📋 | text | #fafafa | #09090b | Inverted text for dark tooltips or solid badges |
--ui-text📋 | text | var(--ui-text-primary) | var(--ui-text-primary) | Canonical convenience shortcut alias for primary text |
--ui-border-subtle📋 | border | #f4f4f5 | #18181b | Gentle dividers and subtle card section borders |
--ui-border-default📋 | border | #e4e4e7 | #27272a | Standard border for buttons, inputs, cards, and tables |
--ui-border-strong📋 | border | #d4d4d8 | #3f3f46 | Emphasized borders and active segmented tabs |
--ui-border-focus📋 | border | #09090b | #fafafa | High-visibility accessible keyboard focus ring |
--ui-border📋 | border | var(--ui-border-default) | var(--ui-border-default) | Canonical convenience shortcut alias for default border |
--ui-color-brand-500📋 | brand | #71717a | #71717a | Primary brand accent for buttons, switches, and sliders |
--ui-color-accent-400📋 | brand | #38bdf8 | #38bdf8 | Secondary brand accent highlight |
--ui-color-accent-500📋 | brand | #0ea5e9 | #0ea5e9 | Interactive primary brand accent |
--ui-color-success-500📋 | status | #10b981 | #10b981 | Success notifications, verified tags, and active status |
--ui-color-warning-500📋 | status | #f59e0b | #f59e0b | Warning callouts, pending badges, and caution states |
--ui-color-danger-500📋 | status | #ef4444 | #ef4444 | Destructive buttons, error alerts, and validation errors |
--ui-font-sans📋 | typography | Inter, system-ui, sans-serif | Inter, system-ui, sans-serif | Primary application UI font stack |
--ui-font-mono📋 | typography | JetBrains Mono, monospace | JetBrains Mono, monospace | Monospace font stack for code and IDs |
--ui-font-size-xs📋 | typography | 0.75rem (12px) | 0.75rem (12px) | Extra small captions and badge labels |
--ui-font-size-sm📋 | typography | 0.875rem (14px) | 0.875rem (14px) | Small text, buttons, table cell labels |
--ui-font-size-base📋 | typography | 1rem (16px) | 1rem (16px) | Standard body text and form inputs |
--ui-font-size-lg📋 | typography | 1.125rem (18px) | 1.125rem (18px) | Card headings and featured paragraphs |
--ui-font-size-xl📋 | typography | 1.25rem (20px) | 1.25rem (20px) | Section titles and modal headers |
--ui-font-size-2xl📋 | typography | 1.5rem (24px) | 1.5rem (24px) | Page headers and hero banners |
--ui-radius-sm📋 | radius | 0.375rem (6px) | 0.375rem (6px) | Small badges, chip tags, and tooltips |
--ui-radius-md📋 | radius | 0.5rem (8px) | 0.5rem (8px) | Default button, input, and card radius |
--ui-radius-lg📋 | radius | 0.75rem (12px) | 0.75rem (12px) | Dialog modals, sheets, and popovers |
--ui-radius-xl📋 | radius | 1rem (16px) | 1rem (16px) | Large panels and drawer sheets |
--ui-radius-full📋 | radius | 9999px | 9999px | Pill buttons, circular avatars, and badges |
--ui-shadow-sm📋 | shadow | 0 1px 2px rgba(0,0,0,0.05) | 0 1px 2px rgba(0,0,0,0.3) | Subtle elevation for cards and buttons |
--ui-shadow-md📋 | shadow | 0 4px 6px -1px rgba(0,0,0,0.08) | 0 4px 6px -1px rgba(0,0,0,0.4) | Card hover elevation and dropdowns |
--ui-shadow-lg📋 | shadow | 0 10px 15px -3px rgba(0,0,0,0.1) | 0 10px 15px -3px rgba(0,0,0,0.5) | Floating menus and search palettes |
--ui-shadow-popover📋 | shadow | 0 12px 32px -4px rgba(15,23,42,0.18) | 0 16px 36px -4px rgba(0,0,0,0.65) | Top-layer anchored popovers and menus |
--ui-glass-bg📋 | glass | rgba(255,255,255,0.82) | rgba(9,9,11,0.85) | Frosted glass translucent backdrop |
--ui-glass-border📋 | glass | rgba(228,228,231,0.8) | rgba(39,39,42,0.8) | Frosted glass boundary stroke |
--ui-glass-blur📋 | glass | blur(12px) | blur(12px) | Glassmorphic backdrop filter blur |
--ui-z-dropdown📋 | zindex | 1000 | 1000 | Anchored dropdown menus |
--ui-z-sticky📋 | zindex | 1100 | 1100 | Sticky headers and navigation bars |
--ui-z-modal📋 | zindex | 1350 | 1350 | Dialog modals and sheet drawers |
--ui-z-toast📋 | zindex | 1500 | 1500 | Toast notifications floating container |
--ui-z-tooltip📋 | zindex | 1600 | 1600 | Floating tooltips atop all layers |
--ui-ease-spring📋 | motion | cubic-bezier(0.16, 1, 0.3, 1) | cubic-bezier(0.16, 1, 0.3, 1) | Natural fluid spring motion curve |
--ui-duration-fast📋 | motion | 150ms | 150ms | Instant feedback clicks and toggles |
--ui-duration-normal📋 | motion | 250ms | 250ms | Accordion expand and modal entrance |
