Logo
The Helmet logo is our primary brand mark. Use it consistently across all applications.
Clear Space
Maintain a minimum clear space around the logo equal to the height of the helmet icon.
Minimum Size
The logo should never appear smaller than 24px in height for digital applications.
Colors
Our color palette is designed for dark-first interfaces with high contrast and accessibility.
Primary Colors
Teal #00c4b4 RGB 0, 196, 180
Teal Light #00e0cf RGB 0, 224, 207
Teal Dark #00a89a RGB 0, 168, 154
Purple
Purple #6b4cd8 RGB 107, 76, 216
Purple Light #8b70e5 RGB 139, 112, 229
Purple Dark #5638c8 RGB 86, 56, 200
Gold
Gold #ffb84d RGB 255, 184, 77
Gold Light #ffca7a RGB 255, 202, 122
Gold Dark #e59d35 RGB 229, 157, 53
Red
Red #ff5252 RGB 255, 82, 82
Red Light #ff7a7a RGB 255, 122, 122
Red Dark #e04646 RGB 224, 70, 70
Navy
Navy #0a2540 RGB 10, 37, 64
Navy Light #1d3754 RGB 29, 55, 84
Navy Dark #051a2e RGB 5, 26, 46
Gray
Gray Light #f5f7fa RGB 245, 247, 250
Gray #e9edf2 RGB 233, 237, 242
Gray Medium #8492a6 RGB 132, 146, 166
Gray Dark #3c4858 RGB 60, 72, 88
Black
Black #000000 RGB 0, 0, 0
Typography
We use a combination of Inter for body text and Fira Code for technical elements.
Primary Typeface
Inter
Used for headings, body text, and UI elements. Clean, modern, and highly readable.
Regular 400 Medium 500 Semibold 600 Bold 700 Extrabold 800 Black 900
Monospace Typeface
Fira Code
Used for code, technical labels, and accent text. Features programming ligatures.
Light 300 Regular 400 Medium 500 Bold 700
Type Scale
Display Aa 4rem / 900
H1 Aa 3rem / 800
H2 Aa 2rem / 700
H3 Aa 1.5rem / 600
Body Aa 1rem / 400
Small Aa 0.875rem / 400
Usage Guidelines
Follow these guidelines to maintain brand consistency across all touchpoints.
Do
- Use the logo on dark backgrounds when possible
- Maintain the minimum clear space around the logo
- Use brand colors consistently
- Keep the logo proportions intact
Don't
- Stretch or distort the logo
- Change the logo colors arbitrarily
- Add effects like shadows or gradients to the logo
- Place the logo on busy or low-contrast backgrounds