Write a detailed icon set design brief with technical specifications

# Icon Set Design Brief ## Product: CloudSync — Developer Collaboration Platform ## Style: Geometric Minimal with Humanist Details --- ## 1. Grid System & Keyline Shapes **Base Grid:** 24x24px with 1px padding on all sides, giving a 22x22px live area. All icons are drawn within this live area. **Sub-Grid:** 0.5px increments allowed for optical corrections only. All primary geometry must snap to whole pixels. **Keyline Shapes (centered in live area):** - Circle: 20px diameter - Square: 18x18px - Vertical rectangle: 16x20px - Horizontal rectangle: 20x16px Icons should fill one of these keyline shapes. Icons that don't fit any keyline shape need optical adjustment to appear the same visual weight as those that do. A 20px circle and an 18px square have approximately equal visual weight — this is intentional. **Pixel-Perfect Rule:** At 24px, every stroke must land on a full pixel boundary. At 16px, strokes may land on half-pixel boundaries. At 12px, prioritize recognizability over grid alignment. --- ## 2. Stroke vs Fill Philosophy **Default State: Stroke (outline)** All icons are drawn as 1.5px strokes by default. This weight provides clean rendering at 24px while remaining visible at 16px. **Active/Selected State: Fill (solid)** When an icon represents an active or selected state (e.g., active navigation item, toggled-on feature), switch to the filled variant. This gives immediate visual feedback without color change. **Why 1.5px and not 2px:** Our product's UI is information-dense. 2px strokes create too much visual weight when 40+ icons are visible simultaneously. 1.5px keeps the interface feeling light. **Stroke Cap:** Round **Stroke Join:** Round (for corners under 90 degrees), Miter (for 90-degree corners with miter limit of 4) **Fill Rule:** Even-odd. All filled icons must render correctly with even-odd fill rule. --- ## 3. Optical Sizing Rules We ship three optical sizes. These are NOT just scaled versions — each size is a separate drawing with appropriate detail. | Size | Stroke | Details | Use Case | |------|--------|---------|----------| | 24px | 1.5px | Full detail, all elements | Default UI, toolbars, navigation | | 16px | 1.5px | Reduced detail, simplified shapes | Inline text, table cells, badges | | 12px | 1.5px | Minimal detail, silhouette-level | Status indicators, dense lists | **Detail Reduction Rules:** - At 16px: Remove any element smaller than 3x3px. Merge parallel lines closer than 2px. Simplify curves with more than 4 control points. - At 12px: Reduce to essential silhouette. A "document" icon becomes a simple rectangle with fold. A "settings gear" loses inner detail and becomes a solid gear shape. --- ## 4. Corner Radius Standards - **Outer corners:** 1.5px radius (matches stroke weight for visual harmony) - **Inner corners:** 0px (sharp) when the enclosed space is ≤4px, 1px when space is >4px - **Circular elements:** Remain fully round regardless of size - **Exception:** Arrows and chevrons have no radius — they terminate in sharp points for directional clarity --- ## 5. Minimum Detail Threshold If any visual element would render smaller than 2x2px at the target size, it must either be removed or merged with an adjacent element. No sub-pixel details that create rendering artifacts. **The "Squint Test":** If you squint at the icon from arm's length and can't distinguish an element, remove it. Icons communicate through shape, not detail. --- ## 6. Color & State System **Base Colors (using CSS custom properties):** - Default: `var(--icon-default)` — primary icon color, medium emphasis - Muted: `var(--icon-muted)` — secondary icons, less important actions - Accent: `var(--icon-accent)` — primary brand actions, CTAs - Destructive: `var(--icon-destructive)` — delete, remove, danger - Success: `var(--icon-success)` — confirmation, complete states - On-Color: `var(--icon-on-color)` — icons on colored backgrounds (buttons) **States:** | State | Opacity | Transform | |-------|---------|-----------| | Default | 100% | — | | Hover | 100% | Color shift to accent or slight scale (1.05) | | Pressed | 80% | scale(0.95) | | Disabled | 38% | — | | Focused | 100% | 2px focus ring (handled by parent) | **Rule:** Icons are always single-color. Never use two colors in a single icon. Multi-color expression happens through the fill/stroke swap, not through polychrome icons. --- ## 7. Naming Convention `{category}-{object}-{variant}` - Category: The functional group (nav, action, content, status, media, social, file, comm) - Object: The thing depicted (document, user, settings, search) - Variant: Optional modifier (filled, small, off, add, remove) Examples: - `action-search` (default outline) - `action-search-filled` (solid variant) - `nav-home` - `nav-home-filled` - `status-check-circle` - `content-document-add` All names are lowercase kebab-case. No abbreviations except universally understood ones (nav, comm, info). --- ## 8. Export Specifications | Format | Sizes | Use Case | |--------|-------|----------| | SVG | 24px (viewBox) | Web, React components | | PNG | 16, 24, 32, 48px @1x and @2x | Fallback, email, docs | | PDF | 24px vector | iOS/macOS native | | Android XML | 24dp | Android native | | Icon font | — | Legacy support only | **SVG Requirements:** - No embedded styles — use currentColor for fill/stroke - No transforms — all paths pre-transformed - All paths merged where possible (reduce DOM nodes) - viewBox="0 0 24 24", no width/height attributes - Maximum 3 path elements per icon --- ## 9. Accessibility Requirements - Every icon used without a visible text label must have an `aria-label` - Decorative icons (next to text that says the same thing) get `aria-hidden="true"` - Minimum touch target: 44x44px (icon can be 24px, but tap area must be 44px) - Icons must be distinguishable by shape alone — never rely solely on color to convey meaning - Status icons (error, warning, success) must pair with text, not stand alone --- ## 10. Essential Icon List (30 Icons) **Navigation (6):** 1. `nav-home` — House silhouette, pitched roof, door detail at 24px 2. `nav-search` — Magnifying glass, 45-degree handle 3. `nav-settings` — Gear with 6 teeth (not 8, too noisy) 4. `nav-profile` — Head-and-shoulders bust in circle 5. `nav-notifications` — Bell with clapper detail at 24px 6. `nav-menu` — Three horizontal lines, equal spacing (hamburger) **Actions (8):** 7. `action-add` — Plus sign, 1.5px strokes 8. `action-edit` — Pencil at 45 degrees, line underneath 9. `action-delete` — Trash can with lid slightly raised 10. `action-share` — Three connected dots (share graph) 11. `action-copy` — Two overlapping rectangles, offset top-right 12. `action-download` — Arrow pointing down into tray 13. `action-upload` — Arrow pointing up from tray 14. `action-filter` — Funnel shape, three lines decreasing width **Content (6):** 15. `content-document` — Rectangle with folded corner top-right 16. `content-folder` — Folder with tab 17. `content-image` — Rectangle with mountain-and-sun scene 18. `content-code` — Angle brackets < > with slash 19. `content-link` — Two chain links at 45 degrees 20. `content-calendar` — Rectangle with two hanging tabs, grid dots **Status (5):** 21. `status-check` — Single checkmark 22. `status-check-circle` — Checkmark inside circle 23. `status-warning` — Triangle with exclamation mark 24. `status-error` — Circle with X 25. `status-info` — Circle with lowercase i **Communication (3):** 26. `comm-chat` — Speech bubble with tail bottom-left 27. `comm-email` — Envelope with fold line 28. `comm-mention` — @ symbol, simplified **Media (2):** 29. `media-play` — Right-pointing triangle in circle 30. `media-pause` — Two vertical bars in circle