Design System
Colors
The different colors that can be used throughout the website. Each color palette contains a 10 grade color spectrum to provide variability and theming.
Primary
500
50
100
200
300
400
600
700
800
900
Secondary
500
50
100
200
300
400
600
700
800
900
Dark
500
50
100
200
300
400
600
700
800
900
Font Size
Global classes to control the font size of an element.
Font Weight
Global classes to control the font weight of an element.
Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
SemiBold
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Thin
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Buttons
The different text sizes used throughout the site.
Cards Components
Container
The container class sets the max-width of a container element.
Columns
The menu used site wide is designed to be responsive and accessible.
Flex Direction
The classes that allow you to modify the direction of the items within an element using Flexbox.
Gap
The classes that allow you to control an element's padding.
gap-{size} - All SIdes Padding
Gap-x-{size} - Horizontal Padding
Gap-Y-{Size} - Vertical Padding
Padding
The classes that allow you to control an element's padding.
p-{size} - All SIdes Padding
PX-{size} - Horizontal Padding
PY-{Size} - Vertical Padding
PR-{Size} - Right Padding
PB-{Size} - Bottom Padding
Gap
The classes that allow you to control an element's gutters between flexbox items.
p-{size} - All SIdes Padding
PX-{size} - Horizontal Padding
PY-{Size} - Vertical Padding
PR-{Size} - Right Padding
PB-{Size} - Bottom Padding
