A premium iOS app icon for a running and fitness app, featuring a stylized abstract runner figure in motion, composed of flowing gradient ribbons in energetic coral transitioning to vibrant magenta. The figure suggests speed and forward momentum with trailing motion elements. Background is a deep navy blue with subtle radial gradient lighter behind the figure. Dynamic, energetic, aspirational. Soft lighting with subtle glow around figure. Rounded square format, 1024x1024px.

follow the specs below and the example icon designs attached:

These specifications define the visual language of premium, modern app icons as seen in top-tier iOS/macOS applications. The goal is to produce icons that feel polished, memorable, and worthy of a flagship product.

1. Canvas & Shape

Base Shape

Format: Square with continuous rounded corners (iOS "squircle")
Corner Radius: Approximately 22-24% of icon width (mimics Apple's superellipse)
Aspect Ratio: 1:1
Recommended Resolution: 1024×1024px (scales down cleanly)

Safe Zone

Keep primary elements within the center 80% of the canvas
Allow subtle effects (glows, shadows) to approach edges but not clip

2. Background Treatments

Solid Backgrounds

Dark/Black: Pure black (#000000) to deep charcoal (#1C1C1E) — creates drama, makes elements pop
Vibrant Solids: Saturated single-color fills (electric blue #007AFF, warm orange #FF9500)
Gradient Backgrounds: Subtle top-to-bottom or radial gradients adding depth

Gradient Types (when used)

Type	Description	Example
Linear	Soft transition, typically lighter at top	Blue sky gradient
Radial	Center glow effect, darker edges	Spotlight effect
Angular	Sweeping color transition	Iridescent surfaces

Texture (Subtle)

Fine vertical/horizontal lines for metallic or fabric feel
Noise grain at 1-3% opacity for organic warmth
Avoid heavy textures that compete with the main symbol

3. Color Palette

Primary Palette Characteristics

High Saturation: Colors are vivid but not neon
Rich Darks: Blacks and navy blues feature prominently
Selective Brights: Accent colors used sparingly for impact

Recommended Color Families

Cool Spectrum

Navy/Deep Blue:    #0A1628, #1A2744, #2D4A7C
Electric Blue:     #007AFF, #5AC8FA, #64D2FF
Purple/Violet:     #5E5CE6, #BF5AF2, #AF52DE
Teal/Cyan:         #30D5C8, #5AC8FA, #32ADE6

Warm Spectrum

Orange:            #FF9500, #FF6B35, #FF3B30
Pink/Coral:        #FF6B8A, #FF2D55, #FF375F
Peach/Salmon:      #FFACA8, #FF8A80, #FFB199

Neutrals

True Black:        #000000
Soft Black:        #1C1C1E, #2C2C2E
White:             #FFFFFF
Off-White:         #F5F5F7, #E5E5EA

Color Harmony Rules

Limit to 2-3 dominant colors per icon
Use complementary or analogous relationships
One color should dominate (60%), secondary (30%), accent (10%)

4. Lighting & Depth

Light Source

Position: Top-left or directly above (consistent 45° angle)
Quality: Soft, diffused — no harsh shadows
Creates: Subtle highlights on upper surfaces, shadows below

Depth Techniques

Highlights

Soft white/light gradient on top edges of 3D forms
Specular reflections as small, bright spots (not overpowering)
Rim lighting on edges facing the light

Shadows

Drop Shadows: Soft, diffused, 10-20% opacity, slight Y offset
Inner Shadows: Very subtle, adds recessed effect
Contact Shadows: Darker, tighter shadows directly beneath objects

Layering

Elements should appear to float above the background
Use atmospheric perspective (distant elements slightly hazier)
Overlapping shapes create natural hierarchy

5. Symbol & Iconography

Style Approaches

A. Dimensional/3D Objects

Soft, rounded forms with clear volume
Subtle gradients suggesting curvature
Examples: Paper airplane, open book, spheres

B. Flat with Depth Cues

Simplified shapes with strategic shadows/highlights
Clean geometry with slight gradients
Examples: Flame icon, compass dial

C. Abstract/Geometric

Overlapping translucent shapes
Interlocking forms creating visual interest
Examples: Overlapping diamonds, triangular compositions

D. Glassmorphic/Translucent

Frosted glass effect with blur
Shapes that appear to have transparency
Subtle refraction and color bleeding

Symbol Characteristics

Simplicity: Recognizable at 16×16px
Balance: Visual weight centered or intentionally dynamic
Originality: Avoid generic clip-art feeling
Metaphor: Symbol clearly relates to app function

Recommended Symbol Scale

Primary symbol: 50-70% of icon canvas
Leave breathing room around edges
Optical centering (may differ from mathematical center)

6. Material & Surface Qualities

Matte Surfaces

Soft gradients without sharp highlights
Subtle texture possible
Colors appear solid and grounded

Glossy/Reflective Surfaces

Pronounced highlights and reflections
Increased contrast between light and dark areas
Suggests glass, plastic, or polished metal

Metallic Surfaces

Linear or radial gradients mimicking metal sheen
Cool tones for silver/chrome, warm for gold/bronze
Fine texture lines optional

Glass/Translucent

Reduced opacity (60-85%)
Blur effect on elements behind
Colored tint with light edges
Subtle inner glow

Paper/Fabric

Soft, muted colors
Very subtle texture
Gentle shadows suggesting flexibility

7. Effects & Polish

Glow Effects

Outer Glow: Soft halo around bright elements, 5-15% opacity
Inner Glow: Subtle edge lighting, creates volumetric feel
Color Glow: Tinted glow matching element color (creates ambiance)

Reflections

Subtle floor reflection beneath floating objects (very faint)
Environmental reflections on glossy surfaces
Specular highlights suggesting light source

Gradients Within Shapes

Multi-stop gradients for complex color transitions
Radial gradients for spherical appearance
Mesh gradients for organic, fluid coloring

Blur & Depth of Field

Background blur for layered compositions
Gaussian blur at 5-20px for atmospheric effect
Motion blur only if suggesting movement

8. Composition Principles

Visual Balance

Centered: Symbol sits in optical center (classical, stable)
Dynamic: Slight offset creates energy and movement
Asymmetric: Intentional imbalance with visual counterweight

Negative Space

Generous whitespace/breathing room
Background is part of the design, not just empty
Negative space can form secondary shapes

Focal Point

One clear area of highest contrast/detail
Eye should land on most important element first
Supporting elements recede visually

Scale Contrast

Mix of large and small elements creates interest
Primary symbol dominates, details are subtle
Avoid cluttering with equal-sized elements

9. Style Variations

Minimal Dark

Black or very dark background
Single bright element or monochromatic symbol
High contrast, dramatic feel
Examples: Flame icon, stocks chart

Vibrant Gradient

Multi-color gradient backgrounds
White or light symbols on top
Energetic, modern feel
Examples: Telegram, Books app

Soft & Light

Light, airy backgrounds (white, pastels)
Colorful symbols with soft shadows
Friendly, approachable feel
Examples: Altitude app, gesture icons

Glassmorphic

Translucent, frosted elements
Layered shapes with varying opacity
Contemporary, sophisticated feel
Examples: Shortcuts icon, overlapping shapes

3D Rendered

Realistic 3D objects
Complex lighting and materials
Premium, tangible feel
Examples: Sphere, airplane, book

Create Icons

Description