@cassa/tokens

The foundation of the design system. All visual values — color, spacing, radius, shadow — are defined here and compiled into CSS variables, JavaScript exports, and a Tailwind preset.

Outputs

File	Use
dist/tokens.css	Import in globals.css — sets CSS custom properties on :root
dist/index.js	JS/TS named exports for runtime token access
dist/tailwind.js	Tailwind preset — extends theme.colors, borderRadius, etc.

Setup

// 1. Import CSS variables in globals.css
@import '@cassa/tokens/dist/tokens.css';

// 2. Use Tailwind preset in tailwind.config.js
import tokenPreset from '@cassa/tokens/tailwind';

export default {
  content: ['./app/**/*.{ts,tsx}'],
  presets: [tokenPreset],
};

Using tokens in code

// Tailwind classes (most common)
<div className="bg-brand-primary text-white rounded-lg p-4" />

// CSS variables directly
<div style={{ color: 'var(--color-brand-primary)' }} />

// JS imports
import { colorBrandPrimary } from '@cassa/tokens';
<div style={{ color: colorBrandPrimary }} />

Color swatches

brand.primary

brand.secondary

brand.accent

semantic.success

semantic.warning

semantic.error

semantic.info

neutral.900