llms.txt

Overlap Brand Identity

A complete profile of Overlap's visual system — colors, typography, components, and personality — extracted from https://overlap.ai/. Built for designers, agents, and AI tools.

Quick Facts

Field Value
Primary #0000EE
Accent #FF7701
Body Font Inter
Heading Font General Sans

Color Palette

Typography

Visual Assets

UI Components

Brand Personality

Tone: modern · Energy: medium · Audience: media professionals, podcasters, content creators

Overlap Brand in the Wild

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

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

{
 "colorScheme": "light",
 "fonts": [
  {
   "family": "Inter",
   "role": "body"
  },
  {
   "family": "General Sans",
   "role": "heading"
  },
  {
   "family": "Manrope",
   "role": "unknown"
  }
 ],
 "colors": {
  "primary": "#0000EE",
  "accent": "#FF7701",
  "background": "#F7F7F7",
  "textPrimary": "#000000",
  "link": "#FF7701"
 },
 "typography": {
  "fontFamilies": {
   "primary": "Inter",
   "heading": "General Sans"
  },
  "fontStacks": {
   "heading": [
    "General Sans",
    "sans-serif"
   ],
   "body": [
    "sans-serif"
   ],
   "paragraph": [
    "Inter",
    "sans-serif"
   ]
  },
  "fontSizes": {
   "h1": "36px",
   "h2": "44px",
   "body": "18px"
  }
 },
 "spacing": {
  "baseUnit": 4,
  "borderRadius": "15px"
 },
 "components": {
  "buttonPrimary": {
   "background": "#F7F7F7",
   "textColor": "#0000EE",
   "borderRadius": "12px",
   "borderRadiusCorners": {
    "topLeft": "12px",
    "topRight": "12px",
    "bottomRight": "12px",
    "bottomLeft": "12px"
   },
   "shadow": "none"
  },
  "buttonSecondary": {
   "background": "#000000",
   "textColor": "#0000EE",
   "borderRadius": "14px",
   "borderRadiusCorners": {
    "topLeft": "14px",
    "topRight": "14px",
    "bottomRight": "14px",
    "bottomLeft": "14px"
   },
   "shadow": "none"
  }
 },
 "images": {
  "logo": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%2522http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%2522%20xmlns%3Axlink%3D%2522http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%2522%20viewBox%3D%25220%200%20120%2031%2522%3E%3Cg%20transform%3D%2522translate(0.269%200.025)%2522%3E%3Cpath%20d%3D%2522M%200%200%20L%20119.44%200%20L%20119.44%2031%20L%200%2031%20Z%2522%20fill%3D%2522transparent%2522%3E%3C%2Fpath%3E%3Cpath%20d%3D%2522M%2013.73%2027.092%20C%207.385%2027.092%201.44%2022.467%201.44%2015.623%20C%201.44%208.467%206.523%203.092%2013.453%203.092%20C%2020.106%203.092%2025.496%208.311%2025.496%2014.936%20C%2025.496%2021.78%2020.26%2027.092%2013.73%2027.092%20Z%20M%2013.545%2021.905%20C%2017.149%2021.905%2019.675%2018.811%2019.675%2015.123%20C%2019.675%2011.498%2017.118%208.28%2013.453%208.28%20C%209.818%208.28%207.262%2011.373%207.262%2015.03%20C%207.262%2018.842%209.818%2021.905%2013.545%2021.905%20Z%20M%2034.823%2026.655%20L%2028.816%2026.655%20L%2021.208%203.53%20L%2027.184%203.53%20L%2031.773%2019.748%20L%2031.835%2019.748%20L%2036.455%203.53%20L%2042.461%203.53%20Z%20M%2053.355%2026.655%20L%2040.696%2026.655%20L%2040.696%203.53%20L%2053.355%203.53%20L%2053.355%208.717%20L%2046.271%208.717%20L%2046.271%2012.311%20L%2053.14%2012.311%20L%2053.14%2017.498%20L%2046.271%2017.498%20L%2046.271%2021.467%20L%2053.355%2021.467%20Z%20M%2071.754%2026.655%20L%2065.101%2026.655%20L%2059.833%2019.186%20L%2059.772%2019.186%20L%2059.772%2026.655%20L%2054.197%2026.655%20L%2054.197%203.53%20L%2061.651%203.53%20C%2064.023%203.53%2065.84%203.842%2067.041%204.373%20C%2069.505%205.498%2071.23%208.217%2071.23%2011.498%20C%2071.23%2015.155%2069.074%2018.155%2065.563%2018.78%20Z%20M%2059.772%2015.155%20L%2061.928%2015.155%20C%2064.238%2015.155%2065.655%2014.061%2065.655%2011.842%20C%2065.655%209.842%2064.177%208.717%2061.99%208.717%20L%2059.772%208.717%20Z%20M%2083.037%2026.655%20L%2070.47%2026.655%20L%2070.47%203.53%20L%2076.291%203.53%20L%2076.291%2021.467%20L%2083.037%2021.467%20Z%20M%20102.645%2026.655%20L%2096.33%2026.655%20L%2095.221%2023.311%20L%2087.305%2023.311%20L%2086.104%2026.655%20L%2079.851%2026.655%20L%2089%203.53%20L%2093.589%203.53%20Z%20M%2093.681%2018.623%20L%2091.34%2010.748%20L%2091.248%2010.717%20L%2088.907%2018.623%20Z%20M%20106.859%2026.655%20L%20101.284%2026.655%20L%20101.284%203.53%20L%20108.984%203.53%20C%20111.417%203.498%20113.235%203.842%20114.436%204.405%20C%20116.9%205.561%20118.44%208.217%20118.44%2011.342%20C%20118.44%2015.623%20116.099%2019.405%20109.569%2019.405%20L%20106.859%2019.405%20Z%20M%20106.859%2014.217%20L%20109.354%2014.217%20C%20111.695%2014.217%20112.865%2013.405%20112.865%2011.436%20C%20112.865%209.561%20111.726%208.717%20109.138%208.717%20L%20106.859%208.717%20Z%2522%20fill%3D%2522rgb(255%2C60%2C0)%2522%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E",
 "favicon": "https://framerusercontent.com/images/dFln6DTQJucfYRdIGkt8eKBii0.png",
 "ogImage": "https://framerusercontent.com/images/WyHRcPkmHX8C0CfH4IfyH9DI4FQ.png",
 "logoHref": "./"
},
 "__llm_logo_reasoning": {
 "selectedIndex": 1,
 "reasoning": "Selected #1 because it is visible, medium-sized, located in the header, and links to the homepage, which are strong indicators of the main brand logo.",
 "confidence": 0.95,
 "source": "llm"
},
 "__llm_button_reasoning": {
 "primary": {
 "index": 0,
 "text": "Book a Demo",
 "reasoning": "The 'Book a Demo' button is likely the primary CTA due to its action-oriented text, which suggests a direct engagement with the service. Although it has a light background, the text color is a vibrant blue, aligning with the brand's primary color."
 },
 "secondary": {
 "index": 1,
 "text": "See all articles",
 "reasoning": "The 'See all articles' button is chosen as secondary due to its different background color (dark) and less direct call-to-action compared to 'Book a Demo'."
 },
 "confidence": 0.9
},
 "personality": {
 "tone": "modern",
 "energy": "medium",
 "targetAudience": "media professionals, podcasters, content creators"
},
 "designSystem": {
 "framework": "custom",
 "componentLibrary": ""
},
 "confidence": {
 "buttons": 0.9,
 "colors": 0.9,
 "overall": 0.9
},
 "__llm_metadata": {
 "logoSelection": {
 "llmCalled": true,
 "llmSucceeded": true,
 "finalSource": "llm",
 "rawLogoSelection": {
 "selectedLogoIndex": 1,
 "selectedLogoReasoning": "Selected #1 because it is visible, medium-sized, located in the header, and links to the homepage, which are strong indicators of the main brand logo.",
 "confidence": 0.95
 }
 },
 "buttonClassification": {
 "llmCalled": true,
 "llmSucceeded": true
 }
 }
}