system + palette

carefully crafted palettes to help you start projects fast.

carefully crafted palettes to help you start projects fast.

figma community file

figma community file

css file

css file

content

code syntax

figma Libraries

content.base

all your designs starts from base. They have, if necessary, their state(s) equivalent.

#020A19

var(--cnt-primary)

primary

the default color for content.

#5D5E60

var(--cnt-secondary)

secondary

for subtle content

#A2A5A9

var(--cnt-tertiary)

tertiary

for footnotes, legends,etc.

#FFFFFF

var(--cnt-onbold)

on-bold

default content on bold backgrounds

#7910FF

var(--cnt-accent)

accent

for highlight interactive content

#1062FF

var(--cnt-info)

info

for informative messages

#128700

var(--cnt-success)

success

for success or positive information

#E32D00

var(--cnt-warning)

warning

for important information

#E00018

var(--cnt-danger)

danger

for critical information

content.hover & pressed

state of some content colors.

content

code syntax

figma Libraries

content.base

all your designs starts from base. They have, if necessary, their state(s) equivalent.

#020A19

var(--cnt-primary)

primary

the default color for content.

#5D5E60

var(--cnt-secondary)

secondary

for subtle text content

#A2A5A9

var(--cnt-tertiary)

tertiary

for footnotes, legends,etc.

#FFFFFF

var(--cnt-onbold)

on-bold

default text on bold backgrounds

#7910FF

var(--cnt-accent)

accent

for highlight interactive text

#1062FF

var(--cnt-info)

info

for informative messages

#128700

var(--cnt-success)

success

for success or positive messages

#E32D00

var(--cnt-warning)

warning

for important information

#E00018

var(--cnt-danger)

danger

for critical information

content.hover & pressed

state of some content colors.

content

code syntax

figma Libraries

content.base

all your designs starts from base. They have, if necessary, their state(s) equivalent.

#020A19

var(--cnt-primary)

primary

the default color for content.

#5D5E60

var(--cnt-secondary)

secondary

for subtle text content

#A2A5A9

var(--cnt-tertiary)

tertiary

for footnotes, legends,etc.

#FFFFFF

var(--cnt-onbold)

on-bold

default text on bold backgrounds

#7910FF

var(--cnt-accent)

accent

for highlight interactive text

#1062FF

var(--cnt-info)

info

for informative messages

#128700

var(--cnt-success)

success

for success or positive messages

#E32D00

var(--cnt-warning)

warning

for important information

#E00018

var(--cnt-danger)

danger

for critical information

content.hover & pressed

state of some content colors.

backgrounds

code syntax

figma Libraries

base backgrounds

all your designs starts from base. they have, if necessary, their state(s) equivalent.

#FFFFFF

var(--bg-main)

main

default color for bg

#F6F6F8

var(--bg-alternative)

alternative

alternative color for bg

#F4EBFF

var(--bg-accent-soft)

accent soft

for subtle branded or accent bg

#7910FF

var(--bg-accent-bold)

accent bold

for highly visible branded or accent bg

#EBF5FF

var(--bg-info-soft)

info soft

for subtle informative cnt bg

#1062FF

var(--bg-info-bold)

info bold

for highly visible for subtle informative cnt bg

#E6FAEF

var(--bg-success-soft)

success soft

for subtle positive cnt bg

#0C823C

var(--bg-success-bold)

success bold

for highly visible positive cnt bg

#FFF3EB

var(--bg-warning-soft)

warning soft

for subtle important cnt bg

#FA5C00

var(--bg-warning-bold)

warning bold

for highly visible important cnt bg

#FFF0F1

var(--bg-danger-soft)

danger soft

for subtle yet critical cnt bg

#D50017

var(--bg-danger-bold)

danger bold

for highly visible critical cnt bg

backgrounds.hover & pressed

state of some backgrounds colors.

backgrounds

code syntax

figma Libraries

base backgrounds

all your designs starts from base. they have, if necessary, their state(s) equivalent.

#FFFFFF

var(--bg-main)

main

default color for bg

#F6F6F8

var(--bg-alternative)

alternative

alternative color for bg

#F4EBFF

var(--bg-accent-soft)

accent soft

for subtle branded or accent bg

#7910FF

var(--bg-accent-bold)

accent bold

for highly visible branded or accent bg

#EBF5FF

var(--bg-info-soft)

info soft

for subtle informative cnt bg

#1062FF

var(--bg-info-bold)

info bold

for highly visible for subtle informative cnt bg

#E6FAEF

var(--bg-success-soft)

success soft

for subtle positive cnt bg

#0C823C

var(--bg-success-bold)

success bold

for highly visible positive cnt bg

#FFF3EB

var(--bg-warning-soft)

warning soft

for subtle important cnt bg

#FA5C00

var(--bg-warning-bold)

warning bold

for highly visible important cnt bg

#FFF0F1

var(--bg-danger-soft)

danger soft

for subtle yet critical cnt bg

#D50017

var(--bg-danger-bold)

danger bold

for highly visible critical cnt bg

backgrounds.hover & pressed

state of some backgrounds colors.

backgrounds

code syntax

figma Libraries

base backgrounds

all your designs starts from base. they have, if necessary, their state(s) equivalent.

#FFFFFF

var(--bg-main)

main

default color for bg

#F6F6F8

var(--bg-alternative)

alternative

alternative color for bg

#F4EBFF

var(--bg-accent-soft)

accent soft

for subtle branded or accent bg

#7910FF

var(--bg-accent-bold)

accent bold

for highly visible branded or accent bg

#EBF5FF

var(--bg-info-soft)

info soft

for subtle informative cnt bg

#1062FF

var(--bg-info-bold)

info bold

for highly visible for subtle informative cnt bg

#E6FAEF

var(--bg-success-soft)

success soft

for subtle positive cnt bg

#0C823C

var(--bg-success-bold)

success bold

for highly visible positive cnt bg

#FFF3EB

var(--bg-warning-soft)

warning soft

for subtle important cnt bg

#FA5C00

var(--bg-warning-bold)

warning bold

for highly visible important cnt bg

#FFF0F1

var(--bg-danger-soft)

danger soft

for subtle yet critical cnt bg

#D50017

var(--bg-danger-bold)

danger bold

for highly visible critical cnt bg

backgrounds.hover & pressed

state of some backgrounds colors.

borders

code syntax

figma Libraries

base borders

no states for borders, if needed extend the system

#DBDBDC

var(--brd-main)

main

for dividers and subtle brd

#C5C5C7

var(--brd-alternative)

alternative

for more constrasted brd like fields

#7910FF

var(--brd-accent)

accent

for more visibility or contrast

#1062FF

var(--brd-info)

info

for more visibility or contrast

#128700

var(--brd-success)

success

for more visibility or provide action positive feedback

#E32D00

var(--brd-warning)

warning

for more visibility or provide attention feedback

#E00018

var(--brd-danger)

danger

for more visibility or provide critical feedback

borders

code syntax

figma Libraries

base borders

no states for borders, if needed extend the system

#DBDBDC

var(--brd-main)

main

for dividers and subtle brd

#C5C5C7

var(--brd-alternative)

alternative

for more constrasted brd like fields

#7910FF

var(--brd-accent)

accent

for more visibility or contrast

#1062FF

var(--brd-info)

info

for more visibility or contrast

#128700

var(--brd-success)

success

for more visibility or provide action positive feedback

#E32D00

var(--brd-warning)

warning

for more visibility or provide attention feedback

#E00018

var(--brd-danger)

danger

for more visibility or provide critical feedback

borders

code syntax

figma Libraries

base borders

no states for borders, if needed extend the system

#DBDBDC

var(--brd-main)

main

for dividers and subtle brd

#C5C5C7

var(--brd-alternative)

alternative

for more constrasted brd like fields

#7910FF

var(--brd-accent)

accent

for more visibility or contrast

#1062FF

var(--brd-info)

info

for more visibility or contrast

#128700

var(--brd-success)

success

for more visibility or provide action positive feedback

#E32D00

var(--brd-warning)

warning

for more visibility or provide attention feedback

#E00018

var(--brd-danger)

danger

for more visibility or provide critical feedback

page backgrounds

code syntax

figma Libraries

base page backgrounds

obviously no states

#FFFFFF

var(--pagebg-main)

main

the default page bg

#F6F6F8

var(--pagebg-alternative)

alternative

for and alternative page bg

page backgrounds

code syntax

figma Libraries

base page backgrounds

obviously no states

#FFFFFF

var(--pagebg-main)

main

the default page bg

#F6F6F8

var(--pagebg-alternative)

alternative

the alternative page bg, to be used carrefully

page backgrounds

code syntax

figma Libraries

base page backgrounds

obviously no states

#FFFFFF

var(--pagebg-main)

main

the default page bg

#F6F6F8

var(--pagebg-alternative)

alternative

the alternative page bg, to be used carrefully

explore use cases

explore use cases

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