Illustration

Principles

Principle	Rule
Earns its place	Every illustration sits next to a heading and text that carry the full meaning. If the text works alone and the moment is routine, use an icon or nothing.
One idea	A spot shows one object; a scene shows one step of one task.
Light and airy	A piece has as few shapes as reads at its smallest size, with generous space around it.
Flat and consistent	Flat colour blocks, one stroke weight per size, corners from the radius tokens.
Restrained	A piece is mostly neutral; brand colour is an accent, not a flood.
Decorative by default	In product screens an illustration is decoration and is hidden from screen readers.
Trust first in money flows	Amount entry, confirmation and receipt screens have no illustration.

Where it is used

Context	Use	Size	Tone
Empty state, full page or panel	Yes	160 (page), 120 (card, table panel)	Neutral
No search or filter results	Yes; inside a table, an icon only	120	Neutral
Error page (404, 403, 500, offline, session ended)	Yes	160	Neutral
Success of a non-money task (profile saved, document uploaded)	Yes	160	Emphasis
Success of a money task	Only a plain check mark, still or with a short enter	120	Emphasis, no celebration
First-run step	Yes	Scene 480 × 320	Emphasis
Feature announcement card	Yes	240	Emphasis
Documentation site cover, brand pack cover	Yes	Scene 640 × 400	Emphasis

The neutral tone (empty, error, waiting) uses only neutral slots and one status mark. The emphasis tone (success, first run, announcement) also uses brand slots.

Where it is not used

• In money flows: amount entry, recipient selection, review, confirmation, one-time password, receipt.
• In forms, tables and dashboards with data, and in settings lists. These use icons.
• In dialogs that ask for a decision (delete, cancel, sign).
• In places smaller than 120 px. An illustration is never shrunk below 120 px; use an icon instead.
• As screenshots or collage inside the product. If a screen must be shown, draw low-detail interface blocks.
• In place of interface icons.

Styles

BigBang has two illustration styles and a three-dimensional layer used only for promotion. One screen uses one style.

Style	Look	Where
Outline	One outer stroke weight in the ink slot around flat colour fills. Interior detail lines only at 160 and above, at most 4.	Spots in the product: empty, error, success, waiting
Flat	Two-tone flat colour blocks without an outer stroke. The shaded face is one step darker on the same ramp.	Scenes, announcement cards, documentation site
Three-dimensional	Volumetric objects with soft light.	Promotion only: documentation site cover, brand pack, presentation templates. Never in product screens (D-10).

Shared rules:

• Perspective: Front view at eye level. No isometric, 3/4 view or vanishing points. Depth comes from a thickness band on the right or bottom edge, at most 8 % of the object’s width.
• Light: Light comes from the top left. No gradients, glints, texture or grain.
• Shadow: No shadows, blur or SVG filters. To ground an object, a flat, unblurred ground ellipse in the neutral-1 slot may be used.
• Strokes have round caps and joins and are converted to fills on export.

Sizes

Each size is drawn at its own scale; no size is a scaled copy of another.

Size	Canvas (px)	Grid	Padding	Stroke weight	Max objects
spot-120	120 × 120	4 px	8 px	2 px	1 + 1
spot-160	160 × 160	4 px	12 px	2 px	1 + 2
spot-240	240 × 240	4 px	16 px	3 px	1 + 3
scene-480	480 × 320	8 px	24 px	3 px	6
scene-640	640 × 400	8 px	32 px	4 px	8

• The 2 px weight equals border-width-focus; the 1 px interior detail line equals border-width-default.
• Corners come only from the radius scale (0, 4, 6, 8, 16, 24 px and full). One rectangle uses one radius. See Shape.
• At least 35 % of the live area stays empty on spots, 40 % on scenes.
• An illustration is shown only at 1× or 2× its canvas size.
• The final SVG file is at most 6 KB for spots and 20 KB for scenes.

Colour slots

Illustrations never use colour codes or ramp steps directly; they refer to named slots. Each slot is tied to a ramp step in light and dark mode; when the brand changes, the colours change with it.

Slot	Job	Light mode	Dark mode
ink	All outlines, small solid marks	neutral 800	neutral 100
surface	Object face, highlight	neutral 0	neutral 800
neutral-1	Shaded face of surface, ground ellipse	neutral 100	neutral 750
neutral-2	Secondary objects, interface blocks	neutral 200	neutral 700
neutral-3	Tertiary detail, abstract figure	neutral 400	neutral 500
primary-strong	Shaded face of brand objects	brand 700	brand 300
primary	Main brand object	brand 500	brand 400
primary-soft	Large soft brand areas	brand 100	brand 800
accent	One secondary-hue object	accent 500	accent 400
accent-soft	Soft secondary area	accent 100	accent 800
backdrop	Shape behind the composition	brand 50	brand 900
success	Success mark only	green 600	green 400
warning	Waiting and warning mark only	orange 600	orange 400
danger	Error mark only	red 600	red 400

Rules:

• A piece uses at most 6 slots (ink, surface and backdrop count).
• Colour families: neutral and brand, plus at most one secondary hue or one status colour.
• Status slots are used only on the status mark (check, cross, exclamation, hourglass), never on bodies.
• Brand colour (primary and primary-strong) covers at most 30 % of the painted area.
• In dark mode surface is lighter than the page so objects do not dissolve; there is no pure white anywhere.

Content rules

An illustration never contains:

• Text, letters or numerals; clocks and calendars have no numbers either.
• Currency symbols or labels with amounts.
• Logos, card network marks, bank names or app store badges.
• Real cards, banknotes or coins.
• Flags, maps with borders, landmarks, religious or political symbols.
• Scannable QR codes or barcodes. When a QR code is needed, draw it as three squares and bars.
• Real-person likeness, facial features, skin tones or gendered clothing.
• Hand gestures (thumbs up, OK sign).
• Piggy banks, gambling objects or animal mascots.
• Fear imagery: broken padlocks, hooded figures, skulls.
• Charts with axes or a falling trend.

When a person is needed, they appear only in scenes, as one abstract figure: a capsule body and a circle head, no facial features or hair, neutral-3 fill and ink outline.

Metaphors

The same concept is shown with the same object everywhere.

Object	Drawing rule	Use
Document	Portrait page, folded corner, 3-5 bars	Reports, document upload
Magnifier	Over a blank card	No search results, page not found
Bell	Front view, dot badge without a number	No notifications
Lock	Body, closed shackle, keyhole	No access, security
Shield	Symmetric, flat, optional check mark	Verification, security
Calendar	Rings on top, squares without numbers, one square highlighted	Scheduled work
Cloud	With a diagonal slash	No connection
Hourglass	Sand in the warning slot	Waiting for review
Folder	Front view, a document half out	No documents
Phone	Rounded corners, screen with low-detail interface blocks	First run, device verification

Motion

Animated illustration is used only on the documentation site and promotional surfaces. In product screens an illustration is a still SVG.

Animation	What moves	Duration	Where
Enter	The piece fades in and scales from 96 % to 100 %	240 ms, easing-expressive	All pieces
Success	The check mark draws itself; the badge grows slightly and settles	400 ms	Success pieces
Idle	One object drifts 4 px; stops after two cycles	2 × 2.4 s	Scenes and the documentation cover only

• No animation runs longer than 5 seconds; no confetti, flashing or bouncing money.
• In money flows only a short enter is used, with easing-productive.
• With reduced motion, the last frame of the animation is shown as a still image. See Motion.

Accessibility and alternative text

• An illustration in a product screen is decoration: it carries alt="" and aria-hidden="true". The heading and text next to it carry the meaning.
• When an illustration carries information on its own (only on the documentation site and promotional surfaces), write alternative text.
• Alternative text says what the image means, not how it looks: “Empty document folder” is enough; not “Illustration of a blue folder with paper coming out of it”.
• Do not start with “image”, “picture” or “illustration”; the screen reader already says so.
• Alternative text is at most 125 characters, in sentence case, and comes from the message catalogue in both languages.
• A meaningful mark (check, cross, exclamation, lock) has at least 3:1 contrast against the colour it sits on and against the page surface, in light and dark mode.
• Illustrations contain no text, so they need no translation.

Photography

Product screens do not use photography. When photography is used on the documentation site or in promotional material:

• Its licence allows unlimited commercial use, modification and redistribution in the brand pack, and is recorded in the licence ledger (D-17).
• Permission from any person shown is documented.
• No clichés: handshakes, smiling teams in suits, a finger pointing at a screen.
• When text is placed over a photo, text and background have at least 4.5:1 contrast.
• Alternative text rules are the same as for illustration.

Guidelines

Use illustration together with text

No reports yetReports are prepared for the period you choose.

DoThe heading and text carry the meaning; the illustration supports them.

Don'tWithout text the illustration does not say what it is; a screen reader hears nothing.

Do not put text inside images

Heading and description as text

DoText sits outside the image and comes from the message catalogue; it works in both languages.

“Welcome” written inside the image

Don'tText in an image cannot be translated or enlarged, and screen readers cannot read it.