npm package: @rinoue505/design-system
Description: Design tokens, guidelines, and global atoms for Campaign Manager UI
Latest version: 1.0.0

# Campaign Manager Design System

Standalone component storybook and design documentation for the Campaign Manager UI. Operates independently of any parent project.

## NPM Package

Install as a dependency:

```bash
npm install @rinoue505/design-system
```

### Usage

**Design tokens (JS/JSON):**
```js
const { tokens } = require('@rinoue505/design-system');
// or
import tokens from '@rinoue505/design-system';
```

**CSS (link before your app styles):**
```html
<link rel="stylesheet" href="node_modules/@rinoue505/design-system/tokens/tokens.css">
<link rel="stylesheet" href="node_modules/@rinoue505/design-system/css/atoms.css">
```

Or in JS/React:
```js
import '@rinoue505/design-system/tokens.css';
import '@rinoue505/design-system/atoms.css';
```

**Design guidelines (markdown):**
- `node_modules/@rinoue505/design-system/guidelines/design-guidelines.md` — Figma layout patterns, components
- `node_modules/@rinoue505/design-system/guidelines/design-system.md` — Token rules, typography

**Direct exports:**
- `@rinoue505/design-system` — tokens object
- `@rinoue505/design-system/tokens.css` — CSS variables
- `@rinoue505/design-system/atoms.css` — Global atom classes
- `@rinoue505/design-system/tokens.json` — Raw JSON tokens

---

## Contents

- **Component Storybook** — HTML-based component/state reference pages
- **Design Tokens** — Semantic color, typography, and spacing tokens
- **Design Guidelines** — Figma layout patterns and implementation rules
- **Design System** — Canonical token rules and typography scale
- **Figma Links** — Direct links to Figma file and nodes

## Quick Start (Storybook)

1. **Open in browser:** Open `COMPONENT_STORYBOOK.html` in a browser (double-click or drag into Chrome/Firefox).

2. **Or run a local server:**
   ```bash
   cd campaign-manager-design-system
   python3 -m http.server 8080
   ```
   Then visit: http://localhost:8080/COMPONENT_STORYBOOK.html

3. **Or use npx:**
   ```bash
   npx serve .
   ```

## File Structure

```
campaign-manager-design-system/
├── package.json
├── index.js                      # NPM entry, exports tokens
├── tokens/
│   ├── tokens.css               # CSS variables (import this first)
│   ├── tokens.json               # Raw JSON tokens
│   └── index.js
├── css/
│   └── atoms.css                # Global atom classes (buttons, badges, inputs, etc.)
├── guidelines/
│   ├── design-guidelines.md      # Figma layout patterns, components
│   └── design-system.md          # Token rules, typography
├── COMPONENT_STORYBOOK.html      # Entry point / home
├── DESIGN_TOKENS.html            # Token reference
├── DESIGN_GUIDELINES.html        # Figma design patterns
├── GLOBAL_ATOMS_COMPONENT_LIBRARY.html
├── FIGMA_LINKS.md                # Figma file and node URLs
├── lucide-migration.js           # Icon mapping (Iconoir → Lucide)
├── README.md
└── *_COMPONENT_STATE_REFERENCE.html   # Per-page component states
```

## Dependencies

- **Icons:** Loaded from CDN (Iconoir, Lucide). No local install required.
- **Fonts:** Inter, Source Code Pro (system or Google Fonts).

## Links

- Figma file: https://www.figma.com/design/KFMCF5p9j00q3T1FrYngqP/Campaign-Manager