Illustration Guidelines

Illustrations help explain complex concepts, guide users through workflows, and add visual interest where photography isn't practical. Our illustration style is clean, professional, and purpose-driven - never decorative for its own sake.

When to Use Illustrations

Use Photography When...

  • Showing real people, teams, or workplaces
  • Building emotional connection and trust
  • Featuring product in real-world context
  • Marketing materials targeting decision-makers

Use Illustration When...

  • Explaining abstract concepts or processes
  • Representing data, workflows, or systems
  • Creating UI elements (icons, empty states)
  • Showing something that can't be photographed

Illustration Types

Spot Illustrations

Small, focused graphics that support specific content. Used for empty states, feature highlights, and inline explanations.

Size 64px - 200px
Usage UI elements, feature cards, empty states
Style Outlined, minimal, single focal point

Hero Illustrations

Larger, more detailed graphics for landing pages and marketing. Can combine multiple elements.

Size 400px - 800px
Usage Landing pages, feature sections, marketing materials
Style Layered composition, subtle gradients, brand colors

Diagrams & Flows

Process explanations, architecture diagrams, workflow visualizations.

Size Variable
Usage Documentation, technical explanations, onboarding
Style Clean lines, clear hierarchy, labeled components

Icons

UI icons for navigation, actions, and status indicators.

Size 16px - 48px
Usage Navigation, buttons, status indicators
Style Outlined only (see ICON-001), 1.5px stroke

Style Rules

1

Use outlined style, never filled

Aligns with brand icon guidelines (ICON-001) and maintains visual consistency.

Do

Stroked paths with consistent weight

Don't

Solid filled shapes

2

Maintain consistent stroke weight

Creates visual harmony across all illustrations.

Do

1.5px stroke for icons, 2-3px for larger illustrations

Don't

Mixed stroke weights in same illustration

3

Use brand color palette only

Ensures illustrations integrate with overall brand.

Do

Marine, Navy, Green, Citrus as accents

Don't

Random colors, gradients outside palette

4

Keep it professional, not playful

Our audience is compliance professionals who expect seriousness.

Do

Clean geometric forms, subtle details

Don't

Cartoonish characters, bouncy animations

Color in Illustrations

Marine - Primary

Use for main illustration elements, key focal points, and primary strokes.

Navy - Secondary

Use for supporting elements, backgrounds, and secondary details.

Accents - Sparingly

Green and Citrus for highlights, success states, and points of emphasis only.

Remember COLOR-001: Never use white text on Citrus (#ABDD65). If using Citrus as a fill (rare), ensure text is Navy or Marine.

Stroke & Line Guidelines

1.5px - Icons (16-48px)

Standard weight for UI icons at typical sizes.

2px - Spot Illustrations

Slightly heavier for medium-sized graphics.

3px - Hero Illustrations

Bolder strokes for large-scale graphics.

Line Caps

Use round for friendlier feel, square for technical diagrams.

Complexity Levels

Match illustration complexity to the context and importance of the content.

Level 1: Simple

Single element, minimal detail. Use for icons, inline graphics.

Level 2: Moderate

2-4 elements, some hierarchy. Use for spot illustrations, feature cards.

Level 3: Complex

Multiple elements, relationships shown. Use for diagrams, hero sections.

Visual Examples

Correct: Clean, outlined, brand colors

Incorrect: Off-brand colors, filled shapes

Correct: Professional, purposeful

Incorrect: Cartoonish, unprofessional

Animation Guidelines

When illustrations are animated, follow these principles:

Subtle Motion

Animations should be subtle and purposeful - a gentle fade, a smooth transition. Never bouncy or playful.

duration: 200-300ms easing: ease-out

Respect Motion Preferences

Always check prefers-reduced-motion and provide a static fallback.

@media (prefers-reduced-motion: reduce) {
  .animated-illustration {
    animation: none;
  }
}

No Auto-Play Loops

Looping animations are distracting. If motion is needed, trigger on hover or interaction.

Performance

Use CSS transforms and opacity only. Avoid animating layout properties that cause repaints.

File Formats

Format Use Case Notes
SVG Web icons, illustrations, diagrams Preferred for web. Scalable, small file size, supports animation.
PNG Complex illustrations, social media Use when SVG isn't practical. Export @2x for retina.
PDF Print materials, presentations Vector format preserves quality at any size.
Lottie/JSON Animated illustrations For complex animations. Keep under 50KB.
Style
Theme