Surge Brand Identity

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

Quick Facts

Color Palette

• primary: #8E51FF
• secondary: #131333
• accent: #7F22FE
• background: #000000
• textPrimary: #000000
• link: #99A1AF

Typography

• primary: Arial — Google Fonts
• heading: Arial — Google Fonts

Visual Assets

• Logo:
• Favicon:
• Social card (og:image):

UI Components

• buttonPrimary: background=#7F22FE, textColor=#000000, borderRadius=6px
• buttonSecondary: background=transparent, textColor=#F3E8FF, borderColor=#8E51FF, borderRadius=6px

Brand Personality

Tone: modern · Energy: medium · Audience: developers

Surge Brand in the Wild

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

• Surge Status
  • Image:
  • Source: Surge Status
• PSRESTful | Sales Surge Report — Catch Demand Before Competitors Do
  • Image:
  • Source: PSRESTful
• Surge I 3D Landing Page - Awwwards Honorable Mention
  • Image:
  • Source: Awwwards
• Surge/Storm ads Late 90s : r/vintageads
  • Image:
  • Source: reddit
• Bombora Company Surge | Customer Resource Center
  • Image:
  • Source: Bombora
• Surge - App / SAAS / Software / Product Template
  • Image:
  • Source: ThemeForest

Machine-Readable Profile

{
 "colorScheme": "dark",
 "fonts": [
 {  
 "family": "Arial",
 "role": "body"
 }
 ],
 "colors": {
 "primary": "#8E51FF",
 "secondary": "#131333",
 "accent": "#7F22FE",
 "background": "#000000",
 "textPrimary": "#000000",
 "link": "#99A1AF"
 },
 "typography": {
 "fontFamilies": {
 "primary": "Arial",
 "heading": "Arial"
 },
 "fontStacks": {
 "heading": [
 "ui-sans-serif",
 "system-ui",
 "sans-serif",
 "Apple Color Emoji",
 "Segoe UI Emoji",
 "Segoe UI Symbol",
 "Noto Color Emoji"
 ],
 "body": [
 "ui-sans-serif",
 "system-ui",
 "sans-serif",
 "Apple Color Emoji",
 "Segoe UI Emoji",
 "Segoe UI Symbol",
 "Noto Color Emoji"
 ],
 "paragraph": [
 "ui-sans-serif",
 "system-ui",
 "sans-serif",
 "Apple Color Emoji",
 "Segoe UI Emoji",
 "Segoe UI Symbol",
 "Noto Color Emoji"
 ]
 },
 "fontSizes": {
 "h1": "60px",
 "h2": "48px",
 "body": "18px"
 }
 },
 "spacing": {
 "baseUnit": 4,
 "borderRadius": "0px"
 },
 "components": {
 "buttonPrimary": {
 "background": "#7F22FE",
 "textColor": "#000000",
 "borderRadius": "6px",
 "borderRadiusCorners": {
 "topLeft": "6px",
 "topRight": "6px",
 "bottomRight": "6px",
 "bottomLeft": "6px"
 },
 "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, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
 },
 "buttonSecondary": {
 "background": "transparent",
 "textColor": "#F3E8FF",
 "borderColor": "#8E51FF",
 "borderRadius": "6px",
 "borderRadiusCorners": {
 "topLeft": "6px",
 "topRight": "6px",
 "bottomRight": "6px",
 "bottomLeft": "6px"
 },
 "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.702 0.0730911 -0.16777 / 0.2) 0px 10px 15px -3px, oklab(0.702 0.0730911 -0.16777 / 0.2) 0px 4px 6px -4px"
 }
 },
 "images": {
 "logo": "data:image/svg+xml;utf8,%3Csvg...%3E",
 "favicon": "https://surge.app/favicon.svg",
 "ogImage": "https://surge.app/surge-preview.jpg",
 "logoHref": "/",
 "logoAlt": "Surge"
 }
}