Colours

Our design system is decentralized and built for multi-product purposes. Having different-color naming conventions and numbers etc... makes it harder to maintain it.

For that, we made a decision to give our colours unique names.

Meet the Dragon Ball Z approach.

Each color name is assigned for specific purpose and for each product these values are different.

Please never use Hex values, they won't change if you need theme support.

Colours usage

Main colours

Piccolo (Primary)

Main button, links etc

hover80
default100
active120

Hit (Secondary)

Secondary button

hover80
default100
active120

Beerus

Border color

100

Goku

Main background

100
80
40
10

Gohan

Secondary background color

100
80
40
10

Goten

Button text, promotions card text. Some cases body text or headline text.

100

Bulma

Main body text

100

Trunks

Secondary body text

100

Support colours

Krillin

Warning colours

100
10

chiChi

Error colours

100
10

Roshi

Success colours

100
10

Popo

Black colour

100

Dodoria

100
10

Cell

100
10

Raditz

100
10

Whis

100
10

Frieza

100
10

Nappa

100
10