Brand Guidelines

Resources and guidelines for using the Helmet Security brand

Logo

The Helmet logo is our primary brand mark. Use it consistently across all applications.

Helmet Logo
Primary Logo Dark Background
Download SVG
Helmet Logo
Primary Logo Light Background
Download SVG

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.

Wordmarks

Logo combined with the brand name. Use these when the brand entity needs to be explicitly identified.

Helmet Logo helmet
Short Wordmark Digital / App Header
Download SVG
Helmet Logo Helmet Security
Full Wordmark Corporate / Formal
Download SVG
Helmet Logo helmet
Stacked Wordmark Social / Square Format
Download SVG
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
Download Assets

Download all brand assets in a single package.

Download Logo (SVG)