Style Guide

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
Logos
Logo Usage Guidelines
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 \ Backgroundprimaryprimary-d-1primary-d-2primary-d-3primary-d-4primary-l-1primary-l-2primary-l-3primary-l-4secondarysecondary-d-1secondary-d-2secondary-d-3secondary-d-4secondary-l-1secondary-l-2secondary-l-3secondary-l-4tertiarytertiary-d-1tertiary-d-2tertiary-d-3tertiary-d-4tertiary-l-1tertiary-l-2tertiary-l-3tertiary-l-4ora-greenora-green-d-1ora-green-d-2ora-green-d-3ora-green-d-4ora-green-d-6ora-green-d-7ora-green-d-8ora-green-l-1ora-green-l-2ora-green-l-3ora-green-l-4ora-green-l-6ora-green-l-7ora-green-l-8basebase-d-1base-d-2base-d-3base-d-4base-l-1base-l-2base-l-3base-l-4bg-bodybg-surfacetext-bodytext-titlelightlight-neutraldarksuccesserror
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