Vibe

Appearance

Design System ​

The Vibe Design System is a three-tier CSS and Vue 3 component library built on CSS cascade layers.

Architecture ​

@vibe-labs/design              → CSS reset + tokens + utility classes
@vibe-labs/design-components   → CSS component styles + TypeScript types
@vibe-labs/design-vue          → Vue 3 components + composables

CSS cascade layer order:

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

Unlayered CSS (tenant/white-label overrides) wins over all layers — no !important needed.

Quick Start ​

css
@import "@vibe-labs/design";
@import "@vibe-labs/design-components";
ts
import { VibeButton, VibeModal, toast } from "@vibe-labs/design-vue";

Dark / Light Mode ​

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

Sections ​

  • Design Tokens — CSS custom properties for colour, spacing, typography, and more
  • CSS Components — Component styles with data-attribute variants and TypeScript types
  • Vue Components — Vue 3 SFCs, composables, and full accessibility
  • Themes — Scoped accent colour themes with dark/light support

Vibe