@peple/design-tokens

Design tokens and theme for People HR micro-frontends using Tailwind CSS v4.

Installation

npm install @peple/design-tokens

Usage

Import the design tokens in your main CSS file:

/* app.css or index.css */
@import 'tailwindcss';
@import '@peple/design-tokens';

Design Tokens

This package provides a comprehensive set of design tokens using Tailwind CSS v4's @theme directive:

Colors

• Primary: Blue color palette (50-950)
• Neutral: Gray color palette (50-950)
• Success: Green color palette
• Warning: Yellow color palette
• Error: Red color palette

Typography

• Sans font family: Inter, system-ui, sans-serif
• Mono font family: Fira Code, JetBrains Mono, monospace

Spacing

Consistent spacing scale from 0 to 64 (0rem to 16rem)

Border Radius

From none to full, including sm, md, lg, xl, 2xl, 3xl

Shadows

Five shadow levels: sm, md, lg, xl, 2xl

Transitions

Pre-configured transitions for common animations

Using with Tailwind CSS v4

These tokens are automatically available in your Tailwind utilities:

<div className="bg-primary-500 text-neutral-50 p-4 rounded-lg shadow-md">
  Content with design tokens
</div>

Customization

You can override any token in your local CSS:

@theme {
  /* Override primary color */
  --color-primary-500: #your-color;
}

License

MIT