The rules and components that keep our design unified, usable, and scalable.
Colors
Primary Color
Purple Anemone (#C5FF55)
Secondary Color
Thamar Black (#191919)
Accent Color
Magic Fountain (#1E78FF)
Typography
Heading Font
Bricolage Grotesk
Extra Bold - 48 px
Heading 1
Extra Bold - 36 px
Heading 2
Extra Bold - 28 px
Heading 3
Medium - 24 px
Heading 4
Medium - 20 px
Heading 5
Medium - 18 px
Heading 6
Bodytext Font
Bricolage Grotesk
Light - 16 px
Bodytext 1
Light - 14 px
Bodytext 2
Button Font
Bricolage Grotesk
Medium - 20 px
Button 1
Medium - 16 px
Button 2
Medium - 14 px
Button 3
Medium - 12 px
Button 4
Button
Primary Button
A button that represents the main action on a page or interface. It stands out the most and is used for high-priority actions, such as submitting a form or completing a purchase.
A button that supports the primary action but is less prominent. It is typically used for alternative actions that are important but not the main focus, such as "Cancel" or "Learn More.
A button with the lowest emphasis, often styled as a text link or minimally designed. It is used for less critical actions, such as navigation or supplementary options.
.webp)
.webp)
.webp)
