# Recraft Brand Identity

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

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

## Quick Facts

| Field | Value |
|---|---|
| Primary | #D2FC31 |
| Accent | #D2FC31 |
| Body Font | Geist |
| Heading Font | ABC Gravity Condensed |

## Color Palette

- primary: #D2FC31
- secondary: #0000EE
- accent: #D2FC31
- background: #000000
- textPrimary: #000000
- link: #BB7BFF

## Typography

- primary: Geist — https://fonts.google.com/specimen/Geist
- heading: ABC Gravity Condensed — https://fonts.google.com/specimen/ABC+Gravity+Condensed

## Visual Assets

- Logo: data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%2522http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%2522%20xmlns%3Axlink%3D%2522http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%2522%20viewBox%3D%25220%200%2040%2040%2522%20overflow%3D%2522visible%2522%3E%3Cg%3E%3Cpath%20d%3D%2522M%206.667%2040%20C%202.985%2040%200%2037.015%200%2033.333%20L%200%206.667%20C%200%202.985%202.985%200%206.667%200%20L%2033.333%200%20C%2037.015%200%2040%202.985%2040%206.667%20L%2040%2033.333%20C%2040%2037.015%2037.015%2040%2033.333%2040%20Z%2522%20fill%3D%2522rgb(0%2C%200%2C%200)%2522%3E%3C%2Fpath%3E%3Cg%20transform%3D%2522translate(7.667%206)%2522%3E%3Cpath%20d%3D%2522M%200%200%20L%2025.009%200%20L%2025.009%2025.603%20L%200%2025.603%20Z%2522%20fill%3D%2522transparent%2522%3E%3C%2Fpath%3E%3Cpath%20d%3D%2522M%2020.778%209.214%20C%2020.778%2014.299%2016.16%2018.426%2010.463%2018.426%20L%2010.463%2025.601%20L%200%2025.601%20L%203.663%2012.801%20L%207.166%2012.801%20C%206.984%2011.697%206.884%2010.485%206.884%209.212%20C%206.884%204.125%208.485%200%2010.461%200%20C%2016.16%200%2020.78%204.125%2020.78%209.212%20Z%20M%208.589%209.212%20C%208.589%2013.367%209.427%2016.737%2010.461%2016.737%20C%2011.495%2016.737%2012.333%2013.367%2012.333%209.212%20C%2012.333%205.057%2011.495%201.687%2010.461%201.687%20C%209.427%201.687%208.589%205.057%208.589%209.212%20Z%2522%20fill%3D%2522rgb(255%2C255%2C255)%2522%3E%3C%2Fpath%3E%3Cpath%20d%3D%2522M%2020.982%2018.425%20L%2010.474%2018.425%20L%2014.504%2025.603%20L%2025.011%2025.603%20Z%2522%20fill%3D%2522rgb(255%2C255%2C255)%2522%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E
- Favicon: https://framerusercontent.com/images/fyWPJAGQFyHQnCd2vOWbGj5zJI.png
- Social card (og:image): https://framerusercontent.com/assets/HvQ4bEfLTmu6moXTB0tfExFJ1l0.png

## UI Components

- buttonPrimary: background=#D2FC31, textColor=#0000EE, borderRadius=12px, shadow=none
- buttonSecondary: background=#E6E6E6, textColor=#0000EE, borderRadius=12px, shadow=none

## Brand Personality

Tone: modern · Energy: high · Audience: designers, creatives, sellers, and teams

## Recraft Brand in the Wild

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

- **How Recraft Helped MEGA SEO Elevate Blog Images**
  - Image: https://cdn.prod.website-files.com/655741af3f04e006606d26ad/67f7c45de5439137621fdf64_6701596cd019ddd3aa4425a6_AD_4nXccjC5RBBRH68tPI3gjeHOu1zBF3RZQITYVsuN6uWN-s1tvkg2btqITwaw_mfRA9wF5XK8KVfBbguy22i4oc4TOlgN-OIC9pFIGLCKWpx2IsUf36EBYqSNCAghhTfhDfgnMK6zXKK2uJNo-YFeYbTI3VGMe.png
  - Source: https://www.recraft.ai/blog/how-recraft-helped-mega-seo-elevate-blog-images
- **Styles - Recraft**
  - Image: https://cdn.prod.website-files.com/655727fe69827d9a402de12c/679b831e6ee14a2f933f112c_Group%204254.png
  - Source: https://www.recraft.ai/docs/api-reference/styles
- **How Recraft Helped MEGA SEO Elevate Blog Images**
  - Image: https://cdn.prod.website-files.com/655741af3f04e006606d26ad/67f7c45ce5439137621fde78_6701596c207986df2c0ce97d_AD_4nXd9AyXIGRUvqNcOUiFWVuy_3JXTuoFQ_KIfpQkmCbT3OxbfWPpR4c3w_pJ4vb0npGCgThKELhHW723visNguh_TsUIdR6vZAuX0_KrlHDtYXC3vltolhdFP1scTmWsIxzfdBUCF3ogG0ZYKk1OPObx-u7sI.png
  - Source: https://www.recraft.ai/blog/how-recraft-helped-mega-seo-elevate-blog-images
- **How to change an image background using AI?**
  - Image: https://cdn.prod.website-files.com/655741af3f04e006606d26ad/67adcdb5258d728b2f6c6e43_Raster1%20(1).webp
  - Source: https://www.recraft.ai/blog/how-to-change-an-image-background-using-ai
- **How Recraft Helped MEGA SEO Elevate Blog Images**
  - Image: https://cdn.prod.website-files.com/655741af3f04e006606d26ad/67f7c45ce5439137621fde7b_6701596ce9d0a3acfa1977ad_AD_4nXfFUscf4WNkEhEFwyOBUabTz6qE6oBUMbDzNYbYI_YwNERXCvBND348hJJ4qvhg3fytACVEhSW_Hvl8n4Vgo-Fbl5UVvyGihGPtCJKExS3Rr3udo1-9OfJ1vX6vlMrNUETYPAmw0vRpvid4QXqloWlsrJ6T.png
  - Source: https://www.recraft.ai/blog/how-recraft-helped-mega-seo-elevate-blog-images
- **Introducing natural language editing, the ingenious shortcut for your AI  images**
  - Image: https://cdn.prod.website-files.com/655741af3f04e006606d26ad/68564759a88479cce44fc158_AI_image_editing_Recraft_1.jpg
  - Source: https://www.recraft.ai/blog/introducing-prompt-based-editing-the-ingenious-shortcut-for-your-ai-images

## 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": "dark",
  "fonts": [
    {
      "family": "Geist",
      "role": "body"
    },
    {
      "family": "ABC Gravity Condensed",
      "role": "heading"
    },
    {
      "family": "ABC Gravity Extended Italic",
      "role": "unknown"
    }
  ],
  "colors": {
    "primary": "#D2FC31",
    "secondary": "#0000EE",
    "accent": "#D2FC31",
    "background": "#000000",
    "textPrimary": "#000000",
    "link": "#BB7BFF"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Geist",
      "heading": "ABC Gravity Condensed"
    },
    "fontStacks": {
      "heading": [
        "ABC Gravity Condensed",
        "sans-serif"
      ],
      "body": [
        "sans-serif"
      ],
      "paragraph": [
        "Geist",
        "sans-serif"
      ]
    },
    "fontSizes": {
      "h1": "76px",
      "h2": "72px",
      "body": "16px"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "0px"
  },
  "components": {
    "buttonPrimary": {
      "background": "#D2FC31",
      "textColor": "#0000EE",
      "borderRadius": "12px",
      "borderRadiusCorners": {
        "topLeft": "12px",
        "topRight": "12px",
        "bottomRight": "12px",
        "bottomLeft": "12px"
      },
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "#E6E6E6",
      "textColor": "#0000EE",
      "borderRadius": "12px",
      "borderRadiusCorners": {
        "topLeft": "12px",
        "topRight": "12px",
        "bottomRight": "12px",
        "bottomLeft": "12px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%2522http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%2522%20xmlns%3Axlink%3D%2522http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%2522%20viewBox%3D%25220%200%2040%2040%2522%20overflow%3D%2522visible%2522%3E%3Cg%3E%3Cpath%20d%3D%2522M%206.667%2040%20C%202.985%2040%200%2037.015%200%2033.333%20L%200%206.667%20C%200%202.985%202.985%200%206.667%200%20L%2033.333%200%20C%2037.015%200%2040%202.985%2040%206.667%20L%2040%2033.333%20C%2040%2037.015%2037.015%2040%2033.333%2040%20Z%2522%20fill%3D%2522rgb(0%2C%200%2C%200)%2522%3E%3C%2Fpath%3E%3Cg%20transform%3D%2522translate(7.667%206)%2522%3E%3Cpath%20d%3D%2522M%200%200%20L%2025.009%200%20L%2025.009%2025.603%20L%200%2025.603%20Z%2522%20fill%3D%2522transparent%2522%3E%3C%2Fpath%3E%3Cpath%20d%3D%2522M%2020.778%209.214%20C%2020.778%2014.299%2016.16%2018.426%2010.463%2018.426%20L%2010.463%2025.601%20L%200%2025.601%20L%203.663%2012.801%20L%207.166%2012.801%20C%206.984%2011.697%206.884%2010.485%206.884%209.212%20C%206.884%204.125%208.485%200%2010.461%200%20C%2016.16%200%2020.78%204.125%2020.78%209.212%20Z%20M%208.589%209.212%20C%208.589%2013.367%209.427%2016.737%2010.461%2016.737%20C%2011.495%2016.737%2012.333%2013.367%2012.333%209.212%20C%2012.333%205.057%2011.495%201.687%2010.461%201.687%20C%209.427%201.687%208.589%205.057%208.589%209.212%20Z%2522%20fill%3D%2522rgb(255%2C255%2C255)%2522%3E%3C%2Fpath%3E%3Cpath%20d%3D%2522M%2020.982%2018.425%20L%2010.474%2018.425%20L%2014.504%2025.603%20L%2025.011%2025.603%20Z%2522%20fill%3D%2522rgb(255%2C255%2C255)%2522%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E",
    "favicon": "https://framerusercontent.com/images/fyWPJAGQFyHQnCd2vOWbGj5zJI.png",
    "ogImage": "https://framerusercontent.com/assets/HvQ4bEfLTmu6moXTB0tfExFJ1l0.png",
    "logoHref": "https://www.recraft.ai/",
    "logoAlt": "Recraft — Go to homepage"
  },
  "__llm_logo_reasoning": {
    "selectedIndex": 1,
    "reasoning": "Selected #1 because it is visible, located in the header, links to the homepage, and the alt text matches the brand 'Recraft'.",
    "confidence": 0.9,
    "source": "llm"
  },
  "__llm_button_reasoning": {
    "primary": {
      "index": 0,
      "text": "Start creating",
      "reasoning": "Button #0 with text 'Start creating' uses a vibrant brand color (#D2FC31) and action-oriented text, making it the primary CTA."
    },
    "secondary": {
      "index": 2,
      "text": "Get API",
      "reasoning": "Button #2 with text 'Get API' has a different background color (#E6E6E6) and serves as a secondary action, suitable for a secondary CTA."
    },
    "confidence": 0.95
  },
  "personality": {
    "tone": "modern",
    "energy": "high",
    "targetAudience": "designers, creatives, sellers, and teams"
  },
  "designSystem": {
    "framework": "custom",
    "componentLibrary": ""
  },
  "confidence": {
    "buttons": 0.95,
    "colors": 0.9,
    "overall": 0.925
  },
  "__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 the alt text matches the brand 'Recraft'.",
        "confidence": 0.9
      }
    },
    "buttonClassification": {
      "llmCalled": true,
      "llmSucceeded": true
    }
  }
}
```