Styles
The styles below define the core elements that are used throughout the site. These elements create a foundation that maintains brand consistency while providing design flexibility.
Colors
Aqua
Orange
Dark Green
Purple
Dark Blue
Beige
Light Aqua
Light Orange
Light Green
Light Purple
Typography
The site includes a defined set of typography. Below are the font families used in the site as well as the various typography treatments.
Plus Jakarta Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyr12345789’?’”~”(%)[#]{@}/&<-+=
Plus Jakarta Sans – Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyr12345789’?’”~”(%)[#]{@}/&<-+=
Plus Jakarta Sans – Bold (italic)
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyr12345789’?’”~”(%)[#]{@}/&<-+=
Plus Jakarta Sans – Regular (italic)
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyr12345789’?’”~”(%)[#]{@}/&<-+=
Text Styles
Forem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.
Heading 1 Hero
Heading 1 – Page titles
Heading 2 – Section headings
Heading 3 – Section subheadings
Heading 4
Heading 5
Heading 6
OVERLINE
Body – Lorem ipsum dolor sit amet. Links look like this. consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
Body – Large – Lorem ipsum dolor sit amet. Links look like this. consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
Body-small – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Etiam eu turpis molestie, dictum est a, mattis tellus.
- Sed dignissim, metus nec fringilla accumsan
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Etiam eu turpis molestie, dictum est a, mattis tellus.
- Sed dignissim, metus nec fringilla accumsan
Heading 1 Hero
Heading 1 – Page titles
Heading 2 – Section headings
Heading 3 – Section subheadings
Heading 4
Heading 5
Heading 6
OVERLINE
Body – Lorem ipsum dolor sit amet. Links look like this. consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
Body – Large – Lorem ipsum dolor sit amet. Links look like this. consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
Body-small – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Etiam eu turpis molestie, dictum est a, mattis tellus.
- Sed dignissim, metus nec fringilla accumsan
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
- Etiam eu turpis molestie, dictum est a, mattis tellus.
- Sed dignissim, metus nec fringilla accumsan
Text wrap default: Paragraphs and headings can have different text wrap settings. This is the default, which wraps at the right edge of the container. Hendrerit tempor suspendisse vel ridiculus nisl commodo.
Text wrap balanced: Paragraphs and headings can have different text wrap settings. This is balanced, which attempts to make each line of a paragraph or a heading approximately the same width.
Text wrap pretty: Paragraphs and headings can have different text wrap settings. This is pretty, which functions similarly to default, but avoids leaving single words on the final line.
Links and Buttons
Lorem ipsum dolor sit amet, standard text link, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, standard text link, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Image Styles
Forem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per.
