# packages/ui — Shared UI Primitives & Design Tokens

Package: `@void-nav/ui`
Exports: `Button`, `Panel` components and a CSS design token system.

## Structure

```
src/
  index.ts         Barrel export: Button, Panel
  primitives/
    Button.tsx     Button component with variant support
    Panel.tsx      Panel/card container component
  styles.css       Design tokens (dark space theme)
```

## Design Tokens

The CSS file in `src/styles.css` defines the visual identity of the entire project:

- **15 color tokens** — dark space palette (bg, fg, surface, accent, cyan, green, purple, red, muted, border)
- **3 font stacks** — display (Space Grotesk), body (Inter), mono (JetBrains Mono)
- **Border radius**, spacing, and shadow scales

These tokens are imported by `apps/game` and `apps/site` via Tailwind CSS `@import`.

## Conventions

- Components are minimal — they define structure, not complex behavior
- No external dependencies beyond React peer dependency
- Styles use CSS custom properties, not Tailwind classes directly (consumers apply Tailwind)