Style Guide

Typograghy

Default header font styles. Use this as a guide to set responsive font sizes.

This is a header (h1)

This is a header (h2)

This is a header (h3)

This is a header (h4)

This is a header (h5)

Colors

Global colors and values

primary
var(--primary) = rgba(0, 168, 194, 1)
var(--primary-rgb) = 0, 168, 194
secondary
var(--secondary) = rgba(94, 189, 75, 1)
var(--secondary-rgb) = 94, 189, 75
tertiary
var(--tertiary) = rgba(255, 102, 0, 1)
var(--tertiary-rgb) = 255, 102, 0
accent
var(--accent) = rgba(220, 244, 247, 1)
var(--accent-rgb) = 220, 244, 247
topbar
var(--topbar) = rgba(0, 90, 104, 1)
var(--topbar-rgb) = 0, 90, 104
bg-1
var(--bg-1) = rgba(246, 246, 246, 1)
var(--bg-1-rgb) = 246, 246, 246
gray-2
var(--gray-2) = rgba(204, 204, 204, 1)
var(--gray-2-rgb) = 204, 204, 204
gray-3
var(--gray-3) = rgba(119, 119, 119, 1)
var(--gray-3-rgb) = 119, 119, 119
gray-45
var(--gray-45) = rgba(22, 22, 22, 1)
var(--gray-45-rgb) = 22, 22, 22

Component Library

Component Locations

OR