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.
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