# TW!ST — Brand Asset Pack

Football's what-if game. **playtwst.com** · **@playtwst**

---

## What's inside

```
TWIST Brand Assets/
├── logo/
│   ├── twist-wordmark-color-dark.png    ← primary, for dark backgrounds (white letters, spectrum !)
│   ├── twist-wordmark-color-light.png   ← for light backgrounds (ink letters, spectrum !)
│   ├── twist-wordmark-white.png         ← solid white (mono / one-colour contexts)
│   ├── twist-wordmark-black.png         ← solid near-black (mono / one-colour contexts)
│   ├── twist-lockup-horizontal-white.png← icon + wordmark, for dark backgrounds
│   ├── twist-lockup-horizontal-ink.png  ← icon + wordmark, for light backgrounds
│   └── twist-wordmark.svg               ← vector (uses currentColor + web font — see note)
├── icon/
│   ├── app-icon-1024.png                ← full-bleed square — App Store / Play Store upload
│   ├── twist-icon-rounded-1024.png      ← rounded display icon (transparent corners)
│   ├── twist-icon-512.png               ← rounded, smaller
│   └── twist-icon.svg                   ← vector, infinitely scalable (no font needed)
├── favicon/
│   ├── favicon.svg                      ← modern browsers (preferred)
│   ├── favicon-32.png                   ← classic favicon
│   ├── favicon-16.png                   ← classic favicon
│   └── apple-touch-icon-180.png         ← iOS home-screen / Safari pinned
└── social/
    ├── avatar-512.png                   ← profile picture (X, Instagram, TikTok)
    ├── og-cover-1200x630.png            ← link preview (Open Graph / Twitter card)
    ├── x-header-1500x500.png            ← X / Twitter profile banner
    └── instagram-1080x1080.png          ← announcement / pinned post
```

---

## The logo

**Wordmark only.** No badge, no container around the letters. Colour lives **only inside the `!`** — a vertical spectrum (coral → gold → lime → cyan). Everything else is one flat colour (white, ink, or mono).

- **Primary** is `twist-wordmark-color-dark.png` on the dark brand background.
- The **icon** (`!` glyph in a dark rounded square) is the square mark for app stores, favicons and social avatars — it's the wordmark's `!`, isolated.
- **Clear space:** keep at least the height of the `!` clear on all sides.
- **Minimum size:** wordmark no smaller than 80px wide on screen; use the icon below that.

**Don't:** recolour the letters with the gradient, box the wordmark, add a drop shadow/outline, stretch it, rotate it, or change the `!` tilt (always 8°).

> **SVG wordmark note:** `twist-wordmark.svg` renders the letters in the Baloo 2 web font (imported in the file) and uses `currentColor`, so you can set the colour in CSS. For a fully offline / print-safe vector, outline the text in your design tool, or use the high-res PNGs.

---

## Colour

| Token | Hex | Use |
|---|---|---|
| Coral | `#FF5470` | Home / The Drop · primary accent |
| Orange | `#FF7A3D` | coral pair (gradients) |
| Gold | `#FFD23D` | Coins · gold pair |
| Lime | `#B9F542` | streaks, highlights, links |
| Cyan | `#2BD2FF` | Scenarios |
| Blue | `#3D6BFF` | cyan pair |
| Violet | `#8A5CFF` | Squads |
| Pink | `#FF5CE1` | violet pair |
| Ink | `#1B1535` | text on light |
| Black | `#0B0918` | app / icon background |
| Surface | `#14102A` | dark UI surface |

**The `!` gradient:** `linear-gradient(180deg, #FF5470, #FFD23D 40%, #B9F542 60%, #2BD2FF)`
**Spectrum hairline:** `#FF5470 → #FF9A3D → #FFD23D → #B9F542 → #2BD2FF → #8A5CFF → #FF5CE1`

---

## Type

- **Display / logo:** Baloo 2 — ExtraBold (800). Headlines, the wordmark, numerals.
- **Body / UI:** Figtree — 400/600/700/800.

Both are free on Google Fonts.

---

## Social specs (already sized)

| File | Size | Where |
|---|---|---|
| `og-cover-1200x630.png` | 1200×630 | `<meta property="og:image">` / Twitter card / WhatsApp & iMessage previews |
| `x-header-1500x500.png` | 1500×500 | X / Twitter profile banner |
| `instagram-1080x1080.png` | 1080×1080 | IG / TikTok post |
| `avatar-512.png` | 512×512 | profile picture everywhere |

### Drop-in `<head>` snippet

```html
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">
<meta property="og:image" content="https://playtwst.com/og-cover-1200x630.png">
<meta property="og:title" content="TW!ST — football's what-if game">
<meta property="og:description" content="Twist the moment. Call the ending. Settle it at The Drop.">
<meta name="twitter:card" content="summary_large_image">
```

---

*Generated for playtwst.com. All marks are geometric — no third-party logos, players or crests.*
