Balance Logo
Balance
Reckon Design System
Open playroom

Illustration

Install
pnpm add @balance-web/illustration
Import usage
import {
createIllustration,
SceneWaving,
SceneThumbsUp,
SceneCoin,
SceneJetpack,
HeroAuth,
HeroNotFound,
HeroPending,
HeroProject,
HeroSearch,
HeroWelcome,
MediumBegin,
MediumProgress,
MediumReconcile,
MediumRelax,
MediumReview,
MediumSupport,
MediumUpgrade,
MediumDowngrade,
MediumReport,
SpotAppreciate,
SpotAttention,
SpotCaution,
SpotCelebrate,
SpotNoResults,
SpotWave
} from '@balance-web/illustration';
  • Code
  • API

Illustrations are an effective way to build an app’s visual identity and help convey complex ideas in a simple way.

They should be meaningful and reflect the user's context and emotional state.

Alternatives

  • Icon — For common actions, features, and themes

Usage

Use illustrations effectively to:

  • Welcome the user to the app, on Sign in or Splash screen
  • Introduce and explain a feature or the product itself
  • To congratulate and celebrate when the user completes a task
  • Provide help when something happens unexpectedly in the application

Types of illustrations

Scene

Scene illustrations are welcoming and positive. They usually come in a pair and are anchored to the bottom edges of a page.

Scene illustrations are sized at 400x348.

Edit in Playroom

Hero

Hero illustrations are more metaphorical in nature. They can contain more than one person in a broader scene with larger than life objects.

Hero illustrations are sized at 376x240

Medium

Medium illustrations are slightly smaller versions of heroes. They contain a person (or two) doing a single task or representing a single concept.

Medium illustrations are sized at 200x200

Spot

Spot illustrations are the simplest and smallest illustration. They contain a single object or a part of the human body, usually a hand. They do not include any people.

Spot illustrations are sized at 80x80

Size

All illustrations have a size (number) prop that can be used to overwrite the default width.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo