Design tokens for Redrob AI Design System
npm install @redrobui/tokensbash
npm install @redrobui/tokens
`
Usage
$3
`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';
`
$3
Option 1: Use Pre-built Utilities (Easiest)
Just import the utilities file to get all color classes ready to use:
`css
/ Your app's main CSS /
@import '@redrobui/tokens/utilities.css';
`
Now you can use all color utilities directly:
`jsx
Secondary color
Error message
`
Option 2: Custom Build (Advanced)
If you want to customize or extend the theme:
`css
/ 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
`typescript
import { colors, spacing } from '@redrobui/tokens';
const styles = {
backgroundColor: colors.primary[500],
padding: ${spacing[4]} ${spacing[6]},
color: colors.white,
};
``