# Tactical Media Broadcast Hub — Design Language & Asset Creation Guide

**Brand asset:** `apps/web/public/brand/logo.svg` — the anarchist circle-A with outward-pointing arrows
**Palette:** Black (#000-#0a0a0b) + Warm Red-Orange (#FF1610 → oklch(0.62 0.22 30)) + semantic colors (green=live, amber=warn)
**Direction:** Bold, defiant, activist-poster aesthetic. Black t-shirts with red screen-printing. High contrast, no apologies.

---

## The Design DNA

Your logo has five visual elements that define the entire brand:

| Element | What it communicates | How to reuse it |
|---|---|---|
| **Circle** | Community, enclosure, the "O" in anarchy | Use for avatars, badges, loading spinners |
| **The A** | The core symbol — Tactical Media Broadcast Hub, anarchy, action | Use alone for favicons, watermarks, empty states |
| **Arrows** (5x) | Outward direction — decentralization, spreading the message | Use as accent motifs on buttons, cards, headers |
| **Black background** | The void we fill | Always the base |
| **Red #FF1610** | Energy, urgency, defiance | The only accent color |

## Rules for creating new assets

### Rule 1: Two colors only (plus semantic)
Every asset uses black + #FF1610 (or the warm accent oklch equivalent). Green (live), amber (warn), and deeper red (danger) are reserved for semantic status — never decoration.

### Rule 2: Bold strokes, no gradients
Minimum stroke weight: 4px at 100px viewport. Think screen-print, not watercolor. No gradients, no shadows, no glow effects.

### Rule 3: Geometric construction
The logo is pure geometry: circle + triangle + rectangles. New assets should use the same primitives. No organic shapes, no curves that aren't circles/arcs.

### Rule 4: Arrows point outward
The five arrows on the logo all point away from center. This is the brand's core gesture: spreading outward, pushing content to the edges (the platforms). Reuse this directionality.

### Rule 5: High contrast or nothing
Every element must be readable at 16px favicon size OR be a hero asset. No subtle textures, no mid-tones for decoration.

---

## Assets to create (in priority order)

### 1. Favicon (32×32 SVG)
Simplify the logo: just the circle outline + the A path, red on transparent. Drop the arrows and the internal marks.
```svg
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1200 1200">
  <g fill="none" stroke="#FF1610" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="600" cy="610" r="330" stroke-width="120"/>
    <path d="M 365 915 L 600 250 L 835 915" stroke-width="140"/>
    <path d="M 250 610 L 950 610" stroke-width="120"/>
  </g>
</svg>
```

### 2. Empty State Illustration (200×200 SVG)
The circle-A outline at low opacity (30%) with a single red arrow pointing outward. Message sits beside it. This communicates "nothing here yet, but you're ready to broadcast."

### 3. Loading Spinner (48×48 SVG)
The circle from the logo (no A), rotating. Red stroke, black background. CSS `animation: rotate 1s linear infinite`.

### 4. Hero/Background Image (1920×1080)
If you want the aerial shot: take a real aerial photo, overlay a black gradient (bottom-heavy), then place the circle-A mark at 15% opacity in the background. The UI sits on top. Alternatively, create a pattern of the circle-A repeated at varying scales/opacities on black.

### 5. Platform Connection Icons
Each platform (Mastodon, Telegram, etc.) gets a small circular icon in the brand style:
- Black circle with red stroke
- The platform's simplified symbol inside (drawn in red strokes, same weight)
- 32×32 base size

### 6. Banner for Onboarding (1200×400)
The full logo on the left, "Tactical Media Broadcast Hub" in bold red on the right, on black. Can include the tagline: "Broadcast everywhere. Answer to no one."

---

## How to create assets in Canva (matching this language)

1. **Open your Canva design kit** (the links you shared)
2. **Set the canvas background to pure black** (#000000)
3. **Use only these colors:**
   - Primary: #FF1610 (bright red — the brand color from your SVG)
   - Warm variant: #E8501E (more orange, for hover states)
   - Background: #000000 or #0A0A0B
4. **Use geometric shapes only:** circles, triangles, rectangles, straight lines
5. **Stroke weight:** thick (equivalent to 8-12px at 1000px canvas)
6. **No:** gradients, shadows, blur, photos (except for the aerial background), curved lines that aren't circles, pastel colors, blue/purple/green
7. **Export as:** SVG for icons/illustrations, PNG (1920×1080) for backgrounds

## File format guide

| Asset type | Format | Where to put it |
|---|---|---|
| Icons, logos, illustrations | SVG | `apps/web/public/brand/` |
| Background images | PNG or WebP | `apps/web/public/brand/` |
| Favicon | SVG (32×32) | `apps/web/public/brand/favicon.svg` |
| Hero/banner | PNG (1200×400 or 1920×1080) | `apps/web/public/brand/` |
| Animations | CSS (not GIF) | in the component code directly |

Once you create assets and drop them in `apps/web/public/brand/`, tell me what each one is and I'll wire them into the UI.