Vibe Platform

Appearance

@vibe-labs/design ​

Umbrella package for the Vibe Design System. Imports all design tokens and utility packages, establishes CSS layer order, and provides dark/light mode theming.

Usage ​

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

This single import gives you everything: tokens, utilities, resets, and theme (dark mode default).

Optional Extras ​

Not included by default — import alongside if needed:

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

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

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

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

What's Included ​

Layer Order ​

Declares the global CSS cascade layer order:

vibe.reset → vibe.tokens → vibe.utilities → vibe.components → vibe.theme → vibe.accessibility

Packages ​

All @vibe-labs/design-* packages are re-exported:

PackageContents
design-colorsNeutral scale + status colors
design-typographyFont families, sizes, weights, tracking, text utilities
design-spacingSpacing scale, padding, margin, gap
design-bordersBorder radius, width, style, color, dividers
design-surfacesSemantic backgrounds, foregrounds, opacity, overlays, backdrop blur
design-elevationBox shadows, focus rings
design-formsForm reset, input/button tokens and sizing
design-gradientsGradient tokens and direction utilities
design-displayDisplay, position, overflow, visibility, z-index
design-flexFlexbox utilities
design-gridsCSS Grid utilities
design-layoutsAlignment, container breakpoints, safe area insets
design-sizingWidth, height, aspect ratio, object-fit
design-imagesBackground image utilities
design-interactionsCursor, scroll, pointer, touch, resize
design-transitionsTransitions, animations, easing, keyframes
design-responsiveContainer queries, responsive visibility, grid, fractional widths

Theme: Dark / Light Mode ​

Dark Mode (default) ​

Applied to :root — no attribute needed.

Light Mode ​

Activate via data-mode attribute on the root element:

html
<!-- Explicit light -->
<html data-mode="light">
  ...
</html>

<!-- Explicit dark -->
<html data-mode="dark">
  ...
</html>

<!-- Follow system preference -->
<html data-mode="system">
  ...
</html>

<!-- or simply omit the attribute -->
<html>
  ...
</html>

Themed Properties ​

Both modes define a complete set of semantic tokens:

  • 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
  • States: --color-success, --color-warning, --color-danger, --color-info
  • Overlays: --overlay-scrim, --overlay-heavy, --overlay-tint
  • Interactions: --surface-hover-overlay, --surface-active-overlay
  • Focus: --ring-color, --ring-offset-color
  • Status surfaces: --surface-success-subtle, --surface-warning-subtle, --surface-danger-subtle, --surface-info-subtle

Build ​

bash
npm run build