# Web3 Corporate Style Guide

A shared design system for products across the Web3 ecosystem. Derived from the visual language of the DAO Marketplace project.

## Quick Start

```bash
npm install
npm run dev     # Vite dev server with live component showcase
npm run build   # Production build
```

## Repository Structure

```
src/
├── tokens/              # Design tokens (CSS custom properties)
│   ├── index.css        # Master token import
│   ├── colors.css       # Color palette
│   ├── typography.css   # Font families, sizes, weights
│   └── spacing.css      # Layout dimensions, radii, gaps
├── css/                 # Component stylesheets
│   ├── web3-style.css   # Master stylesheet (imports all below)
│   ├── base.css         # Reset, header, nav, main, responsive
│   ├── card.css         # .pixel-card component
│   ├── button.css       # .pixel-btn component
│   └── forms.css        # Form controls, footer, grids
├── components/          # (reserved for future React/Vue components)
├── App.tsx              # Interactive showcase app
├── main.tsx             # Entry point
└── demo.css             # Showcase-specific styles
```

## Integration

### Option A: Full CSS Import
```css
@import "@web3/style-guide/css/web3-style.css";
```

### Option B: Tokens Only
```css
@import "@web3/style-guide/tokens/index.css";
```

### Option C: Individual Components
```css
@import "@web3/style-guide/css/card.css";
@import "@web3/style-guide/css/button.css";
```

## Design Language

| Token | Value | Usage |
|-------|-------|-------|
| `--color-bg-primary` | `#0c1020` | Page background |
| `--color-accent-green` | `#59d8ae` | Brand indicator, success |
| `--color-accent-blue` | `#6f8bff` | Buttons, focus rings |
| `--color-text-primary` | `#e7eaf1` | Body text |
| `--font-family-base` | `Inter, system-ui, ...` | All UI text |

## Brand Conventions

- **Dark-first**: All views use `#0c1020` with radial mesh gradients
- **Green status dot**: 10px glowing indicator in product headers
- **Blue interactive**: Buttons and focus rings use `#6f8bff`
- **Floating footer**: Fixed bottom bar with backdrop blur
- **Glassmorphism**: Cards use `rgba(21,27,48,.82)` with `backdrop-filter`

## License

Internal use across Web3 ecosystem products.