Engineer Playbook — Design System

Shared UI component library and design tokens for engineerplaybook.io. Published as @engineerplaybook/design-system.

Tech Stack

• Build: Vite library mode
• UI Library: React 19 + TypeScript
• Styling: CSS custom properties (no runtime CSS-in-JS)

What's Included

• Design tokens — brand colors, typography, spacing, shadows, border radius (CSS custom properties)
• Components — Button, Card, Badge, GradientText (and more)
• Legacy aliases — backward-compatible CSS variable names

Development

npm install
npm run build           # builds dist/

Usage in Apps

// In root layout.tsx
import '@engineerplaybook/design-system/dist/style.css';

// In any component
import { Button, Card, Badge, GradientText } from '@engineerplaybook/design-system';

Package Contents

dist/
├── style.css            ← Design tokens + component styles
├── design-system.es.js   ← ESM bundle
├── design-system.umd.js  ← UMD bundle
├── index.d.ts            ← TypeScript declarations
└── components/
    ├── Button.d.ts
    ├── Card.d.ts
    ├── Badge.d.ts
    └── GradientText.d.ts

Architecture

Components are headless/Tailwind-compatible — they provide structure and styling via CSS variables, but consumer apps can override with their own Tailwind theme. See DESIGN.md for full token reference.