Skip to content

Style Guide

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.

Small Icons

These icons were designed at 24px with a 2.5px stroke weight. These should only be exported as SVGs.

Large Icons

These icons were designed at 80px with a 5px stroke weight. These should only be exported as SVGs.

02 – Colors

Primary Colors

These were chosen to embody the core of the brand 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.

Readex Pro – Light

Readex Pro – Regular

Readex Pro – SemiBold

Readex Pro – Bold

font-readex (default)

PHONK – REGULAR

font-phonk

Heading Styles

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)

StylesFont NameFont Size
(D / M)
Line Height
(D / M)
Letter Spacing
(D / M)
CSS Class
2XL TitlePhonk54px / 36px74px / 36px2px / 2pxtext-title-2xl
XL TitlePhonk36px / 26px42px / 30px2px / 2pxtext-title-xl
Large TitlePhonk22px32px0pxtext-title-lg
TitleReadex Pro20px28px0pxtext-title
DefaultReadex Pro14px26px0pxN/A (default)
Small TitleReadex Pro12px15px1pxtext-title-sm
Note: The table above is using the “Stripes” style. The “Default” style will output with borders around all table cells.

04 – Input Fields

Form Fields

Checkboxes

Radio Buttons

05 – Buttons

Primary Button

Secondary Button

Tertiary Button

Pill Button

Pagination

06 – Other UI

Shadows

Product Images

Nav Card

Blog Info

Download Components

Blog Cards

Location Cards