Skip to content
nexubDesign System
v2.4.0

Content

Illustration

Illustrations are used sparingly across Nexub products to communicate ideas that words alone can't capture: empty states, errors, onboarding. Follow these guidelines to keep the visual language consistent.

Principles

Purposeful, not decorative

Every illustration should earn its place. Use visuals to explain something that words alone cannot: empty states, onboarding, complex concepts. Never add an illustration just to fill space.

Inclusive and global

Characters should reflect a diverse, global audience. Avoid culturally specific gestures, clothing, or settings unless intentional. When in doubt, use abstract or object-based illustrations.

Brand-consistent

Nexub illustrations use the brand color palette as a base. Accent colors should map to semantic token values where possible so they adapt across light and dark themes.

Minimal and clear

Keep illustrations simple. A single focal point, limited palette, and clean lines. Detailed and intricate illustrations add cognitive load: simplicity communicates faster.

When to use illustrations

Empty states

An illustration helps users understand the empty state is intentional and shows them how to take action. Keep it simple and pair it with clear body copy.

Onboarding

Welcome screens and feature introductions benefit from an illustration to set the tone and reduce anxiety about starting.

Error pages (404, 500)

A subtle, non-alarming illustration softens the experience. Avoid dramatic imagery.

Feature callouts

Use to visually anchor a major new feature or empty category in a product.

Do and don't

Do

  • Pair every illustration with clear copy and one next action

  • Use object-based or abstract scenes when people would be culture-specific

  • Fill shapes with token colours so the asset adapts to light, dark and every brand

  • Animate only when it adds clarity (e.g. loading), and respect prefers-reduced-motion

Don't

  • Stock-photo style illustrations: they feel generic and break brand cohesion

  • Illustrations in data-dense views: tables, dashboards and lists stay clean

  • Illustrations that repeat the heading: visual and text should complement each other

  • Dark-only or light-only assets

File formats

  • Use SVG for all product illustrations: scalable, small, and styleable with CSS

  • Export at 1× only: SVG is resolution-independent

  • Where SVG is not possible (e.g. complex photographic backgrounds), use WebP with a PNG fallback