Vibe

Appearance

@vibe-labs/design — Developer Reference ​

The root umbrella for the Vibe Design System. Imports all design token and utility packages, declares the global CSS cascade layer order, and provides dark/light/system theming.

Installation ​

css
@import "@vibe-labs/design";

One import gives you everything: CSS reset, all tokens, all utility classes, and the default dark-mode theme.

Optional extras ​

Not included by default — import alongside when needed:

css
/* Individual main color scales */
@import "@vibe-labs/design-colors/scales/main/blue";
@import "@vibe-labs/design-colors/scales/main/red";

/* Alternative neutral scales */
@import "@vibe-labs/design-colors/scales/neutral/slate";

/* Color palettes */
@import "@vibe-labs/design-colors/palettes/flatui";

/* Image filters and blend modes */
@import "@vibe-labs/design-images/filters";

Architecture ​

CSS Cascade Layer Stack ​

vibe.reset → vibe.tokens → vibe.utilities → vibe.components → vibe.theme → vibe.accessibility
  • reset — normalises browser defaults (box model, typography, forms)
  • tokens — CSS custom properties (--color-*, --space-*, etc.)
  • utilities — single-purpose classes (.p-4, .text-sm, .flex)
  • components — component structure classes (.btn, .badge, .card)
  • theme — dark/light mode token overrides
  • accessibility — focus management, reduced-motion, screen reader overrides

Unlayered CSS wins over all layers — tenant/white-label overrides don't need !important, just omit the @layer wrapper.

Three-Tier Package Structure ​

@vibe-labs/design          →  tokens + utilities (this package)
@vibe-labs/design-components  →  component CSS + TypeScript types
@vibe-labs/design-vue         →  Vue 3 components + composables

Each tier builds on the previous. Vue components apply CSS class names; they have no <style> blocks of their own.

Theming ​

Dark / Light / System Mode ​

Dark mode is active by default on :root. Switch with the data-mode attribute:

html
<html data-mode="light">   <!-- explicit light -->
<html data-mode="dark">    <!-- explicit dark -->
<html data-mode="system">  <!-- follow OS preference -->
<html>                     <!-- dark (default) -->

Semantic Theme Tokens ​

Both modes define a complete set of semantic tokens. Override any of these in an unlayered block to white-label the system:

GroupTokens
Surfaces--surface-background · --surface-base · --surface-subtle · --surface-elevated · --surface-overlay · --surface-modal
Borders--border-subtle · --border-default · --border-strong
Text--text-primary · --text-secondary · --text-muted · --text-disabled · --text-inverse
Accent--color-accent · --color-accent-dark · --color-accent-light · --color-accent-hover · --color-accent-active · --color-accent-contrast
Status--color-success · --color-warning · --color-danger · --color-info
Status surfaces--surface-success-subtle · --surface-warning-subtle · --surface-danger-subtle · --surface-info-subtle
Overlays--overlay-scrim · --overlay-heavy · --overlay-tint
Interactions--surface-hover-overlay · --surface-active-overlay
Focus--ring-color · --ring-offset-color

White-labeling ​

Override theme tokens with unlayered CSS. Because unlayered styles win over all @layer blocks, no !important is needed:

css
/* Tenant override — wins over everything */
:root {
  --color-accent: #0070f3;
  --color-accent-contrast: #fff;
  --surface-background: #0a0a0a;
}

Included Packages ​

PackageLayerContents
@vibe-labs/design-resetresetBox model, typography, form, link normalisation
@vibe-labs/design-colorstokensNeutral scale, status colors, opt-in main scales
@vibe-labs/design-typographytokens + utilitiesFont families, sizes, weights, tracking, text utilities
@vibe-labs/design-spacingtokens + utilitiesSpacing scale, padding, margin, gap
@vibe-labs/design-borderstokens + utilitiesRadius, width, style, color, dividers
@vibe-labs/design-surfacestokens + utilitiesSemantic backgrounds, foregrounds, opacity, blur, overlays
@vibe-labs/design-elevationtokens + utilitiesShadows, focus rings
@vibe-labs/design-formstokens + utilitiesInput/button sizing tokens, form sizing utilities
@vibe-labs/design-gradientstokens + utilitiesGradient tokens and direction utilities
@vibe-labs/design-displaytokens + utilitiesZ-index, position, overflow, visibility
@vibe-labs/design-flexutilitiesFlexbox utilities
@vibe-labs/design-gridsutilitiesCSS Grid utilities
@vibe-labs/design-layoutstokens + utilitiesAlignment, containers, safe area insets
@vibe-labs/design-sizingtokens + utilitiesWidth, height, aspect ratio, object-fit
@vibe-labs/design-imagesutilitiesBackground image utilities (filters opt-in)
@vibe-labs/design-filtersutilitiesIcon outlines, glow, text shadows, frosted glass
@vibe-labs/design-interactionsutilitiesCursor, scroll, pointer, touch, resize
@vibe-labs/design-transitionstokens + utilitiesDurations, easings, keyframes, animation utilities
@vibe-labs/design-responsivetokens + utilitiesContainer queries, responsive visibility, breakpoints

Building New Design-Level Packages ​

Package Structure ​

vibe-design-{name}/
├── package.json
├── readme.md
├── scripts/
│   └── build.mjs          # generates utility CSS from tokens
└── src/
    ├── index.css           # barrel — imports all source CSS
    └── {name}.css          # token definitions (@layer vibe.tokens)

After build, dist/ contains:

dist/
├── index.css              # barrel (tokens + generated utilities)
├── {name}.css             # token definitions
└── {name}.g.css           # generated utility classes

package.json Template ​

json
{
  "name": "@vibe-labs/design-{name}",
  "version": "0.1.0",
  "type": "module",
  "files": ["dist"],
  "style": "./dist/index.css",
  "exports": {
    ".": { "default": "./dist/index.css" }
  },
  "sideEffects": ["*.css"],
  "scripts": {
    "build": "rimraf dist && ncp src dist && node ./scripts/build.mjs"
  }
}

Token Definitions ​

All tokens go in src/{name}.css inside @layer vibe.tokens on :root:

css
@layer vibe.tokens {
  :root {
    --my-token-sm: 0.5rem;
    --my-token-md: 1rem;
    /* Semantic tokens reference primitives from other packages */
    --my-semantic: var(--color-neutral-900);
  }
}

Rules:

  • Always @layer vibe.tokens
  • Always :root scope
  • Semantic tokens reference other packages' primitives via var(--...)
  • Primitive tokens use direct values (px, rem, hex, etc.)
  • Document cross-package dependencies in readme.md

Build Script ​

scripts/build.mjs generates utility classes into @layer vibe.utilities:

js
import fs from "fs";
import path from "path";

const distDir = path.resolve("dist");

function l(txt) {
  return `@layer vibe.utilities {\n${txt}}\n`;
}

function generateUtilities() {
  let out = "";
  // Token-to-class mapping
  for (const n of [1, 2, 3, 4]) {
    out += `.my-util-${n} { property: var(--my-token-${n}); }\n`;
  }
  return out;
}

fs.writeFileSync(path.join(distDir, "{name}.g.css"), l(generateUtilities()));
fs.writeFileSync(path.join(distDir, "index.css"), `@import "./{name}.css";\n@import "./{name}.g.css";\n`);

Cross-Package Token Dependencies ​

Packages reference each other's tokens via CSS custom properties. These are runtime dependencies (load order matters) but not npm dependencies. The umbrella @vibe-labs/design handles import order.

Common chains:

  • surfaces → requires --color-neutral-* from colors
  • elevation → requires --color-accent from theme
  • forms → requires tokens from borders, typography, colors

Document dependencies in readme.md but don't add them to package.json.

Quick Checklist ​

  1. Create vibe-design-{name}/ directory
  2. Add package.json (copy template, update name)
  3. Create src/{name}.css with tokens in @layer vibe.tokens
  4. Create src/index.css barrel
  5. Create scripts/build.mjs generating utilities into @layer vibe.utilities
  6. Write readme.md, contents.md, developer.md, usage.md
  7. Run npm run build and verify dist/
  8. Add to the umbrella @vibe-labs/design imports

Token Ownership ​

Token familyOwner package
--color-*design-colors
--text-* · --font-*design-typography
--space-*design-spacing
--surface-* · --overlay-* · --blur-* · --opacity-*design-surfaces
--border-* · --radius-*design-borders
--shadow-* · --ring-*design-elevation
--duration-* · --ease-*design-transitions
--z-*design-display
--input-* · --btn-* · --select-*design-forms
--gradient-*design-gradients
--safe-*design-layouts
--breakpoint-*design-responsive

Build ​

bash
npm run build

Using @vibe-labs/design ​

The design system base layer. Provides all CSS tokens (custom properties) and utility classes.

Quick Start ​

css
@import "@vibe-labs/design";

That's it. Tokens and utilities are now available globally.

Applying Utility Classes ​

Use single-purpose utility classes directly on elements:

html
<!-- Spacing -->
<div class="p-4 gap-3 flex">...</div>

<!-- Typography -->
<h1 class="text-display-md font-bold text-primary">Title</h1>
<p class="text-sm text-secondary leading-relaxed">Body text</p>

<!-- Surfaces -->
<div class="bg-base rounded-lg border border-default shadow-md">Card</div>

<!-- Layout -->
<div class="flex items-center justify-between gap-4">
  <span class="flex-1">Left</span>
  <span>Right</span>
</div>

Using Tokens in Custom CSS ​

Reference tokens in your own CSS with var():

css
.my-component {
  padding: var(--space-4);
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
  transition: background-color var(--duration-normal) var(--ease-default);
}

.my-component:hover {
  background: var(--surface-overlay);
}

Dark / Light Mode ​

Dark is the default. Toggle with data-mode on the root element:

html
<html data-mode="light">    <!-- light mode -->
<html data-mode="dark">     <!-- dark mode (explicit) -->
<html data-mode="system">   <!-- follow OS preference -->
<html>                      <!-- dark (default) -->

Theming with Accent Color ​

All accent-derived tokens cascade from --color-accent. Override it to theme the entire system:

css
/* Tenant theme — unlayered, wins over all @layer blocks */
:root {
  --color-accent: #7c3aed;
  --color-accent-contrast: #fff;
}

White-labeling ​

Override any semantic token with unlayered CSS. No !important needed — unlayered CSS beats all @layer blocks:

css
/* Full white-label example */
:root {
  --color-accent: #0070f3;
  --color-accent-dark: #0051b3;
  --color-accent-light: #3395ff;
  --color-accent-hover: color-mix(in srgb, #0070f3 90%, black);
  --color-accent-active: color-mix(in srgb, #0070f3 80%, black);
  --color-accent-contrast: #fff;

  --surface-background: #09090b;
  --surface-base: #18181b;
  --surface-elevated: #27272a;
}

Common Layout Patterns ​

html
<!-- Stack: vertical layout with gap -->
<div class="flex flex-col gap-4">...</div>

<!-- Row: horizontal with spacing -->
<div class="flex items-center gap-3">...</div>

<!-- Grid: responsive columns -->
<div class="grid grid-cols-3 gap-6">...</div>

<!-- Card shell -->
<div class="bg-elevated rounded-xl border border-subtle p-6 shadow-sm">...</div>

<!-- Full-height page -->
<body class="bg-background min-h-screen text-primary font-sans">...</div>

<!-- Truncated text -->
<p class="truncate max-w-sm text-secondary text-sm">Long text...</p>

<!-- Status badge -->
<span class="text-xs font-semibold uppercase tracking-wide text-success">Active</span>

Status Colors ​

css
.my-alert {
  /* Use semantic status tokens */
  background: var(--surface-danger-subtle);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

Optional Color Scales ​

Import individual main color scales for palette utilities:

css
@import "@vibe-labs/design";
@import "@vibe-labs/design-colors/scales/main/blue";
@import "@vibe-labs/design-colors/scales/main/purple";

/* Now available: --color-blue-50 through --color-blue-900 */

Responsive Utilities ​

html
<!-- Hide below breakpoint -->
<div class="hidden-below-md">Only visible on md+</div>

<!-- Responsive grid (container-query based) -->
<div class="container-size grid-cols-1 grid-cols-3-md gap-4">...</div>

Key Token Reference ​

CategoryCommon tokens
Spacing--space-1 (4px) through --space-24 (96px)
Text sizes--text-xs · --text-sm · --text-base · --text-lg · --text-xl · --text-display-*
Radii--radius-sm · --radius-md · --radius-lg · --radius-xl · --radius-full
Surfaces--surface-background → --surface-base → --surface-elevated → --surface-modal
Timing--duration-fast (75ms) · --duration-normal (150ms) · --duration-slow (300ms)
Easing--ease-default · --ease-in · --ease-out · --ease-spring
Z-index--z-dropdown (100) · --z-modal (400) · --z-toast (600)

Package Contents ​

@vibe-labs/design-reset ​

Import: @import "@vibe-labs/design-reset";

Layer ​

vibe.reset (lowest priority in the Vibe cascade)

What Is Reset ​

No tokens or utility classes. This package applies a CSS reset via element selectors only.

Elements affected: * · html · body · h1–h6 · p · ul · ol · li · a · img · svg · video · picture · source · button · input · select · textarea · fieldset · legend

@vibe-labs/design-colors ​

Import: @import "@vibe-labs/design-colors";

Tokens (Core) ​

--color-neutral-0 · --color-neutral-25 · --color-neutral-50 · --color-neutral-75 · --color-neutral-100 · --color-neutral-200 · --color-neutral-300 · --color-neutral-400 · --color-neutral-450 · --color-neutral-500 · --color-neutral-550 · --color-neutral-600 · --color-neutral-650 · --color-neutral-700 · --color-neutral-750 · --color-neutral-800 · --color-neutral-825 · --color-neutral-850 · --color-neutral-875 · --color-neutral-900 · --color-neutral-950 · --color-neutral-1000

--color-success-{50–600} · --color-warning-{50–600} · --color-danger-{50–600} · --color-info-{50–600}

Tokens (Opt-in Scales) ​

--color-blue-* · --color-brown-* · --color-cyan-* · --color-green-* · --color-indigo-* · --color-orange-* · --color-pink-* · --color-purple-* · --color-red-* · --color-teal-* · --color-yellow-*

Tokens (Alt Neutrals) ​

--color-slate-* · --color-zinc-* · --color-stone-* · --color-sand-* · --color-charcoal-*

Utilities ​

None — tokens only.

@vibe-labs/design-typography ​

Import: @import "@vibe-labs/design-typography";

Tokens ​

--font-sans · --font-mono · --font-display

--text-primary · --text-secondary · --text-inverse · --text-muted · --text-disabled

--text-xs · --text-sm · --text-base · --text-md · --text-lg · --text-xl · --text-display-sm · --text-display-md · --text-display-lg · --text-display-xl · --text-hero · --text-hero-lg · --text-hero-xl

--leading-none · --leading-tight · --leading-snug · --leading-normal · --leading-relaxed · --leading-loose

--font-light · --font-normal · --font-medium · --font-semibold · --font-bold · --font-black

--tracking-tighter · --tracking-tight · --tracking-normal · --tracking-wide · --tracking-wider · --tracking-widest

Utilities ​

.text-xs · .text-sm · .text-base · .text-md · .text-lg · .text-xl · .text-display-sm · .text-display-md · .text-display-lg · .text-display-xl · .text-hero · .text-hero-lg · .text-hero-xl

.font-light · .font-normal · .font-medium · .font-semibold · .font-bold · .font-black

.tracking-tighter · .tracking-tight · .tracking-normal · .tracking-wide · .tracking-wider · .tracking-widest

.leading-none · .leading-tight · .leading-snug · .leading-normal · .leading-relaxed · .leading-loose

.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 · .line-clamp-2 · .line-clamp-3 · .line-clamp-4

@vibe-labs/design-spacing ​

Import: @import "@vibe-labs/design-spacing";

Tokens ​

--space-0 · --space-1 · --space-2 · --space-3 · --space-4 · --space-5 · --space-6 · --space-8 · --space-10 · --space-12 · --space-16 · --space-20 · --space-24

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 for all utilities: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24

@vibe-labs/design-borders ​

Import: @import "@vibe-labs/design-borders";

Tokens ​

--radius-none · --radius-sm · --radius-md · --radius-lg · --radius-xl · --radius-2xl · --radius-full

--border-width-0 · --border-width-1 · --border-width-2 · --border-width-4

--border-default · --border-strong · --border-subtle

Utilities ​

Radius: .rounded-none · .rounded-sm · .rounded-md · .rounded-lg · .rounded-xl · .rounded-2xl · .rounded-full · .rounded-t-{size} · .rounded-r-{size} · .rounded-b-{size} · .rounded-l-{size}

Width: .border · .border-0 · .border-1 · .border-2 · .border-4 · .border-t-{n} · .border-r-{n} · .border-b-{n} · .border-l-{n} · .border-x-{n} · .border-y-{n}

Style: .border-solid · .border-dashed · .border-dotted · .border-none

Color (semantic): .border-default · .border-strong · .border-subtle · .border-transparent

Color (palette): .border-blue · .border-brown · .border-cyan · .border-green · .border-indigo · .border-orange · .border-pink · .border-purple · .border-red · .border-teal · .border-yellow

Color (status): .border-success · .border-warning · .border-danger · .border-info

Divide: .divide-x · .divide-y · .divide-strong

@vibe-labs/design-surfaces ​

Import: @import "@vibe-labs/design-surfaces";

Tokens ​

Opacity: --opacity-0 · --opacity-5 · --opacity-10 · --opacity-20 · --opacity-25 · --opacity-50 · --opacity-75 · --opacity-80 · --opacity-90 · --opacity-95 · --opacity-100

Blur: --blur-sm · --blur-md · --blur-lg · --blur-xl

Overlays: --overlay-scrim · --overlay-heavy · --overlay-tint

Backgrounds: --surface-background · --surface-base · --surface-elevated · --surface-subtle · --surface-overlay · --surface-modal

Foregrounds: --surface-fg-primary · --surface-fg-secondary · --surface-fg-inverse · --surface-fg-muted · --surface-fg-disabled

Utilities ​

Opacity: .opacity-0 · .opacity-5 · .opacity-10 · .opacity-20 · .opacity-25 · .opacity-50 · .opacity-75 · .opacity-80 · .opacity-90 · .opacity-95 · .opacity-100

Backdrop Blur: .backdrop-blur-none · .backdrop-blur-sm · .backdrop-blur-md · .backdrop-blur-lg · .backdrop-blur-xl

Overlays: .overlay-scrim · .overlay-heavy · .overlay-tint

Backgrounds: .bg-background · .bg-base · .bg-elevated · .bg-subtle · .bg-overlay · .bg-modal

Foregrounds: .fg-primary · .fg-secondary · .fg-inverse · .fg-muted · .fg-disabled

Blend: .bg-blend-normal · .bg-blend-multiply · .bg-blend-screen · .bg-blend-overlay · .bg-blend-darken · .bg-blend-lighten

@vibe-labs/design-elevation ​

Import: @import "@vibe-labs/design-elevation";

Tokens ​

Shadows: --shadow-none · --shadow-xs · --shadow-sm · --shadow-md · --shadow-lg · --shadow-xl · --shadow-2xl · --shadow-inner

Focus Ring: --ring-color · --ring-offset-color · --ring-offset-width

Utilities ​

Shadows: .shadow-none · .shadow-xs · .shadow-sm · .shadow-md · .shadow-lg · .shadow-xl · .shadow-2xl · .shadow-inner

Rings: .ring-0 · .ring-1 · .ring-2 · .ring-4 · .ring-inset-1 · .ring-inset-2

Ring Colors (palette): .ring-blue · .ring-brown · .ring-cyan · .ring-green · .ring-indigo · .ring-orange · .ring-pink · .ring-purple · .ring-red · .ring-teal · .ring-yellow

Ring Colors (status): .ring-success · .ring-warning · .ring-danger · .ring-info

@vibe-labs/design-forms ​

Import: @import "@vibe-labs/design-forms";

Tokens ​

Input sizing: --input-height-sm · --input-height-md · --input-height-lg · --input-px-sm · --input-px-md · --input-px-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-color

Button sizing: --btn-height-sm · --btn-height-md · --btn-height-lg · --btn-px-sm · --btn-px-md · --btn-px-lg · --btn-font-size-sm · --btn-font-size-md · --btn-font-size-lg

Button appearance: --btn-radius · --btn-font-weight

Select: --select-indicator-size · --select-indicator-color

Utilities ​

.input-sm · .input-md · .input-lg

.btn-sm · .btn-md · .btn-lg

@vibe-labs/design-gradients ​

Import: @import "@vibe-labs/design-gradients";

Tokens ​

Direction: --gradient-direction

Card: --gradient-card · --gradient-card-subtle · --gradient-card-elevated

Accent: --gradient-accent · --gradient-accent-subtle

Functional: --gradient-shimmer · --gradient-fade-t · --gradient-fade-b · --gradient-fade-l · --gradient-fade-r · --gradient-depth

Utilities ​

Direction: .bg-gradient-to-t · .bg-gradient-to-tr · .bg-gradient-to-r · .bg-gradient-to-br · .bg-gradient-to-b · .bg-gradient-to-bl · .bg-gradient-to-l · .bg-gradient-to-tl · .bg-gradient-radial

Card: .bg-gradient-card · .bg-gradient-card-subtle · .bg-gradient-card-elevated

Accent: .bg-gradient-accent · .bg-gradient-accent-subtle

Functional: .bg-gradient-shimmer · .bg-gradient-fade-t · .bg-gradient-fade-b · .bg-gradient-fade-l · .bg-gradient-fade-r · .bg-gradient-depth · .bg-gradient-none

@vibe-labs/design-display ​

Import: @import "@vibe-labs/design-display";

Tokens ​

--z-base · --z-dropdown · --z-sticky · --z-overlay · --z-modal · --z-popover · --z-toast

Utilities ​

Display: .block · .inline-block · .inline · .hidden · .contents

Position: .static · .relative · .absolute · .fixed · .sticky

Inset (zero): .inset-0 · .inset-x-0 · .inset-y-0 · .top-0 · .right-0 · .bottom-0 · .left-0

Inset (auto): .inset-auto · .top-auto · .right-auto · .bottom-auto · .left-auto

Inset (full): .inset-full

Overflow: .overflow-hidden · .overflow-auto · .overflow-scroll · .overflow-visible · .overflow-x-{value} · .overflow-y-{value}

Visibility: .visible · .invisible

Z-index: .z-base · .z-dropdown · .z-sticky · .z-overlay · .z-modal · .z-popover · .z-toast

@vibe-labs/design-flex ​

Import: @import "@vibe-labs/design-flex";

Tokens ​

None — utilities only.

Utilities ​

Display: .flex · .inline-flex

Direction: .flex-row · .flex-row-reverse · .flex-col · .flex-col-reverse

Wrap: .flex-wrap · .flex-wrap-reverse · .flex-nowrap

Grow/Shrink: .flex-none · .flex-initial · .flex-1 · .grow · .grow-0 · .shrink · .shrink-0

Basis: .basis-auto · .basis-0 · .basis-full · .basis-1/2 · .basis-1/3 · .basis-2/3 · .basis-1/4 · .basis-3/4

Order: .order-first · .order-last · .order-none · .order-10 · .order-20 · .order-30 · .order-40 · .order-50 · .order-60

@vibe-labs/design-grids ​

Import: @import "@vibe-labs/design-grids";

Tokens ​

None — utilities only.

Utilities ​

Display: .grid · .inline-grid

Columns: .grid-cols-1 … .grid-cols-12

Column Span: .col-span-1 … .col-span-12

Column Placement: .col-start-1 … .col-start-12 · .col-end-1 … .col-end-12

Row Span: .row-span-1 · .row-span-2 · .row-span-3 · .row-span-4

Auto Flow: .grid-flow-row · .grid-flow-col · .grid-flow-dense

@vibe-labs/design-layouts ​

Import: @import "@vibe-labs/design-layouts";

Tokens ​

--safe-top · --safe-bottom · --safe-left · --safe-right

Utilities ​

Place Items: .place-items-start · .place-items-center · .place-items-end · .place-items-stretch

Place Content: .place-content-start · .place-content-center · .place-content-end · .place-content-stretch · .place-content-between · .place-content-around · .place-content-evenly

Justify: .justify-start · .justify-center · .justify-end · .justify-between · .justify-around · .justify-evenly

Align Items: .items-start · .items-center · .items-end · .items-baseline · .items-stretch

Align Self: .self-auto · .self-start · .self-center · .self-end · .self-stretch

Safe Padding: .pt-safe · .pb-safe · .pl-safe · .pr-safe · .px-safe · .py-safe · .p-safe

Safe Margin: .mt-safe · .mb-safe · .ml-safe · .mr-safe · .mx-safe · .my-safe · .m-safe

Safe Inset: .top-safe · .bottom-safe · .left-safe · .right-safe · .inset-safe · .inset-x-safe · .inset-y-safe

@vibe-labs/design-sizing ​

Import: @import "@vibe-labs/design-sizing";

Tokens ​

--max-w-xs · --max-w-sm · --max-w-md · --max-w-lg · --max-w-xl · --max-w-prose

Utilities ​

Width: .w-auto · .w-full · .w-screen · .w-dvw · .w-fit · .w-min · .w-max · .w-1/2 · .w-1/3 · .w-2/3 · .w-1/4 · .w-3/4 · .w-1/5 · .w-2/5 · .w-3/5 · .w-4/5

Height: .h-auto · .h-full · .h-screen · .h-dvh · .h-fit · .h-min · .h-max

Min Width: .min-w-0 · .min-w-full · .min-w-fit · .min-w-min · .min-w-max

Max Width: .max-w-none · .max-w-xs · .max-w-sm · .max-w-md · .max-w-lg · .max-w-xl · .max-w-prose · .max-w-full · .max-w-screen

Min Height: .min-h-0 · .min-h-full · .min-h-screen · .min-h-dvh · .min-h-fit

Max Height: .max-h-none · .max-h-full · .max-h-screen · .max-h-dvh · .max-h-fit

Aspect Ratio: .aspect-auto · .aspect-square · .aspect-video · .aspect-photo · .aspect-portrait · .aspect-wide

Object Fit: .object-cover · .object-contain · .object-fill · .object-none · .object-scale-down

Object Position: .object-center · .object-top · .object-bottom · .object-left · .object-right

@vibe-labs/design-images ​

Import: @import "@vibe-labs/design-images";Filters (opt-in): @import "@vibe-labs/design-images/filters";

Tokens (filters sub-export only) ​

--filter-blur-sm · --filter-blur-md · --filter-blur-lg · --filter-blur-xl

--filter-brightness-{50–150} · --filter-contrast-{50–150} · --filter-saturate-{0–200}

Utilities (Core) ​

Background Size: .bg-cover · .bg-contain · .bg-auto

Background Position: .bg-center · .bg-top · .bg-bottom · .bg-left · .bg-right

Background Repeat: .bg-repeat · .bg-no-repeat · .bg-repeat-x · .bg-repeat-y

Background Attachment: .bg-fixed · .bg-local · .bg-scroll

Image Rendering: .render-auto · .render-crisp · .render-pixel

Utilities (Filters, opt-in) ​

Blur: .blur-none · .blur-sm · .blur-md · .blur-lg · .blur-xl

Toggle: .grayscale · .grayscale-0 · .sepia · .sepia-0 · .invert · .invert-0

Brightness: .brightness-50 · .brightness-75 · .brightness-90 · .brightness-100 · .brightness-110 · .brightness-125 · .brightness-150

Contrast: .contrast-50 · .contrast-75 · .contrast-100 · .contrast-125 · .contrast-150

Saturate: .saturate-0 · .saturate-50 · .saturate-100 · .saturate-150 · .saturate-200

Hue Rotate: .hue-rotate-15 · .hue-rotate-30 · .hue-rotate-60 · .hue-rotate-90 · .hue-rotate-180

Mix Blend: .mix-blend-normal · .mix-blend-multiply · .mix-blend-screen · .mix-blend-overlay · .mix-blend-darken · .mix-blend-lighten · .mix-blend-color-dodge · .mix-blend-color-burn · .mix-blend-hard-light · .mix-blend-soft-light · .mix-blend-difference · .mix-blend-exclusion

@vibe-labs/design-filters ​

Import: @import "@vibe-labs/design-filters";

Tokens ​

None — compound filter utilities only.

Utilities ​

Icon Outlines: .icon-outline · .icon-outline-subtle · .icon-outline-strong · .icon-outline-light

Glow: .glow-sm · .glow-md · .glow-lg · .glow-accent

Text Shadows: .text-shadow-sm · .text-shadow-md · .text-shadow-lg · .text-shadow-none

Frosted Glass: .frosted · .frosted-heavy · .frosted-light

Color Grading: .filter-muted · .filter-vivid · .filter-warm · .filter-cool

Reset: .filter-none · .backdrop-filter-none

@vibe-labs/design-interactions ​

Import: @import "@vibe-labs/design-interactions";

Tokens ​

None — utilities only.

Utilities ​

Cursor: .cursor-auto · .cursor-default · .cursor-pointer · .cursor-grab · .cursor-grabbing · .cursor-move · .cursor-not-allowed · .cursor-wait · .cursor-text · .cursor-crosshair · .cursor-col-resize · .cursor-row-resize · .cursor-none

User Select: .select-none · .select-text · .select-all · .select-auto

Pointer Events: .pointer-events-none · .pointer-events-auto

Touch Action: .touch-auto · .touch-none · .touch-pan-x · .touch-pan-y · .touch-manipulation

Scroll Behavior: .scroll-auto · .scroll-smooth

Scroll Snap (container): .snap-x · .snap-y · .snap-both · .snap-none · .snap-mandatory · .snap-proximity

Scroll Snap (child): .snap-start · .snap-center · .snap-end · .snap-align-none · .snap-always · .snap-normal

Overscroll: .overscroll-auto · .overscroll-contain · .overscroll-none · .overscroll-x-auto · .overscroll-x-contain · .overscroll-x-none · .overscroll-y-auto · .overscroll-y-contain · .overscroll-y-none

Resize: .resize-none · .resize · .resize-x · .resize-y

Will-Change: .will-change-auto · .will-change-transform · .will-change-opacity · .will-change-scroll · .will-change-contents

@vibe-labs/design-transitions ​

Import: @import "@vibe-labs/design-transitions";

Tokens ​

Duration: --duration-instant · --duration-fast · --duration-normal · --duration-moderate · --duration-slow · --duration-slower · --duration-lazy

Easing (standard): --ease-linear · --ease-default · --ease-in · --ease-out · --ease-in-out

Easing (expressive): --ease-spring · --ease-bounce · --ease-elastic · --ease-smooth

Easing (directional): --ease-decel · --ease-accel · --ease-sharp

Utilities ​

Duration: .duration-instant · .duration-fast · .duration-normal · .duration-moderate · .duration-slow · .duration-slower · .duration-lazy

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

Transition Property: .transition-all · .transition-colors · .transition-opacity · .transition-transform · .transition-shadow · .transition-size

Delay: .delay-instant · .delay-fast · .delay-normal · .delay-moderate · .delay-slow · .delay-slower · .delay-lazy

Looping Animations: .animate-wiggle · .animate-bounce · .animate-pulse · .animate-spin · .animate-ping

One-shot Animations: .animate-shake · .animate-fade-in · .animate-fade-out · .animate-scale-in · .animate-scale-out · .animate-slide-in-up · .animate-slide-in-down · .animate-slide-in-left · .animate-slide-in-right

Control: .animate-none · .animate-paused · .animate-running · .animate-once · .animate-infinite · .animate-fill-both · .animate-fill-forwards · .animate-fill-none

Reduced Motion: .motion-reduce · .motion-safe

@vibe-labs/design-responsive ​

Import: @import "@vibe-labs/design-responsive";

Tokens ​

--breakpoint-xs · --breakpoint-sm · --breakpoint-md · --breakpoint-lg · --breakpoint-xl · --breakpoint-2xl

Utilities ​

Container Setup: .container-inline · .container-size · .container-normal

Named Containers: .container-name-main · .container-name-sidebar · .container-name-card · .container-name-panel

Container Visibility: .hidden-below-xs · .hidden-below-sm · .hidden-below-md · .hidden-below-lg · .hidden-below-xl · .hidden-below-2xl · .hidden-above-xs · .hidden-above-sm · .hidden-above-md · .hidden-above-lg · .hidden-above-xl · .hidden-above-2xl

Viewport Visibility: .viewport-hidden-below-{bp} · .viewport-hidden-above-{bp} (same breakpoint set)

Stack to Row: .stack-to-row-xs · .stack-to-row-sm · .stack-to-row-md · .stack-to-row-lg · .stack-to-row-xl · .stack-to-row-2xl

Responsive Grid Cols: .grid-cols-{1–12}-xs · .grid-cols-{1–12}-sm · .grid-cols-{1–12}-md · .grid-cols-{1–12}-lg · .grid-cols-{1–12}-xl · .grid-cols-{1–12}-2xl

CQ Width Fractions: .w-cq-1-1 · .w-cq-1-2 · .w-cq-1-3 · .w-cq-2-3 · .w-cq-1-4 · .w-cq-3-4 · .w-cq-1-6 · .w-cq-5-6 · .w-cq-1-12 … (46 unique fractions total)

CQ Text: .text-cq-sm · .text-cq-base · .text-cq-lg · .text-cq-xl

Vibe