Style Guide
This style guide serves as a page that outlines clear visuals on typography, color schemes and other design elements.
Aa
Colors
Light Mode
Dark Mode
--primary
Value Here
Light Mode
Dark Mode
--secondary
Value Here
Light Mode
Dark Mode
--tertiary
Value Here
Light Mode
Dark Mode
--text-primary
Value Here
Light Mode
Dark Mode
--text-white
Value Here
Light Mode
Dark Mode
--text-black
Value Here
Light Mode
Dark Mode
--text-1
Value Here
Light Mode
Dark Mode
--text-2
Value Here
Light Mode
Dark Mode
--base-1
Value Here
Light Mode
Dark Mode
--base-2
Value Here
Colors
--primary
Value Here
Light Mode
Dark Mode
Shades
Tints
--secondary
Value Here
Light Mode
Dark Mode
Shades
Tints
--tertiary
Value Here
Light Mode
Dark Mode
Shades
Tints
--text-primary
Value Here
Light Mode
Dark Mode
--text-white
Value Here
Light Mode
Dark Mode
--text-black
Value Here
Light Mode
Dark Mode
--text-1
Value Here
Light Mode
Dark Mode
--text-2
Value Here
Light Mode
Dark Mode
--base-1
Value Here
Light Mode
Dark Mode
--base-2
Value Here
Light Mode
Dark Mode
Colors
Name of Color
--primary
Value Here
Light Mode
Dark Mode
Shades
Tints
Name of Color
--secondary
Value Here
Light Mode
Dark Mode
Shades
Tints
Name of Color
--tertiary
Value Here
Light Mode
Dark Mode
Shades
Tints
Name of Color
--text-primary
Value Here
Light Mode
Dark Mode
Name of Color
--text-white
Value Here
Light Mode
Dark Mode
Name of Color
--text-black
Value Here
Light Mode
Dark Mode
Name of Color
--text-1
Value Here
Light Mode
Dark Mode
Name of Color
--text-2
Value Here
Light Mode
Dark Mode
Name of Color
--base-1
Value Here
Light Mode
Dark Mode
Name of Color
--base-2
Value Here
Light Mode
Dark Mode
Typography
Body Font: Something
.text-4xl
.text-3xl
.text-2xl
.text-xl
.text-l
.text-m
.text-s
.text-xs
.font-100 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-200 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-300 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-400 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-500 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-600 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-700 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-800 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.font-900 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Header Font: Something
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
This is a hyperlink
Elements
Buttons
.btn
.largeButton.small
.btn.secondary
.largeButton.small
.btn.tertiery
.largeButton.small
.btn.slight
.largeButton.small
.btn.ghost
.largeButton.small
Icons
.icon
Avatars
.avatar
Card
.card
Card Heading Here
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.
Main ButtonNext Button
Sizing
.space-4xl
.space-3xl
.space-2xl
.space-xl
.space-l
.space-m
.space-s
.space-xs
.space-2xs
.space-3xs
.space-4xs
.padding-4xl
.padding-3xl
.padding-2xl
.padding-xl
.padding-l
.padding-m
.padding-s
.padding-xs
.padding-2xs
.padding-3xs
.padding-4xs