Design System
for Wealth

About
Illustrations

Concept

Wealth by Groww's design system has premium dark surfaces, considered typography and a custom isometric illustration register that signals craft, calm and considered finance.

Style

The visual register leans into dark surfaces, gold-toned accents and isometric machined objects finance as instrument, instrument as object, every detail load-bearing.

Colour palette

Gold for accent, greys for everything else.

15%
35%
35%
25%

Gold

#C4A565

RGB 196, 165, 101

Pantone 15-1132

Paper

#E1E1E1

RGB 225, 225, 225

Pantone 12-4306

Stone

#9C9C9C

RGB 156, 156, 156

Pantone 16-4703

Shadow

#2A2A2A

RGB 42, 42, 42

Pantone 19-4008

Illustration Type

360 × 180 px

Hero Isometric 3D illustration example

Hero - Isometric 3D

Cover · Splash · Onboarding

180 × 180 px

Spot Hero Skeuomorphic 2.5D illustration example

Spot Hero - Skeuomorphic 2.5D

Empty states · Confirmations

80 × 80 px

Spot Skeuomorphic 2D illustration example

Spot - Skeuomorphic 2D

Empty states · Confirmations

Skeuomorphic
Spot Illustrations

Spot hero illustrations drop one isometric axis keeping a sense of dimension without the heaviness of a full hero. Same lighting, same materials, same gold accent register.

Perspective

2.5D

Dimensions

180 × 180 px

Scale

Mid detail

Spot Hero illustration construction blueprint
Spot 01 illustration

Spot 01

A narrow palette intentionally a single hue stretched across light, midtone and shadow. Coherent across every illustration; dimensional without competing with product UI colour.

Spot 02

A narrow palette intentionally a single hue stretched across light, midtone and shadow. Coherent across every illustration; dimensional without competing with product UI colour.

Spot 02 illustration
Spot 03 illustration

Spot 03

A narrow palette intentionally a single hue stretched across light, midtone and shadow. Coherent across every illustration; dimensional without competing with product UI colour.

Onboarding flow

Add nominees for your investments onboarding screen
Verify with a selfie onboarding screen
Add your signature onboarding screen

Isometric
Hero Illustrations

Full hero illustrations carry the complete isometric scene devices, light, gold accents at the highest level of detail in the system.

Perspective

3D

Dimensions

360 × 180 px

Scale

High detail

Isometric Hero illustration construction blueprint
All hero device illustrations overview

Hero 01

Spot hero illustrations drop one isometric axis keeping a sense of dimension without the heaviness of a full hero. Same lighting, same materials, same gold accent register.

Hero 01 illustration
Hero 01 process reference detail crops

Hero 02

Spot hero illustrations drop one isometric axis keeping a sense of dimension without the heaviness of a full hero. Same lighting, same materials, same gold accent register.

Hero 02 illustration
Hero 02 asset breakdown detail crops

Hero 03

Spot hero illustrations drop one isometric axis keeping a sense of dimension without the heaviness of a full hero. Same lighting, same materials, same gold accent register.

Hero 03 illustration
Hero 03 asset breakdown detail crops

In the product

Groww with Edge product screen
Track Mutual Funds product screen
Connect to your W Partner product screen

Hero Icons

Spot hero illustrations drop one isometric axis keeping a sense of dimension without the heaviness of a full hero. Same lighting, same materials, same gold accent register.

Perspective

2D

Dimensions

80 × 80 px

Scale

Low detail

Hero icon example construction grid

Icon Set

Six skeuomorphic icons phone, profile, redirect, refresh, support and message sharing the same isometric grid and three-tone palette as the rest of the system.

Icon 01
Icon 02
Icon 03
Icon 04
Icon 05
Icon 06