monoline-icons

Files (1)

• SKILL.md

SKILL.md (first lines)

# Monoline Icon Illustrations

Create SVG graphics with clean, single-weight outline icons in the Apple marketing style. Think WWDC keynote slides, Apple developer documentation, SF Symbols, and product ecosystem diagrams.

**Key principle**: One color, one stroke weight, zero fills. If it has a gradient or a drop shadow, it failed.

## When to Use

- Tech product ecosystem showcases
- Device/platform feature overviews
- Service icon collections
- Blog featured images (tech topics)
- Documentation hero graphics
- Landing page illustrations
- Product comparison visuals
- API/SDK capability diagrams
- Newsletter header graphics
- Pitch deck technology slides

Best for showing **technology, devices, services, or capabilities** as clean iconographic compositions.

## Quick Reference

| Pattern | Use Case | Key Elements |
|---------|----------|--------------|
| Ecosystem Scatter | Device/product family | Mixed-size icons scattered organically |
| Icon Grid | Feature list, capabilities | Uniform icons in aligned grid |
| Hero + Satellites | Central product + features | One large icon, smaller ones orbiting |
| Horizontal Strip | Banner, header graphic | Icons in a horizontal flow |
| Vertical Stack | Sidebar, tall format | Icons stacked with consistent spacing |

---

## Core Visual Rules

### Canvas

- **White or near-white background** (`#ffffff` or `#fafbfc`)
- No background patterns, textures, or gradients
- Clean, open space around icons
- Common sizes: `800x400` (banner), `800x600` (standard), `1200x630` (OG image), `2400x1260` (featured image)
- Always use `viewBox`, never fixed `width`/`height`

### The Monoline Rules (Non-Negotiable)

| Rule | Correct | Wrong |
|------|---------|-------|
| Stroke weight | Uniform everywhere | Varying thickness |
| Stroke color | Single color | Multiple colors or gradients |
| Fill | `none` on all shapes | Filled shapes |
| Line caps | `round` | `butt` or `square` |
| Line joins | `round` | `miter` or `bevel` |
| Corners | Rounded (`rx`/`ry` on rects) | Sharp 90-degree corners |
| Geometry | Clean, precise curves | Wobbly or hand-drawn |
| Complexity | Minimal detail | Over-detailed |

**Exception for fills**: Small accent marks (dots, filled circles for indicators) may use fill sparingly. Recognized brand logos (Apple logo, etc.) may also use fill. Everything else is outline only.

### Color Palette

**Default: Single Blue**

| Element | Hex | Usage |
|---------|-----|-------|
| Icon stroke | `#0066FF` | All icon strokes (Apple's classic link blue) |
| Background | `#FFFFFF` | Canvas background |

**Alternative single-color palettes** (pick ONE per graphic):

| Name | Hex | Best For |
|------|-----|----------|
| Apple Blue | `#0066FF` | Default, tech, ecosystem |
| Indigo | `#5856D6` | Developer tools, APIs |
| Teal | `#30B0C7` | Health, wellness, data |
| Green | `#34C759` | Sustainability, growth |
| Orange | `#FF9500` | Creativity, media |
| Red | `#FF3B30` | Security, alerts |
| Purple | `#AF52DE` | AI, machine learning |
| Graphite | `#48484A` | Professional, enterprise |

**Hard rule**: Never use more than one stroke color in the same graphic. The monoline aesthetic depends on uniformity.

### Stroke Weight

The stroke weight must be **consistent across all icons in the composition**, regardless of icon size. This is the defining characteristic of the style.

| Canvas Width | Recommended Stroke | Use Case |
|-------------|-------------------|----------|
| 200-400px | 2-3px | Small icons, inline |
| 400-800px | 3-5px | Standard illustrations |
| 800-1200px | 5-8px | Blog graphics, OG images |
| 1200-2400px | 8-14px | Featured images, hero |

**Formula**: `stroke-width = canvas_width / 120` (approximate starting point, adjust by eye)

### Corner Radius

All rounded rectangles use consistent corner radii. Scale proportionally with icon size.

| Element Size | Corner Radius | Ratio |
|-------------|---------------|-------|
| Small (30-60px) | 4-6px | ~10% of width |
| Medium (60-120px) | 8-14px | ~12% of width |
| Large (120-250px) | 16-28px | ~12% of width |
| XL (250px+) | 28-40px | ~12% of width |

Device screens (phones, tablets, laptops) use slightly larger radii to match real hardware proportions.

### Typography

Monoline icon illustrations should have **no text**. The icons tell the story.

If labels are absolutely required (rare):
- Font: `-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif`
- Same color as icon stroke
- Lightweight (font-weight 300-400)
- Small relative to icons (never dominant)
- Placed below or beside icons, never inside

From wpgaurav/WordPress-skills, MIT.

More from wpgaurav/WordPress-skills