Style Guide

Last Updated: December 15, 2025

Download Logo Package

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
--ujao-yellow
Value Here
Light Mode
Dark Mode
Shades
Tints
--ujao-dark-green
Value Here
Light Mode
Dark Mode
--ujao-light-green
Value Here
Light Mode
Dark Mode
Shades
Tints
--ujao-bg-light
Value Here
Light Mode
Dark Mode
Shades
--tertiary-dark
Value Here
Light Mode
Dark Mode
--tertiary-dark-2
Value Here
Light Mode
Dark Mode
--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-4tertiary-darktertiary-dark-2ujao-yellowujao-yellow-d-1ujao-yellow-d-2ujao-yellow-d-3ujao-yellow-d-4ujao-yellow-l-1ujao-yellow-l-2ujao-yellow-l-3ujao-yellow-l-4ujao-dark-greenujao-light-greenujao-light-green-d-1ujao-light-green-d-2ujao-light-green-d-3ujao-light-green-d-4ujao-light-green-l-1ujao-light-green-l-2ujao-light-green-l-3ujao-light-green-l-4ujao-bg-lightujao-bg-light-d-1ujao-bg-light-d-2ujao-bg-light-d-3ujao-bg-light-d-4ujao-bg-light-d-6ujao-bg-light-d-7ujao-bg-light-d-8basebase-d-1base-d-2base-d-3base-d-4base-l-1base-l-2base-l-3base-l-4bg-bodybg-surfacetext-bodytext-titlelightdarksuccesserror
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
tertiary-dark
tertiary-dark-2
ujao-yellow
ujao-yellow-d-1
ujao-yellow-d-2
ujao-yellow-d-3
ujao-yellow-d-4
ujao-yellow-l-1
ujao-yellow-l-2
ujao-yellow-l-3
ujao-yellow-l-4
ujao-dark-green
ujao-light-green
ujao-light-green-d-1
ujao-light-green-d-2
ujao-light-green-d-3
ujao-light-green-d-4
ujao-light-green-l-1
ujao-light-green-l-2
ujao-light-green-l-3
ujao-light-green-l-4
ujao-bg-light
ujao-bg-light-d-1
ujao-bg-light-d-2
ujao-bg-light-d-3
ujao-bg-light-d-4
ujao-bg-light-d-6
ujao-bg-light-d-7
ujao-bg-light-d-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
dark
success
error