use cases

some example of how to use or combine your colors

some example of how to use or combine your colors

figma community file

figma community file

css 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)

#EBF5FF

var(--bg-info-soft)

#EBF5FF

var(--bg-info-soft)

#1062FF

var(--cnt-info)

#1062FF

var(--cnt-info)

#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)

#E32D00

var(--cnt-warning)

#E32D00

var(--cnt-warning)

#FFF3EB

var(--bg-warning-soft)

#FFF3EB

var(--bg-warning-soft)

#FFF3EB

var(--bg-warning-soft)

#E32D00

var(--brd-warning)

#E32D00

var(--brd-warning)

#E32D00

var(--brd-warning)

exemple 2 : buttons bold and soft

bold

#FFFFFF

var(--cnt-onbold)

#FFFFFF

var(--cnt-onbold)

#7910FF

var(--bg-accent-bold)

#7910FF

var(--bg-accent-bold)

bold hover

#FFFFFF

var(--cnt-onbold)

#FFFFFF

var(--cnt-onbold)

#6000DB

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

#6000DB

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

bold pressed

#FFFFFF

var(--cnt-onbold)

#FFFFFF

var(--cnt-onbold)

#4C00AD

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

#4C00AD

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

soft

#FFFFFF

var(--cnt-accent)

#FFFFFF

var(--cnt-accent)

#7910FF

var(--bg-accent-soft)

#7910FF

var(--bg-accent-soft)

soft hover

#FFFFFF

var(--cnt-accent)

#FFFFFF

var(--cnt-accent)

#6000DB

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

#6000DB

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

soft pressed

#FFFFFF

var(--cnt-accent)

#FFFFFF

var(--cnt-accent)

#4C00AD

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

#4C00AD

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

exemple 3 : field

Label

maxime@gmil.com

#5D5E60

var(--cnt-secondary)

#5D5E60

var(--cnt-secondary)

#5D5E60

var(--cnt-secondary)

#E00018

var(--cnt-danger)

#E00018

var(--cnt-danger)

#E00018

var(--cnt-danger)

#FFFFFF

var(--bg-main)

#FFFFFF

var(--bg-main)

#FFFFFF

var(--bg-main)

#E00018

var(--brd-danger)

#E00018

var(--brd-danger)

#E00018

var(--brd-danger)

system + palette

system + palette

understand the system

understand the system

extend the system ⇢ coming soon

extend the system ⇢ coming soon

← back to home page

← back to home page

discover contributors

discover contributors