Ilustrační style guide pro brand

# Illustration Style Guide: FinanceFlow App

## 1. Visual Language Overview

**Core Art Style: Modern Isometric + Flat Color**
- Combines 3D depth with 2D simplicity
- Professional yet approachable
- Stands out from corporate finance stereotypes

**Emotional Tone:**
- Confident but not cocky
- Empowering (users feel smart)
- Optimistic about financial future

**Target Audience Impact:**
- 22-35 year olds: Resonates with tech-savvy generation
- First-time investors: Not intimidating
- Diverse demographics: Inclusive representation

**Competitive Differentiation:**
- Robinhood: Too flat, lacks dimension
- Acorns: Too playful, not serious enough
- **Us:** Perfect balance of modern + professional

## 2. Character Design Rules

**Proportions: Stylized (Heads = 1/6 of body)**
- More realistic than cartoonish
- Maintains professionalism
- Relatable to actual users

**Facial Features:**
```
┌─────────────┐
│ ● ● │ Eyes: Simple dots or crescents
│ │ No pupils (friendly, not creepy)
│ ∪ │ Mouth: Minimal (‿ or ∪)
└─────────────┘ No nose or ears (simplified)
```

**Diversity Guidelines:**
- Skin tones: Use 6-tone palette (Pantone SkinTone™ Guide)
- Hair: Varied textures (straight, curly, wavy)
- Body types: Mix of builds (not all thin)
- Age: Primarily 20s-30s, occasional 40+
- Gender: 50/50 representation minimum

**Poses & Gestures:**
✓ Upward movements (growth, success)
✓ Open gestures (welcoming, transparent)
✓ Device interactions (phone, tablet)
❌ Closed poses (crossed arms = defensive)
❌ Confused expressions (we empower, not confuse)

## 3. Color Palette

**Primary Illustration Colors:**
```
Brand Purple: #6B4FE0 ███████ (Confidence, premium)
Teal Accent: #00C9A7 ███████ (Growth, money)
Coral: #FF6B6B ███████ (Energy, action)
Navy: #2C3E50 ███████ (Trust, stability)
Cream: #FFF8F0 ███████ (Warmth, accessible)
```

**Usage Rules:**
- Hero illustrations: Purple + Teal (70% split)
- Success states: Teal + Cream
- Alert/CTA: Coral (sparingly, max 15%)
- Backgrounds: Navy or Cream

**Gradients: Allowed (Subtle)**
```css
/* Example: Hero background */
background: linear-gradient(135deg, #6B4FE0 0%, #00C9A7 100%);
opacity: 0.1; /* Always low opacity for backgrounds */
```

**Shadows & Highlights:**
- Shadows: Use 20% darker version of base color (not black)
- Highlights: Add 10% white overlay
- Isometric faces: 3 tones (light, base, shadow)

## 4. Line Work

**Stroke Weight: 3px (Standard)**
- Small icons: 2px
- Hero illustrations: 4px
- Never below 1.5px (visibility on small screens)

**Line Style: Smooth with Rounded Caps**
```
NOT: ─────── (sharp, harsh)
YES: ━━━━━━━ (rounded, friendly)
```

**Corner Treatments: 4px Radius**
- Consistent across all elements
- Not too round (not children's app)
- Not sharp (not aggressive)

**Consistency Rule:**
- Measure twice: All strokes in one illustration must match
- Use symbols/components in Figma
- Export as SVG (preserves stroke data)

## 5. Shapes & Forms

**Base Shape Vocabulary:**
- Rectangles with 8px rounded corners
- Circles for coins, avatars, buttons
- Triangles for arrows, growth indicators
- Organic blobs for backgrounds (subtle)

**Object Simplification:**
```
Real phone: Complex camera, buttons, ports
Our phone: Simple rounded rectangle + screen + 1 camera dot

Real chart: 100s of data points, grid lines
Our chart: 5-7 simplified bars/lines, no grid
```

**Negative Space:**
- Every illustration: Minimum 30% whitespace
- Breathing room around key objects
- Avoid cluttered compositions

## 6. Texture & Details

**Texture Level: Subtle**
- No photorealistic textures
- Optional: 2-3% grain overlay for depth
- Flat color is primary (80% of illustrations)

**Pattern Usage:**
✓ Geometric patterns in backgrounds (low opacity)
✓ Dot grids for data/tech themes
❌ Busy patterns (distracts from content)

**Detail Hierarchy:**
```
Hero Object: High detail (facial features, clothing folds)
Secondary Objects: Medium (recognizable, less detail)
Background: Low (suggestion only, blurred or flat color)
```

## 7. Composition Rules

**Focal Point: Rule of Thirds**
```
│ │ │ │
├─────┼─────┼─────┤
│ │ X │ │ ← Place key element here
├─────┼─────┼─────┤ (never dead center)
│ │ │ │
```

**Balance: Asymmetric (Modern)**
- Large object left + small object right (or vice versa)
- Creates tension and interest
- More dynamic than centered

**Depth & Layering (Isometric):**
```
Foreground (brightest, largest)
↓
Midground (base color)
↓
Background (muted, smaller)
```
- Use size + color saturation for depth
- No true perspective (isometric = no vanishing point)

**Whitespace: Generous**
- 40% of canvas empty (minimum)
- Allows for text overlay
- Mobile: Even more space (readability)

## 8. Technical Specs

**Export Formats:**
- Web/App UI: SVG (scalable, small file size)
- Marketing: PNG @2x (Retina), 72dpi
- Print: PDF (vector) or PNG 300dpi

**Resolution Requirements:**
- Mobile: 375x667px artboard (iPhone SE)
- Desktop: 1920x1080px artboard
- Hero: 1200x600px (og:image spec)

**File Naming:**
```
illustration-[context]-[variant]-[size].svg

Examples:
illustration-hero-signup-desktop.svg
illustration-spot-investments-mobile.svg
illustration-icon-portfolio-24px.svg
```

**Artboard Sizes (Figma):**
- Hero: 1200x600px
- Spot illustration: 400x400px
- Icon: 24x24px, 48x48px (export both)

## 9. Do's and Don'ts

**✅ DO:**
- Use isometric grid (30° angles)
- Keep faces simple (friendly, not detailed)
- Show diverse people (age, race, body type)
- Test on mobile first (most users)
- Export SVGs with compressed paths

**❌ DON'T:**
- Mix art styles (pick one: isometric OR flat, not both)
- Use gradients excessively (looks dated)
- Add shadows everywhere (flat is cleaner)
- Draw realistic faces (uncanny valley)
- Use stock photo elements (breaks cohesion)

**Common Mistakes:**
1. Too much detail → Simplify objects
2. Clashing colors → Stick to palette
3. Inconsistent stroke weights → Use style library
4. No whitespace → Remove 30% of elements

**Quality Checklist Before Publishing:**
□ All strokes are 3px (±1px allowed)
□ Colors match brand palette exactly
□ Exported as SVG + PNG @2x
□ Tested on white AND dark backgrounds
□ Faces are simple (dots for eyes)
□ File size < 200KB (optimize if larger)

## 10. Example Scenarios

### A) Hero Illustration: Signup Page

**Concept:** Person planting money tree (growth metaphor)

```
╔═══════════════════════════════════╗
║ ║
║ 🌳 ← Money tree ║
║ /│\ (teal leaves, ║
║ / │ \ coin fruits) ║
║ / │ \ ║
║ ────┴──── ← Pot ║
║ ║
║ 👤 ← Person watering ║
║ /│\ (purple shirt) ║
║ / \ ║
║ ═══════ ← Ground (cream) ║
║ ║
║ [Coins scattered on ground] ║
║ [Growth chart in background] ║
║ ║
╚═══════════════════════════════════╝
```

**Dimensions:** 1200x600px
**Placement:** Left side of signup form
**Colors:** Purple (person), Teal (tree), Cream (background)

### B) Spot Illustration: Portfolio Dashboard

**Concept:** Person organizing investment cards

```
┌─────────────────┐
│ 👤 │ ← Simple character
│ /│\ ← Reaching │
│ / \ │
│ │
│ [📊] [📈] [💰] │ ← Floating cards
│ │ (isometric)
└─────────────────┘
```

**Dimensions:** 400x400px
**Placement:** Empty state (no investments yet)
**Animation:** Cards float up on page load

### C) Icon Integration: Navigation Bar

**Concept:** Illustration-style icons match main art

```
Portfolio Icon:
┌────────┐
│ ╱│╲ │ ← Pie chart (simplified)
│╱ │ ╲ │ Uses brand purple + teal
│ │ ╲ │ 3px stroke, 4px corner radius
└────────┘
24x24px
```

**Consistency:** Same stroke weight, colors as large illustrations

### D) Animation Readiness

**Micro-interaction: Successful Trade**

```css
/* SVG layers exported separately */
<g id="character">...</g> /* Animate: scale + bounce */
<g id="coins">...</g> /* Animate: fall from top */
<g id="confetti">...</g> /* Animate: burst */
```

**Frame Rate:** 60fps
**Duration:** 800ms total
**Easing:** cubic-bezier(0.34, 1.56, 0.64, 1) [bounce]

## Usage Examples by Context

| Context | Illustration Type | Size | Complexity |
|---------|------------------|------|------------|
| Hero (Homepage) | Full scene | 1200x600px | High |
| Feature explanation | Spot | 400x400px | Medium |
| Empty state | Spot | 300x300px | Low |
| Success modal | Icon + text | 64x64px | Low |
| Error screen | Character + message | 500x500px | Medium |

## Approval Process

1. **Sketch:** Rough composition in grayscale (30 min)
2. **Feedback:** Designer + Product Manager review
3. **Color Draft:** Apply brand colors (1 hour)
4. **Refinement:** Adjust based on feedback (30 min)
5. **Export:** SVG + PNG @2x, add to library
6. **Documentation:** Add to this style guide with context

## Maintenance

- **Quarterly Review:** Update guide as brand evolves
- **New Scenarios:** Add examples as we create them
- **Version Control:** Track changes (v1.0, v1.1, etc.)
- **Designer Onboarding:** New hires read this first day

---

**Version:** 1.2 (Updated Nov 2025)
**Owner:** Design Team
**Next Review:** Feb 2026