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.
Orange
RGB 245 / 126 / 37
#f57e25
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)
| Styles | Font Name | Font Size (D / M) | Line Height (D / M) | Letter Spacing (D / M) | CSS Class |
|---|---|---|---|---|---|
| 2XL Title | Phonk | 54px / 36px | 74px / 36px | 2px / 2px | text-title-2xl |
| XL Title | Phonk | 36px / 26px | 42px / 30px | 2px / 2px | text-title-xl |
| Large Title | Phonk | 22px | 32px | 0px | text-title-lg |
| Title | Readex Pro | 20px | 28px | 0px | text-title |
| Default | Readex Pro | 14px | 26px | 0px | N/A (default) |
| Small Title | Readex Pro | 12px | 15px | 1px | text-title-sm |