# May Mobility Brand Identity

A complete profile of **May Mobility**'s visual system — colors, typography, components, and personality — extracted from http://maymobility.com. Built for designers, agents, and AI tools.

- Page: https://characterquilt.com/branding/may-mobility
- Machine-readable JSON: https://characterquilt.com/branding/may-mobility.json
- Per-page llms.txt: https://characterquilt.com/branding/may-mobility/llms.txt

## Quick Facts

| Field | Value |
|---|---|
| Primary | #DBE3F9 |
| Accent | #F2F6FF |
| Body Font | Cerebri |
| Heading Font | Cerebri |

## Color Palette

- primary: #DBE3F9
- secondary: #101828
- accent: #F2F6FF
- background: #FFFFFF
- textPrimary: #0B2058
- link: #0B2058

## Typography

- primary: Cerebri — https://fonts.google.com/specimen/Cerebri
- heading: Cerebri — https://fonts.google.com/specimen/Cerebri

## Visual Assets

- Logo: data:image/svg+xml;utf8,%3Csvg%20class%3D%22block%20w-%5B13rem%5D%20aspect-%5B675%2F125%5D%20h-auto%20fill-white%20is-stuck%3Afill-green%20xl%3Aw-%5B15rem%5D%22%20width%3D%22675%22%20height%3D%22125%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20675%20125%22%20aria-hidden%3D%22true%22%20data-fc-idx%3D%220%22%3E%3Cpath%20d%3D%22M330%2035.6c-8.6%200-14.2%204.7-17%2010.8-3.1-6.8-9.1-10.8-16.5-10.8s-13.4%204.6-15.9%2010.4v-8.9h-4.8c-3.7%200-6.6%203-6.6%206.6V88h12.2V61c0-9.5%204.7-15.6%2011.4-15.6s10%205.2%2010%2014V88H315V61c0-9.5%204.7-15.6%2011.5-15.6s9.9%205.2%209.9%2014V88h12.2V57c0-13.3-7.7-21.5-18.6-21.5ZM386.2%2035.6c-14.8%200-27.2%2011.5-27.2%2027s12.4%2027.1%2027.2%2027.1%2027.3-11.7%2027.3-27.1-12.3-27-27.3-27Zm0%2043.4c-8.6%200-15.4-6.6-15.4-16.4s6.8-16.3%2015.4-16.3%2015.4%206.4%2015.4%2016.3S395.1%2079%20386.2%2079ZM452.4%2035.6c-4.7%200-8.8%201.2-12%203.3v10.2c2.5-1.9%205.7-2.9%209.5-2.9%209.4%200%2015.4%206.3%2015.4%2016.3s-6%2016.1-15.3%2016.1-15.3-6.6-15.3-16.5V11.7h-5.4c-3.3%200-6%202.7-6%206v43.5c0%2017.2%2010.5%2028.5%2026.6%2028.5s27.2-11.6%2027.2-27.3-10.6-26.8-24.7-26.8ZM486.9%2037.2h12.2v50.9h-12.2zM493.1%2013.4c-4.6%200-7.7%202.5-7.7%207.5s3.2%207.2%207.7%207.2%207.7-2.6%207.7-7.2-3.1-7.5-7.7-7.5ZM527.1%2075.9V11.7h-12.2v65.6c0%207.3%204.4%2012.4%2011.8%2012.4s4.5-.6%205.8-1.5v-9.5c-.6.4-1.3.5-2.3.5-1.8%200-3.1-1-3.1-3.4ZM552.5%2013.4c-4.6%200-7.7%202.5-7.7%207.5s3.2%207.2%207.7%207.2%207.7-2.6%207.7-7.2-3.1-7.5-7.7-7.5ZM546.3%2037.2h12.2v50.9h-12.2zM650.9%2037.2l-13%2038.1-13.2-38.1h-13l20.9%2053.6c-2.2%206-5.5%208.4-10.3%208.4s-5.2-.8-6.8-1.8v10.5c1.5%201.1%204.4%202.2%208.3%202.2%208.3%200%2014.1-4.5%2017.7-13.7l21.3-59.2H651ZM587.6%2037.2V21.4h-12v15.8h-7v10.7h7v21.7c0%2012.6%206.8%2020.2%2018.1%2020.2s6.2-.6%207.9-1.5V77.4c-1.2.5-3.6%201-5.8%201-5.7%200-8.3-3.2-8.3-8.8V47.9h14.1V37.2h-14.1ZM236.5%2016.9l-16%2044.6-16.1-44.6h-21.5l28%2071.2-9%2025.2h20.6l35.6-96.4h-21.6z%22%20class%3D%22cls-1%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22m151.2%2016.9-28.7%2071.2H144l16.1-44.8%2016.1%2044.8h21.5L169%2016.9h-17.8zM12.3%2088.1l28.8-71.2h17.8l17.9%2044.5%2018-44.5h17.8L125.1%2048l-10.4%2026-11-30.7-16.1%2044.8H66L50%2043.3%2033.9%2088.1H12.3%22%20class%3D%22cls-1%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fsvg%3E
- Favicon: https://maymobility.com/apple-touch-icon.png
- Social card (og:image): https://media.maymobility.com/_1200x630_crop_center-center_82_none/mayseoimage.png?mtime=1759233527

## UI Components

- buttonPrimary: background=#F2F6FF, textColor=#1D293D, borderColor=#0D53EC, borderRadius=33554400px, shadow=none
- buttonSecondary: background=transparent, textColor=#1D293D, borderColor=#0D53EC, borderRadius=33554400px, shadow=none

## Brand Personality

Tone: modern · Energy: medium · Audience: urban commuters and tech enthusiasts

## May Mobility Brand in the Wild

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

- **May Mobility Blog | May Mobility**
  - Image: https://maymobility.imgix.net/Headshots/Gemma-Wang-Hero-Banner.png?auto=format%2Ccompress&width=400&height=210
  - Source: https://maymobility.com/posts/type/company-blog/
- **May Mobility (ES) | Meet the artist: Detroit vehicle wrap**
  - Image: https://media.maymobility.com/Deployments/Detroit-MI/Detroit-vehicle-profile.jpg
  - Source: https://maymobility.com/es/posts/meet-the-artist-detroit-vehicle-wrap/
- **Women of May: Here to change the world | May Mobility | May Mobility**
  - Image: https://media.maymobility.com/_1200x630_crop_center-center_82_none/WoM-blog-feature-2.png?mtime=1710167157
  - Source: https://maymobility.com/posts/women-of-may/
- **May Mobility (ES) | Autonomy for all: Bringing autonomous…**
  - Image: https://media.maymobility.com/Deployments/Sun-City-AZ/0K3A0916.1ipzmrc.jpg
  - Source: https://maymobility.com/es/posts/autonomy-for-all-bringing-autonomous-microtransit-to-underserved-communities/
- **May Mobility Blog | May Mobility**
  - Image: https://media.maymobility.com/_1200x630_crop_center-center_82_none/mayseoimage.png?mtime=1759233527
  - Source: https://maymobility.com/posts/type/company-blog/
- **Less parking, more public transit | May Mobility | May Mobility**
  - Image: https://media.maymobility.com/Misc/MAY-Blog-Infograph-HowLessParkingBenefitsCities.jpg
  - Source: https://maymobility.com/posts/less-parking-more-public-transit/

## 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": "Cerebri",
      "role": "body"
    }
  ],
  "colors": {
    "primary": "#DBE3F9",
    "secondary": "#101828",
    "accent": "#F2F6FF",
    "background": "#FFFFFF",
    "textPrimary": "#0B2058",
    "link": "#0B2058"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Cerebri",
      "heading": "Cerebri"
    },
    "fontStacks": {
      "heading": [
        "Cerebri",
        "sans-serif"
      ],
      "body": [
        "Cerebri",
        "sans-serif"
      ],
      "paragraph": [
        "Cerebri",
        "sans-serif"
      ]
    },
    "fontSizes": {
      "h1": "64.08px",
      "h2": "48.06px",
      "body": "20.25px"
    }
  },
  "spacing": {
    "baseUnit": 8,
    "borderRadius": "12px"
  },
  "components": {
    "buttonPrimary": {
      "background": "#F2F6FF",
      "textColor": "#1D293D",
      "borderColor": "#0D53EC",
      "borderRadius": "33554400px",
      "borderRadiusCorners": {
        "topLeft": "33554400px",
        "topRight": "33554400px",
        "bottomRight": "33554400px",
        "bottomLeft": "33554400px"
      },
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "transparent",
      "textColor": "#1D293D",
      "borderColor": "#0D53EC",
      "borderRadius": "33554400px",
      "borderRadiusCorners": {
        "topLeft": "33554400px",
        "topRight": "33554400px",
        "bottomRight": "33554400px",
        "bottomLeft": "33554400px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "data:image/svg+xml;utf8,%3Csvg%20class%3D%22block%20w-%5B13rem%5D%20aspect-%5B675%2F125%5D%20h-auto%20fill-white%20is-stuck%3Afill-green%20xl%3Aw-%5B15rem%5D%22%20width%3D%22675%22%20height%3D%22125%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20675%20125%22%20aria-hidden%3D%22true%22%20data-fc-idx%3D%220%22%3E%3Cpath%20d%3D%22M330%2035.6c-8.6%200-14.2%204.7-17%2010.8-3.1-6.8-9.1-10.8-16.5-10.8s-13.4%204.6-15.9%2010.4v-8.9h-4.8c-3.7%200-6.6%203-6.6%206.6V88h12.2V61c0-9.5%204.7-15.6%2011.4-15.6s10%205.2%2010%2014V88H315V61c0-9.5%204.7-15.6%2011.5-15.6s9.9%205.2%209.9%2014V88h12.2V57c0-13.3-7.7-21.5-18.6-21.5ZM386.2%2035.6c-14.8%200-27.2%2011.5-27.2%2027s12.4%2027.1%2027.2%2027.1%2027.3-11.7%2027.3-27.1-12.3-27-27.3-27Zm0%2043.4c-8.6%200-15.4-6.6-15.4-16.4s6.8-16.3%2015.4-16.3%2015.4%206.4%2015.4%2016.3S395.1%2079%20386.2%2079ZM452.4%2035.6c-4.7%200-8.8%201.2-12%203.3v10.2c2.5-1.9%205.7-2.9%209.5-2.9%209.4%200%2015.4%206.3%2015.4%2016.3s-6%2016.1-15.3%2016.1-15.3-6.6-15.3-16.5V11.7h-5.4c-3.3%200-6%202.7-6%206v43.5c0%2017.2%2010.5%2028.5%2026.6%2028.5s27.2-11.6%2027.2-27.3-10.6-26.8-24.7-26.8ZM486.9%2037.2h12.2v50.9h-12.2zM493.1%2013.4c-4.6%200-7.7%202.5-7.7%207.5s3.2%207.2%207.7%207.2%207.7-2.6%207.7-7.2-3.1-7.5-7.7-7.5ZM527.1%2075.9V11.7h-12.2v65.6c0%207.3%204.4%2012.4%2011.8%2012.4s4.5-.6%205.8-1.5v-9.5c-.6.4-1.3.5-2.3.5-1.8%200-3.1-1-3.1-3.4ZM552.5%2013.4c-4.6%200-7.7%202.5-7.7%207.5s3.2%207.2%207.7%207.2%207.7-2.6%207.7-7.2-3.1-7.5-7.7-7.5ZM546.3%2037.2h12.2v50.9h-12.2zM650.9%2037.2l-13%2038.1-13.2-38.1h-13l20.9%2053.6c-2.2%206-5.5%208.4-10.3%208.4s-5.2-.8-6.8-1.8v10.5c1.5%201.1%204.4%202.2%208.3%202.2%208.3%200%2014.1-4.5%2017.7-13.7l21.3-59.2H651ZM587.6%2037.2V21.4h-12v15.8h-7v10.7h7v21.7c0%2012.6%206.8%2020.2%2018.1%2020.2s6.2-.6%207.9-1.5V77.4c-1.2.5-3.6%201-5.8%201-5.7%200-8.3-3.2-8.3-8.8V47.9h14.1V37.2h-14.1ZM236.5%2016.9l-16%2044.6-16.1-44.6h-21.5l28%2071.2-9%2025.2h20.6l35.6-96.4h-21.6z%22%20class%3D%22cls-1%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22m151.2%2016.9-28.7%2071.2H144l16.1-44.8%2016.1%2044.8h21.5L169%2016.9h-17.8zM12.3%2088.1l28.8-71.2h17.8l17.9%2044.5%2018-44.5h17.8L125.1%2048l-10.4%2026-11-30.7-16.1%2044.8H66L50%2043.3%2033.9%2088.1H12.3%22%20class%3D%22cls-1%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fsvg%3E",
    "favicon": "https://maymobility.com/apple-touch-icon.png",
    "ogImage": "https://media.maymobility.com/_1200x630_crop_center-center_82_none/mayseoimage.png?mtime=1759233527",
    "logoHref": "https://maymobility.com/"
  },
  "__llm_logo_reasoning": {
    "selectedIndex": 1,
    "reasoning": "Selected #1 because it is visible, located in the header, links to the homepage, and matches the brand 'May Mobility'.",
    "confidence": 0.9,
    "source": "llm"
  },
  "__llm_button_reasoning": {
    "primary": {
      "index": 2,
      "text": "Meet May Mobility",
      "reasoning": "Button #2 ('Meet May Mobility') has a distinct blue background (#F2F6FF) and action-oriented text, making it a strong candidate for the primary CTA."
    },
    "secondary": {
      "index": 0,
      "text": "Contact Us",
      "reasoning": "Button #0 ('Contact Us') has a transparent background, providing a clear contrast to the primary button's blue background, making it suitable as a secondary CTA."
    },
    "confidence": 0.9
  },
  "personality": {
    "tone": "modern",
    "energy": "medium",
    "targetAudience": "urban commuters and tech enthusiasts"
  },
  "designSystem": {
    "framework": "tailwind",
    "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, located in the header, links to the homepage, and matches the brand 'May Mobility'.",
        "confidence": 0.9
      }
    },
    "buttonClassification": {
      "llmCalled": true,
      "llmSucceeded": true
    }
  }
}
```