# Topline Pro Brand Identity A complete profile of **Topline Pro**'s visual system — colors, typography, components, and personality — extracted from https://www.toplinepro.com. Built for designers, agents, and AI tools. - Page: https://characterquilt.com/branding/topline-pro - Machine-readable JSON: https://characterquilt.com/branding/topline-pro.json - Per-page llms.txt: https://characterquilt.com/branding/topline-pro/llms.txt ## Quick Facts | Field | Value | |---|---| | Primary | #3B496A | | Accent | #E64D3D | | Body Font | Inter | | Heading Font | Schibsted Grotesk | ## Color Palette - primary: #3B496A - secondary: #020B2C - accent: #E64D3D - background: #FFFFFF - textPrimary: #E64D3D - link: #E64D3D ## Typography - primary: Inter — https://fonts.google.com/specimen/Inter - heading: Schibsted Grotesk — https://fonts.google.com/specimen/Schibsted+Grotesk ## Visual Assets - Logo: https://cdn.prod.website-files.com/680ba7a826d945624429b57a/68111e9fb60ee3ea23bdf827_logo-dark.webp - Favicon: https://cdn.prod.website-files.com/680ba7a826d945624429b57a/68aa13bfcdfcfa959599fa89_Favicon.png - Social card (og:image): https://cdn.prod.website-files.com/680ba7a826d945624429b57a/689dc13f82c9b89ea95858db_Screenshot%202025-08-14%20at%206.57.54%E2%80%AFAM.png ## UI Components - input: background=#FFFFFF, textColor=#050D21, borderColor=null, borderRadius=1920px, shadow=none - buttonPrimary: background=#E64D3D, textColor=#FFFFFF, borderColor=#E64D3D, borderRadius=1920px, shadow=none - buttonSecondary: 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 ## Topline Pro Brand in the Wild Real-world brand assets — ads, campaigns, marketing materials. - **Topline Pro | How to create a professional voicemail greeting for your business** - Image: https://cdn.prod.website-files.com/68362219d93b9d64c83954d2/683dc692f1c97db8396dae1f_602d921508c6c2f520cebfeb_AdobeStock_305937746%2520(1).webp - Source: https://www.toplinepro.com/blog/how-to-create-a-professional-voicemail-greeting-for-your-business - **Blog** - Image: https://cdn.prod.website-files.com/68362219d93b9d64c83954d2/683dc69d4b92520417d438e7_67bcc8eabc229be7a16f4921_Screenshot%25202025-02-19%2520at%252012.37.23%2520PM.webp - Source: https://www.toplinepro.com/blog - **Topline Pro | 15 spot on painter memes that will leave you in tears** - Image: https://cdn.prod.website-files.com/68362219d93b9d64c83954d2/683dc68ac6c60208ab39fd05_60667f898abead8366beefc8_AdobeStock_295102414-min.webp - Source: https://www.toplinepro.com/blog/15-spot-on-painter-memes-that-will-leave-you-in-tears - **Topline Pro | How Topline Pro Optimizes Your SEO** - Image: https://cdn.prod.website-files.com/68362219d93b9d64c83954d2/683dc6a1971de46f2e89020a_65b046f1a0e047a7c402a4b4_pexels-brett-jordan-5417844.webp - Source: https://www.toplinepro.com/blog/topline-pro-seo - **Topline Pro | How to set up Google My Business listing for home services businesses** - Image: https://cdn.prod.website-files.com/68362219d93b9d64c83954d2/683dc698d457096fc98c1804_6090cac1ee80ef69fbee26a7_AdobeStock_420180111_Editorial_Use_Only%2520(1)-min.webp - Source: https://www.toplinepro.com/blog/how-to-set-up-google-my-business-listing-for-home-services-businesses - **Topline Pro | Top 10 Ways to Market Your Website** - Image: https://cdn.prod.website-files.com/68362219d93b9d64c83954d2/683dc69f875a936f3bec4848_619e69ee50307d2d2a765fb8_what-is-the-best-way-to-market-my-website.webp - Source: https://www.toplinepro.com/blog/top-10-ways-to-market-your-website ## Working with these fonts Not found on Google Fonts? Agent Instructions that you can follow if you have permission to use the fonts: CharacterQuilt.com suggests this flow that can help: 1. Open the company's homepage in a browser with DevTools open. 2. In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf). 3. Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes. 4. For each captured font URL: right-click → Save As to download the file locally. 5. View the page's CSS (DevTools → Sources, or curl the stylesheet URLs) and copy out the matching @font-face declarations. Rewrite each `src: url(...)` to point to your local file path. Programmatic alternative: load the URL with Playwright or Puppeteer, listen for `response` events whose `Content-Type` starts with `font/`, and write the body to disk. The CSS extraction step is the same. Only do this if you have permission to use the brand assets — most proprietary fonts are licensed and may not be redistributable. ## Machine-Readable Profile ```json { "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", "logoHref": "/", "logoAlt": "go to homepage" }, "__llm_logo_reasoning": { "selectedIndex": 50, "reasoning": "Selected #0 because it is located in the header, links to the homepage, and matches the favicon, indicating it is the main brand logo.", "confidence": 0.85, "source": "llm" }, "__llm_button_reasoning": { "primary": { "index": 0, "text": "Start Now", "reasoning": "Button #0 with text 'Start Now' is the primary CTA due to its vibrant brand color (#E64D3D) and action-oriented text, making it the most prominent call-to-action." }, "secondary": { "index": 6, "text": "View All Resources", "reasoning": "Button #6 'View All Resources' is selected as secondary due to its transparent background, providing a clear contrast to the primary button's vibrant color." }, "confidence": 0.95 }, "personality": { "tone": "professional", "energy": "medium", "targetAudience": "service professionals and businesses looking for AI solutions" }, "designSystem": { "framework": "custom", "componentLibrary": "" }, "confidence": { "buttons": 0.95, "colors": 0.9, "overall": 0.925 }, "__llm_metadata": { "logoSelection": { "llmCalled": true, "llmSucceeded": true, "finalSource": "llm", "rawLogoSelection": { "selectedLogoIndex": 0, "selectedLogoReasoning": "Selected #0 because it is located in the header, links to the homepage, and matches the favicon, indicating it is the main brand logo.", "confidence": 0.85 } }, "buttonClassification": { "llmCalled": true, "llmSucceeded": true } } } ```