Generates all SVG assets for a Y1 music player theme. Use this when asked to generate theme assets, create SVGs for a Y1 theme, or build a new theme from a style guide.
Generate all 86 SVG assets for a Y1 theme. Follow every instruction here precisely — coherence across all assets depends on it.
themes/<name>/ or examples/<name>/. If not told, ask.<theme-dir>/style-guide.md — this is the locked aesthetic. Every decision must comply with it.<theme-dir>/icon-catalog.json — this is the complete asset registry. Every file you need to generate is listed here with its svgFilename, dimensions, designIntent, and category.<theme-dir>/svg/.Every SVG must follow this exact structure:
<svg xmlns="http://www.w3.org/2000/svg" width="W" height="H" viewBox="0 0 W H">
<defs>
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="2.5" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
<filter id="glow-strong" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="5" result="blur"/>
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<!-- background always first -->
<rect width="W" height="H" fill="#0A0A14"/>
<!-- icon content -->
</svg>
W and H come from the dimensions field in the catalog (e.g. "166x166" → width="166" height="166")stroke-linecap="round" and stroke-linejoin="round" throughout<defs> as needed for specific glow colours| Role | Hex |
|---|---|
| Background | #0A0A14 |
| Primary/text | #F0EDE6 |
| Violet (accent) | #7B3FE4 |
| Cyan (active/on) | #3FFFD8 |
| Red (warning/media) | #E84040 |
| Sand (warm accent) | #C8A96E |
| Dim (off/inactive) | #3A3A5C |
| Category | Style |
|---|---|
main-menu (166×166) | Rich, layered, multiple elements, glows prominent |
settings (146×146) | Functional, 1-2 primary shapes, subtle glow |
status (64×64) | Minimal silhouette only, thin strokes, glow optional |
battery (64×32) | Horizontal pill, segmented fill — no glow on pill body |
ui-chrome (640×91) | Backgrounds/rows — flat fills, left accent bar for selected |
wallpaper (320×240) | Full scene — sky, horizon, foreground elements |
mask (480×272) | Device frame outline only |
cover (200×200) | Composite — combine 3-4 key motifs from the theme |
Assets with -on / -off suffixes are state pairs. The rules are strict:
filter="url(#glow)" or filter="url(#glow-strong)" on key elements#3A3A5C, NO filter attributes at allSome assets are a progression (battery levels, backlight durations, timer durations):
#E84040 (1 seg), 2=#C8A96E (2 segs), 3=#F0EDE6 (3 segs), 4=#3FFFD8 (4 segs full)timer-off: empty hourglass, crescent moon, all #3A3A5Ctimer-10 through timer-120: hourglass with progressive sand fill (red → sand → cyan as duration increases) + crescent moon in corner10 EQ presets, each with a unique 5-bar frequency profile:
eq-normal: flat, all bars same height, whiteeq-classical: low, low, mid, low, low — a wide gentle curve, cyaneq-dance: tall bass, mid notch, tall treble — violeteq-flat: all bars at minimum height, dimeq-folk: mid-forward hump, sandeq-heavymetal: scooped mids (tall-short-tall-short-tall), redeq-hiphop: very tall bass (left 2), rest shorter, violeteq-jazz: moderate curve peaking at mid, cyaneq-pop: V-shape (tall bass + tall treble, low mids), sandeq-rock: tall bass, tall treble, moderate mids — red/whiteFor each entry in icon-catalog.json:
svgFilename — that is the output filename, written to <theme-dir>/svg/<svgFilename>dimensions for the viewBoxdesignIntent carefully — it describes exactly what to drawdescription for additional contextcategory style weight rules aboveWork through all entries. When done, report a count of files created and any that were skipped.
Next step: run /validate-y1-theme to check dimensions, structure, and ON/OFF pairs before deploying.