# Pitvolt - Design System Export
Complete design system: 2 CSS files, 3 full pages, 16 component previews, plus the spec.
## What's inside
```
export/
├── index.html ← browse everything from here
├── README.md ← this file
├── styles/
│ ├── colors_and_type.css ← tokens (colors, type, spacing, radii, motion)
│ ├── atmospheric.css ← components (buttons, glass, orbs, noise, container)
│ └── icons.css ← icon wrapper + size presets + chip + tones
├── pages/
│ ├── index.html ← Homepage
│ ├── hosts.html ← /host (bring-the-location pitch)
│ └── our-story.html ← /our-story (founding memo + founders)
├── components/ ← 17 isolated component previews
│ ├── icons.html ← full icon system preview
│ ├── PvIcon.jsx ← React wrapper (drop into your app)
│ ├── colors-primary.html
│ ├── colors-text.html
│ ├── type-display.html
│ ├── type-mono.html
│ ├── wordmark.html
│ ├── spacing.html
│ ├── radii.html
│ ├── atmospheric.html
│ ├── buttons.html
│ ├── header.html
│ ├── faq.html
│ ├── tags.html
│ ├── timeline.html
│ ├── imgslot.html
│ └── mailto-block.html
└── docs/
└── spec.md ← original spec / design rationale
```
Open `index.html` in a browser as a directory. Or open any individual file - no build step required.
## Quickstart in a Vite project
1. Copy the `styles/` folder into your Vite project (e.g. `src/styles/`).
2. Import once in your entrypoint:
```js
// src/main.js (or main.ts)
import './styles/colors_and_type.css';
import './styles/atmospheric.css';
import './styles/icons.css';
```
**Order matters.** `colors_and_type.css` defines the tokens; the other two consume them.
3. Use either tokens or helper classes:
```html
Big idea here.
```
```css
.my-cta {
background: var(--accent-primary);
color: var(--text-on-elevated);
font-family: var(--font-display);
padding: var(--space-4) var(--space-6);
border-radius: var(--r-pill);
}
```
## Icons
The icon system is `` - a single React component that wraps any react-icons glyph and applies the Pitvolt twist (clay-red corner notch + yellow voltage spark) automatically.
```bash
npm i react-icons
```
```jsx
import { PvIcon } from './components/PvIcon';
// no twist
```
**Sizes:** `xs` (14px) · `sm` (18px) · `md` (24px, default) · `lg` (32px) · `xl` (48px), or pass a number/CSS value.
**Tones:** `default` · `warning` (clay red, no notch) · `success` (yellow, no notch) · `info` (muted).
**Library:** 26 icons across nav (`menu`, `close`, `arrow`, `chevron-down`, `external-link`, `search`), charging (`plug`, `lightning`, `battery`, `gauge`, `station`, `car`), host (`map-pin`, `building`, `key`, `calendar`), status (`check`, `warning`, `info`, `x-circle`), and social (`instagram`, `x`, `linkedin`, `whatsapp`, `mail`). Extend by adding to `REGISTRY` in `PvIcon.jsx`.
**Optional chip container:** wrap any icon in `` (or `.icon-chip--lg`, `.icon-chip--accent`, `.icon-chip--on-elevated`) for framed presentations - feature lists, key stats, etc.
See `components/icons.html` for the full preview with anatomy, sizes, variants, and in-context examples.
## Lifting full sections from `pages/`
The three page files (`index.html`, `hosts.html`, `our-story.html`) contain complete, real layouts using the same two CSS files. To use a section in your Vite app:
1. Open the page in a browser to find the block you want.
2. Open the source HTML, copy the markup for that ``.
3. Page-specific composition lives in a `