Creative Direction

2. Line

How lines are used (in icons, borders, dividers):

3. Texture

Is the visual world flat, or does it have depth and material?

4. Spatiality

Does the product feel two-dimensional or three-dimensional?

Illustration Style Brief

An illustration brief ensures a freelancer or agency produces work that fits without revision cycles.

## Illustration Style Brief — [Product Name]

### Style direction
[e.g., "Flat vector with geometric forms, minimal detail, 3-4 color palette maximum"]

### Mood
[e.g., "Friendly and optimistic — like a knowledgeable colleague, not a corporate report"]

### Style references (3-5 links or descriptions)
1. [Reference] — because [one specific reason it relates]
2. ...

### Color palette
- Primary: [Hex or HSL]
- Secondary: [Hex or HSL]
- Neutrals: [range]
- Maximum colors per illustration: [N]

### Character style (if characters appear)
- Body type: [abstract / semi-realistic / geometric]
- Diversity: [explicit brief on skin tones, body types, age range]
- Expression: [neutral and calm / expressive / realistic]
- No characters — icon/object-only illustrations

### Stroke
- Stroke: [none / 1px / 2px]
- Stroke color: [same as fill / dark outline / none]
- Corner radius on shapes: [sharp / slightly rounded / very rounded]

### What to avoid
- [Specific style, element, or cliché to exclude]
- [e.g., "No stock illustration hand-shake imagery", "No purple gradients"]

### File deliverables
- SVG (scalable, editable)
- PNG at 2× and 3× for raster contexts
- Figma source file with components

Icon Style Guide

Consistent icons are one of the highest-leverage consistency investments.

Core decisions

Icon grid

All icons must sit on the grid — optical alignment, not metric:

24×24px grid example:
- Live area: 20×20px (2px margin on each side)
- Key shapes:
  - Circle: 20px diameter
  - Square: 18×18px
  - Landscape: 20×16px
  - Portrait: 16×20px

Icon set specification

## Icon Style — [Product Name]

- Grid: 24×24px
- Stroke: 1.5px, round cap, round join
- Corner radius: 2px on rectangles
- Keyline: circle-based
- Style: stroke only (no fill except for selected/active state)
- Selected state: filled version of the same icon shape
- Prohibited: gradient fills, drop shadows, mixed stroke widths in one icon

Photography / Image Direction

Brief template

## Photography Direction — [Product Name]

### Mood
[e.g., "Candid and purposeful — professionals mid-task, not posed. Natural lighting."]

### Color treatment
- [ ] Natural / unfiltered
- [ ] Warm toned (increased temperature, amber shadows)
- [ ] Cool toned (blue-shifted)
- [ ] High contrast (increased clarity, deep blacks)
- [ ] Black and white
- [ ] Duotone with brand colors

### Composition rules
- [e.g., "Subject in the left third; leave space for text on the right"]
- [e.g., "Always show context — never isolated on white background"]
- [e.g., "Close-up product shots only; no wide environmental shots"]

### People (if applicable)
- Diversity: [explicit brief — skin tones, age range, gender, body type, ability]
- Looking at camera: [yes / no / occasionally]
- Expression: [neutral focus / natural smile / candid]
- What they are doing: [mid-task / using product / collaborating]
- What they are NOT doing: [posing / looking at camera / stock smile]

### What to avoid
- [e.g., "No office handshake photos"]
- [e.g., "No white background cutouts"]
- [e.g., "No images that could be read as endorsements by real people without consent"]

Motion Language

Motion in UI communicates relationships and state — not decoration.

Core principles

1. Purpose — motion should communicate something (state change, hierarchy, progress) — not just look nice
2. Speed — UI transitions 100-300ms; content transitions 300-600ms; celebration/delight 400-800ms
3. Easing — the most important parameter

Easing reference

/* Standard transitions */
.enter  { animation: slideIn 250ms cubic-bezier(0, 0, 0.2, 1); }   /* ease-out */
.exit   { animation: slideOut 200ms cubic-bezier(0.4, 0, 1, 1); }  /* ease-in */
.move   { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* ease-in-out */

Choreography

When multiple elements animate together, stagger them to create hierarchy:

/* Each child starts 50ms after the previous */
.list-item:nth-child(1) { animation-delay: 0ms; }
.list-item:nth-child(2) { animation-delay: 50ms; }
.list-item:nth-child(3) { animation-delay: 100ms; }

prefers-reduced-motion

Always respect:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Cross-Touchpoint Consistency Audit

Before launch or a major rebrand, audit all touchpoints:

Rate each ✓ (consistent) / ~ (mostly consistent) / ✗ (off-brand). Fix ✗ items before launch.

Checklist

• Visual language defined on 4 dimensions: form, line, texture, spatiality
• Illustration style brief written with style references, color palette, and character direction
• Icon style guide: grid, stroke width, corner radius, keyline shapes, selected state
• Photography brief: mood, color treatment, diversity, composition, prohibitions
• Motion language: easing for enter/exit/move, duration range, choreography rule
• prefers-reduced-motion respected in all animations
• Cross-touchpoint audit completed before launch