@itzcull/tokens

A comprehensive design token system supporting multiple CSS frameworks and use cases.

Overview

This monorepo contains design tokens organized by use case and CSS framework, following the pattern @itzcull/tokens/{library}/{framework}.

Package Structure

Marketing/Landing Page Tokens

• @itzcull/tokens-marketing-tailwindcss - Marketing tokens for TailwindCSS
• @itzcull/tokens-marketing-unocss - Marketing tokens for UnoCSS

Application/SaaS Tokens

• @itzcull/tokens-app-tailwindcss - Application tokens for TailwindCSS
• @itzcull/tokens-app-unocss - Application tokens for UnoCSS

Agency Tokens

• @itzcull/tokens-agency-tailwindcss - Agency tokens for TailwindCSS
• @itzcull/tokens-agency-unocss - Agency tokens for UnoCSS

Info Product Tokens

• @itzcull/tokens-info-product-tailwindcss - Info product tokens for TailwindCSS
• @itzcull/tokens-info-product-unocss - Info product tokens for UnoCSS

Documentation Site Tokens

• @itzcull/tokens-docs-site-tailwindcss - Documentation tokens for TailwindCSS
• @itzcull/tokens-docs-site-unocss - Documentation tokens for UnoCSS

Brainwave Tokens (First Implementation)

• @itzcull/tokens-brainwave-unocss - Brainwave design system for UnoCSS ✅
• @itzcull/tokens-brainwave-tailwindcss - Brainwave design system for TailwindCSS (Coming Soon)

Quick Start

Brainwave UnoCSS (Available Now)

npm install @itzcull/tokens-brainwave-unocss

import { BrainwaveUnoCSS } from '@itzcull/tokens-brainwave-unocss'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    BrainwaveUnoCSS(),
  ],
})

Design System Features

Each token package includes:

• Color Palettes: Comprehensive color scales with semantic naming
• Typography: Font families, sizes, weights, and line heights
• Spacing: Consistent spacing scale for margins, padding, and gaps
• Shadows: Pre-defined shadow utilities
• Border Radius: Rounded corner utilities
• Component Shortcuts: Common UI component classes
• Custom Utilities: Framework-specific utility classes
• Animations: Built-in animation presets

Usage Guides

Each package includes:

• 📖 Developer Documentation: Installation and usage instructions
• 🎨 Design Guidelines: Color usage, typography hierarchy, spacing rules
• 🤖 LLM Integration: Structured token information for AI-assisted development
• 🎯 Figma Integration: Links to corresponding Figma design libraries

Development

This is a pnpm workspace. To get started:

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

# Lint code
pnpm lint

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Roadmap

• [x] Brainwave UnoCSS implementation
• [ ] Brainwave TailwindCSS implementation
• [ ] Marketing token packages
• [ ] Application token packages
• [ ] Agency token packages
• [ ] Info product token packages
• [ ] Documentation site token packages
• [ ] Sprinkles support exploration

License

MIT