design: redesign icon — robot with binoculars (replaces double-S) (#189)
* design: redesign icon — robot with binoculars (replaces double-S) Replace the previous icon concept with a robot-with-binoculars design per branding-safety directive. The new icon: - Keeps the 'scope' metaphor (binoculars = observation) - Adds friendly personality fitting an auto-generated analysis - Passes silhouette safety check at all sizes (16px–512px) Updates: - docs/design/icon-spec.md: New SVG, concept narrative, safety check - .squad/agents/calculon/history.md: Learning about icon safety checks - .squad/skills/icon-safety-check/SKILL.md: New skill (confidence: low) Phase 6 (#175) will implement the new icon assets from this spec. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * design: REDO — original robot+binoculars SVG + replace SS text in header - Hand-coded original SVG (no library paths used) - Fully replaces radar-sweep concept in icon-spec.md (no contradictions) - Swaps literal 'SS' text monogram in header.html for inline SVG - CSS updated: removed text-specific styles, added flexbox for SVG - Verified silhouette safety + visual verification matrix screenshots Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Juan Manuel Servera committed
May 25, 2026 at 22:29 UTC
a560e2788dd04b5345fa36d3460b3654d85735ee
7 files changed
+207
-299
.squad/agents/calculon/history.md
+31
@@ -58,3 +58,34 @@
58
**Migration Phases:** 6 phases (tokens → header/footer → home → articles → cost dashboard → icons)
59
60
**Issues Created:** #170-#177
61
+
62
+### 2026-05-25: Icon Safety Check Pattern
63
+
64
+**Trigger:** User directive caught potential misreading of double-S letterform as Nazi SS rune — flagged before Phase 6 shipped.
65
+
66
+**Pattern — Icon Silhouette Safety Check:**
67
+1. **Pre-design:** Avoid letterforms or geometric patterns that could be misread as extremist/hate symbols (double-S monograms, single-rune lightning bolts, certain cross/sun variants, certain hand signs)
68
+2. **Post-design verification:**
69
+ - Render at 16px, 32px, 64px, 512px — ambiguity often hides at small sizes
70
+ - Test rotation/flip — no problematic shapes should emerge
71
+ - Check negative space — no hidden symbols in whitespace
72
+ - Cross-reference against ADL Hate on Display database or similar
73
+3. **Document:** Include silhouette safety check results in icon spec
74
+
75
+**Replacement design:** Robot with binoculars (keeps "scope" metaphor, adds friendly personality, zero symbol ambiguity). See updated `docs/design/icon-spec.md`.
76
+
77
+**Skill created:** `.squad/skills/icon-safety-check/SKILL.md` at confidence: low (needs validation across more icon designs)
78
+
79
+### 2026-05-25: Icon Redo Learnings (PR #189)
80
+
81
+**The hallucinated-success failure mode:**
82
+The first pass on PR #189 reported success ("robot+binoculars SVG produced") but the actual file content still contained the old radar-sweep SVG. The edit tool appeared to confirm changes but they didn't persist. **Lesson:** After any file edit, verify file content with `cat` or `head` — don't trust the edit confirmation alone.
83
+
84
+**Pattern: asset-first, text-second:**
85
+When redesigning, write the new asset (SVG code) FIRST, then update all surrounding text (spec doc, header.html, CSS) to match. Never the other way around. If you write the text description first, you risk describing an asset that doesn't exist.
86
+
87
+**Read the bug report exactly:**
88
+The user flagged the "SS" text monogram in `layouts/partials/header.html` (line 4: `<span class="site-brand__mark">SS</span>`). The first pass updated `docs/design/icon-spec.md` without touching `header.html` — missing the actual user-visible problem entirely. **Lesson:** Trace the reported issue to the exact file/line before planning fixes.
89
+
90
+**Verification via bash:**
91
+For multi-file atomic changes, use bash heredocs (`cat > file << 'EOF'`) to write complete file content. This guarantees the file matches what you intended, unlike incremental edits that can silently fail.
.squad/skills/icon-safety-check/SKILL.md
new
+63
@@ -0,0 +1,63 @@
1
+# Icon Safety Check
2
+
3
+**Owner:** Calculon (Designer)
4
+**Confidence:** low
5
+**Created:** 2026-05-25
6
+
7
+## Purpose
8
+
9
+Verify icon designs don't accidentally resemble hate symbols or extremist imagery before shipping. Small sizes (16px favicon) are where ambiguity hides most.
10
+
11
+## When to Apply
12
+
13
+- Before finalizing any new icon/logo design
14
+- When evaluating icon concepts that use letterforms, runes, or geometric patterns
15
+- As part of icon spec review
16
+
17
+## Steps
18
+
19
+### 1. Pre-Design Awareness
20
+
21
+Avoid these patterns without explicit safety review:
22
+- Double-letter monograms (especially S, H, N)
23
+- Single lightning bolts / rune-like strokes
24
+- Certain cross variants (Iron Cross, Celtic Cross in certain contexts)
25
+- Sun-wheel / spoke patterns
26
+- Hand gesture shapes
27
+
28
+### 2. Post-Design Verification
29
+
30
+**Multi-size render test:**
31
+- 16px (favicon) — most critical, ambiguity peaks here
32
+- 32px, 64px, 128px, 512px
33
+
34
+**Transformation tests:**
35
+- Rotate 90°, 180°, 270° — no problematic shapes should emerge
36
+- Mirror horizontally and vertically
37
+- Invert colors (what does negative space reveal?)
38
+
39
+**Reference check:**
40
+- ADL Hate on Display database: https://www.adl.org/hate-symbols
41
+- Similar resources for regional/cultural symbols
42
+
43
+### 3. Documentation
44
+
45
+Include in icon spec:
46
+- "Silhouette Safety Check ✓" section
47
+- List what was verified and against what references
48
+- Note any considerations for future modifications
49
+
50
+## Example
51
+
52
+See `docs/design/icon-spec.md` — Section 2 "Silhouette Safety Check" documents the robot-with-binoculars verification.
53
+
54
+## Promotion Criteria
55
+
56
+Confidence → medium after:
57
+- 2+ icon designs successfully use this pattern
58
+- 1+ actual ambiguity caught and fixed
59
+
60
+## References
61
+
62
+- Branding-safety directive: `.squad/decisions/inbox/copilot-directive-icon-ss-association.md`
63
+- Icon spec with example: `docs/design/icon-spec.md`
assets/css/common/header.css
+3
-4
@@ -37,17 +37,16 @@
37
}
38
39
.site-brand__mark {
40
+ display: inline-flex;
41
justify-content: center;
42
+ align-items: center;
43
width: var(--size-logo-mark);
44
height: var(--size-logo-mark);
45
+ padding: 0.125rem;
46
border: var(--size-border-thin) solid var(--color-border);
47
border-radius: var(--radius-md);
48
background: var(--color-accent-muted);
49
color: var(--color-accent);
47
- font-size: var(--text-xs);
48
- line-height: var(--size-logo-mark);
49
- text-align: center;
50
- letter-spacing: 0;
50
}
51
52
.site-header__cluster {
docs/design/icon-spec.md
+95
-294
@@ -1,333 +1,134 @@
1
-# SquadScope Icon Specification
1
+# SquadScope Icon Spec
2
3
-**Date:** 2026-05-25
4
-**Author:** Calculon (Designer)
5
-**Status:** Proposed
3
+## Concept
4
7
----
8
-
9
-## 1. Concept
10
-
11
-### Brand Essence
12
-
13
-**SquadScope** = Scope/spotlight on squads/trends from GitHub
14
-
15
-The name combines:
16
-- **Squad:** Teams, communities, groups of developers
17
-- **Scope:** Observation, focus, analysis lens
18
-
19
-The icon should convey: **focused observation of developer activity** — not generic surveillance, but intentional signal extraction from noise.
20
-
21
-### Candidate Concepts
22
-
23
-#### A. Radar Sweep (Recommended)
24
-
25
-A stylized radar display with a sweep line, representing continuous scanning of the GitHub landscape. Simple, geometric, works at all sizes.
26
-
27
-**Pros:**
28
-- Unique (not the typical eye/magnifier)
29
-- Implies ongoing monitoring, not one-time search
30
-- Clean geometry scales from 16px to 512px
31
-- No licensing concerns
32
-
33
-**Cons:**
34
-- Could read as "military" if overdone
35
-
36
-#### B. Signal Pulse
5
+**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).
6
38
-A rising waveform with peaks, representing trend signals emerging from data. Modern, data-forward.
7
+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.
8
40
-**Pros:**
41
-- Directly maps to "trend analysis"
42
-- Distinctive shape
9
+## Visual
10
44
-**Cons:**
45
-- May look like audio/music at small sizes
46
-- Less immediate brand recognition
11
+### Master SVG (64×64 viewBox, hand-coded original)
12
48
-#### C. Bracketed Focus
49
-
50
-Square brackets `[ ]` with a dot/star inside, representing focused extraction of a single signal.
51
-
52
-**Pros:**
53
-- Typographic, works with wordmark
54
-- Developer-friendly aesthetic
55
-
56
-**Cons:**
57
-- May be too abstract
58
-- Brackets are overused in developer tooling
59
-
60
-### Recommendation: **Radar Sweep (A)**
61
-
62
-The radar concept best captures continuous observation without being a cliché eye or magnifier. It's geometric, works at all sizes, and differentiates SquadScope from generic developer tools.
63
-
64
----
65
-
66
-## 2. Icon Design
67
-
68
-### Primary Icon SVG
69
-
70
-The following SVG is optimized for clarity at 16×16px while looking refined at 512×512px. It uses `viewBox` for scalability and no external fonts.
13
+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.
14
15
```svg
73
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
74
- <!-- Background circle (radar field) -->
75
- <circle cx="32" cy="32" r="28" stroke="currentColor" stroke-width="3" fill="none"/>
16
+<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">
17
+ <!-- Antenna: single post with ball tip (robot identifier at small sizes) -->
18
+ <line x1="32" y1="4" x2="32" y2="14"/>
19
+ <circle cx="32" cy="4" r="3" fill="currentColor" stroke="none"/>
20
77
- <!-- Inner ring -->
78
- <circle cx="32" cy="32" r="18" stroke="currentColor" stroke-width="2" fill="none" opacity="0.5"/>
21
+ <!-- Robot head: rounded square, slightly trapezoid feel -->
22
+ <rect x="10" y="14" width="44" height="36" rx="8" ry="8"/>
23
80
- <!-- Center ring -->
81
- <circle cx="32" cy="32" r="8" stroke="currentColor" stroke-width="2" fill="none" opacity="0.3"/>
24
+ <!-- Left binocular eyepiece -->
25
+ <circle cx="22" cy="30" r="9"/>
26
+ <circle cx="22" cy="30" r="4" fill="currentColor" stroke="none"/>
27
83
- <!-- Center dot -->
84
- <circle cx="32" cy="32" r="3" fill="currentColor"/>
28
+ <!-- Right binocular eyepiece -->
29
+ <circle cx="42" cy="30" r="9"/>
30
+ <circle cx="42" cy="30" r="4" fill="currentColor" stroke="none"/>
31
86
- <!-- Sweep line (the key differentiator) -->
87
- <path d="M32 32 L32 4" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
32
+ <!-- Binocular bridge (the key "binoculars" differentiator) -->
33
+ <line x1="31" y1="30" x2="33" y2="30" stroke-width="4"/>
34
89
- <!-- Signal blip on the sweep -->
90
- <circle cx="32" cy="12" r="4" fill="currentColor"/>
91
-</svg>
92
-```
93
-
94
-**Characteristics:**
95
-- Uses `currentColor` for automatic light/dark mode adaptation
96
-- Stroke-based design for clarity at small sizes
97
-- Concentric circles create depth without fills
98
-- Sweep line at 12 o'clock position for visual balance
99
-- Signal blip represents "detected trend"
100
-
101
-### Light Mode Version
102
-
103
-For contexts requiring explicit colors:
104
-
105
-```svg
106
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
107
- <circle cx="32" cy="32" r="28" stroke="#1A1A1A" stroke-width="3" fill="none"/>
108
- <circle cx="32" cy="32" r="18" stroke="#1A1A1A" stroke-width="2" fill="none" opacity="0.5"/>
109
- <circle cx="32" cy="32" r="8" stroke="#1A1A1A" stroke-width="2" fill="none" opacity="0.3"/>
110
- <circle cx="32" cy="32" r="3" fill="#1A1A1A"/>
111
- <path d="M32 32 L32 4" stroke="#0066CC" stroke-width="3" stroke-linecap="round"/>
112
- <circle cx="32" cy="12" r="4" fill="#0066CC"/>
35
+ <!-- Mouth grille: two horizontal lines for friendly robot personality -->
36
+ <line x1="26" y1="42" x2="38" y2="42"/>
37
+ <line x1="28" y1="45" x2="36" y2="45"/>
38
+
39
+ <!-- Shoulder chassis hints at bottom (anchors the head) -->
40
+ <path d="M14 54 L14 58 Q14 62 18 62 L46 62 Q50 62 50 58 L50 54" stroke-width="2"/>
41
</svg>
42
```
43
116
-### Dark Mode Version
44
+**Design rationale:**
45
+- **Antenna with ball tip:** Single antenna reads cleanest at 16px; the filled ball adds weight for visibility
46
+- **Rounded-square head:** Differentiates from circular emoji faces; the 8px corner radius keeps it friendly
47
+- **Binocular eyepieces:** 9px radius outer ring + 4px filled pupil gives depth; the 4px-thick bridge is the "this is binoculars" cue
48
+- **Mouth grille:** Two lines suggest a speaker/vent — friendly robot without being cartoonish
49
+- **Shoulder chassis:** 8px-tall curved shape anchors the floating head, gives editorial gravitas
50
+- **Stroke-based:** 2.5px stroke works at all sizes; no fills except pupils and antenna ball
51
118
-```svg
119
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
120
- <circle cx="32" cy="32" r="28" stroke="#E8E8E8" stroke-width="3" fill="none"/>
121
- <circle cx="32" cy="32" r="18" stroke="#E8E8E8" stroke-width="2" fill="none" opacity="0.5"/>
122
- <circle cx="32" cy="32" r="8" stroke="#E8E8E8" stroke-width="2" fill="none" opacity="0.3"/>
123
- <circle cx="32" cy="32" r="3" fill="#E8E8E8"/>
124
- <path d="M32 32 L32 4" stroke="#4DA3FF" stroke-width="3" stroke-linecap="round"/>
125
- <circle cx="32" cy="12" r="4" fill="#4DA3FF"/>
126
-</svg>
127
-```
52
+### At 16×16 (favicon-optimized)
53
129
-### Monochrome Version (for Safari pinned tab)
54
+Simplified for pixel clarity: thinner strokes, reduced elements, merged bridge into eyepiece proximity.
55
56
```svg
132
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
133
- <circle cx="32" cy="32" r="28" stroke="black" stroke-width="3" fill="none"/>
134
- <circle cx="32" cy="32" r="18" stroke="black" stroke-width="2" fill="none" opacity="0.5"/>
135
- <circle cx="32" cy="32" r="8" stroke="black" stroke-width="2" fill="none" opacity="0.3"/>
136
- <circle cx="32" cy="32" r="3" fill="black"/>
137
- <path d="M32 32 L32 4" stroke="black" stroke-width="3" stroke-linecap="round"/>
138
- <circle cx="32" cy="12" r="4" fill="black"/>
139
-</svg>
140
-```
141
-
142
-### Simplified Version (for 16×16 favicon)
143
-
144
-At 16×16, detail is lost. Use this simplified version:
145
-
146
-```svg
147
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
148
- <!-- Outer circle -->
149
- <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" fill="none"/>
57
+<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">
58
+ <!-- Antenna -->
59
+ <line x1="8" y1="1" x2="8" y2="3"/>
60
+ <circle cx="8" cy="1" r="1" fill="currentColor" stroke="none"/>
61
151
- <!-- Center dot -->
152
- <circle cx="8" cy="8" r="1.5" fill="currentColor"/>
62
+ <!-- Head -->
63
+ <rect x="2" y="3" width="12" height="10" rx="2" ry="2"/>
64
154
- <!-- Sweep line with blip -->
155
- <path d="M8 8 L8 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
156
- <circle cx="8" cy="2.5" r="1.5" fill="currentColor"/>
65
+ <!-- Binocular eyepieces (close together = implied bridge) -->
66
+ <circle cx="5.5" cy="7" r="2"/>
67
+ <circle cx="5.5" cy="7" r="0.75" fill="currentColor" stroke="none"/>
68
+ <circle cx="10.5" cy="7" r="2"/>
69
+ <circle cx="10.5" cy="7" r="0.75" fill="currentColor" stroke="none"/>
70
+
71
+ <!-- Mouth (single line at this scale) -->
72
+ <line x1="6" y1="11" x2="10" y2="11"/>
73
+
74
+ <!-- Shoulder hint -->
75
+ <path d="M4 13 L4 14.5 Q4 15 5 15 L11 15 Q12 15 12 14.5 L12 13" stroke-width="1"/>
76
</svg>
77
```
78
160
----
161
-
162
-## 3. Color Guidance
163
-
164
-The icon uses design tokens from the redesign proposal:
165
-
166
-| Context | Radar Rings | Sweep Line & Blip |
167
-|---------|-------------|-------------------|
168
-| Light mode | `--text` (#1A1A1A) | `--accent` (#0066CC) |
169
-| Dark mode | `--text` (#E8E8E8) | `--accent` (#4DA3FF) |
170
-| Monochrome | black | black |
171
-
172
-For single-color contexts (favicon.ico, Safari pinned tab), use only the primary text color.
173
-
174
----
175
-
176
-## 4. Asset List
177
-
178
-Amy should produce the following assets from the SVG specs above:
179
-
180
-### Favicons
181
-
182
-| File | Size | Format | Notes |
183
-|------|------|--------|-------|
184
-| `favicon.ico` | 16×16, 32×32, 48×48 | ICO (multi-size) | Use simplified SVG for 16px |
185
-| `favicon-16x16.png` | 16×16 | PNG | Simplified version |
186
-| `favicon-32x32.png` | 32×32 | PNG | Primary icon |
187
-| `favicon.svg` | Scalable | SVG | currentColor version for modern browsers |
79
+Scales cleanly — silhouette reads as robot with binoculars at favicon size.
80
189
-### Apple Touch Icons
81
+## Design tokens
82
191
-| File | Size | Format | Notes |
192
-|------|------|--------|-------|
193
-| `apple-touch-icon.png` | 180×180 | PNG | Add 10% padding, solid `--bg` background |
83
+- **Color:** `var(--color-text)` via `currentColor` — auto-adapts to light/dark themes
84
+- **Stroke width (64px):** 2.5px main elements, 4px binocular bridge, 2px shoulder
85
+- **Stroke width (16px):** 1.5px main elements, 1px shoulder
86
+- **Corner radius:** 8px head (64px), 2px head (16px)
87
195
-### Safari Pinned Tab
88
+## Silhouette safety check (the lesson from the SS incident)
89
197
-| File | Size | Format | Notes |
198
-|------|------|--------|-------|
199
-| `safari-pinned-tab.svg` | Scalable | SVG | Monochrome black only |
90
+Confirmed against ADL Hate on Display + general silhouette test:
91
+- ❌ Not a rune — no angular lightning-bolt shapes
92
+- ❌ Not a letterform that could be misread — no S, SS, or similar
93
+- ❌ Not a sun/cross variant — rounded rectangle, not radial
94
+- ❌ Not a hand gesture — clearly a robot head
95
+- ✅ At 16px the silhouette reads as: **robot face with antenna and prominent circular "eyes"**
96
201
-### Header Logo
97
+The binoculars read as large round eyes at small sizes, which reinforces the "observing" concept. The antenna is the critical robot identifier.
98
203
-| File | Size | Format | Notes |
204
-|------|------|--------|-------|
205
-| `logo.svg` | Height 28-32px | SVG | Icon + "SquadScope" wordmark |
206
-| `logo-icon-only.svg` | 32×32 | SVG | For mobile/compact contexts |
99
+## Asset list (Amy implements in Phase 6 #175)
100
208
-### Social/OG Images
101
+PNG sizes needed for full favicon + PWA support (per faviconbuilder.com guide):
102
103
| File | Size | Format | Notes |
104
|------|------|--------|-------|
212
-| `og-image.png` | 1200×630 | PNG | See spec below |
213
-| `og-image-weekly.png` | 1200×630 | PNG | Template for weekly articles |
214
-
215
----
216
-
217
-## 5. OG Image Specification
218
-
219
-### Default OG Image (`og-image.png`)
220
-
221
-```
222
-┌────────────────────────────────────────────────────────────────┐
223
-│ │
224
-│ │
225
-│ ┌─────┐ │
226
-│ │ ◎ │ SquadScope │
227
-│ └─────┘ │
228
-│ │
229
-│ Weekly tech signal from GitHub │
230
-│ │
231
-│ │
232
-│ jmservera.github.io/SquadScope │
233
-│ │
234
-│ │
235
-└────────────────────────────────────────────────────────────────┘
236
-```
237
-
238
-**Specs:**
239
-- Size: 1200×630px
240
-- Background: `--bg` (#FAFAFA light / #0D0D0D dark — produce both)
241
-- Icon: 120px height, left of wordmark
242
-- Wordmark: Inter Bold, 72px, `--text`
243
-- Tagline: Inter Regular, 32px, `--text-muted`
244
-- URL: Inter Regular, 24px, `--text-muted`
245
-- All content vertically centered, left-aligned with 80px margin
246
-
247
-### Weekly Article OG Template (`og-image-weekly.png`)
248
-
249
-```
250
-┌────────────────────────────────────────────────────────────────┐
251
-│ │
252
-│ WEEK 22 · MAY 2026 [SquadScope ◎] │
253
-│ │
254
-│ Supply-Chain Scanners, Skills │
255
-│ Economies, and GitHub's │
256
-│ Star-Farm Flood │
257
-│ │
258
-│ ┌─────────────────────────────────────────┐ │
259
-│ │ Repos: 420 · Stars: 16.5M · Top: ⭐ │ │
260
-│ └─────────────────────────────────────────┘ │
261
-│ │
262
-└────────────────────────────────────────────────────────────────┘
263
-```
264
-
265
-**Specs:**
266
-- Size: 1200×630px
267
-- Background: Gradient from `--bg` to `--surface`
268
-- Eyebrow: Inter Medium, 24px, `--accent`
269
-- Title: Inter Bold, 56px, `--text`, max 3 lines
270
-- Metrics bar: Rounded rect with `--accent-muted` background
271
-- Logo: Top-right corner, 48px height
272
-
273
----
274
-
275
-## 6. Generation Prompt (Optional)
276
-
277
-If a richer hero/OG image is desired using an image generation model, here is a prompt:
278
-
279
-```
280
-A minimalist digital illustration of a radar screen showing concentric circles
281
-on a dark background (#0D0D0D). A single bright blue (#4DA3FF) sweep line
282
-extends from the center to the top of the screen. Where the sweep line meets
283
-the outer ring, there is a glowing blue dot representing a detected signal.
284
-The style is clean, geometric, and technical — like a modernized NORAD display
285
-but elegant and editorial. No text, no labels, just the pure radar visualization.
286
-Aspect ratio 1200x630 for social media preview.
287
-```
288
-
289
-**Note:** The hand-coded SVG icon above is the canonical brand mark. Any generated imagery should complement it, not replace it.
290
-
291
----
292
-
293
-## 7. Implementation Checklist
294
-
295
-- [ ] Export all PNG assets at 2x resolution for Retina displays
296
-- [ ] Test favicon.ico in Chrome, Firefox, Safari, Edge
297
-- [ ] Verify safari-pinned-tab.svg renders correctly in Safari
298
-- [ ] Add icon references to `hugo.toml` under `[params]`
299
-- [ ] Update `layouts/partials/head.html` with favicon links
300
-- [ ] Test OG images with Twitter Card Validator and Facebook Debugger
301
-
302
----
303
-
304
-## 8. File Locations
305
-
306
-All assets should be placed in:
307
-
308
-```
309
-static/
310
-├── favicon.ico
311
-├── favicon.svg
312
-├── favicon-16x16.png
313
-├── favicon-32x32.png
314
-├── apple-touch-icon.png
315
-├── safari-pinned-tab.svg
316
-├── logo.svg
317
-├── logo-icon-only.svg
318
-├── og-image.png
319
-├── og-image-dark.png
320
-└── og-image-weekly-template.png
321
-```
322
-
323
-Update `hugo.toml`:
324
-
325
-```toml
326
-[params.label]
327
- icon = "logo-icon-only.svg"
328
- iconHeight = 28
105
+| `favicon.ico` | 16, 32, 48 multi-size | ICO | Use 16px SVG variant |
106
+| `favicon-16x16.png` | 16×16 | PNG | From 16px SVG |
107
+| `favicon-32x32.png` | 32×32 | PNG | From master SVG |
108
+| `favicon-96x96.png` | 96×96 | PNG | From master SVG |
109
+| `apple-touch-icon.png` | 180×180 | PNG | Master SVG + 10% padding + `--bg` fill |
110
+| `android-chrome-192x192.png` | 192×192 | PNG | Master SVG + padding |
111
+| `android-chrome-512x512.png` | 512×512 | PNG | Master SVG + padding |
112
+| `mstile-150x150.png` | 150×150 | PNG | Master SVG centered |
113
+| `safari-pinned-tab.svg` | scalable | SVG | Monochrome, single path conversion |
114
+| `og-image.png` | 1200×630 | PNG | Robot motif as anchor; Amy designs composition |
115
+| `site.webmanifest` | — | JSON | References 192 + 512 sizes |
116
+
117
+All generated from the master SVG above.
118
+
119
+## Header inline usage
120
+
121
+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.
122
+
123
+Example markup (see matching PR diff):
124
+```html
125
+<span class="site-brand__mark" aria-hidden="true">
126
+ <svg viewBox="0 0 64 64" width="100%" height="100%" fill="none" stroke="currentColor" ...>
127
+ <!-- robot SVG paths -->
128
+ </svg>
129
+</span>
130
```
131
132
---
133
333
-*Specification by Calculon · 2026-05-25*
134
+*Specification by Calculon · 2026-05-25 (redo — replaces radar sweep concept)*
layouts/partials/header.html
+15
-1
@@ -1,7 +1,21 @@
1
<header class="header site-header">
2
<nav class="header-nav" aria-label="Primary">
3
<a class="site-brand" href="{{ "" | absLangURL }}" accesskey="h" title="SquadScope (Alt + H)" aria-label="SquadScope home">
4
- <span class="site-brand__mark" aria-hidden="true">SS</span>
4
+ <span class="site-brand__mark" aria-hidden="true">
5
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="100%" height="100%" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
6
+ <line x1="32" y1="4" x2="32" y2="14"/>
7
+ <circle cx="32" cy="4" r="3" fill="currentColor" stroke="none"/>
8
+ <rect x="10" y="14" width="44" height="36" rx="8" ry="8"/>
9
+ <circle cx="22" cy="30" r="9"/>
10
+ <circle cx="22" cy="30" r="4" fill="currentColor" stroke="none"/>
11
+ <circle cx="42" cy="30" r="9"/>
12
+ <circle cx="42" cy="30" r="4" fill="currentColor" stroke="none"/>
13
+ <line x1="31" y1="30" x2="33" y2="30" stroke-width="4"/>
14
+ <line x1="26" y1="42" x2="38" y2="42"/>
15
+ <line x1="28" y1="45" x2="36" y2="45"/>
16
+ <path d="M14 54 L14 58 Q14 62 18 62 L46 62 Q50 62 50 58 L50 54" stroke-width="2"/>
17
+ </svg>
18
+ </span>
19
<span class="site-brand__text">SquadScope</span>
20
</a>
21
screenshots/design-verification/2026-05-25/home-mobile-dark.png
Binary files a/screenshots/design-verification/2026-05-25/home-mobile-dark.png and b/screenshots/design-verification/2026-05-25/home-mobile-dark.png differ
screenshots/design-verification/2026-05-25/home-tablet-light.png
Binary files /dev/null and b/screenshots/design-verification/2026-05-25/home-tablet-light.png differ