# Front Brand Identity

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

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

## Quick Facts

| Field | Value |
|---|---|
| Primary | #EEFC97 |
| Accent | #DEE948 |
| Body Font | Suisse Intl |
| Heading Font | Helvetica Neue LT Std |

## Color Palette

- primary: #EEFC97
- secondary: #8034BF
- accent: #DEE948
- background: #FFFFFF
- textPrimary: #1C1E20
- link: #0D1D39

## Typography

- primary: Suisse Intl — https://fonts.google.com/specimen/Suisse+Intl
- heading: Helvetica Neue LT Std — https://fonts.google.com/specimen/Helvetica+Neue+LT+Std

## Visual Assets

- Logo: data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22283%22%20height%3D%2265%22%20viewBox%3D%220%200%20283%2065%22%20class%3D%22w-%5B112px%5D%20h-%5B26px%5D%20transition-colors%20duration-300%20text-white%22%20data-fc-idx%3D%220%22%3E%3Cg%20class%3D%22icon-logo-mark%22%3E%3Cpath%20d%3D%22M0%2063.6152H21.3918V21.3008H64.0428V-0.00341797H0V63.6152Z%22%20fill%3D%22%23A857F1%22%20style%3D%22fill%3A%20rgb(168%2C%2087%2C%20241)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M45.5945%2064.8878C56.2523%2064.8878%2064.8922%2056.2479%2064.8922%2045.5901C64.8922%2034.9323%2056.2523%2026.2925%2045.5945%2026.2925C34.9367%2026.2925%2026.2969%2034.9323%2026.2969%2045.5901C26.2969%2056.2479%2034.9367%2064.8878%2045.5945%2064.8878Z%22%20fill%3D%22%23A857F1%22%20style%3D%22fill%3A%20rgb(168%2C%2087%2C%20241)%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22icon-logo-type%22%3E%3Cpath%20d%3D%22M259.657%2062.7285C255.717%2062.7285%20252.686%2061.6893%20250.564%2059.6108C248.485%2057.5323%20247.446%2054.5012%20247.446%2050.5174V31.6812H239.457V20.7041H247.446V6.41455H260.762V20.7041H272.128V31.6812H260.762V47.7245C260.762%2049.0668%20261.108%2050.0844%20261.801%2050.7773C262.494%2051.4701%20263.511%2051.8165%20264.854%2051.8165H272.128V62.7285H259.657Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M195.352%2020.7035H207.433V24.211C208.818%2022.6954%20210.507%2021.5263%20212.499%2020.7035C214.534%2019.8375%20216.786%2019.3828%20219.254%2019.3395C221.679%2019.2962%20223.952%2019.7076%20226.074%2020.5736C228.196%2021.4397%20230.036%2022.6521%20231.595%2024.211C233.154%2025.8131%20234.345%2027.7834%20235.168%2030.1217C236.034%2032.4167%20236.467%2035.2313%20236.467%2038.5655V62.7279H223.086V39.9295C223.086%2038.1975%20222.913%2036.8551%20222.567%2035.9025C222.264%2034.9065%20221.766%2034.0621%20221.073%2033.3693C219.817%2032.1569%20218.107%2031.5506%20215.942%2031.5506C213.776%2031.5506%20212.066%2032.1569%20210.81%2033.3693C210.074%2034.0621%20209.533%2034.9065%20209.186%2035.9025C208.883%2036.8551%20208.732%2038.1975%20208.732%2039.9295V62.7279H195.352V20.7035Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M167.21%2063.8325C162.836%2063.8325%20158.852%2062.8582%20155.258%2060.9096C151.708%2059.0043%20148.893%2056.3412%20146.814%2052.9204C144.779%2049.5429%20143.762%2045.7972%20143.762%2041.6836C143.762%2037.5699%20144.779%2033.8026%20146.814%2030.3818C148.893%2026.961%20151.708%2024.2762%20155.258%2022.3277C158.852%2020.3358%20162.836%2019.3398%20167.21%2019.3398C171.583%2019.3398%20175.545%2020.3358%20179.096%2022.3277C182.69%2024.2762%20185.505%2026.961%20187.54%2030.3818C189.575%2033.8026%20190.593%2037.5699%20190.593%2041.6836C190.593%2045.7972%20189.575%2049.5429%20187.54%2052.9204C185.505%2056.3412%20182.69%2059.0043%20179.096%2060.9096C175.545%2062.8582%20171.583%2063.8325%20167.21%2063.8325ZM167.21%2052.0111C169.028%2052.0111%20170.652%2051.5564%20172.081%2050.6471C173.553%2049.7377%20174.701%2048.5036%20175.524%2046.9447C176.346%2045.3859%20176.758%2043.6322%20176.758%2041.6836C176.758%2039.735%20176.346%2037.9813%20175.524%2036.4224C174.701%2034.8635%20173.553%2033.6511%20172.081%2032.7851C170.652%2031.8757%20169.028%2031.421%20167.21%2031.421C165.348%2031.421%20163.681%2031.8757%20162.208%2032.7851C160.779%2033.6511%20159.653%2034.8635%20158.831%2036.4224C158.008%2037.9813%20157.597%2039.735%20157.597%2041.6836C157.597%2043.6322%20158.008%2045.3859%20158.831%2046.9447C159.653%2048.5036%20160.801%2049.7377%20162.273%2050.6471C163.746%2051.5564%20165.391%2052.0111%20167.21%2052.0111Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M114.129%2020.7037H126.145V25.7051C127.574%2023.9297%20129.285%2022.5657%20131.276%2021.613C133.312%2020.6604%20135.498%2020.1841%20137.837%2020.1841C139.352%2020.1841%20140.824%2020.314%20142.253%2020.5738V33.1746C141.214%2032.7849%20139.785%2032.59%20137.967%2032.59C134.762%2032.59%20132.229%2033.5643%20130.367%2035.5129C129.371%2036.5089%20128.613%2037.7213%20128.094%2039.1503C127.617%2040.5792%20127.379%2042.4196%20127.379%2044.6713V62.7281H114.129V20.7037Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M75.8164%20-0.665527H109.852V12.0002H89.5214V24.4062H109.462V36.6173H89.5214V62.7283H75.8164V-0.665527Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E
- Favicon: https://front.com/apple-icon.png
- Social card (og:image): https://front.com/assets/pages/global-ai/Meta-Unfurl-OG-Image/Meta-Unfurl.png

## UI Components

- buttonPrimary: background=#DEE948, textColor=#0D1D39, borderRadius=64px, shadow=none
- buttonSecondary: background=#8034BF, textColor=#F8F1FE, borderRadius=64px, shadow=none

## Brand Personality

Tone: modern · Energy: medium · Audience: business professionals seeking customer service solutions

## Front Brand in the Wild

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

- **Slack Integration | Front**
  - Image: https://front.com/_next/image?url=https%3A%2F%2Ffront.com%2Fassets%2Fintegrations%2Fslack%2Fscreenshots%2Fslack-3.png&w=3840&q=75
  - Source: https://front.com/integrations/slack
- **How logistics leaders are reimagining customer service to stay ahead**
  - Image: https://front.com/assets/_800x418_crop_center-center_82_none_ns/blogheader_1200x627_2025-05-07-000142_qvel.png?mtime=1746576103
  - Source: https://front.com/blog/state-of-service-expectations-logistics-recap
- **AMGiNE and Front expand partnership to the UK**
  - Image: https://front.com/_next/image?url=https%3A%2F%2Ffront.com%2Fassets%2FFront-Amgine-Press-Release-Cover.png&w=3840&q=75
  - Source: https://front.com/blog/amgine-and-front-expand-partnership-to-the-uk
- **Creating a Knowledge Base and Best Practices in 2024**
  - Image: https://front.com/assets/_800x418_crop_center-center_82_none_ns/knowledgebase_blogheader_1_926x484.png?mtime=1704412599
  - Source: https://front.com/blog/knowledge-base-tips
- **Press Page | Front**
  - Image: https://front.com/_next/image?url=https%3A%2F%2Ffront.com%2Fwebassets%2Fpages%2Fpress%2Fexplainer-img.png&w=3840&q=75
  - Source: https://front.com/press
- **Internal Knowledge Base: Definition, How-to & Best Practices**
  - Image: https://front.com/assets/blog/_1200x630_crop_center-center_82_none_ns/01_customerservice_blog_header_926x484.png?mtime=1681339103
  - Source: https://front.com/blog/internal-knowledge-base

## 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": "Suisse Intl",
      "role": "body"
    },
    {
      "family": "Helvetica Neue LT Std",
      "role": "heading"
    }
  ],
  "colors": {
    "primary": "#EEFC97",
    "secondary": "#8034BF",
    "accent": "#DEE948",
    "background": "#FFFFFF",
    "textPrimary": "#1C1E20",
    "link": "#0D1D39"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Suisse Intl",
      "heading": "Helvetica Neue LT Std"
    },
    "fontStacks": {
      "heading": [
        "Suisse Intl",
        "Helvetica Neue LT Std",
        "-apple-system",
        "BlinkMacSystemFont",
        "Helvetica Neue",
        "Helvetica",
        "sans-serif"
      ],
      "body": [
        "Suisse Intl",
        "Helvetica Neue LT Std",
        "-apple-system",
        "BlinkMacSystemFont",
        "Helvetica Neue",
        "Helvetica",
        "sans-serif"
      ],
      "paragraph": [
        "Suisse Intl",
        "Helvetica Neue LT Std",
        "-apple-system",
        "BlinkMacSystemFont",
        "Helvetica Neue",
        "Helvetica",
        "sans-serif"
      ]
    },
    "fontSizes": {
      "h1": "62px",
      "h2": "52px",
      "body": "14px"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "16px"
  },
  "components": {
    "buttonPrimary": {
      "background": "#DEE948",
      "textColor": "#0D1D39",
      "borderRadius": "64px",
      "borderRadiusCorners": {
        "topLeft": "64px",
        "topRight": "64px",
        "bottomRight": "64px",
        "bottomLeft": "64px"
      },
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "#8034BF",
      "textColor": "#F8F1FE",
      "borderRadius": "64px",
      "borderRadiusCorners": {
        "topLeft": "64px",
        "topRight": "64px",
        "bottomRight": "64px",
        "bottomLeft": "64px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22283%22%20height%3D%2265%22%20viewBox%3D%220%200%20283%2065%22%20class%3D%22w-%5B112px%5D%20h-%5B26px%5D%20transition-colors%20duration-300%20text-white%22%20data-fc-idx%3D%220%22%3E%3Cg%20class%3D%22icon-logo-mark%22%3E%3Cpath%20d%3D%22M0%2063.6152H21.3918V21.3008H64.0428V-0.00341797H0V63.6152Z%22%20fill%3D%22%23A857F1%22%20style%3D%22fill%3A%20rgb(168%2C%2087%2C%20241)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M45.5945%2064.8878C56.2523%2064.8878%2064.8922%2056.2479%2064.8922%2045.5901C64.8922%2034.9323%2056.2523%2026.2925%2045.5945%2026.2925C34.9367%2026.2925%2026.2969%2034.9323%2026.2969%2045.5901C26.2969%2056.2479%2034.9367%2064.8878%2045.5945%2064.8878Z%22%20fill%3D%22%23A857F1%22%20style%3D%22fill%3A%20rgb(168%2C%2087%2C%20241)%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22icon-logo-type%22%3E%3Cpath%20d%3D%22M259.657%2062.7285C255.717%2062.7285%20252.686%2061.6893%20250.564%2059.6108C248.485%2057.5323%20247.446%2054.5012%20247.446%2050.5174V31.6812H239.457V20.7041H247.446V6.41455H260.762V20.7041H272.128V31.6812H260.762V47.7245C260.762%2049.0668%20261.108%2050.0844%20261.801%2050.7773C262.494%2051.4701%20263.511%2051.8165%20264.854%2051.8165H272.128V62.7285H259.657Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M195.352%2020.7035H207.433V24.211C208.818%2022.6954%20210.507%2021.5263%20212.499%2020.7035C214.534%2019.8375%20216.786%2019.3828%20219.254%2019.3395C221.679%2019.2962%20223.952%2019.7076%20226.074%2020.5736C228.196%2021.4397%20230.036%2022.6521%20231.595%2024.211C233.154%2025.8131%20234.345%2027.7834%20235.168%2030.1217C236.034%2032.4167%20236.467%2035.2313%20236.467%2038.5655V62.7279H223.086V39.9295C223.086%2038.1975%20222.913%2036.8551%20222.567%2035.9025C222.264%2034.9065%20221.766%2034.0621%20221.073%2033.3693C219.817%2032.1569%20218.107%2031.5506%20215.942%2031.5506C213.776%2031.5506%20212.066%2032.1569%20210.81%2033.3693C210.074%2034.0621%20209.533%2034.9065%20209.186%2035.9025C208.883%2036.8551%20208.732%2038.1975%20208.732%2039.9295V62.7279H195.352V20.7035Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M167.21%2063.8325C162.836%2063.8325%20158.852%2062.8582%20155.258%2060.9096C151.708%2059.0043%20148.893%2056.3412%20146.814%2052.9204C144.779%2049.5429%20143.762%2045.7972%20143.762%2041.6836C143.762%2037.5699%20144.779%2033.8026%20146.814%2030.3818C148.893%2026.961%20151.708%2024.2762%20155.258%2022.3277C158.852%2020.3358%20162.836%2019.3398%20167.21%2019.3398C171.583%2019.3398%20175.545%2020.3358%20179.096%2022.3277C182.69%2024.2762%20185.505%2026.961%20187.54%2030.3818C189.575%2033.8026%20190.593%2037.5699%20190.593%2041.6836C190.593%2045.7972%20189.575%2049.5429%20187.54%2052.9204C185.505%2056.3412%20182.69%2059.0043%20179.096%2060.9096C175.545%2062.8582%20171.583%2063.8325%20167.21%2063.8325ZM167.21%2052.0111C169.028%2052.0111%20170.652%2051.5564%20172.081%2050.6471C173.553%2049.7377%20174.701%2048.5036%20175.524%2046.9447C176.346%2045.3859%20176.758%2043.6322%20176.758%2041.6836C176.758%2039.735%20176.346%2037.9813%20175.524%2036.4224C174.701%2034.8635%20173.553%2033.6511%20172.081%2032.7851C170.652%2031.8757%20169.028%2031.421%20167.21%2031.421C165.348%2031.421%20163.681%2031.8757%20162.208%2032.7851C160.779%2033.6511%20159.653%2034.8635%20158.831%2036.4224C158.008%2037.9813%20157.597%2039.735%20157.597%2041.6836C157.597%2043.6322%20158.008%2045.3859%20158.831%2046.9447C159.653%2048.5036%20160.801%2049.7377%20162.273%2050.6471C163.746%2051.5564%20165.391%2052.0111%20167.21%2052.0111Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M114.129%2020.7037H126.145V25.7051C127.574%2023.9297%20129.285%2022.5657%20131.276%2021.613C133.312%2020.6604%20135.498%2020.1841%20137.837%2020.1841C139.352%2020.1841%20140.824%2020.314%20142.253%2020.5738V33.1746C141.214%2032.7849%20139.785%2032.59%20137.967%2032.59C134.762%2032.59%20132.229%2033.5643%20130.367%2035.5129C129.371%2036.5089%20128.613%2037.7213%20128.094%2039.1503C127.617%2040.5792%20127.379%2042.4196%20127.379%2044.6713V62.7281H114.129V20.7037Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M75.8164%20-0.665527H109.852V12.0002H89.5214V24.4062H109.462V36.6173H89.5214V62.7283H75.8164V-0.665527Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E",
    "favicon": "https://front.com/apple-icon.png",
    "ogImage": "https://front.com/assets/pages/global-ai/Meta-Unfurl-OG-Image/Meta-Unfurl.png",
    "logoHref": "/"
  },
  "__llm_logo_reasoning": {
    "selectedIndex": 0,
    "reasoning": "Selected #0 because it is located in the header, is visible, and links to the homepage, which are strong indicators of the main brand logo.",
    "confidence": 0.9,
    "source": "llm"
  },
  "__llm_button_reasoning": {
    "primary": {
      "index": 0,
      "text": "Request demo",
      "reasoning": "Button #0 'Request demo' uses a vibrant green color (#DEE948) which is a strong indicator of a primary CTA. The action-oriented text further supports this choice."
    },
    "secondary": {
      "index": 5,
      "text": "Learn more",
      "reasoning": "Button #5 'Learn more' uses a distinct blue color (#8034BF), making it suitable as a secondary CTA. It provides additional information, complementing the primary action."
    },
    "confidence": 0.95
  },
  "personality": {
    "tone": "modern",
    "energy": "medium",
    "targetAudience": "business professionals seeking customer service solutions"
  },
  "designSystem": {
    "framework": "tailwind",
    "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 located in the header, is visible, and links to the homepage, which are strong indicators of the main brand logo.",
        "confidence": 0.9
      }
    },
    "buttonClassification": {
      "llmCalled": true,
      "llmSucceeded": true
    }
  }
}
```