references/visual-system.md
visual-system.md
Retro OS Icon Visual System
Composition
- Use a
256x256transparent canvas unless the product already defines another standard. - Keep the primary silhouette inside an approximately
224-228pxsquare. - Center by perceived weight, not only the mathematical bounding box.
- Prefer a compact frontal or slight three-quarter view.
- Make the subject fill the icon without touching the canvas edge.
- Use the strongest existing icon as a composition reference, not necessarily as a style reference.
Rendering language
Aim for a late-1990s to early-2000s desktop icon rather than modern flat mobile branding:
- pixel-painted or carefully rasterized edges;
- subtle dark contour and compact internal shadow;
- enamel, plastic, brushed metal, paper, nylon, or glass used only when relevant;
- a limited number of highlight and shade steps;
- slightly restrained saturation;
- small, legible object details rather than soft atmospheric effects.
Avoid:
- rounded app-store tiles used as an outer container;
- neon gradients, purple-blue glow, bokeh, or floating decoration;
- photorealistic floor shadows and reflections;
- excessive bevels that make every subject the same object;
- tiny text or brand marks that collapse at Dock size;
- pure black detail without a readable highlight on dark wallpapers.
Transparency rules
Transparent exterior means alpha, not a white, black, beige, or wallpaper-colored rectangle. An icon may contain an opaque folder, window, disc, newspaper, or device because it is part of the subject.
For generated assets, request a perfectly flat chroma-key background with no shadow, texture, gradient, reflection, or floor plane. Remove it locally and validate the matte. For existing assets, remove only background regions connected to the image border so similarly colored interior details survive.
Shared generation prompt
Use this common block, then append one subject-specific sentence per icon:
Use case: stylized-concept
Asset type: 256x256 retro desktop OS application icon
Primary request: Create a compact, recognizable icon for <subject>.
Scene/backdrop: perfectly flat solid chroma-key background for removal
Style/medium: late-1990s to early-2000s pixel-painted desktop icon, restrained skeuomorphism
Composition/framing: centered object, frontal or slight three-quarter view, consistent visual mass, generous transparent padding after extraction
Lighting/mood: compact studio highlights, clear silhouette, no environmental lighting
Materials/textures: only materials natural to the subject, with limited tonal steps
Constraints: readable at 16, 32, and 72 pixels; no text; no logo; no watermark; no cast shadow; no outer app tile
Avoid: modern flat icon, glossy mobile app badge, gradient scene, photorealistic background, excessive tiny detail
Generate each subject separately. Keep the common block unchanged across the set unless a specific material conflicts with it.
Small-size review
Review every asset at:
| Size | Primary question |
| --- | --- |
| 256px | Are alpha edges, texture, and subject details clean? |
| 72px | Does the desktop or draggable sprite read immediately? |
| 32px | Does the Dock or compact control preserve identity? |
| 16px | Does the favicon reduce to a distinct silhouette? |
At 16px, remove detail before adding contrast. A mascot favicon may use a thin neutral outline when a black subject must survive both light and dark browser chrome.