Brand Identity Design: From Strategy to Visual System · Color, type and supporting visual systems · lesson 9 of 18 · 7 min

Imagery, icons, patterns and motion

The supporting cast

Logo, color and type are the core, but most of what audiences actually see is imagery, graphic elements and motion. A brand with a consistent supporting system is recognizable even when the logo is absent — which on social media is most of the time.

Photography style

Define a photography style that expresses the personality:

| Dimension | Options | |---|---| | Subject | People, product, places, process, results | | Casting | Diverse, authentic, representative of the real audience | | Framing | Close-up, environmental, flat-lay | | Light | Natural and soft, high-contrast, studio | | Color treatment | Warm, cool, desaturated, brand-tinted | | Mood | Candid and energetic, calm and composed | | Avoid | Clichés, obvious stock poses, over-retouching |

Include do and don't examples in guidelines. Specify consent and model-release requirements for people, and respect local norms — for example, modest dress and appropriate settings for campaigns in conservative markets, and permissions when photographing in public or religious spaces.

Illustration style

If you use illustrations, specify line weight, color use, level of detail, how people are depicted and whether shading or texture is used. Mixing illustration styles from different sources is one of the fastest ways to make a brand feel inconsistent.

Iconography

A consistent icon set needs:

One style (outline or filled; sometimes duotone).
Consistent stroke weight, corner radius and grid (for example a 24 px grid with 2 px strokes).
Consistent metaphors (the same icon always means the same thing).
Accessibility: icons that convey meaning need text labels or accessible names in digital products.

It is often efficient to start from a well-made, properly licensed icon library and customize it to match the brand.

Graphic devices and patterns

Many memorable identities rely on a graphic device — a shape, frame, line, crop or pattern derived from the logo or strategy. Examples:

A corner shape from the logo used to frame photos.
A pattern inspired by local architecture or textiles (researched respectfully, not appropriated from specific sacred or protected designs).
A highlight underline used on key words in headlines.
A consistent way of cropping photos into a signature shape.

Graphic devices are powerful distinctive assets because they appear in every post, slide and package.

Data visualization

For brands that publish charts, define chart colors, label style, gridline weight and a rule for highlighting key data. This prevents rainbow charts and keeps reports on-brand.

Motion and sonic identity

Video and short-form content make motion essential:

Logo animation: a short sting (often a second or two) for intros and end cards.
Motion principles: speed (snappy or gentle), easing, how elements enter and exit.
Transitions and text animation: consistent styles for captions and titles.
Sonic cues: a short audio mnemonic, consistent music style, or a voice style. If you use AI-generated voices or music, check licenses and ensure voice cloning uses a real person's voice only with their consent.

Keep motion accessible: avoid rapid flashing and respect reduced-motion settings in digital products.

Worked example: supporting system for a fitness studio in London

Photography: real members (with consent), natural light, mid-workout energy, warm treatment, no heavily retouched bodies.
Graphic device: a diagonal "pulse" line from the logo used to divide layouts and underline key words.
Icons: filled style, rounded corners, matching the logo's radius.
Motion: fast, punchy entries with a slight overshoot; logo sting under two seconds; captions in brand sans with a highlight bar.
Sound: a short percussive sting, licensed for commercial use.

Supporting-system checklist

[ ] Photography style with do/don't examples and consent rules
[ ] Illustration style (if used)
[ ] Icon style specs and library
[ ] Graphic device(s) and pattern rules
[ ] Chart/data style
[ ] Motion principles, logo animation, caption style
[ ] Sonic cues and licenses

Common mistakes

Relying on the logo alone for recognition.
Mixing icon and illustration styles.
Generic stock photography unrelated to real customers.
Motion with no rules, creating inconsistent video content.

AI imagery inside a brand system (2026)

Many brands now use AI image tools for backgrounds, illustrations and variations. Treat AI style as part of the supporting system:

Document an AI style kit: written style spec, approved style references, prompt snippets, allowed uses (for example backgrounds and spot illustrations) and banned uses (real customers, product results, news-like scenes). See the AI Image Generation and Design course for the full workflow.
Keep products real (photograph and composite them), and never generate real people without consent.
Keep provenance data (Content Credentials) and follow platform labels for realistic AI content.

Hands-on: an icon spec and motion principles

ICON SPEC
Grid: 24 × 24 px, 2 px padding (live area 20 × 20)
Stroke: 2 px, round caps and joins; corner radius 2 px
Style: outline (filled variant only for selected/active states)
Metaphors: one meaning per icon (e.g. "bookmark" always = save)
Export: SVG, currentColor fills so icons inherit text color
Accessibility: every meaningful icon has a visible label or accessible name

MOTION PRINCIPLES
Personality: calm and confident → ease-out, 200-300 ms for UI, 0.8-1.5 s for logo stings
Entrances: fade + 8 px rise; exits: fade only
Logo sting: ≤ 2 s, ends on the static primary lockup
Accessibility: no flashing; respect reduced-motion settings (CSS prefers-reduced-motion)

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

Sonic identity and AI voices

A short audio mnemonic, a consistent music style or a signature voice can join the identity. If you use AI-generated voice or music, check licenses for commercial use, and clone a real person's voice only with their written consent. Keep a record of which tool, license and consent apply to each audio asset.

Before/after: a London fitness studio's supporting system

| | Before | After | |---|---|---| | Photos | Glossy stock bodies | Real members (with consent), natural light, warm treatment | | Icons | Three mismatched free packs | One customized outline set on a 24 px grid | | Device | None | A diagonal "motion bar" from the logo used to frame photos | | Motion | Random templates per video | Two-second logo sting, consistent caption animation |

Summary

Define photography, illustration, icon, graphic device, data, motion and sonic rules so the brand is recognizable even when the logo is not visible.

Video lecture: Imagery, icons, patterns and motion

Lecture coming soon · 11 chapters · about 8 minutes. Read the full transcript below.

Imagery, icons, pattern and motion
Why it matters
Photography and illustration
Icons and graphic devices
Data, motion and sound
Worked example 1: a home baker
Worked example 2: a London fitness studio
Watch me do it: icon + motion specs
AI imagery in the system
Common mistakes
Recap and try this now

Lecture transcript

Imagery, icons, pattern and motion

Here's a truth about social media that changes how you think about identity. Most of the time, people don't see your logo. They see a photo, an icon, a pattern, a short animation or a caption style, often before they notice who posted it. If those elements are consistent, people recognize you anyway. If they're random, you're invisible. Logo, color and type are the core. But imagery, icons, graphic devices and motion are the supporting cast that people actually see most. In this lecture, you'll learn how to define photography and illustration styles, icon systems, graphic devices, data visualization, motion and sonic identity, and how AI imagery fits in. By the end, your brand will be recognizable without its logo.

Why it matters

Why does the supporting system matter so much? Because it's where most brand impressions happen. A logo might appear in the corner of a post. The photo style, the colors, the graphic device and the motion fill the rest of the frame, and the rest of the video. Think of a band again. You recognize them not just from the name on the poster, but from the sound, the guitar tone, the rhythm, the voice. The supporting system is the brand's sound. When it's consistent, every piece of content builds recognition. When it's random, every piece starts from zero.

Photography and illustration

Let's start with photography style. Define the subject: people, product, places, process or results. Casting: diverse, authentic and representative of the real audience. Framing: close-up, environmental or flat-lay. Light: natural and soft, high contrast or studio. Color treatment: warm, cool, desaturated or brand-tinted. Mood: candid and energetic, or calm and composed. And what to avoid: clichés, obvious stock poses and over-retouching. Include do and don't examples in the guidelines, specify consent and model releases, and respect local norms, like modest dress and appropriate settings for campaigns in conservative markets. Then illustration: specify line weight, color use, detail level, how people are drawn, and whether there's shading or texture. Never mix illustration styles from different sources.

Icons and graphic devices

Now icons and graphic devices. A consistent icon set needs one style, outline or filled, a consistent stroke weight, corner radius and grid, like twenty-four pixels with two pixel strokes, and consistent metaphors, so the same icon always means the same thing. In digital products, meaningful icons need text labels or accessible names. Often it's efficient to start from a well-made, properly licensed icon library and customize it. Then graphic devices: a shape, frame, line, crop or pattern derived from the logo or strategy. A corner shape that frames photos. A highlight underline on key words. A pattern inspired by local architecture or textiles, researched respectfully. Here's the key idea. Graphic devices are powerful distinctive assets, because they appear in every post, slide and package.

Data, motion and sound

Next, data visualization, motion and sound. If the brand publishes charts, define chart colors, label style, gridline weight and a rule for highlighting key data, which prevents rainbow charts. For motion, define a logo sting, usually a second or two for intros and end cards, motion principles like speed and easing, and how text and captions animate. Keep motion accessible: no rapid flashing, and respect reduced-motion settings in digital products. And sonic identity: a short audio mnemonic, a music style or a voice. If you use AI-generated voices or music, check licenses, and only clone a real person's voice with their written consent.

Worked example 1: a home baker

Worked example one, simple. A home-baker's Instagram. Her posts use random filters, three different free icon packs and whatever template she finds. We define a supporting system. Photos: close-up, natural window light, warm treatment, flour and hands visible, no stock. Icons: one customized outline set for oven time, servings and difficulty. A graphic device: a scalloped edge, like a cake tin, that frames every cover photo. Motion: a gentle one-second reveal of the scalloped frame in every Reel. After a month, followers recognize her posts before seeing her name.

Worked example 2: a London fitness studio

Worked example two, a business scenario with illustrative details. A fitness studio in London had glossy stock photos of perfect bodies, three mismatched icon packs, no graphic device, and random video templates. The new supporting system. Photography: real members, with consent, natural light, mid-workout energy, a warm treatment, and no heavily retouched bodies. Icons: one customized outline set on a twenty-four pixel grid. A graphic device: a diagonal motion bar taken from the logo, used to frame photos and underline key words. Motion: a two-second logo sting and consistent caption animation. And an AI style kit for occasional background illustrations, with a rule that members and results are always real. The studio now looks like itself everywhere.

Watch me do it: icon + motion specs

Watch me do it. I'm writing the icon spec and motion principles for a brand. Icons first. Grid: twenty-four by twenty-four with two pixels of padding. Stroke: two pixels, round caps and joins, two pixel corner radius. Style: outline, with filled versions only for selected states. Metaphors: bookmark always means save. Export: SVG using current color, so icons inherit text color in code. Accessibility: every meaningful icon gets a label. Now motion. The personality is calm and confident, so ease-out curves, two to three hundred milliseconds for interface motion, and about a second for the logo sting, ending on the static logo. No flashing, and a reduced-motion rule, which I add as a small CSS snippet for developers.

AI imagery in the system

Let's talk about AI imagery inside the brand system, because many brands now use it. Treat AI style as part of the supporting system. Document an AI style kit: a written style spec, approved style references, prompt snippets, allowed uses, like backgrounds and spot illustrations, and banned uses, like real customers, product results and news-like scenes. Keep products real, by photographing and compositing them. Never generate real people without consent. Keep provenance data, and follow platform labels for realistic AI content. Done this way, AI extends the brand's visual language instead of diluting it into generic model defaults.

Common mistakes

Common mistakes. Mixing photo styles and filters from post to post. Using clichéd stock imagery. Mixing icon packs with different strokes and styles. Having no graphic device, so there's nothing ownable beyond the logo. Rainbow charts. Random video templates for every Reel. Motion that flashes or ignores reduced-motion settings. Using AI voices or images without licenses or consent. And appropriating sacred or culturally protected patterns without research and respect. A one-page supporting-system sheet prevents most of these.

Recap and try this now

Let's recap. The supporting system is what people see most: photography and illustration styles, icons, graphic devices, data visualization, motion and sound. Define each with do's and don'ts, consent rules and accessibility. Build at least one ownable graphic device from the logo or strategy. Treat AI imagery as a documented part of the system, with allowed and banned uses. Try this now. Create a one-page supporting-system sheet for a brand: three photography do and don't pairs, an icon spec, one graphic device, and three motion principles, including one accessibility rule.

Key takeaways

Most brand impressions come from supporting elements: photography, illustration, icons, graphic devices, motion and sound.
Define photo and illustration styles with do/don't examples, consent rules and respect for local norms.
Icons need one style, grid, stroke and consistent metaphors, plus labels for accessibility; a graphic device is a powerful ownable asset.
Motion principles should include accessibility (no flashing, respect reduced-motion settings); AI voice or music needs licenses and consent.
Document AI imagery as part of the system with allowed and banned uses, real products and provenance.

Try it

Create a one-page supporting-system sheet for a brand: three photography do/don't pairs, an icon spec, one graphic device, and three motion principles.