# 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

- primary: #0000EE
- accent: #FF7701
- background: #F7F7F7
- textPrimary: #000000
- link: #FF7701

## Typography

- primary: Inter — https://fonts.google.com/specimen/Inter
- heading: General Sans — https://fonts.google.com/specimen/General+Sans

## Visual Assets

- 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
- Social card (og:image): https://framerusercontent.com/images/WyHRcPkmHX8C0CfH4IfyH9DI4FQ.png

## UI Components

- buttonPrimary: background=#F7F7F7, textColor=#0000EE, borderRadius=12px, shadow=none
- buttonSecondary: background=#000000, textColor=#0000EE, borderRadius=14px, shadow=none

## 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.

- **$1.9M Funding Round - Squaro**
  - Image: https://framerusercontent.com/images/3aZKZ5yPeUo36qiZaLxJwSTAzsI.png?width=5333&height=3027
  - Source: https://overlap.ai/blog/seed-round
- **Overlap — #1 AI for Video Clipping**
  - Image: https://framerusercontent.com/images/kSiGht6g9ptPy2znGXZ56mNdyU.png?width=1528&height=768
  - Source: https://overlap.ai/blogs
- **What Is a Clipping Agent (And How to Build One That Runs Your Entire Distribution Pipeline) - Overlap — #1 AI for Video Clipping**
  - Image: https://framerusercontent.com/images/8IDAhsp61dvjee07sbUeB5t9A.jpg?width=3840&height=2160
  - Source: https://overlap.ai/blogs/what-is-a-clipping-agent-(and-how-to-build-one-that-runs-your-entire-distribution-pipeline)
- **Overlap — #1 AI for Video Clipping**
  - Image: https://framerusercontent.com/images/trHkwv5SjhclWEy58Ya7DkZyARs.png?width=1920&height=1080
  - Source: https://overlap.ai/blogs
- **Overlap — #1 AI for Video Clipping**
  - Image: https://framerusercontent.com/images/H9ha7pQ6XqIZe2eu85Aj28iMr1I.png?width=3840&height=2160
  - Source: https://overlap.ai/book
- **Overlap — #1 AI for Video Clipping**
  - Image: https://framerusercontent.com/images/Hzrpu8Qsbf8V2KeIPkjS7hyElE.png?width=2667&height=1514
  - Source: https://overlap.ai/blogs

## 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": "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
 }
 }
}
```