Graphics

Photography, illustration, and iconography guidelines.

Photography

Our photography should feel authentic, human, and purposeful. Every image should support the content—never just fill space.

Style principles

Do

  • Use natural lighting when possible
  • Show real people in real situations
  • Capture genuine expressions and moments
  • Maintain consistent color grading
  • Leave breathing room for text overlays

Don’t

  • Use obviously staged stock photos
  • Over-filter or heavily process images
  • Choose images with busy backgrounds
  • Use low-resolution or pixelated images
  • Stretch or distort aspect ratios

Technical requirements

Resolution

Minimum 72 DPI for web, 300 DPI for print. Always use @2x assets for retina displays.

Formats

Use WebP or optimized JPEG for photos. Use PNG only when transparency is required.

Aspect ratios

16:9 for hero images, 4:3 for cards, 1:1 for avatars and thumbnails.

Illustration

Illustrations add personality and help explain complex concepts. They should complement our photography, not compete with it.

When to use illustration

  • Abstract concepts — Ideas that are hard to photograph
  • Empty states — When there’s no content to show yet
  • Onboarding — Guiding users through new features
  • Error states — Softening frustrating moments
  • Marketing — Adding visual interest to campaigns

Style guidelines

Visual characteristics

  • Clean, simple line work
  • Limited color palette from brand colors
  • Consistent stroke weights
  • Rounded corners and friendly shapes
  • Minimal detail—communicate the essence

Avoid

  • Overly complex or detailed illustrations
  • Colors outside the brand palette
  • Inconsistent styles within a project
  • Generic clip art or stock illustrations
  • 3D effects or heavy gradients

Iconography

Icons are functional graphics that aid navigation and comprehension. They should be instantly recognizable and consistently styled.

Icon principles

Clarity first

Icons must be understood at a glance. When in doubt, pair with a text label.

Consistency

Use a single icon set throughout. Don’t mix styles from different sources.

Size and spacing

Design on a 24×24px grid. Use multiples (16, 24, 32, 48) for different contexts.

Accessibility

Never rely on icons alone to convey meaning. Always provide text alternatives.

Technical specs

  • Format: SVG (preferred) or icon font
  • Stroke: 2px consistent weight
  • Corners: 2px radius
  • Padding: 2px safe area within bounds

Image treatments

When overlaying text on images or using images as backgrounds, apply these treatments for consistency and legibility.

Overlays

Use a semi-transparent brand color overlay to ensure text readability and visual consistency.

  • Dark overlay: rgba(0, 0, 0, 0.5)
  • Brand overlay: rgba(brand, 0.7)
  • Gradient: transparent to dark

Duotone

Convert images to duotone using brand colors for a distinctive, unified look.

  • Shadows: Brand dark
  • Highlights: Brand light or white
  • Use sparingly for impact