| 1 | # SquadScope Icon Spec |
| 2 | |
| 3 | > **Archived (processed) — historical reference.** This spec is implemented (issues #175 and #176 closed). Retained for design history; the shipped icon/favicon assets are the live source of truth. |
| 4 | |
| 5 | ## Concept |
| 6 | |
| 7 | **Robot with binoculars.** A minimalist robot head holding binoculars to its eyes — keeps the "scope/observation" metaphor (binoculars = signal-spotting) and grounds it in a friendly editorial personality (this site IS auto-generated weekly trend analysis; the robot is honest about that). |
| 8 | |
| 9 | Replaces the previously-proposed Radar Sweep concept. Radar was visually generic and the SquadScope homepage briefly used "SS" as a text monogram in the header, which the user flagged as risking accidental association with the Nazi SS rune. This icon resolves both: original visual identity + no letterforms that can be misread. |
| 10 | |
| 11 | ## Visual |
| 12 | |
| 13 | ### Master SVG (64×64 viewBox, hand-coded original) |
| 14 | |
| 15 | The robot design uses a rounded-square head with a single antenna (critical for "robot" read at small sizes), two circular binocular eyepieces connected by a bridge (differentiates from googly eyes), a subtle mouth grille for personality, and optional shoulder hints for anchoring. |
| 16 | |
| 17 | ```svg |
| 18 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> |
| 19 | <!-- Antenna: single post with ball tip (robot identifier at small sizes) --> |
| 20 | <line x1="32" y1="4" x2="32" y2="14"/> |
| 21 | <circle cx="32" cy="4" r="3" fill="currentColor" stroke="none"/> |
| 22 | |
| 23 | <!-- Robot head: rounded square, slightly trapezoid feel --> |
| 24 | <rect x="10" y="14" width="44" height="36" rx="8" ry="8"/> |
| 25 | |
| 26 | <!-- Left binocular eyepiece --> |
| 27 | <circle cx="22" cy="30" r="9"/> |
| 28 | <circle cx="22" cy="30" r="4" fill="currentColor" stroke="none"/> |
| 29 | |
| 30 | <!-- Right binocular eyepiece --> |
| 31 | <circle cx="42" cy="30" r="9"/> |
| 32 | <circle cx="42" cy="30" r="4" fill="currentColor" stroke="none"/> |
| 33 | |
| 34 | <!-- Binocular bridge (the key "binoculars" differentiator) --> |
| 35 | <line x1="31" y1="30" x2="33" y2="30" stroke-width="4"/> |
| 36 | |
| 37 | <!-- Mouth grille: two horizontal lines for friendly robot personality --> |
| 38 | <line x1="26" y1="42" x2="38" y2="42"/> |
| 39 | <line x1="28" y1="45" x2="36" y2="45"/> |
| 40 | |
| 41 | <!-- Shoulder chassis hints at bottom (anchors the head) --> |
| 42 | <path d="M14 54 L14 58 Q14 62 18 62 L46 62 Q50 62 50 58 L50 54" stroke-width="2"/> |
| 43 | </svg> |
| 44 | ``` |
| 45 | |
| 46 | **Design rationale:** |
| 47 | - **Antenna with ball tip:** Single antenna reads cleanest at 16px; the filled ball adds weight for visibility |
| 48 | - **Rounded-square head:** Differentiates from circular emoji faces; the 8px corner radius keeps it friendly |
| 49 | - **Binocular eyepieces:** 9px radius outer ring + 4px filled pupil gives depth; the 4px-thick bridge is the "this is binoculars" cue |
| 50 | - **Mouth grille:** Two lines suggest a speaker/vent — friendly robot without being cartoonish |
| 51 | - **Shoulder chassis:** 8px-tall curved shape anchors the floating head, gives editorial gravitas |
| 52 | - **Stroke-based:** 2.5px stroke works at all sizes; no fills except pupils and antenna ball |
| 53 | |
| 54 | ### At 16×16 (favicon-optimized) |
| 55 | |
| 56 | Simplified for pixel clarity: thinner strokes, reduced elements, merged bridge into eyepiece proximity. |
| 57 | |
| 58 | ```svg |
| 59 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> |
| 60 | <!-- Antenna --> |
| 61 | <line x1="8" y1="1" x2="8" y2="3"/> |
| 62 | <circle cx="8" cy="1" r="1" fill="currentColor" stroke="none"/> |
| 63 | |
| 64 | <!-- Head --> |
| 65 | <rect x="2" y="3" width="12" height="10" rx="2" ry="2"/> |
| 66 | |
| 67 | <!-- Binocular eyepieces (close together = implied bridge) --> |
| 68 | <circle cx="5.5" cy="7" r="2"/> |
| 69 | <circle cx="5.5" cy="7" r="0.75" fill="currentColor" stroke="none"/> |
| 70 | <circle cx="10.5" cy="7" r="2"/> |
| 71 | <circle cx="10.5" cy="7" r="0.75" fill="currentColor" stroke="none"/> |
| 72 | |
| 73 | <!-- Mouth (single line at this scale) --> |
| 74 | <line x1="6" y1="11" x2="10" y2="11"/> |
| 75 | |
| 76 | <!-- Shoulder hint --> |
| 77 | <path d="M4 13 L4 14.5 Q4 15 5 15 L11 15 Q12 15 12 14.5 L12 13" stroke-width="1"/> |
| 78 | </svg> |
| 79 | ``` |
| 80 | |
| 81 | Scales cleanly — silhouette reads as robot with binoculars at favicon size. |
| 82 | |
| 83 | ## Design tokens |
| 84 | |
| 85 | - **Color:** `var(--color-text)` via `currentColor` — auto-adapts to light/dark themes |
| 86 | - **Stroke width (64px):** 2.5px main elements, 4px binocular bridge, 2px shoulder |
| 87 | - **Stroke width (16px):** 1.5px main elements, 1px shoulder |
| 88 | - **Corner radius:** 8px head (64px), 2px head (16px) |
| 89 | |
| 90 | ## Silhouette safety check (the lesson from the SS incident) |
| 91 | |
| 92 | Confirmed against ADL Hate on Display + general silhouette test: |
| 93 | - ❌ Not a rune — no angular lightning-bolt shapes |
| 94 | - ❌ Not a letterform that could be misread — no S, SS, or similar |
| 95 | - ❌ Not a sun/cross variant — rounded rectangle, not radial |
| 96 | - ❌ Not a hand gesture — clearly a robot head |
| 97 | - ✅ At 16px the silhouette reads as: **robot face with antenna and prominent circular "eyes"** |
| 98 | |
| 99 | The binoculars read as large round eyes at small sizes, which reinforces the "observing" concept. The antenna is the critical robot identifier. |
| 100 | |
| 101 | ## Asset list (Amy implements in Phase 6 #175) |
| 102 | |
| 103 | PNG sizes needed for full favicon + PWA support (per faviconbuilder.com guide): |
| 104 | |
| 105 | | File | Size | Format | Notes | |
| 106 | |------|------|--------|-------| |
| 107 | | `favicon.ico` | 16, 32, 48 multi-size | ICO | Use 16px SVG variant | |
| 108 | | `favicon-16x16.png` | 16×16 | PNG | From 16px SVG | |
| 109 | | `favicon-32x32.png` | 32×32 | PNG | From master SVG | |
| 110 | | `favicon-96x96.png` | 96×96 | PNG | From master SVG | |
| 111 | | `apple-touch-icon.png` | 180×180 | PNG | Master SVG + 10% padding + `--bg` fill | |
| 112 | | `android-chrome-192x192.png` | 192×192 | PNG | Master SVG + padding | |
| 113 | | `android-chrome-512x512.png` | 512×512 | PNG | Master SVG + padding | |
| 114 | | `mstile-150x150.png` | 150×150 | PNG | Master SVG centered | |
| 115 | | `safari-pinned-tab.svg` | scalable | SVG | Monochrome, single path conversion | |
| 116 | | `og-image.png` | 1200×630 | PNG | Robot motif as anchor; Amy designs composition | |
| 117 | | `site.webmanifest` | — | JSON | References 192 + 512 sizes | |
| 118 | |
| 119 | All generated from the master SVG above. |
| 120 | |
| 121 | ## Header inline usage |
| 122 | |
| 123 | The header (`layouts/partials/header.html`) uses this SVG INLINE (no img tag) so it can take `currentColor` from the surrounding text color. The `.site-brand__mark` container provides the border/background; the SVG just renders inside at 100% of the container's dimensions. |
| 124 | |
| 125 | Example markup (see matching PR diff): |
| 126 | ```html |
| 127 | <span class="site-brand__mark" aria-hidden="true"> |
| 128 | <svg viewBox="0 0 64 64" width="100%" height="100%" fill="none" stroke="currentColor" ...> |
| 129 | <!-- robot SVG paths --> |
| 130 | </svg> |
| 131 | </span> |
| 132 | ``` |
| 133 | |
| 134 | --- |
| 135 | |
| 136 | *Specification by Calculon · 2026-05-25 (redo — replaces radar sweep concept)* |