Patch Brand Identity

A complete profile of Patch's visual system — colors, typography, components, and personality — extracted from https://www.patch.io/. Built for designers, agents, and AI tools.

Color Palette

Brand palette extracted from https://www.patch.io/

• primary: #EA642B
• rgb: (234, 100, 43)
• secondary: #EDF8FF
• rgb: (237, 248, 255)
• accent: #EA642B
• rgb: (234, 100, 43)
• background: #FFFFFF
• rgb: (255, 255, 255)
• textPrimary: #161814
• rgb: (22, 24, 20)
• link: #B2BA9B
• rgb: (178, 186, 155)

Typography

Each font links to its Google Fonts page where available.

• primary font: Muoto
• heading font: Muoto

Visual Assets

Logo

Favicon

Social Card

UI Components

Live previews rendered using Patch's actual button styles.

• Input:

  • background: #282B24
  • textColor: #FFFFFF
  • borderColor: null
  • borderRadius: 9.35714px
  • shadow: rgb(40, 43, 36) 0px 0px 0px 1px inset

• Button Primary:

  • background: #EA642B
  • textColor: #FFFFFF
  • borderColor: #EA642B
  • borderRadius: 9.35714px
  • shadow: none

• Button Secondary:

  • background: transparent
  • textColor: #FFFFFF
  • borderColor: #FFFFFF
  • borderRadius: 9.35714px
  • shadow: none

Brand Personality

• Tone: modern
• Energy: medium
• Audience: businesses and organizations focused on climate action

Frequently Asked Questions

• What is Patch's primary brand color?
  Patch's primary brand color is #EA642B. It anchors the visual identity across their website, product UI, and marketing materials.

• What font does Patch use?
  Patch uses Muoto as the primary typeface across body and headings.

• Does Patch use a light or dark theme?
  Patch's primary site uses a light color scheme, with a background of #FFFFFF.

• Where can I find Patch's logo?
  Patch's logo is available directly on their site (https://www.patch.io/). The current logo URL is included in the machine-readable JSON profile linked above.

• How was this brand profile generated?
  This profile was extracted from https://www.patch.io/ using the Firecrawl branding extraction API, which inspects the live page's CSS, fonts, color tokens, and component styles. It is not affiliated with or endorsed by Patch.

Machine-Readable Profile

Direct endpoints for agents, designers, and tooling. No login or auth required.

{
  "colorScheme": "light",
  "fonts": [
    {
      "family": "Muoto",
      "role": "unknown"
    }
  ],
  "colors": {
    "primary": "#EA642B",
    "secondary": "#EDF8FF",
    "accent": "#EA642B",
    "background": "#FFFFFF",
    "textPrimary": "#161814",
    "link": "#B2BA9B"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Muoto",
      "heading": "Muoto"
    },
    "fontStacks": {
      "heading": [
        "Muoto",
        "sans-serif"
      ],
      "body": [
        "Muoto",
        "sans-serif"
      ],
      "paragraph": [
        "Muoto",
        "sans-serif"
      ]
    },
    "fontSizes": {
      "h1": "121.643px",
      "h2": "121.643px",
      "body": "28.0714px"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "14px"
  },
  "components": {
    "input": {
      "background": "#282B24",
      "textColor": "#FFFFFF",
      "borderColor": null,
      "borderRadius": "9.35714px",
      "borderRadiusCorners": {
        "topLeft": "9.35714px",
        "topRight": "9.35714px",
        "bottomRight": "9.35714px",
        "bottomLeft": "9.35714px"
      },
      "shadow": "rgb(40, 43, 36) 0px 0px 0px 1px inset"
    },
    "buttonPrimary": {
      "background": "#EA642B",
      "textColor": "#FFFFFF",
      "borderColor": "#EA642B",
      "borderRadius": "9.35714px",
      "borderRadiusCorners": {
        "topLeft": "9.35714px",
        "topRight": "9.35714px",
        "bottomRight": "9.35714px",
        "bottomLeft": "9.35714px"
      },
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "transparent",
      "textColor": "#FFFFFF",
      "borderColor": "#FFFFFF",
      "borderRadius": "9.35714px",
      "borderRadiusCorners": {
        "topLeft": "9.35714px",
        "topRight": "9.35714px",
        "bottomRight": "9.35714px",
        "bottomLeft": "9.35714px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "https://cdn.prod.website-files.com/6357008bb1dd16395e9e2e70/67a3aa96c2bd17fa14da2a3e_Logo.svg",
    "favicon": "https://cdn.prod.website-files.com/6357008bb1dd16395e9e2e70/63669959befaed8552e565dd_Favicon.png",
    "ogImage": "https://cdn.prod.website-files.com/6357008bb1dd16395e9e2e70/6367cd29a0bbe11ac4a7d085_home%20opengraph.jpg",
    "logoHref": "/?r=0",
    "logoAlt": "homepage"
  }
}