@birhaus/tokens

BIRHAUS Design Tokens - Design system tokens for the BIRHAUS component library.

Installation

npm install @birhaus/tokens

Usage

JavaScript/TypeScript

import { tokens } from '@birhaus/tokens'

const buttonStyles = {
  backgroundColor: tokens.colors.primary,
  padding: `${tokens.spacing[3]} ${tokens.spacing[4]}`,
  borderRadius: tokens.borderRadius.md,
  fontSize: tokens.typography.fontSize.base,
}

Tailwind CSS

// tailwind.config.js
const { tokens } = require('@birhaus/tokens')

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: tokens.colors.primary,
      },
      spacing: tokens.spacing,
      borderRadius: tokens.borderRadius,
    }
  }
}

Available Tokens

• Colors: Primary, gray, success, warning, error palettes
• Typography: Font families, sizes, weights
• Spacing: 8pt grid system (4, 8, 12, 16, 24, 32, 48, 64)
• Border Radius: sm, md, lg, xl values
• Shadows: Subtle elevation system
• Semantic: Cognitive load and UX-specific tokens

BIRHAUS Principles

These tokens embody:

• 4-3-1 cognitive rule (max 4 nav, 3 actions, 1 primary)
• Miller's Law compliance (7±2 items)
• Spanish-first design
• Accessibility (WCAG AA+)

License

MIT