Last Updated: January 21, 2025
Style Guide
This style guide serves as a page that outlines clear visuals on typography, color schemes and other design elements.
Aa
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
--ora-green
Value Here
Light Mode
Dark Mode
Shades
Tints
--base
Value Here
Light Mode
Dark Mode
Shades
Tints
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 | ora-green | ora-green-d-1 | ora-green-d-2 | ora-green-d-3 | ora-green-d-4 | ora-green-d-6 | ora-green-d-7 | ora-green-d-8 | ora-green-l-1 | ora-green-l-2 | ora-green-l-3 | ora-green-l-4 | ora-green-l-6 | ora-green-l-7 | ora-green-l-8 | 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 | light-neutral | dark | success | error |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-d-1 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-d-2 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-d-3 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-d-4 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-d-6 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-d-7 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-d-8 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-l-1 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-l-2 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-l-3 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-l-4 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-l-6 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-l-7 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ora-green-l-8 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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 |