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
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
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
Accessibility Table
Legend:
AA Passes WCAG AA (Contrast Ratio >= 4.5)
AAA Passes WCAG AAA (Contrast Ratio >= 7)
AA Large Passes for Large Text Only (Contrast Ratio >= 3)
DNP Does Not Pass (Contrast Ratio < 3)
Text Color
Background Color
| Text \ Background | primary | primary-d-1 | primary-d-2 | primary-d-3 | primary-l-1 | primary-l-2 | primary-l-3 | secondary | secondary-d-1 | secondary-d-2 | secondary-d-3 | secondary-l-1 | secondary-l-2 | secondary-l-3 | tertiary | tertiary-d-1 | tertiary-d-2 | tertiary-d-3 | tertiary-l-1 | tertiary-l-2 | tertiary-l-3 | bg-body | bg-surface | text-body | text-title | light | dark | success | error |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| primary | |||||||||||||||||||||||||||||
| primary-d-1 | |||||||||||||||||||||||||||||
| primary-d-2 | |||||||||||||||||||||||||||||
| primary-d-3 | |||||||||||||||||||||||||||||
| primary-l-1 | |||||||||||||||||||||||||||||
| primary-l-2 | |||||||||||||||||||||||||||||
| primary-l-3 | |||||||||||||||||||||||||||||
| secondary | |||||||||||||||||||||||||||||
| secondary-d-1 | |||||||||||||||||||||||||||||
| secondary-d-2 | |||||||||||||||||||||||||||||
| secondary-d-3 | |||||||||||||||||||||||||||||
| secondary-l-1 | |||||||||||||||||||||||||||||
| secondary-l-2 | |||||||||||||||||||||||||||||
| secondary-l-3 | |||||||||||||||||||||||||||||
| tertiary | |||||||||||||||||||||||||||||
| tertiary-d-1 | |||||||||||||||||||||||||||||
| tertiary-d-2 | |||||||||||||||||||||||||||||
| tertiary-d-3 | |||||||||||||||||||||||||||||
| tertiary-l-1 | |||||||||||||||||||||||||||||
| tertiary-l-2 | |||||||||||||||||||||||||||||
| tertiary-l-3 | |||||||||||||||||||||||||||||
| bg-body | |||||||||||||||||||||||||||||
| bg-surface | |||||||||||||||||||||||||||||
| text-body | |||||||||||||||||||||||||||||
| text-title | |||||||||||||||||||||||||||||
| light | |||||||||||||||||||||||||||||
| dark | |||||||||||||||||||||||||||||
| success | |||||||||||||||||||||||||||||
| error |