T-HUB/docs/asset-creation-guide.md

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 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.