Imagery

Imagery

Images are powerful. They set the emotional tone before a single word is read. Our imagery guidelines ensure every visual asset feels like us.

Photography style

Attribute	Guideline
Lighting	Natural, soft. Avoid harsh studio lighting or heavy shadows
Color	Warm undertones. Avoid heavy saturation or dramatic color grading
Composition	Clean, with breathing room. Rule of thirds, not centered symmetry
Subject	Real people in real contexts. Authentic moments, not staged poses
Focus	Sharp on subject, soft background (natural bokeh when possible)

Photography do’s and don’ts

Do:

• Show diverse people in natural, unposed moments
• Use real environments — real offices, real homes, real streets
• Frame with negative space for text overlays
• Crop tightly on details for texture and variety

Don’t:

• Use stock photography clichés (handshakes, empty boardrooms, staring-at-laptops)
• Apply heavy filters or color grading
• Use low-resolution or compressed images
• Show identifiable people without consent

Illustration style

Our illustrations are:

• Flat with subtle depth — 2–3 layers of shadow for depth, not gradients
• Geometric — clean shapes, rounded corners (4px), consistent stroke weights
• Limited palette — brand blue + 1–2 secondary colors per illustration
• Spot illustration — small, focused illustrations, never full-scene

Use illustrations to:

• Explain concepts that are hard to photograph
• Add personality to empty states and error pages
• Visualize abstract data or processes
• Create hero visuals for feature pages

Image formats

Context	Format	Notes
Photography	.webp (.jpg fallback)	Quality 80%, optimize with squoosh
Illustrations	.svg	Always vector. Minify before use
Icons	.svg	Use sprite or inline. 24x24 viewBox
Screenshots	.png	2x resolution for retina

Aspect ratios

Context	Ratio
Hero / Banner	16:9 or 21:9
Card thumbnail	16:9 or 4:3
Avatar / Profile	1:1
Blog / Article header	16:9
Product screenshot	Native (no forced ratio)