# Typeface Brand Identity

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

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

## Quick Facts

| Field | Value |
|---|---|
| Primary | #FD243E |
| Accent | #F1F0F2 |
| Body Font | Suisseintl |
| Heading Font | Suisseintl |

## Color Palette

- primary: #FD243E
- secondary: #FB2C36
- accent: #F1F0F2
- background: #FFFFFF
- textPrimary: #111013
- link: #1D2130

## Typography

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

## Visual Assets

- Logo: data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22106%22%20height%3D%2227%22%20viewBox%3D%220%200%20130%2034%22%20class%3D%22svg-header-logo-130%22%20data-testid%3D%22svg-icon%22%20data-fc-idx%3D%220%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M46.0676%2011.8347v12.5272h2.9415V11.8347h4.6077V9.44861H41.4805v2.38609h4.5871Zm7.3506%2016.1269h1.1931c2.7564%200%203.3323-.4936%204.6282-3.9288l4.0523-10.7375H60.412l-2.5712%207.9811-2.5096-7.9811h-3.1061l4.2374%2011.0254-.1234.3086c-.4731%201.1725-.905%201.152-1.8512%201.152h-1.0697v2.1803Zm11.1507%200h2.8386v-4.9984c.6995%201.2136%202.0159%201.6661%203.1678%201.6661%202.633%200%204.834-2.2626%204.834-5.8008%200-3.4763-2.1393-5.7802-4.8133-5.7802-1.3988%200-2.5918.6378-3.1885%201.6663v-1.4193h-2.8386v14.6663Zm7.8578-9.1125c0%202.1599-1.0696%203.5998-2.5302%203.5998-1.5632%200-2.5918-1.3576-2.5918-3.6204%200-2.2216%201.0286-3.5997%202.5918-3.5997%201.4606%200%202.5302%201.4605%202.5302%203.6203Zm7.0766.7612h8.1664c.1234-3.9084-2.0159-6.562-5.4307-6.562-3.2706%200-5.5538%202.4479-5.5538%205.7391%200%203.1883%202.0775%205.8419%205.6362%205.8419%203.0031%200%204.6282-1.8307%205.2247-3.4763h-2.9209c-.576.9667-1.4604%201.2754-2.3243%201.2754-1.3372%200-2.6536-.9258-2.7976-2.8181Zm.0412-1.9542c.2262-1.8514%201.6044-2.5302%202.6741-2.5302%201.193%200%202.5094.6583%202.5711%202.5302h-5.2452Zm10.5223-4.978v.6172h-1.5633v1.9541h1.5633v9.1125h2.8387v-9.1125h2.2215v-1.9541h-2.2215v-.5349c0-1.0491.2674-1.2136%201.6662-1.2136h.5553V9.44861h-.9667c-2.777%200-4.0935.43197-4.0935%203.22949Zm9.4176%2011.9512c1.6666%200%202.8386-.4937%203.6206-1.6456.041.5348.103%201.0285.185%201.3782h2.612c-.206-.9256-.329-1.913-.329-3.6615%200-1.0079.041-2.4684.041-2.8181%200-3.7437-2.139-4.8751-4.772-4.8751-2.8387%200-4.6488%201.6045-4.8545%203.785h2.6534c.0617-1.2137.9669-1.7897%202.0571-1.7897%201.152%200%202.078.5965%202.078%202.3039v.1851c-4.3408.4937-7.2823%201.2753-7.2823%203.8877%200%202.0159%201.8719%203.2501%203.9907%203.2501Zm3.3736-5.3277v.8229c0%201.6044-.761%202.5713-2.53%202.5713-1.2756%200-1.9132-.6582-1.9132-1.4606%200-1.2341%201.2753-1.6044%204.4432-1.9336Zm14.974-2.2215c-.37-2.7564-2.715-4.0318-5.019-4.0318-3.312%200-5.554%202.4273-5.554%205.8008%200%203.3323%202.119%205.7802%205.431%205.7802%202.283%200%204.587-1.0079%205.245-4.0317h-2.715c-.371%201.337-1.42%201.8308-2.387%201.8308-1.563%200-2.674-1.296-2.674-3.6204%200-2.3038%201.173-3.5586%202.654-3.5586%201.07%200%202.098.7816%202.304%201.8307h2.715Zm3.997%202.5302h8.166c.123-3.9084-2.016-6.562-5.431-6.562-3.27%200-5.553%202.4479-5.553%205.7391%200%203.1883%202.077%205.8419%205.636%205.8419%203.003%200%204.628-1.8307%205.225-3.4763h-2.921c-.577.9667-1.461%201.2754-2.325%201.2754-1.337%200-2.653-.9258-2.797-2.8181Zm.041-1.9542c.226-1.8514%201.604-2.5302%202.674-2.5302%201.192%200%202.509.6583%202.571%202.5302h-5.245Z%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20fill%3D%22%23FD243E%22%20d%3D%22M0%200h33.3181v33.3181H0V0Z%22%20style%3D%22fill%3A%20rgb(253%2C%2036%2C%2062)%20!important%3B%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M11.8237%208.05957H8.59937V24.1812h3.22433V8.05957Z%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fsvg%3E
- Favicon: https://www.typeface.ai/favicon.ico
- Social card (og:image): https://images.ctfassets.net/x690ow8339ug/g36Rl9hYe43Kx6buA0HBv/752c90259d7655c7accbb0ce0697a67e/Agentic-AI.png

## UI Components

- buttonPrimary: background=#F1F0F2, textColor=#FD243E, borderRadius=0px, shadow=none
- buttonSecondary: background=#141011, textColor=#FFFFFF, borderColor=#141011, borderRadius=0px, shadow=none

## Brand Personality

Tone: modern · Energy: high · Audience: enterprise businesses

## Typeface Brand in the Wild

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

- **5 Impactful Blog Post Examples for Inspiration**
  - Image: https://images.ctfassets.net/x690ow8339ug/2KAHyDiJk4MMjgb5S0SsD2/3f926024b704d29ad5f9534762b03dfc/img-blog-body-how-to-blog-post-example.png
  - Source: https://www.typeface.ai/blog/5-blog-post-examples-and-using-ai-to-create-them
- **How to Use An AI Blog Post Generator to Write Blogs Faster**
  - Image: https://images.ctfassets.net/x690ow8339ug/71R9x5DU92E28b61nJEEjz/93b7044158a81f6c1cfd11f6615725b5/img-blog-cover-AI_Blog_Post_Generator-3840%C3%A2__2160.png
  - Source: https://www.typeface.ai/blog/how-to-write-blog-posts-fast-with-ai
- **How Image Agent Generates Instant On-Brand Visuals**
  - Image: https://images.ctfassets.net/x690ow8339ug/3y872g5lXQdppSLFuYYCbm/f2a2d4650bb4f32d9ecde02f68240609/img-blog-image-agent-turn-your-idea-into-visuals-16x9.png
  - Source: https://www.typeface.ai/blog/instantly-turn-your-idea-into-visuals-with-image-agent
- **AI Blog Prompts to Create Blogs 10x Faster**
  - Image: https://images.ctfassets.net/x690ow8339ug/2Wm1iSa6zs4YDvxlOKpe5s/82f2304a840c8a224793df76d8f10641/AI_Blog_Prompts_to_Write_Blog_Posts_Faster_Blog_Hero_0cef09f5ca.png
  - Source: https://www.typeface.ai/blog/ai-blog-prompts-to-write-blog-posts-faster
- **Typeface Newsroom: Press, Awards & Company Updates**
  - Image: https://images.ctfassets.net/x690ow8339ug/JzAKEg0vsNgl11E4zwiYI/2b2150203bf6fc2d0ad7b84a107ac343/img-blog-cover-Typeface_Feature_Focus-November_2025-3840%C3%A2__2308.png
  - Source: https://www.typeface.ai/newsroom
- **5 Impactful Blog Post Examples for Inspiration**
  - Image: https://images.ctfassets.net/x690ow8339ug/65P4RpmEFuyM92Io2Vjk3m/eaffa42631836ab7caaab76a694e2944/img-blog-body-trends-post-example.png
  - Source: https://www.typeface.ai/blog/5-blog-post-examples-and-using-ai-to-create-them

## 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": "Suisseintl",
      "role": "body"
    },
    {
      "family": "Arial",
      "role": "body"
    },
    {
      "family": "Roboto",
      "role": "body"
    }
  ],
  "colors": {
    "primary": "#FD243E",
    "secondary": "#FB2C36",
    "accent": "#F1F0F2",
    "background": "#FFFFFF",
    "textPrimary": "#111013",
    "link": "#1D2130"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Suisseintl",
      "heading": "Suisseintl"
    },
    "fontStacks": {
      "heading": [
        "Suisseintl",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "body": [
        "Suisseintl",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "paragraph": [
        "Suisseintl",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ]
    },
    "fontSizes": {
      "h1": "38px",
      "h2": "16px",
      "body": "18px"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "0px"
  },
  "components": {
    "buttonPrimary": {
      "background": "#F1F0F2",
      "textColor": "#FD243E",
      "borderRadius": "0px",
      "borderRadiusCorners": {
        "topLeft": "0px",
        "topRight": "0px",
        "bottomRight": "0px",
        "bottomLeft": "0px"
      },
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "#141011",
      "textColor": "#FFFFFF",
      "borderColor": "#141011",
      "borderRadius": "0px",
      "borderRadiusCorners": {
        "topLeft": "0px",
        "topRight": "0px",
        "bottomRight": "0px",
        "bottomLeft": "0px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22106%22%20height%3D%2227%22%20viewBox%3D%220%200%20130%2034%22%20class%3D%22svg-header-logo-130%22%20data-testid%3D%22svg-icon%22%20data-fc-idx%3D%220%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M46.0676%2011.8347v12.5272h2.9415V11.8347h4.6077V9.44861H41.4805v2.38609h4.5871Zm7.3506%2016.1269h1.1931c2.7564%200%203.3323-.4936%204.6282-3.9288l4.0523-10.7375H60.412l-2.5712%207.9811-2.5096-7.9811h-3.1061l4.2374%2011.0254-.1234.3086c-.4731%201.1725-.905%201.152-1.8512%201.152h-1.0697v2.1803Zm11.1507%200h2.8386v-4.9984c.6995%201.2136%202.0159%201.6661%203.1678%201.6661%202.633%200%204.834-2.2626%204.834-5.8008%200-3.4763-2.1393-5.7802-4.8133-5.7802-1.3988%200-2.5918.6378-3.1885%201.6663v-1.4193h-2.8386v14.6663Zm7.8578-9.1125c0%202.1599-1.0696%203.5998-2.5302%203.5998-1.5632%200-2.5918-1.3576-2.5918-3.6204%200-2.2216%201.0286-3.5997%202.5918-3.5997%201.4606%200%202.5302%201.4605%202.5302%203.6203Zm7.0766.7612h8.1664c.1234-3.9084-2.0159-6.562-5.4307-6.562-3.2706%200-5.5538%202.4479-5.5538%205.7391%200%203.1883%202.0775%205.8419%205.6362%205.8419%203.0031%200%204.6282-1.8307%205.2247-3.4763h-2.9209c-.576.9667-1.4604%201.2754-2.3243%201.2754-1.3372%200-2.6536-.9258-2.7976-2.8181Zm.0412-1.9542c.2262-1.8514%201.6044-2.5302%202.6741-2.5302%201.193%200%202.5094.6583%202.5711%202.5302h-5.2452Zm10.5223-4.978v.6172h-1.5633v1.9541h1.5633v9.1125h2.8387v-9.1125h2.2215v-1.9541h-2.2215v-.5349c0-1.0491.2674-1.2136%201.6662-1.2136h.5553V9.44861h-.9667c-2.777%200-4.0935.43197-4.0935%203.22949Zm9.4176%2011.9512c1.6666%200%202.8386-.4937%203.6206-1.6456.041.5348.103%201.0285.185%201.3782h2.612c-.206-.9256-.329-1.913-.329-3.6615%200-1.0079.041-2.4684.041-2.8181%200-3.7437-2.139-4.8751-4.772-4.8751-2.8387%200-4.6488%201.6045-4.8545%203.785h2.6534c.0617-1.2137.9669-1.7897%202.0571-1.7897%201.152%200%202.078.5965%202.078%202.3039v.1851c-4.3408.4937-7.2823%201.2753-7.2823%203.8877%200%202.0159%201.8719%203.2501%203.9907%203.2501Zm3.3736-5.3277v.8229c0%201.6044-.761%202.5713-2.53%202.5713-1.2756%200-1.9132-.6582-1.9132-1.4606%200-1.2341%201.2753-1.6044%204.4432-1.9336Zm14.974-2.2215c-.37-2.7564-2.715-4.0318-5.019-4.0318-3.312%200-5.554%202.4273-5.554%205.8008%200%203.3323%202.119%205.7802%205.431%205.7802%202.283%200%204.587-1.0079%205.245-4.0317h-2.715c-.371%201.337-1.42%201.8308-2.387%201.8308-1.563%200-2.674-1.296-2.674-3.6204%200-2.3038%201.173-3.5586%202.654-3.5586%201.07%200%202.098.7816%202.304%201.8307h2.715Zm3.997%202.5302h8.166c.123-3.9084-2.016-6.562-5.431-6.562-3.27%200-5.553%202.4479-5.553%205.7391%200%203.1883%202.077%205.8419%205.636%205.8419%203.003%200%204.628-1.8307%205.225-3.4763h-2.921c-.577.9667-1.461%201.2754-2.325%201.2754-1.337%200-2.653-.9258-2.797-2.8181Zm.041-1.9542c.226-1.8514%201.604-2.5302%202.674-2.5302%201.192%200%202.509.6583%202.571%202.5302h-5.245Z%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20fill%3D%22%23FD243E%22%20d%3D%22M0%200h33.3181v33.3181H0V0Z%22%20style%3D%22fill%3A%20rgb(253%2C%2036%2C%2062)%20!important%3B%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M11.8237%208.05957H8.59937V24.1812h3.22433V8.05957Z%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fsvg%3E",
    "favicon": "https://www.typeface.ai/favicon.ico",
    "ogImage": "https://images.ctfassets.net/x690ow8339ug/g36Rl9hYe43Kx6buA0HBv/752c90259d7655c7accbb0ce0697a67e/Agentic-AI.png",
    "logoHref": "/"
  },
  "__llm_logo_reasoning": {
    "selectedIndex": 0,
    "reasoning": "Selected #0 because it is visible, located in the header, links to the homepage, and matches the brand inferred from the URL and page title.",
    "confidence": 0.95,
    "source": "llm"
  },
  "__llm_button_reasoning": {
    "primary": {
      "index": 1,
      "text": "Explore more",
      "reasoning": "Button #1 ('Explore more') has a distinct background color (#F1F0F2) and uses the brand's primary color for text (#FD243E), making it stand out as a primary CTA."
    },
    "secondary": {
      "index": 0,
      "text": "Accept all",
      "reasoning": "Button #0 ('Accept all') has a different background color (#141011) and is less prominent, making it suitable as a secondary CTA."
    },
    "confidence": 0.9
  },
  "personality": {
    "tone": "modern",
    "energy": "high",
    "targetAudience": "enterprise businesses"
  },
  "designSystem": {
    "framework": "custom",
    "componentLibrary": ""
  },
  "confidence": {
    "buttons": 0.9,
    "colors": 0.9,
    "overall": 0.9
  },
  "__llm_metadata": {
    "logoSelection": {
      "llmCalled": true,
      "llmSucceeded": true,
      "finalSource": "llm",
      "rawLogoSelection": {
        "selectedLogoIndex": 0,
        "selectedLogoReasoning": "Selected #0 because it is visible, located in the header, links to the homepage, and matches the brand inferred from the URL and page title.",
        "confidence": 0.95
      }
    },
    "buttonClassification": {
      "llmCalled": true,
      "llmSucceeded": true
    }
  }
}
```