# Hypazi brand guide

**Hypazi**: *your audience plays your live by commenting.*

## Logo
- **Symbol**: a comment bubble with a play button and a gold "hype" spark: comment + play + energy.
- **Wordmark**: "Hypazi" in Bricolage Grotesque ExtraBold, converted to outlines (no font needed).
- Use `hypazi-logo.svg` on dark backgrounds, `hypazi-logo-on-light.svg` on light ones, and the white / black
  versions on photos or single-colour prints. The symbol works alone from 16 px (favicon) upwards.
- Keep clear space around the logo equal to the height of the play button. Don't recolour, stretch, rotate, add
  shadows, or put the gradient symbol on busy, low-contrast backgrounds.

## Colours
| Name | Hex | Use |
|---|---|---|
| Ink | `#0A0817` | Backgrounds |
| Night | `#15122B` | Cards, surfaces |
| Violet | `#8B5CF6` | Gradient start, primary |
| Pink | `#EC4899` | Gradient end, secondary |
| Gold | `#FBBF24` | Accent: highlights, numbers, the spark |
| Cloud | `#FFFFFF` | Text on dark |

Signature gradient: `linear-gradient(135deg, #8B5CF6, #EC4899)`. Headline accent gradient: gold → pink → violet.

## Type
**Bricolage Grotesque** (SIL Open Font License): ExtraBold 800 for headlines and the wordmark, Bold 700 for UI and
buttons, Medium 500 for body text. Fonts are included in `fonts/`.

## Voice
Short, energetic, inclusive: "Comment to play", "Every vote resets the clock", "First to type it wins".
Always disclose AI ("AI-generated show") and sponsors ("AD · Sponsored by…").

## Files
- `hypazi-logo*.svg|png`, `hypazi-symbol*.svg|png`, `hypazi-wordmark.svg`, `hypazi-app-icon*.svg|png`
- Social: `social-avatar-1080.png` (profile picture, circle-safe), `social-post-1080.png`, `social-story-1080x1920.png`,
  `social-banner-1500x500.png` (X / Twitter header)
- Open Graph link previews (1200×630): `og/hypazi-og.png`, `og/template-<show>.png`
- Regenerate everything: `node scripts/build-brand.mjs --png` (see the header of that script)