@designa8/vibedesign-claude-2

Complete design system generated by Atoms Design, version 0.0.1. Tokens, atoms, molecules, organisms, and templates — import from the package root; never hardcode visual values in consumer code.

Install

npm install @designa8/vibedesign-claude-2

Imports

import { Button, Input } from "@designa8/vibedesign-claude-2";

The CSS (design tokens, Tailwind utilities, and the design system font loaded from Google Fonts) is bundled into the package entry point and injected automatically by your bundler — no separate CSS import needed.

Global CSS compatibility

The package's utility classes (spacing, colours, border-radius, etc.) are compiled as unlayered CSS rules. They therefore beat standard resets such as * { margin: 0; padding: 0; box-sizing: border-box } by normal specificity (class selector 0-1-0 > universal selector 0-0-0). No special setup is needed for a typical Vite / Create-React-App / Next.js project.

The one exception is the body font. The design system injects body { font-family: var(--font-body) } inside @layer base, which any unlayered body { font-family: ... } rule in your own CSS will override. Remove that override, or replace it with the design system variable:

body {
  font-family: var(--font-body); /* use the design system's configured font */
}