glass beadian
aa5e262f3a
Self-hosted multi-platform broadcast newsroom for activist collectives: publishing pipeline with group approval and DST-proof scheduling, TweetDeck-style column wall with hostile-content-safe rendering, live control room with Auto Director, bridged chat governance with polls and quorum, distributed sandboxed transcode workers, encrypted content-addressed archive, monthly analytics. MIT licensed. See README.md and docs/.
97 lines
5 KiB
Markdown
97 lines
5 KiB
Markdown
# 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.
|