Semantic Colors
Colors play a crucial role in a design system, influencing both the aesthetics and functionality of a product.
Semantic Colors
Colors play a crucial role in a design system, influencing both the aesthetics and functionality of a product.
Semantic Colors
Colors play a crucial role in a design system, influencing both the aesthetics and functionality of a product.
Base
Black
#000000
Black
#000000
Black
#000000
White
#FFFFFF
White
#FFFFFF
White
#FFFFFF
Neutral
Primary
#000000
Primary
#000000
Primary
#000000
Secondary
#FFFFFF
Secondary
#FFFFFF
Secondary
#FFFFFF
Tertiary
#FFFFFF
Tertiary
#FFFFFF
Tertiary
#FFFFFF
Inverted
#FFFFFF
Inverted
#FFFFFF
Inverted
#FFFFFF
Background
Primary
#000000
Primary
#000000
Primary
#000000
Secondary
#FFFFFF
Secondary
#FFFFFF
Secondary
#FFFFFF
Tertiary
#FFFFFF
Tertiary
#FFFFFF
Tertiary
#FFFFFF
Inverted
#FFFFFF
Inverted
#FFFFFF
Inverted
#FFFFFF
Brand/Primary
Base
#000000
Base
#000000
Base
#000000
Hover
#FFFFFF
Hover
#FFFFFF
Hover
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF
Blue
Base
#000000
Base
#000000
Base
#000000
Hover
#FFFFFF
Hover
#FFFFFF
Hover
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF
Purple
Base
#000000
Base
#000000
Base
#000000
Hover
#FFFFFF
Hover
#FFFFFF
Hover
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF
Green
Base
#000000
Base
#000000
Base
#000000
Hover
#FFFFFF
Hover
#FFFFFF
Hover
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF
Orange
Base
#000000
Base
#000000
Base
#000000
Hover
#FFFFFF
Hover
#FFFFFF
Hover
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF
Red
Base
#000000
Base
#000000
Base
#000000
Hover
#FFFFFF
Hover
#FFFFFF
Hover
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Border
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF
Background
#FFFFFF