# Runway Brand Pack

Finalised logo files. Geometry is locked — do not adjust line endpoints.

## Geometry

- **64 viewBox** (standalone mark, app icon): converging lines end at `x=27` and `x=37` (gap of 10 at top).
- **52 viewBox** (stacked lockup, matches in-app nav): converging lines end at `x=21` and `x=31` (gap of 10 at top).
- Centre runway dashes: 3 segments, decreasing weight and opacity toward the vanishing point (1.0 / 0.45 / 0.18).

## Colours

| Role | Hex | When to use |
|------|-----|-------------|
| Accent | `#CCEB3A` | Primary mark colour on dark backgrounds. |
| Ink | `#1A5C35` | Dark-green mark for light backgrounds. |
| Paper | `#0A0A0B` | Canvas colour for the app icon. |

## Files

### Mark (icon only)

| File | Colour | Use |
|------|--------|-----|
| `mark.svg` | `currentColor` | Flexible — set colour via CSS or SVG attribute. |
| `mark-accent.svg` | `#CCEB3A` | On dark backgrounds. |
| `mark-ink.svg` | `#1A5C35` | On light backgrounds. |
| `mark-accent-{256,512,1024}.png` | `#CCEB3A` on transparent | Rasters for places SVG is not supported. |
| `mark-ink-{256,512,1024}.png` | `#1A5C35` on transparent | Rasters. |

### App icon (favicon / home screen)

| File | Use |
|------|-----|
| `app-icon.svg` | Dark rounded square with accent mark. Canonical source of the favicon. |
| `app-icon-{256,512,1024}.png` | Rasters for app stores, home screen pin, etc. |

The shipped favicon (`app/favicon.ico`, `app/icon.svg`, `app/apple-icon.png`) is generated from the same geometry via `scripts/generate-favicons.mjs`.

### Square logos (social avatars, app tiles, email signatures)

Solid-colour square canvas with the mark and optional wordmark below. Dark (accent) and light (ink) variants in both layouts. Comes in 512/1024/2048 PNG; SVG source included.

| File | Contents | Colour |
|------|----------|--------|
| `square-mark-{accent,ink}.svg` + `-{512,1024,2048}.png` | Mark only, centred | Accent on `#0A0A0B` / Ink on `#F5F3EC` |
| `square-runway-{accent,ink}.svg` + `-{512,1024,2048}.png` | Mark + `RUNWAY` wordmark below | Accent on dark / Ink on paper |
| `square-career-runway-{accent,ink}.svg` + `-{512,1024,2048}.png` | Mark + `CAREER` / `RUNWAY` stacked | Accent on dark / Ink on paper |

PNG rasters are composited directly from the locked mark geometry and Space Grotesk (bundled at `public/fonts/SpaceGrotesk-{Bold,SemiBold}.ttf`) — identical output on any machine running `scripts/generate-brand-squares.mjs`.

### Lockups (mark + wordmark)

| File | Layout | Colour |
|------|--------|--------|
| `lockup-horizontal-accent.svg` | Mark + `RUNWAY` on one line | `#CCEB3A` |
| `lockup-horizontal-ink.svg` | Mark + `RUNWAY` on one line | `#1A5C35` |
| `lockup-stacked-accent.svg` | Mark + `CAREER` / `Runway` stacked (matches nav) | `#CCEB3A` |
| `lockup-stacked-ink.svg` | Mark + `CAREER` / `Runway` stacked | `#1A5C35` |

Lockups reference Space Grotesk (with `Inter` / system fallback). Open in Figma or any editor with Space Grotesk installed for a faithful render. They are intentionally SVG-only — rasterising them here risks font substitution.

## Regenerating rasters

```bash
node scripts/generate-brand-assets.mjs   # mark + app-icon PNGs
node scripts/generate-brand-squares.mjs  # square-format PNGs (mark + wordmark)
node scripts/generate-favicons.mjs       # app/favicon.ico + app/apple-icon.png
```

Both scripts supersample the source SVG at ~8× density and downsample with lanczos3, which gives meaningfully cleaner edges than rendering SVG at the native target size.

## Clear space and minimum size

- Minimum display size for the mark: **16 px** (favicon). Below that the centre dashes visually collapse.
- Minimum clear space around any lockup: **half the mark's height** on all sides.
- Do not stretch. Do not recolour outside the palette above. Do not close the gap at the top — the vanishing point is the idea.