docs: add app icon design spec

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-22 11:46:59 -04:00
parent 8ad2f1c800
commit ba0cbdb01c
1 changed files with 171 additions and 0 deletions
--- a/docs/superpowers/specs/2026-09-22-app-icon-design.md
+++ b/docs/superpowers/specs/2026-09-22-app-icon-design.md
@@ -0,0 +1,171 @@
+# Video Clipper App Icon — Design Spec
+
+**Date:** 2026-09-22
+**Status:** Draft
+
+## Overview
+
+Design an SVG app icon for Video Clipper following Android adaptive icon guidelines. The icon depicts open scissors cutting diagonally across a horizontal film strip. The visual style is a hybrid of Material Design and modern gradient aesthetics in a shadcn-inspired palette (muted, dark, refined). Five color accent variants are produced; the user selects their preferred variant.
+
+## Android Adaptive Icon Compliance
+
+Per [Google Play icon design specifications](https://developer.android.com/distribute/google-play/resources/icon-design-specifications):
+
+- **Canvas:** 512x512px, 32-bit PNG (or SVG source at that viewBox)
+- **Shape:** Full square — Google Play dynamically masks with 30% corner radius
+- **No drop shadows** in the asset — Google Play adds them dynamically
+- **No rounded corners** in the asset — Google Play adds them dynamically
+- **Foreground/background separation:** Two layers for adaptive icon parallax on Android
+- **Safe zone:** Inner 66% (338x338px centered area, 87px inset). All critical artwork fits within this zone. Decorative elements (film strip edges) may extend beyond and clip gracefully.
+
+## Visual Style
+
+- **Aesthetic:** Material Design geometry (clean, geometric shapes) + modern gradient treatment (subtle blade gradients for depth), in a shadcn-inspired dark palette
+- **Background:** Solid zinc-900 (`#18181b`) — no transparency, no gradient
+- **Foreground elements:** Film strip in zinc-700, scissors with accent-colored gradient blades, zinc-400 finger rings
+
+## Foreground Artwork — Composition
+
+### Film Strip
+
+- Horizontal rectangle centered in the canvas, ~70% of safe zone width (~236px wide), ~80px tall
+- Two rows of sprocket holes: 3 small rounded rectangles (12x16px, 4px border-radius) evenly spaced along the top edge and 3 along the bottom edge
+- **Split into two halves** by a diagonal gap (~8px wide) matching the scissors' blade angle (~30 degrees from vertical)
+- Left half offset slightly downward, right half offset slightly upward along the cut line — creates a "separation" effect
+- Film strip body: zinc-700 (`#3f3f46`)
+- Sprocket holes: zinc-800 (`#27272a`) — punched out of the strip
+- Cut edge: thin accent-colored line along the gap
+
+### Scissors
+
+- Pivot point roughly at canvas center (256, 256)
+- Two blades at ~60 degree opening angle, each ~140px long
+- Blades are elongated tapered shapes (narrow at tip, wider at pivot)
+- Blades pass through the film strip gap — upper blade toward upper-right, lower blade toward lower-left
+- Two finger rings at handle ends (~30px diameter), rendered as oval strokes (4px stroke width)
+- Pivot: small circle (10px diameter) at blade intersection
+- Blades: filled with accent gradient; rings: stroked zinc-400 (`#a1a1aa`); pivot: solid zinc-400
+
+### Composition
+
+- Film strip provides horizontal anchor
+- Scissors cross diagonally, creating visual tension
+- Centered within the 338x338px safe zone
+- Film strip edges may extend slightly beyond safe zone (clip gracefully on round masks)
+
+## Color Palettes — Five Variants
+
+All variants share the same structural colors:
+- Background: `#18181b` (zinc-900)
+- Film strip body: `#3f3f46` (zinc-700)
+- Sprocket holes: `#27272a` (zinc-800)
+- Finger rings & pivot: `#a1a1aa` (zinc-400)
+
+The accent color differentiates each variant, applied to blade gradients and cut-edge accent line:
+
+| Variant | Blade Tip (lighter) | Blade Pivot (darker) | Cut Edge Accent |
+|---------|---------------------|----------------------|-----------------|
+| Blue    | `#60a5fa`           | `#2563eb`            | `#3b82f6`       |
+| Purple  | `#c084fc`           | `#7c3aed`            | `#a855f7`       |
+| Green   | `#34d399`           | `#059669`            | `#10b981`       |
+| Orange  | `#fb923c`           | `#ea580c`            | `#f97316`       |
+| Mono    | `#d4d4d8` (zinc-300)| `#71717a` (zinc-500) | `#a1a1aa`       |
+
+The blade gradient runs along the length of each blade — lighter/brighter at the sharp tip (draws the eye to the cutting action), darker toward the pivot. This adds depth without breaking the flat aesthetic.
+
+## SVG Structure
+
+Each variant is a single SVG file:
+
+```xml
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="blade-gradient" ...>
+      <stop offset="0%" stop-color="{blade-tip-color}"/>
+      <stop offset="100%" stop-color="{blade-pivot-color}"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background layer -->
+  <rect width="512" height="512" fill="#18181b"/>
+
+  <!-- Film strip (two halves split by diagonal cut) -->
+  <g id="film-strip">
+    <g id="film-left" transform="...">
+      <rect .../> <!-- left half body -->
+      <rect .../> <!-- sprocket holes (x3 top, x3 bottom) -->
+    </g>
+    <g id="film-right" transform="...">
+      <rect .../> <!-- right half body -->
+      <rect .../> <!-- sprocket holes (x3 top, x3 bottom) -->
+    </g>
+    <line id="cut-accent" stroke="{cut-accent-color}" stroke-width="2" .../>
+  </g>
+
+  <!-- Scissors -->
+  <g id="scissors" transform="rotate(-30, 256, 256)">
+    <path id="blade-upper" fill="url(#blade-gradient)" .../>
+    <path id="blade-lower" fill="url(#blade-gradient)" .../>
+    <circle id="pivot" cx="256" cy="256" r="5" fill="#a1a1aa"/>
+    <ellipse id="ring-upper" stroke="#a1a1aa" stroke-width="4" fill="none" .../>
+    <ellipse id="ring-lower" stroke="#a1a1aa" stroke-width="4" fill="none" .../>
+  </g>
+</svg>
+```
+
+## Output Files
+
+### Primary (from chosen variant)
+
+| File | Size | Purpose |
+|------|------|---------|
+| `src-tauri/icons/icon.svg` | 512x512 viewBox | Source / scalable icon |
+| `src-tauri/icons/32x32.png` | 32x32 | Tauri bundle |
+| `src-tauri/icons/128x128.png` | 128x128 | Tauri bundle |
+| `src-tauri/icons/128x128@2x.png` | 256x256 | Tauri bundle (Retina) |
+| `src-tauri/icons/icon.icns` | multi-resolution | macOS app icon |
+| `src-tauri/icons/icon.ico` | 16, 32, 48, 256 | Windows app icon |
+| `static/favicon.svg` | 512x512 viewBox | Web favicon (replaces default `tauri.svg`) |
+| `static/favicon-32.png` | 32x32 | Fallback favicon |
+
+### Color Variant Selection Files
+
+All five variants are created as separate SVGs for comparison:
+
+| File | Variant |
+|------|---------|
+| `src-tauri/icons/variants/icon-blue.svg` | Blue accent |
+| `src-tauri/icons/variants/icon-purple.svg` | Purple accent |
+| `src-tauri/icons/variants/icon-green.svg` | Green accent |
+| `src-tauri/icons/variants/icon-orange.svg` | Orange accent |
+| `src-tauri/icons/variants/icon-mono.svg` | Monochrome |
+
+After user selects their preferred variant, it is copied to the primary locations and rasterized.
+
+### Android Adaptive Icon (if packaging for Android)
+
+| File | Purpose |
+|------|---------|
+| `ic_launcher_foreground.svg` | Scissors + film strip only (transparent background) |
+| `ic_launcher_background.svg` | Solid `#18181b` fill |
+
+Separated so Android can apply parallax motion between layers.
+
+## Rasterization Pipeline
+
+1. Create all 5 SVG variants by hand-crafting the paths
+2. User previews all variants and selects their preferred one
+3. Copy the chosen variant to `src-tauri/icons/icon.svg` and `static/favicon.svg`
+4. Rasterize to PNGs at required sizes using a tool (e.g., `resvg`, `rsvg-convert`, or ImageMagick with SVG support)
+5. Pack PNGs into `.icns` (macOS) and `.ico` (Windows) using `iconutil` / `png2ico` or equivalent
+6. Generate the separated foreground-only SVG for Android adaptive icon use
+
+## Size Considerations
+
+At small sizes (16-32px), fine details like sprocket holes and finger ring strokes may not be visible. The icon remains recognizable at small sizes because:
+
+- The diagonal scissors silhouette is distinctive even as a blob
+- The film strip horizontal band provides contrast against the dark background
+- The accent color blade gradient maintains visibility
+
+No separate simplified small-size variant is planned — the geometry is simple enough to scale down. If testing reveals readability issues at 16px, a simplified version (scissors silhouette only, no sprocket holes) can be added as `static/favicon-16.png`.