# Supernova Brand Identity

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

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

## Quick Facts

| Field | Value |
|---|---|
| Primary | #66728A |
| Accent | #1A5EE5 |
| Body Font | Manrope |
| Heading Font | Manrope |

## Color Palette

- primary: #66728A
- secondary: #1A5EE5
- accent: #1A5EE5
- background: #F1F3F9
- textPrimary: #262F40
- link: #262F40

## Typography

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

## Visual Assets

- Logo: data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22146%22%20height%3D%2228%22%20fill%3D%22none%22%20data-fc-idx%3D%220%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.02%2010.272c-1.514.134-2.899.556-3.981%201.22-.673.413-1.802%201.288-1.802%202.508s1.129%202.095%201.802%202.508c1.332.818%203.125%201.268%205.051%201.268.886%200%201.743-.096%202.541-.28-1.946-1.217-3.342-3.92-3.611-7.224m5.965-8.02c-1.22%200-2.095%201.13-2.508%201.803-.818%201.332-1.268%203.126-1.268%205.05%200%20.886.096%201.743.279%202.541%201.218-1.946%203.921-3.341%207.225-3.61-.135-1.514-.557-2.9-1.221-3.981-.413-.673-1.288-1.802-2.507-1.802m11.747%2011.749c0-1.22-1.129-2.095-1.801-2.508-1.332-.819-3.126-1.268-5.052-1.268-.885%200-1.743.095-2.541.279%201.946%201.218%203.343%203.92%203.611%207.225%201.514-.136%202.9-.557%203.982-1.221.672-.413%201.801-1.288%201.801-2.507m-11.747-1.958a1.957%201.957%200%201%200-.002%203.914%201.957%201.957%200%200%200%20.002-3.915m0%2013.705c1.219%200%202.094-1.13%202.507-1.802.818-1.332%201.269-3.126%201.269-5.052%200-.884-.097-1.742-.28-2.54-1.218%201.945-3.921%203.343-7.225%203.61.135%201.515.557%202.9%201.221%203.983.413.672%201.288%201.8%202.508%201.8m0%202.236c-3.131%200-5.63-3.44-5.972-8.013C3.442%2019.63%200%2017.132%200%2014.002s3.442-5.63%208.013-5.972C8.355%203.457%2010.854.014%2013.985.014c3.13%200%205.629%203.443%205.971%208.013%204.572.342%208.013%202.842%208.013%205.973s-3.441%205.629-8.013%205.97c-.342%204.573-2.841%208.014-5.971%208.014m93.677-7.929v-7.001c.026-3.397-1.867-5.37-4.875-5.37-1.323%200-3.294.624-4.021%202.102V7.945H96.51v12.11h2.256v-6.56c0-2.62%202.023-3.58%203.709-3.58s2.931%201.246%202.931%203.269v6.871zM95.039%2010.28a4.2%204.2%200%200%200-1.764-.415c-2.412%200-3.37%202.568-3.37%205.758v4.434h-2.282V7.945h2.281v2.749c.623-2.127%201.79-3.01%203.398-3.01.64%200%201.296.133%201.737.296zm-15.086-.467c1.997%200%203.476%201.14%203.761%203.216H76.09c.363-2.18%201.815-3.216%203.864-3.216m-3.89%205.16h9.856l.003-.037c.024-.324.048-.649.048-.973%200-3.84-2.568-6.277-6.017-6.277s-6.224%202.438-6.224%206.277%202.775%206.354%206.224%206.354c2.335%200%204.513-1.09%205.576-3.19l-1.97-.778c-.675%201.219-2.05%201.84-3.528%201.84-2.075%200-3.63-1.062-3.968-3.215m-37.806%201.479h-2.1c.103%202.49%202.333%203.865%204.512%203.865%202.516%200%204.694-1.375%204.694-3.632%200-1.374-.648-2.879-3.164-3.501l-1.79-.441c-.777-.182-1.556-.622-1.556-1.452%200-.934.78-1.634%201.946-1.634.96%200%201.92.623%201.945%201.556h2.178c0-2.438-2.126-3.527-4.175-3.527-2.438%200-4.15%201.53-4.15%203.527%200%201.945%201.167%202.931%203.19%203.476l1.66.388c.96.208%201.66.675%201.66%201.583%200%20.985-.908%201.686-2.438%201.686-1.478%200-2.386-.857-2.412-1.894m19.883%203.605V7.944h-2.257v6.562c-.026%202.62-2.049%203.58-3.735%203.58s-2.905-1.246-2.905-3.269V7.944h-2.256v7.002c-.026%203.398%201.841%205.37%204.877%205.37%201.348%200%203.294-.649%204.02-2.153v1.893zm12.055-6.017c0-2.412-1.764-4.228-3.994-4.228-2.152%200-4.098%201.634-4.098%204.228%200%202.62%202.127%204.15%204.098%204.15%202.23%200%203.994-1.712%203.994-4.15m2.282-.026c0%203.838-2.723%206.302-6.043%206.302-1.815%200-3.527-.726-4.331-2.152v8.227h-2.256V7.944h2.256v1.92c.804-1.4%202.568-2.179%204.305-2.179%203.32%200%206.069%202.515%206.069%206.328m46.935-.052c0-2.49-1.867-4.149-4.098-4.149-2.204%200-4.046%201.66-4.046%204.15%200%202.515%201.842%204.227%204.046%204.227%202.231%200%204.098-1.712%204.098-4.228m-10.426%200c0-3.838%202.879-6.276%206.328-6.276s6.354%202.438%206.354%206.276-2.904%206.354-6.354%206.354c-3.449%200-6.328-2.516-6.328-6.354m19.588%206.095%205.057-12.112h-2.438l-3.708%209.233-3.735-9.233h-2.412l5.031%2012.112zm15.17-6.095c0-2.62-2.126-4.149-4.124-4.149-2.204%200-3.968%201.711-3.968%204.15%200%202.411%201.764%204.227%203.968%204.227%202.179%200%204.124-1.634%204.124-4.228M146%207.944v12.112h-2.256v-1.92c-.804%201.401-2.567%202.18-4.305%202.18-3.32%200-6.069-2.517-6.069-6.329%200-3.839%202.723-6.302%206.043-6.302%201.815%200%203.527.726%204.331%202.152V7.944z%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fsvg%3E
- Favicon: https://www.supernova.io/icon.png?fbc0622d1e7547ae
- Social card (og:image): https://www.supernova.io/static/images/og.png

## UI Components

- input: background=#F1F3F9, textColor=#262F40, borderColor=#DEE3ED, borderRadius=12px, shadow=none
- buttonPrimary: background=#1A5EE5, textColor=#FFFFFF, borderRadius=33554400px, shadow=none
- buttonSecondary: background=#F1F3F9, textColor=#262F40, borderRadius=33554400px, shadow=none

## Brand Personality

Tone: modern · Energy: medium · Audience: product teams and tech professionals

## Supernova Brand in the Wild

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

- **Supernova in 2023: Redefining the Design System Landscape – Blog –  Supernova.io**
  - Image: https://cdn.prod.website-files.com/689eeab877a57e90992371d1/689eeab877a57e90992379ef_supernova-happy-hour.jpg
  - Source: https://www.supernova.io/blog/supernova-in-2023-redefining-the-design-system-landscape
- **Blog | Supernova.io**
  - Image: https://www.supernova.io/_next/image?url=%2Fstatic%2Fimages%2Fblog%2Fhow-design-systems-unlock-the-power-of-vibe-coding%2Fhero.png&w=1920&q=75
  - Source: https://www.supernova.io/blog
- **Four Essential Principles to Scaling Your Design System – Blog –  Supernova.io**
  - Image: https://cdn.prod.website-files.com/689eeab877a57e90992371d1/689eeab877a57e9099237a5c_Maze%20(1).png
  - Source: https://www.supernova.io/blog/four-essential-principles-to-scaling-your-design-system
- **Why Product Managers Need Design System Knowledge for Better Prototyping |  Supernova.io**
  - Image: https://cdn.prod.website-files.com/689eeab877a57e90992371d1/69aa9da79a1fc20ac26b1d57_Blog%2058.png
  - Source: https://www.supernova.io/blog/design-system-knowledge-product-managers-prototyping
- **Components: Building the Building Blocks | Supernova.io**
  - Image: https://www.supernova.io/static/images/panel/authors/giles-perry.jpg
  - Source: https://www.supernova.io/panels/components-building-the-building-blocks
- **Creating a Single Entry Point for IFC's Multi-Brand Design System, iceberg  – Blog – Supernova.io**
  - Image: https://cdn.prod.website-files.com/689eeab877a57e90992371d1/68ecf1f60650b134624ea26c_689eeab877a57e9099237b86_Blog%2078.png
  - Source: https://www.supernova.io/blog/creating-a-single-entry-point-for-ifcs-multi-brand-design-system-iceberg

## 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": "Manrope",
      "role": "body"
    }
  ],
  "colors": {
    "primary": "#66728A",
    "secondary": "#1A5EE5",
    "accent": "#1A5EE5",
    "background": "#F1F3F9",
    "textPrimary": "#262F40",
    "link": "#262F40"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Manrope",
      "heading": "Manrope"
    },
    "fontStacks": {
      "heading": [
        "Manrope",
        "ui-sans-serif",
        "system-ui",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji"
      ],
      "body": [
        "Manrope",
        "ui-sans-serif",
        "system-ui",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji"
      ],
      "paragraph": [
        "Manrope",
        "ui-sans-serif",
        "system-ui",
        "sans-serif",
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji"
      ]
    },
    "fontSizes": {
      "h1": "60px",
      "h2": "24px",
      "body": "18px"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "4px"
  },
  "components": {
    "input": {
      "background": "#F1F3F9",
      "textColor": "#262F40",
      "borderColor": "#DEE3ED",
      "borderRadius": "12px",
      "borderRadiusCorners": {
        "topLeft": "12px",
        "topRight": "12px",
        "bottomRight": "12px",
        "bottomLeft": "12px"
      },
      "shadow": "none"
    },
    "buttonPrimary": {
      "background": "#1A5EE5",
      "textColor": "#FFFFFF",
      "borderRadius": "33554400px",
      "borderRadiusCorners": {
        "topLeft": "33554400px",
        "topRight": "33554400px",
        "bottomRight": "33554400px",
        "bottomLeft": "33554400px"
      },
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "#F1F3F9",
      "textColor": "#262F40",
      "borderRadius": "33554400px",
      "borderRadiusCorners": {
        "topLeft": "33554400px",
        "topRight": "33554400px",
        "bottomRight": "33554400px",
        "bottomLeft": "33554400px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22146%22%20height%3D%2228%22%20fill%3D%22none%22%20data-fc-idx%3D%220%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.02%2010.272c-1.514.134-2.899.556-3.981%201.22-.673.413-1.802%201.288-1.802%202.508s1.129%202.095%201.802%202.508c1.332.818%203.125%201.268%205.051%201.268.886%200%201.743-.096%202.541-.28-1.946-1.217-3.342-3.92-3.611-7.224m5.965-8.02c-1.22%200-2.095%201.13-2.508%201.803-.818%201.332-1.268%203.126-1.268%205.05%200%20.886.096%201.743.279%202.541%201.218-1.946%203.921-3.341%207.225-3.61-.135-1.514-.557-2.9-1.221-3.981-.413-.673-1.288-1.802-2.507-1.802m11.747%2011.749c0-1.22-1.129-2.095-1.801-2.508-1.332-.819-3.126-1.268-5.052-1.268-.885%200-1.743.095-2.541.279%201.946%201.218%203.343%203.92%203.611%207.225%201.514-.136%202.9-.557%203.982-1.221.672-.413%201.801-1.288%201.801-2.507m-11.747-1.958a1.957%201.957%200%201%200-.002%203.914%201.957%201.957%200%200%200%20.002-3.915m0%2013.705c1.219%200%202.094-1.13%202.507-1.802.818-1.332%201.269-3.126%201.269-5.052%200-.884-.097-1.742-.28-2.54-1.218%201.945-3.921%203.343-7.225%203.61.135%201.515.557%202.9%201.221%203.983.413.672%201.288%201.8%202.508%201.8m0%202.236c-3.131%200-5.63-3.44-5.972-8.013C3.442%2019.63%200%2017.132%200%2014.002s3.442-5.63%208.013-5.972C8.355%203.457%2010.854.014%2013.985.014c3.13%200%205.629%203.443%205.971%208.013%204.572.342%208.013%202.842%208.013%205.973s-3.441%205.629-8.013%205.97c-.342%204.573-2.841%208.014-5.971%208.014m93.677-7.929v-7.001c.026-3.397-1.867-5.37-4.875-5.37-1.323%200-3.294.624-4.021%202.102V7.945H96.51v12.11h2.256v-6.56c0-2.62%202.023-3.58%203.709-3.58s2.931%201.246%202.931%203.269v6.871zM95.039%2010.28a4.2%204.2%200%200%200-1.764-.415c-2.412%200-3.37%202.568-3.37%205.758v4.434h-2.282V7.945h2.281v2.749c.623-2.127%201.79-3.01%203.398-3.01.64%200%201.296.133%201.737.296zm-15.086-.467c1.997%200%203.476%201.14%203.761%203.216H76.09c.363-2.18%201.815-3.216%203.864-3.216m-3.89%205.16h9.856l.003-.037c.024-.324.048-.649.048-.973%200-3.84-2.568-6.277-6.017-6.277s-6.224%202.438-6.224%206.277%202.775%206.354%206.224%206.354c2.335%200%204.513-1.09%205.576-3.19l-1.97-.778c-.675%201.219-2.05%201.84-3.528%201.84-2.075%200-3.63-1.062-3.968-3.215m-37.806%201.479h-2.1c.103%202.49%202.333%203.865%204.512%203.865%202.516%200%204.694-1.375%204.694-3.632%200-1.374-.648-2.879-3.164-3.501l-1.79-.441c-.777-.182-1.556-.622-1.556-1.452%200-.934.78-1.634%201.946-1.634.96%200%201.92.623%201.945%201.556h2.178c0-2.438-2.126-3.527-4.175-3.527-2.438%200-4.15%201.53-4.15%203.527%200%201.945%201.167%202.931%203.19%203.476l1.66.388c.96.208%201.66.675%201.66%201.583%200%20.985-.908%201.686-2.438%201.686-1.478%200-2.386-.857-2.412-1.894m19.883%203.605V7.944h-2.257v6.562c-.026%202.62-2.049%203.58-3.735%203.58s-2.905-1.246-2.905-3.269V7.944h-2.256v7.002c-.026%203.398%201.841%205.37%204.877%205.37%201.348%200%203.294-.649%204.02-2.153v1.893zm12.055-6.017c0-2.412-1.764-4.228-3.994-4.228-2.152%200-4.098%201.634-4.098%204.228%200%202.62%202.127%204.15%204.098%204.15%202.23%200%203.994-1.712%203.994-4.15m2.282-.026c0%203.838-2.723%206.302-6.043%206.302-1.815%200-3.527-.726-4.331-2.152v8.227h-2.256V7.944h2.256v1.92c.804-1.4%202.568-2.179%204.305-2.179%203.32%200%206.069%202.515%206.069%206.328m46.935-.052c0-2.49-1.867-4.149-4.098-4.149-2.204%200-4.046%201.66-4.046%204.15%200%202.515%201.842%204.227%204.046%204.227%202.231%200%204.098-1.712%204.098-4.228m-10.426%200c0-3.838%202.879-6.276%206.328-6.276s6.354%202.438%206.354%206.276-2.904%206.354-6.354%206.354c-3.449%200-6.328-2.516-6.328-6.354m19.588%206.095%205.057-12.112h-2.438l-3.708%209.233-3.735-9.233h-2.412l5.031%2012.112zm15.17-6.095c0-2.62-2.126-4.149-4.124-4.149-2.204%200-3.968%201.711-3.968%204.15%200%202.411%201.764%204.227%203.968%204.227%202.179%200%204.124-1.634%204.124-4.228M146%207.944v12.112h-2.256v-1.92c-.804%201.401-2.567%202.18-4.305%202.18-3.32%200-6.069-2.517-6.069-6.329%200-3.839%202.723-6.302%206.043-6.302%201.815%200%203.527.726%204.331%202.152V7.944z%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fsvg%3E",
    "favicon": "https://www.supernova.io/icon.png?fbc0622d1e7547ae",
    "ogImage": "https://www.supernova.io/static/images/og.png",
    "logoHref": "/"
  },
  "__llm_logo_reasoning": {
    "selectedIndex": 0,
    "reasoning": "Selected #0 because it is visible, located in the header, and links to the homepage, matching the brand 'Supernova.io'.",
    "confidence": 0.9,
    "source": "llm"
  },
  "__llm_button_reasoning": {
    "primary": {
      "index": 0,
      "text": "Request a demo",
      "reasoning": "Button #8 'Request a demo' with background color #1A5EE5 is vibrant and action-oriented, making it a strong primary CTA."
    },
    "secondary": {
      "index": 9,
      "text": "Learn more",
      "reasoning": "Button #5 'Learn more' with background color #F1F3F9 is less vibrant and serves as a secondary action, complementing the primary CTA."
    },
    "confidence": 0.95
  },
  "personality": {
    "tone": "modern",
    "energy": "medium",
    "targetAudience": "product teams and tech professionals"
  },
  "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 visible, located in the header, and links to the homepage, matching the brand 'Supernova.io'.",
        "confidence": 0.9
      }
    },
    "buttonClassification": {
      "llmCalled": true,
      "llmSucceeded": true
    }
  }
}
```