Apron Brand Identity

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

Quick Facts

Color Palette

• primary: #FBEFAF
• accent: #FFD801
• background: #FFFEF9
• textPrimary: #000000
• link: #FFD801

Typography

• primary: DM Sans — Google Fonts
• heading: DM Sans — Google Fonts

Visual Assets

• Logo: %20!important%3B%22%2F%3E%3C%2Fsvg%3E)
• Favicon:
• Social card (og:image):

UI Components

• buttonPrimary: background=#FFD801, textColor=#000000, borderRadius=9999px, shadow=none
• buttonSecondary: background=#FFFEF9, textColor=#000000, borderColor=#CCCBC7, borderRadius=9999px, shadow=none

Brand Personality

Tone: professional · Energy: medium · Audience: businesses looking to automate financial processes

Apron Brand in the Wild

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

• What exactly is All-in-one Accounts Payable? | by Bogdan Uzbekov | Apron
  • Image:
  • Source: Blog
• Apron blog
  • Image:
  • Source: Blog
• Helping clients pay HMRC and suppliers by credit card · Compose Blog Template
  • Image:
  • Source: Blog
• Pay Suppliers by Card Even If They Don't Accept It | Apron
  • Image:
  • Source: Link

Working with these fonts

Not found on Google Fonts? Instructions to follow if you have permission to use the fonts:

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font".
3. Hard-reload the page and click around.
4. For each captured font URL: right-click → Save As to download the file locally.
5. View the page's CSS using DevTools and copy out the matching @font-face declarations.

Programmatic alternative: load the URL with Playwright or Puppeteer.

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": "DM Sans",
   "role": "body"
  },
  {
   "family": "DM Mono",
   "role": "monospace"
  },
  {
   "family": "Champ",
   "role": "unknown"
  }
 ],
 "colors": {
  "primary": "#FBEFAF",
  "accent": "#FFD801",
  "background": "#FFFEF9",
  "textPrimary": "#000000",
  "link": "#FFD801"
 },
 "typography": {
  "fontFamilies": {
   "primary": "DM Sans",
   "heading": "DM Sans"
  },
  "fontStacks": {
   "heading": [
    "Champ",
    "Arial",
    "sans-serif"
   ],
   "body": [
    "sans-serif"
   ],
   "paragraph": [
    "DM Sans",
    "sans-serif"
   ]
  },
  "fontSizes": {
   "h1": "72px",
   "h2": "72px",
   "body": "20px"
  }
 },
 "spacing": {
  "baseUnit": 4,
  "borderRadius": "0px"
 },
 "components": {
  "buttonPrimary": {
   "background": "#FFD801",
   "textColor": "#000000",
   "borderRadius": "9999px",
   "borderRadiusCorners": {
    "topLeft": "9999px",
    "topRight": "9999px",
    "bottomRight": "9999px",
    "bottomLeft": "9999px"
   },
   "shadow": "none"
  },
  "buttonSecondary": {
   "background": "#FFFEF9",
   "textColor": "#000000",
   "borderColor": "#CCCBC7",
   "borderRadius": "9999px",
   "borderRadiusCorners": {
    "topLeft": "9999px",
    "topRight": "9999px",
    "bottomRight": "9999px",
    "bottomLeft": "9999px"
   },
   "shadow": "none"
  }
 },
 "images": {
  "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22123%22%20height%3D%2232%22%20viewBox%3D%220%200%20123%2032%22%20fill%3D%22none%22%20aria-label%3D%22Apron%20Payments%22%20data-fc-idx%3D%220%22%3E%3Cpath%20d%3D%22M112.949%2013.62C112.949%2019.01%20111.754%2022.86%20111.333%2024.47H103.531V24.12C104.515%2021.88%20105.639%2018.87%20105.639%2015.79C105.639%2012.36%20104.374%2010.54%20102.125%2010.54C99.0326%2010.54%2098.0486%2014.46%2098.0486%2018.45V24.47H90.3171V2.42H98.1891L96.1509%2012.29H97.2051C98.9623%203.12%20102.336%202%20105.569%202C111.122%202%20112.949%207.6%20112.949%2013.62ZM89.1926%2013.48C89.1926%2019.78%2084.5537%2024.89%2076.9629%2024.89C69.4423%2024.89%2064.7331%2019.78%2064.7331%2013.48C64.7331%207.18%2069.5126%202%2076.9629%202C84.3429%202%2089.1926%207.18%2089.1926%2013.48ZM82.2343%2013.48C82.2343%2010.68%2079.8446%209.28%2076.9629%209.28C74.0811%209.28%2071.6914%2010.61%2071.6914%2013.48C71.6914%2016.28%2074.0109%2017.68%2076.9629%2017.68C79.9149%2017.75%2082.2343%2016.35%2082.2343%2013.48ZM31.0663%2030H23.124V2.42H31.3474L29.4497%209.98H30.4337C31.4177%204.59%2034.2994%202%2038.1651%202C43.8583%202%2047.232%207.04%2047.232%2013.41C47.232%2019.78%2043.8583%2024.89%2038.1651%2024.89C33.8777%2024.89%2030.4337%2022.51%2030.2229%2016.21H29.3091L31.0663%2030ZM40.0629%2013.27C40.0629%2010.47%2038.0246%209.07%2035.3537%209.07C32.7531%209.07%2030.6446%2010.4%2030.6446%2013.27C30.6446%2016.14%2032.6829%2017.47%2035.3537%2017.47C38.0246%2017.54%2040.0629%2016.21%2040.0629%2013.27ZM55.8771%2012.29H54.8931L56.6503%202.42H48.7783V24.47H56.5097V18.1C56.5097%2012.71%2058.2669%2010.26%2060.9377%2010.26C61.992%2010.26%2062.6949%2010.47%2063.6086%2010.96H64.0303V2C58.7589%202%2057.0017%204.52%2055.8771%2012.29ZM118.502%2016.63C115.831%2016.63%20114.003%2018.52%20114.003%2020.76C114.003%2023%20115.761%2024.89%20118.502%2024.89C121.243%2024.89%20123%2023%20123%2020.76C123%2018.52%20121.173%2016.63%20118.502%2016.63ZM21.7886%2024.05V24.47H13.3543V24.12C15.9549%2022.02%2016.8686%2018.8%2016.5171%2016H15.744C16.1657%2020.55%2012.7217%2024.96%207.02857%2024.96C2.74114%2024.96%200%2021.88%200%2018.73C0%2014.46%204.00629%2012.01%208.99657%2012.01C11.1754%2012.01%2013.6354%2012.64%2015.252%2013.76C15.5331%2010.82%2013.284%209%2010.332%209C6.11486%209%203.16286%2012.5%203.16286%2012.5H2.67086L0.140571%205.64C2.53029%203.54%205.97429%202%2010.6834%202C16.3766%202%2021.2263%204.94%2021.2263%209.07C21.2263%2012.01%2019.2583%2013.83%2016.8686%2014.04V14.74C18.6257%2015.86%2021.7886%2018.38%2021.7886%2024.05ZM15.0411%2014.88C14.6194%2014.6%2013.0029%2013.9%2011.4566%2013.9C9.48857%2013.9%208.15314%2014.95%208.15314%2016.56C8.15314%2018.03%209.27771%2019.08%2010.7537%2019.08C12.8623%2019.01%2014.4789%2017.33%2015.0411%2014.88Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3C%2Fsvg%3E",  
 "favicon": "https://getapron.com/favicon.svg",
 "ogImage": "/og-image.jpg",
 "logoHref": "/",
 "logoAlt": "Apron Payments"
 },
 "__llm_logo_reasoning": {
 "selectedIndex": 0,
 "reasoning": "Selected #0 because it is visible, medium-sized, and links to the homepage, matching the brand 'Apron' inferred from the URL and page title.",
 "confidence": 0.9,
 "source": "llm"
 },
 "__llm_button_reasoning": {
 "primary": {
 "index": 0,
 "text": "Get started",
 "reasoning": "Button #0 is selected as the primary CTA because it uses a vibrant brand color (#FFD801) and has action-oriented text ('Get started'), which is typical for primary CTAs."
 },
 "secondary": {
 "index": 3,
 "text": "Learn more",
 "reasoning": "Button #3 is selected as the secondary button because it has a different background color (#FFFEF9) and offers a less prominent action ('Learn more'), suitable for a secondary CTA."
 },
 "confidence": 0.95
 },
 "personality": {
 "tone": "professional",
 "energy": "medium",
 "targetAudience": "businesses looking to automate financial processes"
 },
 "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 visible, medium-sized, and links to the homepage, matching the brand 'Apron' inferred from the URL and page title.",
 "confidence": 0.9
 }
 },
 "buttonClassification": {
 "llmCalled": true,
 "llmSucceeded": true
 }
 }
}