understand the system

an illustrated guide on the system semantic

an illustrated guide on the system semantic

figma community file

figma community file

figma community file

css file

css file

css file

usages

the system is built with contextual, purpose-oriented colors. each color is scoped to a single category, as shown below.

backgrounds

surfaces of UI element: section, button, cards, etc.

backgrounds

surfaces of UI element: section, button, cards, etc.

backgrounds

surfaces of UI element: section, button, cards, etc.

backgrounds

surfaces of UI element: section, button, cards, etc.

page backgrounds

base surfaces where your UI elements live. separated from backgrounds for better contrasts

page backgrounds

base surfaces where your UI elements live. separated from backgrounds for better contrasts

page backgrounds

base surfaces where your UI elements live. separated from backgrounds for better contrasts

page backgrounds

base surfaces where your UI elements live. separated from backgrounds for better contrasts

content

texts and icons. if you use filled icons, please check "extend the system"

content

texts and icons. if you use filled icons, please check "extend the system"

content

texts and icons. if you use filled icons, please check "extend the system"

content

texts and icons. if you use filled icons, please check "extend the system"

borders

edges of UI elements: sections, call to actions, fields, etc.

borders

edges of UI elements: sections, call to actions, fields, etc.

borders

edges of UI elements: sections, call to actions, fields, etc.

borders

edges of UI elements: sections, call to actions, fields, etc.

prominence

the system provides two variants for backgrounds and contents. it allows different contrasts between UI elements.

bold

high-contrast variant, used to emphasize primary elements or important sections

bold

high-contrast variant, used to emphasize primary elements or important sections

bold

high-contrast variant, used to emphasize primary elements or important sections

bold

high-contrast variant, used to emphasize primary elements or important sections

soft

low-contrast variant, used for secondary elements or sections

soft

low-contrast variant, used for secondary elements or sections

soft

low-contrast variant, used for secondary elements or sections

soft

low-contrast variant, used for secondary elements or sections

interactions

we've defined three main interactions, able to be used on mobile or desktop. disabled states purposely not included, but if needed check "extend the system".

base

basic state of an element, without any interactions

base

basic state of an element, without any interactions

hover

when mouse or pencil passes over an element

hover

when mouse or pencil passes over an element

pressed

when an element is clicked or tapped

pressed

when an element is clicked or tapped

system + palette

system + palette

explore use cases

explore use cases

extend the system ⇢ coming soon

extend the system ⇢ coming soon

← back to home page

← back to home page

discover contributors

discover contributors