00 – CSS Classes
CSS classes can be added to individual blocks in order to customize the look and feel even further. This can be done by selecting a block and, on the right sidebar, under the “Advanced” section, adding the class(es) to the “Additional CSS class(es)” field. Multiple classes can be added by separating them with a single space (i.e. “example-class-1 example-class-2”).
If any of the styles in this style guide require a utility class, it will be added nearby and styled like this: example-class-1
01 – Iconography
Primary Logo
These should be exported as SVGs but if a PNG is needed, they should be exported at 2x to preserve image quality.
Favicons
These should be exported as SVGs but if a PNG is needed, they should be exported at 2x to preserve image quality.
02 – Colors
Primary Colors
These were chosen to embody the brand’s core and may be used for buttons, hover styles and other UI elements.
Octane Orange
RGB 245 / 126 / 37
#f57e25
Octane Gold
RGB 253 / 161 / 0
#fda100
Black
RGB 36 / 36 / 41
#242429
White
RGB 255 / 255 / 255
#ffffff
Secondary Colors
These were chosen to support the core of the brand and may be used for body copy, icons and other secondary UI elements.
Grey 1
RGB 74 / 72 / 78
#4a484e
Grey 2
RGB 117 / 117 / 117
#757575
Grey 3
RGB 227 / 227 / 227
#e3e3e3
Grey 4
RGB 244 / 244 / 244
#f4f4f4
Feedback States
These are used to convey feedback to the user (Error, Warning, Success)
Error Feedback
RGB 245 / 56 / 10
#f5380a
text-error (text)
bg-error (background)
Warning Feedback
Uses (Octane Gold)
Success Feedback
RGB 29 / 171 / 111
#1dab6f
text-success (text)
bg-success (background)
03 – Typography
Font Typefaces
The fonts shown below indicate what typefaces can be used on the site. Both Phonk and Readex Pro can be downloaded here.
Gotham
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Minion Pro
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Headings
All font sizes, line heights and letter spacings are indicated below in pixels. Headings can use any typeface located above as needed. (D=Desktop & M=Mobile)
The “text-5xl” is 3rem (48px) and is typically used for overlay text in the header or centered page titles.
The quick brown fox jumps over the lazy dog.
The “text-4xl” is 2.5rem (40px) and is used for page titles positioned to the top left of the page.
The quick brown fox jumps over the lazy dog.
The “text-3xl” is 1.875rem (30px) and is typically used for section headers.
Leaving the size set to “Default” instead of selecting 2.5rem will also output as 2.5rem.
The quick brown fox jumps over the lazy dog.
The “text-2xl” is 1.5rem (24px) and is used for sub-sections.
The quick brown fox jumps over the lazy dog.
Paragraphs
The “text-2xl” is 1.5rem (24px) and is typically used for intro paragraphs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula facilisis mauris, fermentum vulputate libero placerat quis. Nullam sapien lorem, luctus in odio ut, rhoncus ultrices eros.
Proin congue libero nibh, ac eleifend felis bibendum vitae. Vivamus aliquam risus dolor, ut posuere dolor laoreet nec.
The “text-lg” is 1.125rem (18px) and is default body text-size for the theme.
Leaving the size set to “Default” instead of selecting 1.125 will also output as 1.125rem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula facilisis mauris, fermentum vulputate libero placerat quis. Nullam sapien lorem, luctus in odio ut, rhoncus ultrices eros. Aliquam non nunc ac ante condimentum facilisis vitae in metus. Maecenas ipsum orci, venenatis at tellus nec, rutrum tincidunt ligula. Praesent vestibulum nisl vitae tincidunt cursus. Quisque vel est pulvinar ex ornare volutpat quis eu lectus. In ipsum ante, congue non lacus ut, ultricies mollis lorem. Etiam varius urna a lectus lacinia efficitur. Sed sed purus placerat ipsum molestie tincidunt. Sed venenatis viverra malesuada. Mauris nisi odio, tincidunt sed fermentum non, dictum ac enim.
Nulla sed sodales nibh, eu faucibus velit. Aliquam faucibus ligula diam, et posuere lorem ultricies quis. Sed porta, eros id tempus volutpat, felis nunc feugiat augue, id dictum lectus massa quis ipsum. Proin imperdiet lectus dolor, at condimentum tellus tempus id. Duis laoreet dictum augue sed vehicula. Donec sit amet lacinia elit, eu posuere felis. Proin congue libero nibh, ac eleifend felis bibendum vitae. Vivamus aliquam risus dolor, ut posuere dolor laoreet nec. Mauris consequat suscipit magna vel efficitur. Maecenas venenatis tincidunt vestibulum. Suspendisse potenti. Phasellus eget lobortis nunc.
The “text-sm” is 0.875rem (14px) and is typically used for disclaimers.
For accessibility, it is not recommended to go below 14px when using the Minion Pro font family.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula facilisis mauris, fermentum vulputate libero placerat quis. Nullam sapien lorem, luctus in odio ut, rhoncus ultrices eros. Aliquam non nunc ac ante condimentum facilisis vitae in metus. Maecenas ipsum orci, venenatis at tellus nec, rutrum tincidunt ligula. Praesent vestibulum nisl vitae tincidunt cursus. Quisque vel est pulvinar ex ornare volutpat quis eu lectus. In ipsum ante, congue non lacus ut, ultricies mollis lorem. Etiam varius urna a lectus lacinia efficitur. Sed sed purus placerat ipsum molestie tincidunt. Sed venenatis viverra malesuada. Mauris nisi odio, tincidunt sed fermentum non, dictum ac enim.
Nulla sed sodales nibh, eu faucibus velit. Aliquam faucibus ligula diam, et posuere lorem ultricies quis. Sed porta, eros id tempus volutpat, felis nunc feugiat augue, id dictum lectus massa quis ipsum. Proin imperdiet lectus dolor, at condimentum tellus tempus id. Duis laoreet dictum augue sed vehicula. Donec sit amet lacinia elit, eu posuere felis. Proin congue libero nibh, ac eleifend felis bibendum vitae. Vivamus aliquam risus dolor, ut posuere dolor laoreet nec. Mauris consequat suscipit magna vel efficitur. Maecenas venenatis tincidunt vestibulum. Suspendisse potenti. Phasellus eget lobortis nunc.