Topline Pro Brand Identity

A complete profile of Topline Pro's visual system — colors, typography, components, and personality — extracted from Topline Pro. Built for designers, agents, and AI tools.

Color Palette

Brand palette extracted from Topline Pro.

• primary: #3B496A (rgb(59, 73, 106))
• secondary: #020B2C (rgb(2, 11, 44))
• accent: #E64D3D (rgb(230, 77, 61))
• background: #FFFFFF (rgb(255, 255, 255))
• textPrimary: #E64D3D (rgb(230, 77, 61))
• link: #E64D3D (rgb(230, 77, 61))

Typography

Each font links to its Google Fonts page where available.

• primary: Inter
• heading: Schibsted Grotesk
  Schibsted Grotesk →

Visual Assets

UI Components

Live previews rendered using Topline Pro's actual button styles.

• Input:
  background: #FFFFFF
textColor: #050D21
borderColor: null
borderRadius: 1920px
shadow: none

• Button Primary: background: #E64D3D
textColor: #FFFFFF
borderColor: #E64D3D
borderRadius: 1920px
shadow: none

• Button Secondary: background: transparent
textColor: #3B496A
borderColor: #3B496A
borderRadius: 1920px
shadow: none

Brand Personality

• Tone: professional
• Energy: medium
• Audience: service professionals and businesses looking for AI solutions

Frequently Asked Questions

What is Topline Pro's primary brand color?
Topline Pro's primary brand color is #3B496A. It anchors the visual identity across their website, product UI, and marketing materials.

What accent color does Topline Pro use?
Topline Pro uses #E64D3D as an accent color, typically applied to interactive elements like links, buttons, and call-to-action emphasis.

What font does Topline Pro use?
Topline Pro uses Inter for body text and Schibsted Grotesk for headings. Fonts were detected on Topline Pro as part of their live design system.

Does Topline Pro use a light or dark theme?
Topline Pro's primary site uses a light color scheme, with a background of #FFFFFF.

Where can I find Topline Pro's logo?
Topline Pro's logo is available directly on their site (Topline Pro). The current logo URL is included in the machine-readable JSON profile.

Machine-Readable Profile

Direct endpoints for agents, designers, and tooling. No login or auth required.

{
  "colorScheme": "light",
  "fonts": [
    {
      "family": "Schibsted Grotesk",
      "role": "heading"
    },
    {
      "family": "Inter",
      "role": "body"
    }
  ],
  "colors": {
    "primary": "#3B496A",
    "secondary": "#020B2C",
    "accent": "#E64D3D",
    "background": "#FFFFFF",
    "textPrimary": "#E64D3D",
    "link": "#E64D3D"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Inter",
      "heading": "Schibsted Grotesk"
    },
    "fontStacks": {
      "heading": [
        "Schibsted Grotesk",
        "sans-serif"
      ],
      "body": [
        "Inter",
        "sans-serif"
      ],
      "paragraph": [
        "Inter",
        "sans-serif"
      ]
    },
    "fontSizes": {
      "h1": "72px",
      "h2": "56px",
      "body": "14.08px"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "8px"
  },
  "components": {
    "input": {
      "background": "#FFFFFF",
      "textColor": "#050D21",
      "borderColor": null,
      "borderRadius": "1920px",
      "borderRadiusCorners": {
        "topLeft": "1920px",
        "topRight": "0px",
        "bottomRight": "0px",
        "bottomLeft": "1920px"
      },
      "shadow": "none"
    },
    "buttonPrimary": {
      "background": "#E64D3D",
      "textColor": "#FFFFFF",
      "borderColor": "#E64D3D",
      "borderRadius": "1920px",
      "borderRadiusCorners": {
        "topLeft": "1920px",
        "topRight": "1920px",
        "bottomRight": "1920px",
        "bottomLeft": "1920px"
      },
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "transparent",
      "textColor": "#3B496A",
      "borderColor": "#3B496A",
      "borderRadius": "1920px",
      "borderRadiusCorners": {
        "topLeft": "1920px",
        "topRight": "1920px",
        "bottomRight": "1920px",
        "bottomLeft": "1920px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "https://cdn.prod.website-files.com/680ba7a826d945624429b57a/68111e9fb60ee3ea23bdf827_logo-dark.webp",
    "favicon": "https://cdn.prod.website-files.com/680ba7a826d945624429b57a/68aa13bfcdfcfa959599fa89_Favicon.png",
    "ogImage": "https://cdn.prod.website-files.com/680ba7a826d945624429b57a/689dc13f82c9b89ea95858db_Screenshot%202025-08-14%20at%206.57.54%E2%80%AFAM.png"
  },
  "personality": {
    "tone": "professional",
    "energy": "medium",
    "targetAudience": "service professionals and businesses looking for AI solutions"
  }
}