Appearance
@vibe-labs/design — Contents Reference
Quick-reference for all tokens, utilities, and classes available from the design system umbrella. For component authoring — not consumer docs.
Layer Order
vibe.reset → vibe.tokens → vibe.utilities → vibe.components → vibe.theme → vibe.accessibilityUnlayered CSS (tenant overrides) wins over all layers automatically.
Colors (@vibe-labs/design-colors)
Neutral Scale
--color-neutral-{stop} — 0 (white) → 1000 (black)
Stops: 0, 25, 50, 75, 100, 200, 300, 400, 450, 500, 550, 600, 650, 700, 750, 800, 825, 850, 875, 900, 950, 1000
Status Colors
--color-{status}-{stop} — stops 50–600
Statuses: success, warning, danger, info
Main Color Scales (opt-in)
--color-{name}-{50–900} — blue, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow
Alternative Neutrals (opt-in)
slate, zinc, stone, sand, charcoal
Typography (@vibe-labs/design-typography)
Tokens
Families: --font-sans · --font-mono · --font-display
Text colors:--text-primary (neutral-0) · --text-secondary (neutral-200) · --text-inverse (neutral-900) · --text-muted (neutral-400) · --text-disabled (neutral-500)
Sizes (with paired line-height):--text-xs (0.75rem) · --text-sm (0.875rem) · --text-base (1rem) · --text-md (1.125rem) · --text-lg (1.25rem) · --text-xl (1.5rem) · --text-display-sm (1.875rem) · --text-display-md (2.25rem) · --text-display-lg (3rem) · --text-display-xl (3.75rem) · --text-hero (4.5rem) · --text-hero-lg (6rem) · --text-hero-xl (7.5rem)
Weights:--font-light (300) · --font-normal (400) · --font-medium (500) · --font-semibold (600) · --font-bold (700) · --font-black (900)
Leading:--leading-none (1) · --leading-tight (1.15) · --leading-snug (1.3) · --leading-normal (1.5) · --leading-relaxed (1.625) · --leading-loose (2)
Tracking:--tracking-tighter (-0.05em) · --tracking-tight (-0.025em) · --tracking-normal (0) · --tracking-wide (0.025em) · --tracking-wider (0.05em) · --tracking-widest (0.1em)
Utilities
.text-{size} · .font-{weight} · .tracking-{name} · .leading-{name} · .font-sans · .font-mono · .font-display · .text-left · .text-center · .text-right · .text-justify · .underline · .overline · .line-through · .no-underline · .uppercase · .lowercase · .capitalize · .normal-case · .truncate · .text-wrap · .text-nowrap · .text-balance · .text-pretty · .line-clamp-{1–4}
Spacing (@vibe-labs/design-spacing)
Tokens
--space-{n} — 0 (0), 1 (0.25rem), 2 (0.5rem), 3 (0.75rem), 4 (1rem), 5 (1.25rem), 6 (1.5rem), 8 (2rem), 10 (2.5rem), 12 (3rem), 16 (4rem), 20 (5rem), 24 (6rem)
Utilities
Padding: .p-{n} · .px-{n} · .py-{n} · .pt-{n} · .pr-{n} · .pb-{n} · .pl-{n}Margin: .m-{n} · .mx-{n} · .my-{n} · .mt-{n} · .mr-{n} · .mb-{n} · .ml-{n}Gap: .gap-{n} · .gap-x-{n} · .gap-y-{n}
Scale steps: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24
Borders (@vibe-labs/design-borders)
Tokens
Radius: --radius-none (0) · --radius-sm · --radius-md · --radius-lg · --radius-xl · --radius-2xl · --radius-full (9999px) Width: --border-width-0 (0) · --border-width-1 (1px) · --border-width-2 (2px) · --border-width-4 (4px) Color: --border-default (neutral-600) · --border-strong (neutral-400) · --border-subtle (neutral-750)
Utilities
Radius: .rounded-{size} · .rounded-{t|r|b|l}-{size}Width: .border (=1) · .border-{0|1|2|4} · .border-{t|r|b|l|x|y} · .border-{side}-{n}Style: .border-solid · .border-dashed · .border-dotted · .border-noneColor: .border-default · .border-strong · .border-subtle · .border-transparent · .border-{palette} · .border-{status}Divide: .divide-x · .divide-y · .divide-strong
Surfaces (@vibe-labs/design-surfaces)
Tokens
Semantic backgrounds:--surface-background (neutral-950) · --surface-base (neutral-900) · --surface-subtle (neutral-875) · --surface-elevated (neutral-850) · --surface-overlay (neutral-800) · --surface-modal (neutral-750)
Semantic foregrounds:--surface-fg-primary · --surface-fg-secondary · --surface-fg-inverse · --surface-fg-muted · --surface-fg-disabled
Opacity: --opacity-{n} — 0, 5, 10, 20, 25, 50, 75, 80, 90, 95, 100 Blur: --blur-sm (4px) · --blur-md (8px) · --blur-lg (16px) · --blur-xl (24px) Overlays: --overlay-scrim (rgba 0,0,0,0.4) · --overlay-heavy (rgba 0,0,0,0.6) · --overlay-tint (rgba 255,255,255,0.08)
Utilities
Backgrounds: .bg-background · .bg-base · .bg-elevated · .bg-subtle · .bg-overlay · .bg-modalForegrounds: .fg-primary · .fg-secondary · .fg-inverse · .fg-muted · .fg-disabledOpacity: .opacity-{n}Blur: .backdrop-blur-{none|sm|md|lg|xl}Overlays: .overlay-scrim · .overlay-heavy · .overlay-tintBlend: .bg-blend-{normal|multiply|screen|overlay|darken|lighten}
Elevation (@vibe-labs/design-elevation)
Tokens
Shadows: --shadow-none · --shadow-xs · --shadow-sm · --shadow-md · --shadow-lg · --shadow-xl · --shadow-2xl · --shadow-innerFocus ring: --ring-color (accent) · --ring-offset-color (surface-base) · --ring-offset-width (2px)
Utilities
Shadows: .shadow-{none|xs|sm|md|lg|xl|2xl|inner}Rings: .ring-0 · .ring-{1|2|4} · .ring-inset-{1|2}Ring colors: .ring-{palette} · .ring-{status}
Forms (@vibe-labs/design-forms)
Tokens
Input sizing: --input-height-{sm|md|lg} (2rem / 2.5rem / 3rem) · --input-px-{sm|md|lg}Input appearance: --input-radius · --input-border-width · --input-border · --input-border-hover · --input-border-focus · --input-bg · --input-text · --input-placeholder · --input-disabled-opacity · --input-focus-ring-width · --input-focus-ring-colorButton sizing: --btn-height-{sm|md|lg} (2rem / 2.5rem / 3rem) · --btn-px-{sm|md|lg} · --btn-font-size-{sm|md|lg}Button appearance: --btn-radius · --btn-font-weight (600) Select: --select-indicator-size · --select-indicator-color
Utilities
.input-sm · .input-md · .input-lg · .btn-sm · .btn-md · .btn-lg
Gradients (@vibe-labs/design-gradients)
Tokens
--gradient-direction (to bottom) · --gradient-card · --gradient-card-subtle · --gradient-card-elevated · --gradient-accent · --gradient-accent-subtle · --gradient-shimmer · --gradient-fade-{t|b|l|r} · --gradient-depth
Utilities
Direction: .bg-gradient-to-{t|tr|r|br|b|bl|l|tl} · .bg-gradient-radialSemantic: .bg-gradient-card · .bg-gradient-card-subtle · .bg-gradient-card-elevated · .bg-gradient-accent · .bg-gradient-accent-subtle · .bg-gradient-shimmer · .bg-gradient-fade-{t|b|l|r} · .bg-gradient-depth · .bg-gradient-none
Display (@vibe-labs/design-display)
Tokens (Z-Index)
--z-base (0) · --z-dropdown (100) · --z-sticky (200) · --z-overlay (300) · --z-modal (400) · --z-popover (500) · --z-toast (600)
Utilities
Display: .block · .inline-block · .inline · .hidden · .contentsPosition: .static · .relative · .absolute · .fixed · .stickyInset: .inset-0 · .inset-x-0 · .inset-y-0 · .top-0 · .right-0 · .bottom-0 · .left-0 · .inset-auto · .*-auto · .inset-fullOverflow: .overflow-{hidden|auto|scroll|visible} · .overflow-{x|y}-{value}Visibility: .visible · .invisibleZ-Index: .z-{base|dropdown|sticky|overlay|modal|popover|toast}
Flex (@vibe-labs/design-flex)
Utilities
.flex · .inline-flex · .flex-row · .flex-row-reverse · .flex-col · .flex-col-reverse · .flex-wrap · .flex-wrap-reverse · .flex-nowrap · .flex-none · .flex-initial · .flex-1 · .grow · .grow-0 · .shrink · .shrink-0 · .basis-{auto|0|full|1/2|1/3|2/3|1/4|3/4} · .order-first · .order-last · .order-none · .order-{10–60}
Grids (@vibe-labs/design-grids)
Utilities
.grid · .inline-grid · .grid-cols-{1–12} · .col-span-{1–12} · .col-start-{1–12} · .col-end-{1–12} · .row-span-{1–4} · .grid-flow-row · .grid-flow-col · .grid-flow-dense
Layouts (@vibe-labs/design-layouts)
Tokens
Safe area: --safe-top · --safe-bottom · --safe-left · --safe-right
Utilities
Alignment: .place-items-{start|center|end|stretch} · .place-content-{start|center|end|stretch|between|around|evenly} · .justify-{start|center|end|between|around|evenly} · .items-{start|center|end|baseline|stretch} · .self-{auto|start|center|end|stretch}Safe area: .{p|m}{t|b|l|r|x|y}-safe · .{top|bottom|left|right|inset|inset-x|inset-y}-safe
Sizing (@vibe-labs/design-sizing)
Tokens
--max-w-xs (320px) · --max-w-sm (640px) · --max-w-md (768px) · --max-w-lg (1024px) · --max-w-xl (1280px) · --max-w-prose (65ch)
Utilities
Width: .w-{auto|full|screen|dvw|fit|min|max} · .w-{1/2|1/3|2/3|1/4|3/4|1/5|2/5|3/5|4/5}Height: .h-{auto|full|screen|dvh|fit|min|max}Min/Max: .min-w-{0|full|fit|min|max} · .max-w-{none|xs|sm|md|lg|xl|prose|full|screen} · .min-h-{0|full|screen|dvh|fit} · .max-h-{none|full|screen|dvh|fit}Aspect: .aspect-{auto|square|video|photo|portrait|wide}Object fit: .object-{cover|contain|fill|none|scale-down}Object position: .object-{center|top|bottom|left|right}
Images (@vibe-labs/design-images)
Utilities (core)
.bg-{cover|contain|auto} · .bg-{center|top|bottom|left|right} · .bg-{repeat|no-repeat|repeat-x|repeat-y} · .bg-{fixed|local|scroll} · .render-{auto|crisp|pixel}
Filters (opt-in)
.blur-{none|sm|md|lg|xl} · .grayscale · .sepia · .invert · .brightness-{50–150} · .contrast-{50–150} · .saturate-{0–200} · .hue-rotate-{15|30|60|90|180} · .mix-blend-{mode}
Interactions (@vibe-labs/design-interactions)
Utilities
Cursor: .cursor-{auto|default|pointer|grab|grabbing|move|not-allowed|wait|text|crosshair|col-resize|row-resize|none}Select: .select-{none|text|all|auto}Pointer: .pointer-events-{none|auto}Touch: .touch-{auto|none|pan-x|pan-y|manipulation}Scroll: .scroll-{auto|smooth}Snap: .snap-{x|y|both|none} · .snap-{mandatory|proximity} · .snap-{start|center|end|align-none} · .snap-{always|normal}Overscroll: .overscroll-{auto|contain|none} · .overscroll-{x|y}-{value}Resize: .resize-{none|x|y} · .resizeWill-change: .will-change-{auto|transform|opacity|scroll|contents}
Transitions (@vibe-labs/design-transitions)
Tokens
Duration: --duration-instant (0ms) · --duration-fast (75ms) · --duration-normal (150ms) · --duration-moderate (200ms) · --duration-slow (300ms) · --duration-slower (500ms) · --duration-lazy (700ms) Easing: --ease-linear · --ease-default · --ease-in · --ease-out · --ease-in-out · --ease-spring · --ease-bounce · --ease-elastic · --ease-smooth · --ease-decel · --ease-accel · --ease-sharp
Keyframes
vibe-fade-{in|out} · vibe-scale-{in|out} · vibe-slide-{in|out}-{up|down|left|right} · vibe-panel-{in|out}-{left|right|bottom} · vibe-spin · vibe-ping · vibe-pulse · vibe-bounce · vibe-wiggle · vibe-shake
Utilities
Duration: .duration-{instant|fast|normal|moderate|slow|slower|lazy}Easing: .ease-{name}Property: .transition-{all|colors|opacity|transform|shadow|size}Delay: .delay-{name}Animation: .animate-{wiggle|bounce|pulse|spin|ping|shake} · .animate-fade-{in|out} · .animate-scale-{in|out} · .animate-slide-in-{up|down|left|right} · .animate-{none|paused|running|once|infinite} · .animate-fill-{both|forwards|none}A11y: .motion-reduce · .motion-safe
Responsive (@vibe-labs/design-responsive)
Tokens
--breakpoint-xs (480px) · --breakpoint-sm (640px) · --breakpoint-md (768px) · --breakpoint-lg (1024px) · --breakpoint-xl (1280px) · --breakpoint-2xl (1536px)
Utilities
Container: .container-{inline|size|normal} · .container-name-{main|sidebar|card|panel}Visibility: .hidden-below-{bp} · .hidden-above-{bp} · .viewport-hidden-below-{bp} · .viewport-hidden-above-{bp}Layout: .stack-to-row-{bp}Responsive grid: .grid-cols-{1–12}-{bp} (container-query-based) CQ widths: .w-cq-{n}-{d} — unique reduced fractions, denominators 1–12 (e.g. .w-cq-1-2, .w-cq-2-3, .w-cq-5-12) CQ text: .text-cq-{sm|base|lg|xl}
Breakpoints: xs · sm · md · lg · xl · 2xl
Theme Semantics (from @vibe-labs/design)
These tokens are defined per mode (dark default, light via data-mode="light"):
Surfaces: --surface-background · --surface-base · --surface-subtle · --surface-elevated · --surface-overlay · --surface-modalBorders: --border-subtle · --border-default · --border-strongText: --text-primary · --text-secondary · --text-muted · --text-disabled · --text-inverseAccent: --color-accent · --color-accent-dark · --color-accent-light · --color-accent-hover · --color-accent-active · --color-accent-contrastStatus: --color-success · --color-warning · --color-danger · --color-infoStatus surfaces: --surface-success-subtle · --surface-warning-subtle · --surface-danger-subtle · --surface-info-subtleOverlays: --overlay-scrim · --overlay-heavy · --overlay-tintInteractions: --surface-hover-overlay · --surface-active-overlayFocus: --ring-color · --ring-offset-color
Variant System
Component CSS uses data-attribute selectors by default:
html
<button class="btn" data-variant="accent" data-size="lg">Click me</button>Flat class mode also available: .btn-accent · .btn-lg
Token Ownership
| Token family | Owner |
|---|---|
--color-* | colors |
--text-*, --font-* | typography |
--space-* | spacing |
--surface-*, --overlay-*, --blur-*, --opacity-* | surfaces |
--border-*, --radius-* | borders |
--shadow-*, --ring-* | elevation |
--duration-*, --ease-* | transitions |
--z-* | display |
--input-*, --btn-*, --select-* | forms |
--gradient-* | gradients |
--safe-* | layouts |
--breakpoint-* | responsive |