Balance Logo
Balance
Reckon Design System

Illustration

Install
pnpm add @reckon-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 '@reckon-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.

Illustration of a man waving, while holding a bag full of coins.
Illustration of a woman inside a phone, presenting a thumbs up gesture.
Illustration of a woman walking, while holding a coin.
Illustration of a man using a jetpack.
Open 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

Illustration of a man carrying an enormous padlock on his back.Illustration of a man trying to free himself from stylised 3D text that reads "404". Surrounding the text are stars and planets.Illustration of a man sitting at a desk, in front of his computer screen.Illustration of a woman assembling a project using colourful blocks.Illustration of a woman with a magnifying glass searching through a long document.Illustration of a man with a sack full of cash waving at a woman sitting in a chair.

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

Illustration of a woman sitting in an office, holding her phone. Above the woman are stylised line-items with dollar signs beside them.Illustration of a woman checking items off a large list of todo items.Illustration of a man and a woman walking while holding their phones. In the background there are trees and stylised cards displaying dollar symbols.Illustration of a man taking a stroll with his dog. The dog's lead is held by a quadcopter.Illustration of a woman standing and man sitting on an object. Above the them are stylised, larger-than-life paper documents and a dollar symbol.Illustration of a woman sitting at a desk, holding her phone with one hand. On the desk is a laptop and a desk lamp.Illustration of a man wearing a jet pack launching himself into the sky. Behind the man is a cityscape.Illustration of a man jogging in a park.Illustration of a person sitting in a chair, working on their laptop and happily looking up on the frames of stylised graphic charts and user interface above them.

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

Illustration of a thumbs up with a sparkling star above it.Illustration of a hand pointing towards a sparkling star.Illustration of an exlamation point within a triangle, symbolising caution.Illustration of a party popper being set off and confetti streaming from it.Illustration of a hand holding a magnifying glass. Within the lens of the magnifying glass is a question mark.Illustration of a hand waving with a sparkling star above it.

Size

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

Illustration of a man using a jetpack.
Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo