# Patch Brand Identity

A complete profile of **Patch**'s visual system — colors, typography, components, and personality — extracted from [https://www.patch.io/](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.

```json
{
  "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"
  }
}
```