@redrobui/tokens

Design tokens for the Redrob AI Design System. Foundational design values for colors, spacing, and typography.

🎨 Live Demo

View Design Tokens in Storybook →

Explore all colors, typography, spacing, and other design tokens in our interactive Storybook.

Installation

npm install @redrobui/tokens

Usage

JavaScript/TypeScript

import { colors, spacing, fontFamily } from '@redrobui/tokens';

// Or import specific modules
import { colors } from '@redrobui/tokens/colors';
import { spacing } from '@redrobui/tokens/spacing';
import { fontFamily, fontSize } from '@redrobui/tokens/typography';

Tailwind CSS v4 Theme

Option 1: Use Pre-built Utilities (Easiest)

Just import the utilities file to get all color classes ready to use:

/* Your app's main CSS */
@import '@redrobui/tokens/utilities.css';

Now you can use all color utilities directly:

<button className="bg-primary-600 text-white hover:bg-primary-700">
  Click me
</button>

<div className="bg-secondary-600 text-white">
  Secondary color
</div>

<span className="text-error-600 border-error-600">
  Error message
</span>

Option 2: Custom Build (Advanced)

If you want to customize or extend the theme:

/* Import the theme and build with your own Tailwind config */
@import '@redrobui/tokens/theme.css';
@import 'tailwindcss';

Available color utilities:

• Primary: bg-primary-50 through bg-primary-600
• Secondary: bg-secondary-50 through bg-secondary-600
• Neutral: bg-neutral-50 through bg-neutral-950
• Error: bg-error-50 through bg-error-900
• Success: bg-success-50 through bg-success-900
• Warning: bg-warning-50 through bg-warning-900
• Info: bg-info-50 through bg-info-900

All colors work with bg-, text-, border-, etc.

What's Included

• Colors: Primary, secondary, neutral, semantic colors (success, warning, error, info)
• Spacing: Consistent spacing scale from 0 to 96
• Typography: Font families, sizes, weights, line heights, and letter spacing

Example

import { colors, spacing } from '@redrobui/tokens';

const styles = {
  backgroundColor: colors.primary[500],
  padding: `${spacing[4]} ${spacing[6]}`,
  color: colors.white,
};

License

MIT