distro.json

Distro Brand Identity

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

Quick Facts

Field Value
Primary #00356B
Accent #00356B
Body Font Work Sans
Heading Font Work Sans

Color Palette

Typography

Visual Assets

UI Components

Brand Personality

Tone: professional · Energy: medium · Audience: distributors and sales professionals

Distro 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": "Work Sans",
      "role": "body"
    },
    {
      "family": "Inter",
      "role": "unknown"
    }
  ],
  "colors": {
    "primary": "#00356B",
    "secondary": "#0000EE",
    "accent": "#00356B",
    "background": "#FFFFFF",
    "textPrimary": "#1C2024",
    "link": "#F0F7FF"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Work Sans",
      "heading": "Work Sans"
    },
    "fontStacks": {
      "heading": [
        "Work Sans",
        "sans-serif"
      ],
      "body": [
        "sans-serif"
      ],
      "paragraph": [
        "Work Sans",
        "sans-serif"
      ]
    },
    "fontSizes": {
      "h1": "62px",
      "h2": "60px",
      "body": "18px"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "20px"
  },
  "components": {
    "buttonPrimary": {
      "background": "#00356B",
      "textColor": "#0000EE",
      "borderRadius": "6px",
      "borderRadiusCorners": {
        "topLeft": "6px",
        "topRight": "6px",
        "bottomRight": "6px",
        "bottomLeft": "6px"
      },
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "#FFFFFF",
      "textColor": "#0000EE",
      "borderRadius": "6px",
      "borderRadiusCorners": {
        "topLeft": "6px",
        "topRight": "6px",
        "bottomRight": "6px",
        "bottomLeft": "6px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22width%3A100%25%3Bheight%3A100%25%3B%22%20viewBox%3D%220%200%20153%2022%22%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20data-fc-idx%3D%220%22%3E%3Csvg%20width%3D%22153%22%20height%3D%2222%22%20viewBox%3D%22-1%20-1%20153%2022%22%20fill%3D%22none%22%20id%3D%22svg-703009366_2315%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%203.03979V16.9598V19.5838H7.712H9.056H18.304C22.176%2019.5838%2025.344%2016.4478%2025.344%2012.5758V7.42379C25.344%203.55179%2022.176%200.383789%2018.304%200.383789H9.056H7.712H0V3.03979ZM9.056%2016.9598H7.712H2.624V3.03979H7.712H9.056H18.304C20.736%203.03979%2022.72%205.02379%2022.72%207.42379V12.5758C22.72%2014.9758%2020.736%2016.9598%2018.304%2016.9598H9.056ZM30.5%200.383789H33.124V19.5838H30.5V0.383789ZM43.69%203.03979H60.266V0.383789H43.69C43.05%200.383789%2042.41%200.511789%2041.834%200.735788C39.69%201.50379%2038.25%203.58379%2038.25%205.85579C38.25%208.86379%2040.682%2011.3278%2043.69%2011.3278H56.298H56.362C57.866%2011.3278%2059.114%2012.5758%2059.146%2014.1118V14.1438V14.1758C59.114%2015.7118%2057.866%2016.9598%2056.298%2016.9598H39.754V19.5838H56.298C56.938%2019.5838%2057.578%2019.4878%2058.186%2019.2638C60.33%2018.4958%2061.77%2016.4158%2061.77%2014.1438C61.77%2011.1358%2059.306%208.67179%2056.298%208.67179H43.69H43.658C42.122%208.67179%2040.906%207.42379%2040.874%205.88779V5.85579V5.82379C40.906%204.28779%2042.154%203.03979%2043.69%203.03979ZM89.9455%200.383789V3.03979H79.7695V19.5838H77.1135V3.03979H66.9375V0.383789H89.9455ZM116.118%206.39979C116.118%208.19179%20114.614%209.69579%20112.79%209.69579H104.886H104.054H97.7178H95.0938V12.3198V19.6158H97.7178V12.3198H104.054H104.886H109.654H110.582L115.606%2019.6158H118.998L113.91%2012.2238C113.942%2012.2238%20113.974%2012.2158%20114.006%2012.2078C114.038%2012.1998%20114.07%2012.1918%20114.102%2012.1918L114.23%2012.1598C116.886%2011.4878%20118.774%209.08779%20118.774%206.36779C118.774%203.07179%20116.086%200.415789%20112.79%200.383789H104.886H104.054H95.0938V3.03979H104.054H104.886H112.79C114.646%203.03979%20116.118%204.54379%20116.118%206.36779V6.39979ZM131.133%200.383789C127.261%200.383789%20124.125%203.55179%20124.125%207.42379V12.5758C124.125%2016.4478%20127.261%2019.5838%20131.133%2019.5838H133.885H136.637H137.949H140.125H143.453C147.325%2019.5838%20150.493%2016.4478%20150.493%2012.5758V7.42379C150.493%203.55179%20147.325%200.383789%20143.453%200.383789H139.997H137.949H136.637H135.165H131.133ZM133.885%2016.9598H131.133C128.733%2016.9598%20126.749%2014.9758%20126.749%2012.5758V7.42379C126.749%205.02379%20128.733%203.03979%20131.133%203.03979H135.165H136.637H137.949H139.997H143.453C145.885%203.03979%20147.837%205.02379%20147.837%207.42379V12.5758C147.837%2014.9758%20145.885%2016.9598%20143.453%2016.9598H140.125H137.949H136.637H133.885Z%22%20fill%3D%22%2300356B%22%2F%3E%0A%3C%2Fsvg%3E%3C%2Fsvg%3E",
    "favicon": "https://framerusercontent.com/images/HBO6j2JkPgTO3phUZvGsaLgWGxk.png",
    "ogImage": "https://framerusercontent.com/assets/cLol9ZNcKZn1ypJL25WydVNE.png",
    "logoHref": "./"
  }  
}