# Rumble Built logo assets

All files are **SVG with transparent backgrounds** (no artboard fill).

| File | Description |
|------|-------------|
| `rumble-built-logo-color.svg` | Navy wordmark (#111827), teal slogan (#00A38D), teal→purple gradient bar |
| `rumble-built-logo-color-no-slogan.svg` | Color wordmark without slogan |
| `rumble-built-logo-black.svg` | Full lockup in solid black |
| `rumble-built-logo-black-no-slogan.svg` | Wordmark only, black |
| `rumble-built-logo-white.svg` | Full lockup in solid white (for dark UI/photos) |
| `rumble-built-logo-white-no-slogan.svg` | Wordmark only, white |
| `rumble-built-icon-color.svg` | 32×32 app-style mark: gradient bar + **RB** |
| `rumble-built-icon-black.svg` | Icon variant, black |
| `rumble-built-icon-white.svg` | Icon variant, white |

**Typography:** Outlined “RUMBLE” uses stroke-only text; “BUILT” is solid. Fonts load via Google Fonts (`Outfit`) embedded in the SVG. When opening in a browser or design tool online, fonts apply. For **offline** or **PDF** export with guaranteed matching type, open in Illustrator/Figma and **outline** the text.

### PNG exports (transparent)

Generated into **`png/`** next to these SVGs (same base filename, `.png`).

**Option A — Node (recommended)** from the static site bundle root:

```bash
npm install
npm run export-logos
```

Wordmarks export at **1600px** wide; icon variants at **512px** wide (height scales). Rasterization uses **Sharp** with **density 300** so type stays crisp.

**Option B — Python** (requires [Cairo](https://www.cairographics.org/) system libs + `pip install cairosvg`):

```bash
python3 scripts/export_logo_pngs.py
```

If fonts in PNGs look wrong, install **Outfit** locally or outline type in a design tool — remote `@import` in SVG may not resolve in all renderers.

**Manual:** Export from Illustrator, Figma, or Inkscape using the SVGs above.

**Palette (color lockup):**

- Navy: `#111827`
- Teal (slogan & gradient top): `#00A38D`
- Purple (gradient bottom): `#6D28D9`