# @kodexalabs/design-tokens > **⚠️ DEPRECATED:** This package has been replaced by [`@kodexalabs/asd-tokens`](https://www.npmjs.com/package/@kodexalabs/asd-tokens). > > Please migrate to the new package for the latest design tokens, fonts, and utilities. > > **Migration:** > ```bash > # Remove old package > pnpm remove @kodexalabs/design-tokens > > # Install new package > pnpm add @kodexalabs/asd-tokens > ``` > > **Update imports:** > ```typescript > // Old > import { designTokens } from '@kodexalabs/design-tokens'; > > // New > import { designTokens } from '@kodexalabs/asd-tokens'; > ``` --- ## Legacy Documentation Unified design token system for all KodexaLabs projects. Provides a single source of truth for colors, typography, spacing, and more across your entire design system. ## Features - 🎨 **Unified Color System** - Pure black foundation with white accent, success lime, muted gray, and monochrome logo gradients - 📐 **Rule of 8 Spacing** - Consistent 8px-based spacing scale - 🔤 **Fluid Typography** - Responsive type scale using CSS clamp() - 🌗 **Dark Mode Support** - Built-in light and dark theme variants - 🎭 **Multiple Export Formats** - TypeScript, CSS variables, Tailwind plugin, JSON - ⚡ **Tree-shakeable** - Import only what you need - 🔧 **Runtime Theme Switching** - Apply themes dynamically in the browser ## Installation ```bash npm install @kodexalabs/design-tokens ``` ## Usage ### TypeScript/JavaScript ```typescript import { designTokens, colors, typography } from '@kodexalabs/design-tokens'; // Use tokens directly const primaryColor = colors.brand.white.hsl; // 'hsl(0 0% 100%)' const bodyFont = typography.fontFamily.body; const spacing = designTokens.spacing[4]; // '2rem' (32px) ``` ### CSS Variables ```typescript import { applyCSSVarsToDocument } from '@kodexalabs/design-tokens/css'; // Apply tokens as CSS variables to document applyCSSVarsToDocument('light'); // or 'dark' // Use in your CSS .button { background: var(--color-brand-white); padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-md); font-family: var(--typography-font-family-sans); } ``` ### Generate CSS String ```typescript import { generateCompleteCSS } from '@kodexalabs/design-tokens/css'; // Generate CSS string for injection or file output const css = generateCompleteCSS(); // Inject into