Style Guide
Last Updated: November 8, 2024
Style Guide
This style guide serves as a page that outlines clear visuals on typography, color schemes and other design elements.
Aa
Logos
Logo Dark
Logo Light
Logo Usage Guidelines
Brand Guidelines
Do not stretch
Do not add shadows
Do not change colors
Do not outline
Do not rotate
Do not reduce opacity
Maintain clear space
Ensure enought contrast
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
--base
Value Here
Light Mode
Dark Mode
Shades
Tints
--grey-border
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
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-d-4 | primary-l-1 | primary-l-2 | primary-l-3 | primary-l-4 | secondary | secondary-d-1 | secondary-d-2 | secondary-d-3 | secondary-d-4 | secondary-l-1 | secondary-l-2 | secondary-l-3 | secondary-l-4 | tertiary | tertiary-d-1 | tertiary-d-2 | tertiary-d-3 | tertiary-d-4 | tertiary-l-1 | tertiary-l-2 | tertiary-l-3 | tertiary-l-4 | base | base-d-1 | base-d-2 | base-d-3 | base-d-4 | base-l-1 | base-l-2 | base-l-3 | base-l-4 | bg-body | bg-surface | text-body | text-title | light | dark | success | error | grey-border |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| primary | |||||||||||||||||||||||||||||||||||||||||||||
| primary-d-1 | |||||||||||||||||||||||||||||||||||||||||||||
| primary-d-2 | |||||||||||||||||||||||||||||||||||||||||||||
| primary-d-3 | |||||||||||||||||||||||||||||||||||||||||||||
| primary-d-4 | |||||||||||||||||||||||||||||||||||||||||||||
| primary-l-1 | |||||||||||||||||||||||||||||||||||||||||||||
| primary-l-2 | |||||||||||||||||||||||||||||||||||||||||||||
| primary-l-3 | |||||||||||||||||||||||||||||||||||||||||||||
| primary-l-4 | |||||||||||||||||||||||||||||||||||||||||||||
| secondary | |||||||||||||||||||||||||||||||||||||||||||||
| secondary-d-1 | |||||||||||||||||||||||||||||||||||||||||||||
| secondary-d-2 | |||||||||||||||||||||||||||||||||||||||||||||
| secondary-d-3 | |||||||||||||||||||||||||||||||||||||||||||||
| secondary-d-4 | |||||||||||||||||||||||||||||||||||||||||||||
| secondary-l-1 | |||||||||||||||||||||||||||||||||||||||||||||
| secondary-l-2 | |||||||||||||||||||||||||||||||||||||||||||||
| secondary-l-3 | |||||||||||||||||||||||||||||||||||||||||||||
| secondary-l-4 | |||||||||||||||||||||||||||||||||||||||||||||
| tertiary | |||||||||||||||||||||||||||||||||||||||||||||
| tertiary-d-1 | |||||||||||||||||||||||||||||||||||||||||||||
| tertiary-d-2 | |||||||||||||||||||||||||||||||||||||||||||||
| tertiary-d-3 | |||||||||||||||||||||||||||||||||||||||||||||
| tertiary-d-4 | |||||||||||||||||||||||||||||||||||||||||||||
| tertiary-l-1 | |||||||||||||||||||||||||||||||||||||||||||||
| tertiary-l-2 | |||||||||||||||||||||||||||||||||||||||||||||
| tertiary-l-3 | |||||||||||||||||||||||||||||||||||||||||||||
| tertiary-l-4 | |||||||||||||||||||||||||||||||||||||||||||||
| base | |||||||||||||||||||||||||||||||||||||||||||||
| base-d-1 | |||||||||||||||||||||||||||||||||||||||||||||
| base-d-2 | |||||||||||||||||||||||||||||||||||||||||||||
| base-d-3 | |||||||||||||||||||||||||||||||||||||||||||||
| base-d-4 | |||||||||||||||||||||||||||||||||||||||||||||
| base-l-1 | |||||||||||||||||||||||||||||||||||||||||||||
| base-l-2 | |||||||||||||||||||||||||||||||||||||||||||||
| base-l-3 | |||||||||||||||||||||||||||||||||||||||||||||
| base-l-4 | |||||||||||||||||||||||||||||||||||||||||||||
| bg-body | |||||||||||||||||||||||||||||||||||||||||||||
| bg-surface | |||||||||||||||||||||||||||||||||||||||||||||
| text-body | |||||||||||||||||||||||||||||||||||||||||||||
| text-title | |||||||||||||||||||||||||||||||||||||||||||||
| light | |||||||||||||||||||||||||||||||||||||||||||||
| dark | |||||||||||||||||||||||||||||||||||||||||||||
| success | |||||||||||||||||||||||||||||||||||||||||||||
| error | |||||||||||||||||||||||||||||||||||||||||||||
| grey-border |