use cases

some example of how to use or combine your colors

figma community file

css file

exemple 1 : alerts

Almost all the great American graphic designers have used white space as the significant silence to better hear their message loud and clear.

#EBF5FF

var(--bg-info-soft)

#1062FF

var(--cnt-info)

Almost all the great American graphic designers have used white space as the significant silence to better hear their message loud and clear.

#E32D00

var(--cnt-warning)

#FFF3EB

var(--bg-warning-soft)

#E32D00

var(--brd-warning)

exemple 2 : buttons bold and soft

bold

#FFFFFF

var(--cnt-onbold)

#7910FF

var(--bg-accent-bold)

bold hover

#FFFFFF

var(--cnt-onbold)

#6000DB

var(--bg-accent-bold-hover)

bold pressed

#FFFFFF

var(--cnt-onbold)

#4C00AD

var(--bg-accent-bold-pressed)

soft

#FFFFFF

var(--cnt-accent)

#7910FF

var(--bg-accent-soft)

soft hover

#FFFFFF

var(--cnt-accent)

#6000DB

var(--bg-accent-soft-hover)

soft pressed

#FFFFFF

var(--cnt-accent)

#4C00AD

var(--bg-accent-soft-pressed)

exemple 3 : field

Label

maxime@gmil.com

#5D5E60

var(--cnt-secondary)

#E00018

var(--cnt-danger)

#FFFFFF

var(--bg-main)

#E00018

var(--brd-danger)

use cases

some example of how to use or combine your colors

some example of how to use or combine your colors

exemple 1 : alerts

exemple 2 : buttons bold and soft

exemple 3 : field

system + palette

understand the system

extend the system ⇢ coming soon

← back to home page

discover contributors