docs(icons): promote concept-1 to canonical icon + dark variant + concept-3 fix

RelativisticJet · RelativisticJet · commit 3acc710d94ec · 2026-05-22T01:24:55.000+02:00
User picked concept-1 (document-with-badge) from the four candidates. This commit: 1. Promotes concept-1's design to docs/icons/appIcon-light.svg, replacing the prior v1 navy/green draft. The v1 design was superseded after side-by-side review of four aqua-palette concepts (commit 7b8b0e8); concept-1 won on the strength of the explicit "whitelist document" metaphor that the v1 lacked. 2. Produces a matching docs/icons/appIcon-dark.svg variant. Same composition, palette tuned for dark Splunk dashboard backgrounds (~#0a1f3d): Shield: #1FB8C9 → #2DD0E2 (+12% lightness) Document body: #D6DCE0 → #E2E7EC Outline: #1A1A1A → #2A2A2A (softer black) Title bar: #4A5560 → #5A6570 List rows: #8A95A0 → #9AA5B0 Check badge bg: #1A1A1A (unchanged for max contrast) Check stroke: matches shield colour for brand echo Two files rather than one because Splunk's appIcon.png + appIconAlt.png convention expects per-theme optimization; the subtle palette lift on the dark variant gives noticeably better rendering on dark dashboards without changing the brand mark. 3. Updates docs/icons/README.md "Visual concept" + "Color palette" sections to describe the new aqua-shield + document + check-badge design. The v1 navy/green palette description was stale. 4. Fixes concept-3's boundary breach (caught by the second-pass QA review on commit 7b8b0e8): the lower list row was positioned at x=80 y=204, which extends ~2 units outside the shield's left curve at y=210 (shield left edge at y=210 ≈ x=82.2). Nudged to x=88 width=64 so the rect stays strictly inside. Invisible at render size (<0.3 px at 36×36) but the rejected concept now honors the same "everything inside the shield" constraint as the chosen one — keeps git history geometrically clean for any future redesign reference. Next step (USER): install Inkscape from https://inkscape.org/release/ (or use any image-capable tool that handles SVG cleanly), open docs/icons/appIcon-light.svg + appIcon-dark.svg, refine if desired, then File → Export PNG at the four required sizes per docs/icons/README.md (36×36 + 72×72 light, 36×36 + 72×72 dark) and drop into appserver/static/. Once the PNGs land, I'll deploy them to wl_manager_test, smoke-test the launcher tile renders correctly, and commit + push the binary icons. Then we move on to the matching social-preview banner.
diff --git a/docs/icons/README.md b/docs/icons/README.md
@@ -18,23 +18,38 @@ future maintainability without bloating customer installs.
 
 ## Visual concept
 
-Shield silhouette (security / protection) containing a green
-checkmark (whitelisted / allowed) above two horizontal lines
-representing the CSV list rows. Two-color rule at 36×36: navy
-silhouette + green accent — keeps the symbol legible at small
-sizes without muddling.
+Aqua shield silhouette (security / protection container) holding
+a light-grey document with three list rows (the whitelist itself),
+plus a black circular check badge in the document's bottom-right
+corner (approved / allowed affordance).
+
+Two reads at every size:
+
+1. **At 36×36** — bright aqua shield with a darker inset
+2. **At 144×144+** — distinguishable "secure whitelist document
+   with approval mark" composition
+
+Promoted from `concepts/concept-1-document-with-badge.svg` on
+2026-05-22 after side-by-side comparison of four candidate
+directions.
 
 ## Color palette
 
 | Token | Light SVG | Dark SVG | Role |
 | --- | --- | --- | --- |
-| Shield body | `#1F3A5F` | `#2C5282` (+ `#6BA5E0` rim) | Primary silhouette |
-| Checkmark | `#4CAF50` | `#4CAF50` | "Approved" affordance (Material green) |
-| List rows | `#4A6FA5` | `#B8C5D6` | Subtle "this is a list" hint |
-
-The checkmark green is identical in both variants so the
-"approved" affordance is unmistakable regardless of which Splunk
-theme the launcher is in.
+| Shield body | `#1FB8C9` | `#2DD0E2` (+12% lightness) | Brand primary; aqua shield |
+| Document body | `#D6DCE0` | `#E2E7EC` | Paper fill |
+| Document outline | `#1A1A1A` | `#2A2A2A` | Document border + check badge |
+| Title bar | `#4A5560` | `#5A6570` | Page top affordance (no text) |
+| List rows | `#8A95A0` | `#9AA5B0` | Subtle "this is a list" hint |
+| Check badge bg | `#1A1A1A` | `#1A1A1A` (unchanged) | Approval-mark container |
+| Check mark stroke | `#1FB8C9` | `#2DD0E2` | Matches shield colour for brand echo |
+
+The check badge bg is the same `#1A1A1A` in both variants to
+preserve maximum contrast against the aqua check stroke. The
+shield colour shifts +12% lightness in the dark variant so the
+icon pops against very dark Splunk navy dashboards without
+changing the brand identity.
 
 ## Required PNG export sizes
 
diff --git a/docs/icons/appIcon-dark.svg b/docs/icons/appIcon-dark.svg
@@ -3,47 +3,73 @@
   Whitelist Manager — app icon (DARK THEME variant)
   Renders best on Splunk's dark dashboard background (~#0a1f3d).
 
-  Same silhouette + checkmark + list-rows as appIcon-light.svg.
-  Color shifts:
-    - Shield body:  #1F3A5F navy  →  #2C5282 lighter navy (lifts off dark bg)
-    - Outline ring:                  +2px rim at #6BA5E0 for definition
-    - Checkmark:    #4CAF50 green (unchanged — same allowed-affordance)
-    - List rows:    #4A6FA5         →  #B8C5D6 light gray-blue
-                                     (visible against the lighter shield)
-
-  Export targets (via Inkscape File → Export PNG):
-    appserver/static/appIconAlt.png     36×36
-    appserver/static/appIconAlt_2x.png  72×72
+  Same composition as appIcon-light.svg (concept-1 document-with-badge).
+  Palette is tuned for dark backgrounds — all colors lifted slightly
+  so the icon stays vivid against very dark navy without changing the
+  brand mark itself.
+
+  Light vs Dark palette shifts:
+    Shield:        #1FB8C9  →  #2DD0E2   (+12% lightness, more pop)
+    Document body: #D6DCE0  →  #E2E7EC   (+3% lightness)
+    Outline:       #1A1A1A  →  #2A2A2A   (softer black, less harsh edge)
+    Title bar:     #4A5560  →  #5A6570   (lifted, still readable)
+    List rows:     #8A95A0  →  #9AA5B0   (lifted, still subordinate)
+    Check badge:   #1A1A1A   (unchanged — max contrast against aqua check)
+    Check stroke:  #1FB8C9  →  #2DD0E2   (matches lifted shield)
+
+  Why not identical to the light variant? Splunk's convention is
+  appIcon.png (light bg) + appIconAlt.png (dark bg) as separate files.
+  Even though our aqua works on both backgrounds, providing two
+  optimized files honors the convention and gives slightly better
+  rendering on dark Splunk dashboards.
 -->
 <svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 256 256"
      width="256" height="256"
      role="img"
-     aria-label="Whitelist Manager — dark theme variant, shield with checkmark and list rows">
+     aria-label="Whitelist Manager — dark theme variant, aqua shield with document and check badge">
 
-  <!-- Shield body (lifted color for dark backgrounds) -->
+  <!-- Shield silhouette (brighter aqua for dark backgrounds) -->
   <path d="M 40 40
            L 216 40
            L 216 144
            Q 216 200 128 232
            Q 40 200 40 144
            Z"
-        fill="#2C5282"
-        stroke="#6BA5E0"
-        stroke-width="4"
-        stroke-linejoin="round"/>
+        fill="#2DD0E2"/>
+
+  <!-- Document body (slightly lighter grey for dark-theme pop) -->
+  <rect x="72" y="64" width="112" height="124"
+        rx="6" ry="6"
+        fill="#E2E7EC"
+        stroke="#2A2A2A"
+        stroke-width="4"/>
 
-  <!-- Checkmark (same green as light variant) -->
-  <path d="M 76 130
-           L 116 168
-           L 184 96"
+  <!-- Document title bar (lifted dark grey) -->
+  <rect x="80" y="76" width="60" height="8"
+        rx="4" ry="4"
+        fill="#5A6570"/>
+
+  <!-- Three list rows: bullet + line -->
+  <!-- Row 1 -->
+  <circle cx="86" cy="108" r="4" fill="#9AA5B0"/>
+  <rect x="98" y="105" width="72" height="6" rx="3" fill="#9AA5B0"/>
+  <!-- Row 2 -->
+  <circle cx="86" cy="130" r="4" fill="#9AA5B0"/>
+  <rect x="98" y="127" width="64" height="6" rx="3" fill="#9AA5B0"/>
+  <!-- Row 3 -->
+  <circle cx="86" cy="152" r="4" fill="#9AA5B0"/>
+  <rect x="98" y="149" width="56" height="6" rx="3" fill="#9AA5B0"/>
+
+  <!-- Check badge: black circle (unchanged), aqua check matches the
+       lifted shield color for visual echo across the composition -->
+  <circle cx="170" cy="178" r="18" fill="#1A1A1A"/>
+  <path d="M 160 178
+           L 168 186
+           L 180 172"
         fill="none"
-        stroke="#4CAF50"
-        stroke-width="22"
+        stroke="#2DD0E2"
+        stroke-width="4"
         stroke-linecap="round"
         stroke-linejoin="round"/>
-
-  <!-- Two list-row marks (lighter blue for visibility on dark bg) -->
-  <rect x="76"  y="188" width="104" height="6" rx="3" fill="#B8C5D6"/>
-  <rect x="76"  y="204" width="72"  height="6" rx="3" fill="#B8C5D6"/>
 </svg>
diff --git a/docs/icons/appIcon-light.svg b/docs/icons/appIcon-light.svg
@@ -3,52 +3,81 @@
   Whitelist Manager — app icon (LIGHT THEME variant)
   Renders best on white / light-gray Splunk launcher backgrounds.
 
+  Promoted from docs/icons/concepts/concept-1-document-with-badge.svg
+  on 2026-05-22 after maintainer review of four candidate concepts.
+
   Visual concept:
-    - Shield silhouette  = security / protection
-    - Checkmark inside   = whitelisted / allowed
-    - Two list rows below checkmark = the CSV list nature of whitelists
+    - Aqua shield silhouette = security / protection container
+    - Document inside        = the whitelist itself (paper + 3 list rows)
+    - Black check badge      = the "approved / allowed" affordance
 
   Color rationale:
-    - #1F3A5F navy  : deep, calm, technical — pairs cleanly with Splunk's
-                      brand teal without clashing
-    - #4CAF50 green : universal "approved / allow" affordance,
-                      WCAG-AA contrast against the navy at all sizes
-    - #4A6FA5 mid-blue : list rows, subtle enough not to compete with
-                         the checkmark but visible at 36×36
+    - #1FB8C9 aqua       : brand-primary, distinguishes from Splunk's
+                           own teal while staying technical/calm
+    - #D6DCE0 light grey : paper body, high contrast against aqua
+    - #1A1A1A near-black : document outline + check badge, anchors
+                           the composition at small sizes
+    - #4A5560 dark grey  : document title bar, gives the page a
+                           visual top without text
+    - #8A95A0 mid grey   : list rows, subtle "this is a list" hint
 
   Export targets (via Inkscape File → Export PNG):
     appserver/static/appIcon.png     36×36   (Splunk launcher tile)
     appserver/static/appIcon_2x.png  72×72   (retina / HiDPI)
     (Optional) larger sizes for Splunkbase listing: 144×144, 512×512
 
   ViewBox is 256×256 so all export sizes are clean integer divisions.
+
+  All inner geometry is verified to stay strictly within the shield
+  path's interior — see docs/icons/README.md for the safe-zone math.
 -->
 <svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 256 256"
      width="256" height="256"
      role="img"
-     aria-label="Whitelist Manager — shield with checkmark and list rows">
+     aria-label="Whitelist Manager — aqua shield containing document with check badge">
 
-  <!-- Shield: flat top, gently rounded shoulders, point at the bottom -->
+  <!-- Shield silhouette (aqua, brand primary) -->
   <path d="M 40 40
            L 216 40
            L 216 144
            Q 216 200 128 232
            Q 40 200 40 144
            Z"
-        fill="#1F3A5F"/>
+        fill="#1FB8C9"/>
+
+  <!-- Document body (light grey paper with black outline) -->
+  <rect x="72" y="64" width="112" height="124"
+        rx="6" ry="6"
+        fill="#D6DCE0"
+        stroke="#1A1A1A"
+        stroke-width="4"/>
 
-  <!-- Checkmark (upper portion of shield) -->
-  <path d="M 76 130
-           L 116 168
-           L 184 96"
+  <!-- Document title bar (dark grey band at top, no text) -->
+  <rect x="80" y="76" width="60" height="8"
+        rx="4" ry="4"
+        fill="#4A5560"/>
+
+  <!-- Three list rows: bullet + line -->
+  <!-- Row 1 -->
+  <circle cx="86" cy="108" r="4" fill="#8A95A0"/>
+  <rect x="98" y="105" width="72" height="6" rx="3" fill="#8A95A0"/>
+  <!-- Row 2 -->
+  <circle cx="86" cy="130" r="4" fill="#8A95A0"/>
+  <rect x="98" y="127" width="64" height="6" rx="3" fill="#8A95A0"/>
+  <!-- Row 3 -->
+  <circle cx="86" cy="152" r="4" fill="#8A95A0"/>
+  <rect x="98" y="149" width="56" height="6" rx="3" fill="#8A95A0"/>
+
+  <!-- Check badge: black circle in document's bottom-right corner,
+       with aqua checkmark matching the shield color for brand echo -->
+  <circle cx="170" cy="178" r="18" fill="#1A1A1A"/>
+  <path d="M 160 178
+           L 168 186
+           L 180 172"
         fill="none"
-        stroke="#4CAF50"
-        stroke-width="22"
+        stroke="#1FB8C9"
+        stroke-width="4"
         stroke-linecap="round"
         stroke-linejoin="round"/>
-
-  <!-- Two list-row marks under the checkmark -->
-  <rect x="76"  y="188" width="104" height="6" rx="3" fill="#4A6FA5"/>
-  <rect x="76"  y="204" width="72"  height="6" rx="3" fill="#4A6FA5"/>
 </svg>
diff --git a/docs/icons/concepts/concept-3-bold-check-list.svg b/docs/icons/concepts/concept-3-bold-check-list.svg
@@ -38,7 +38,12 @@
         stroke-linejoin="round"/>
 
   <!-- Two list rows (lower portion, supporting metaphor — kept to two
-       so the bold check stays dominant at 36×36 launcher size) -->
+       so the bold check stays dominant at 36×36 launcher size).
+       Left edge nudged in from x=80 to x=88 on the lower row so the
+       rect stays strictly inside the shield's left curve at y=210
+       (shield left edge at y=210 ≈ x=82.2; old x=80 was ~2 units
+       outside, invisible at render size but technically a breach
+       of the "everything within the shield" constraint). -->
   <rect x="80" y="190" width="96" height="6" rx="3" fill="#4A5560"/>
-  <rect x="80" y="204" width="72" height="6" rx="3" fill="#4A5560"/>
+  <rect x="88" y="204" width="64" height="6" rx="3" fill="#4A5560"/>
 </svg>
