09

Illustrations

The single source of truth for every illustration. Build it here first, then use it anywhere.

THE APPROACH

Architectural construction.

Each illustration is composed from SVG geometric primitives — paths, rectangles, circles, arcs. Every element is precise, grid-aligned, and intentional.

SHAPES

Paths, rects, circles, arcs

GRADIENTS

Linear + radial. Dark to accent

LAYERS

Background → form → details

GUIDES

Grid lines, brackets, dashes

LIBRARY

HOME

SIGNUP

VERIFY EMAIL

BUY

SECURITY

DEPOSIT

GROWTH

DIAMOND HANDS

TIME MACHINE

HOME

Sad Ghost

A lonely ghost floating in space, waiting for coins to keep it company. Droopy eyes, a small frown, and a single tear. Playful, endearing — nothing here yet, but soon.

SIGNUP

A new beginning

A person silhouette rising through a glowing portal ring. Orbiting coin dots (BTC, ETH, SOL). The feeling: joining something, membership, a journey starting.

VERIFY EMAIL

Something is on its way

A floating envelope sealed with a glowing stripe. Three signal arcs radiate upward like a transmission. A beam descends and a pulsing dot marks the arriving code.

BUY

Wallet with coins

A wallet with crypto coins (BTC, ETH, XRP) dropping in. The core action — buying crypto.

SECURITY

Protected always

Shield + lock composition. Gradients create depth. The scan line animation communicates active protection.

DEPOSIT

Receiving funds

Tokens descending into a portal. Concentric depth rings create perspective. Staggered float animation.

GROWTH

Rising value

A rocket ascending through altitude markers. Exhaust plume with flowing particles. Upward momentum.

DIAMOND HANDS

Lock it in. Can't touch it.

A rounded square locked in place with pause bars. Jolt animation communicates rigidity and commitment. Corner ticks pulse to show active protection.

TIME MACHINE

I wish I'd bought that. Now you can check.

A rewind arrow curves in a circular motion with radiating speed lines. Trail particles fade backward. The feeling: opportunity recaptured, historical proof, second chances.

CONSTRUCTION RULES

DO

  • Use IllustrationBase from system.tsx as your root
  • Use the 400×400 square canvas — always
  • Build from geometric primitives
  • Use gradients (dark → accent) for major shapes
  • Layer: glow → grid → form → details → accents

DON'T

  • Draw freehand — every path must be grid-constructible
  • Use colors outside the palette
  • Over-detail — stay geometric, not realistic
  • Skip background elements (grid, dots, brackets)
  • Use canvas or procedural rendering — static SVG only