Firezone Brand Identity

A complete profile of Firezone's visual system — colors, typography, components, and personality.

Quick Facts

Color Palette

• primary: #FF7300
• secondary: #D4D0AB
• accent: #FF7300
• background: #050505
• textPrimary: #050505
• link: #4C3E33

Typography

• primary: Source Sans 3 — https://fonts.google.com/specimen/Source+Sans+3
• heading: Source Sans 3 — https://fonts.google.com/specimen/Source+Sans+3

Visual Assets

• Logo:
• Favicon:

UI Components

• buttonPrimary: background=#FF7300, textColor=#FFFFFF, borderRadius=4px
• buttonSecondary: background=#050505, textColor=#F8F7F7, borderRadius=0px

Brand Personality

Tone: modern · Energy: medium · Audience: tech-savvy professionals

Firezone Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

• Okta Authentication • Firezone Docs
  • Image:
  • Source: Firezone Docs
• Blog • Firezone
  • Image:
  • Source: Firezone Blog
• Use Cases: Secure DNS • Firezone Docs
  • Image:
  • Source: Secure DNS
• Use Cases: Private Web App Access • Firezone Docs
  • Image:
  • Source: Private Web App Access
• Blog • Firezone
  • Image:
  • Source: Firezone Blog
• Use Cases: NAT Gateway • Firezone Docs
  • Image:
  • Source: NAT Gateway

Working with these Fonts

Not found on Google Fonts? Instructions for using the fonts:

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font".
3. Capture font URLs and download them.
4. View the page's CSS and rewrite @font-face declarations.

Only do this if you have permission to use the brand assets.

Machine-Readable Profile

{
 "colorScheme": "light",
 "fonts": [
  {
   "family": "Source Sans 3",
   "role": "body"
  },
  {
   "family": "Manrope",
   "role": "unknown"
  }
 ],
 "colors": {
  "primary": "#FF7300",
  "secondary": "#D4D0AB",
  "accent": "#FF7300",
  "background": "#050505",
  "textPrimary": "#050505",
  "link": "#4C3E33"
 },
 "typography": {
  "fontFamilies": {
   "primary": "Source Sans 3",
   "heading": "Source Sans 3"
  },
  "fontStacks": {
   "heading": ["Manrope"],
   "body": ["Source Sans 3"],
   "paragraph": ["Source Sans 3"]
  },
  "fontSizes": {
   "h1": "72px",
   "h2": "14px",
   "body": "20px"
  }
 },
 "spacing": {
  "baseUnit": 4,
  "borderRadius": "0px"
 },
 "components": {
  "buttonPrimary": {
   "background": "#FF7300",
   "textColor": "#FFFFFF",
   "borderRadius": "4px",
   "borderRadiusCorners": {
    "topLeft": "4px",
    "topRight": "4px",
    "bottomRight": "4px",
    "bottomLeft": "4px"
   },
   "shadow": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.43081 0.0723725 0.0872615) 0px 10px 15px -3px, oklab(0.43081 0.0723725 0.0872615) 0px 4px 6px -4px"
  },
  "buttonSecondary": {
   "background": "#050505",
   "textColor": "#F8F7F7",
   "borderRadius": "0px",
   "borderRadiusCorners": {
    "topLeft": "0px",
    "topRight": "0px",
    "bottomRight": "0px",
    "bottomLeft": "0px"
   },
   "shadow": "none"
  }
 },
 "images": {
  "logo": "https://www.firezone.dev/_next/image?url=%2Fimages%2Flogo-text-dark.svg&w=384&q=75",
  "favicon": "https://www.firezone.dev/favicon.ico?476d57313e36f8bd",
  "ogImage": null,
  "logoHref": "/",
  "logoAlt": "Firezone Logo"
 },
 "personality": {
  "tone": "modern",
  "energy": "medium",
  "targetAudience": "tech-savvy professionals"
 },
 "designSystem": {
  "framework": "tailwind",
  "componentLibrary": ""
 },
 "confidence": {
  "buttons": 0.95,
  "colors": 0.9,
  "overall": 0.925
 }
}