hyprnote.json

Hyprnote Brand Identity

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

Quick Facts

Field Value
Primary #332D23
Accent #7C47E5
Body Font Geist
Heading Font Fraunces

Color Palette

Typography

Visual Assets

UI Components

Brand Personality

Tone: modern · Energy: medium · Audience: tech-savvy professionals

Hyprnote Brand in the Wild

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

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

{
  "colorScheme": "light",
  "fonts": [
    {
      "family": "Geist",
      "role": "body"
    },
    {
      "family": "Geist Mono",
      "role": "monospace"
    },
    {
      "family": "Fraunces",
      "role": "heading"
    },
    {
      "family": "Georgia",
      "role": "unknown"
    }
  ],
  "colors": {
    "primary": "#332D23",
    "secondary": "#EFF6FF",
    "accent": "#7C47E5",
    "background": "#F2F1EF",
    "textPrimary": "#000000",
    "link": "#7C47E5"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Geist",
      "heading": "Fraunces"
    },
    "fontStacks": {
      "heading": [
        "Geist",
        "ui-monospace",
        "monospace"
      ],
      "body": [
        "Geist",
        "system-ui",
        "-apple-system",
        "sans-serif"
      ],
      "paragraph": [
        "Geist",
        "system-ui",
        "-apple-system",
        "sans-serif"
      ]
    },
    "fontSizes": {
      "h1": "60px",
      "h2": "48px",
      "body": "20px"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "0px"
  },
  "components": {
    "input": {
      "background": "#FFFFFF",
      "textColor": "#000000",
      "borderColor": null,
      "borderRadius": "0px",
      "borderRadiusCorners": {
        "topLeft": "0px",
        "topRight": "0px",
        "bottomRight": "0px",
        "bottomLeft": "0px"
      },
      "shadow": "none"
    },
    "buttonPrimary": {
      "background": "#7C47E5",
      "textColor": "#FFFFFF",
      "borderRadius": "28px",
      "borderRadiusCorners": {
        "topLeft": "14px",
        "topRight": "28px",
        "bottomRight": "0px",
        "bottomLeft": "0px"
      },
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "transparent",
      "textColor": "#332D23",
      "borderColor": "#B7B6B5",
      "borderRadius": "33554400px",
      "borderRadiusCorners": {
        "topLeft": "33554400px",
        "topRight": "33554400px",
        "bottomRight": "33554400px",
        "bottomLeft": "33554400px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "data:image/svg+xml;utf8,%3Csvg%20width%3D%22103%22%20height%3D%2230%22%20viewBox%3D%220%200%20103%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22text-fg%20wide%3Ah-8%20h-6%20w-auto%20transition-colors%20hover%3Ascale-105%22%20data-fc-idx%3D%220%22%3E%3Cpath%20d%3D%22M7.871%204.147C7.871%205.658%207.082%207.039%206.099%208.214C4.65%209.946%203.77%2012.161%203.77%2014.575C3.77%2016.99%204.65%2019.205%206.099%2020.937C7.082%2022.112%207.871%2023.493%207.871%2025.004V29.151H2.965V24.319C2.965%2022.735%202.165%2021.249%200.822%2020.34L0%2019.783V9.235L0.822%208.678C2.165%207.769%202.965%206.284%202.965%204.699V0L7.871%200V4.147Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20oklch(0.3%200.0197%2081.53)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M94.746%204.147C94.746%205.658%2095.535%207.039%2096.519%208.214C97.967%209.946%2098.847%2012.161%2098.847%2014.575C98.847%2016.99%2097.967%2019.205%2096.519%2020.937C95.535%2022.112%2094.746%2023.493%2094.746%2025.004V29.151H99.653V24.319C99.653%2022.735%20100.452%2021.249%20101.795%2020.34L102.617%2019.783V9.235L101.795%208.678C100.452%207.769%2099.653%206.284%2099.653%204.699V0L94.746%200V4.147Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20oklch(0.3%200.0197%2081.53)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M90.369%204.536H86.669C84.596%204.536%2082.721%205.667%2081.73%207.429V4.536H73.026V8.029H78.244V20.821H73.026V24.313H90.311V20.821H82.425V12.447C82.425%2010.262%2084.191%208.494%2086.365%208.494H90.369V4.536Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20oklch(0.3%200.0197%2081.53)%20!important%3B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M60.901%204.071C63.781%204.071%2066.142%205.182%2067.798%206.995V4.536H71.284V24.313H67.798V21.805C66.128%2023.645%2063.753%2024.778%2060.901%2024.778C55.064%2024.778%2051.331%2020.074%2051.331%2014.425C51.331%2011.606%2052.225%209.021%2053.882%207.131C55.546%205.235%2057.954%204.071%2060.901%204.071ZM61.365%207.912C59.5%207.912%2058.023%208.638%2057.005%209.793C55.981%2010.956%2055.396%2012.586%2055.396%2014.425C55.396%2018.088%2057.776%2020.937%2061.365%2020.937C64.954%2020.937%2067.334%2018.088%2067.334%2014.425C67.334%2012.586%2066.749%2010.956%2065.725%209.793C64.708%208.638%2063.231%207.912%2061.365%207.912Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20oklch(0.3%200.0197%2081.53)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M49.589%2012.098C49.589%207.924%2046.214%204.536%2042.048%204.536H41.195C39.142%204.536%2036.977%205.657%2035.905%207.463V0H32.188V24.313H36.369V12.447C36.369%2011.405%2036.912%2010.422%2037.78%209.684C38.648%208.944%2039.793%208.494%2040.891%208.494H41.06C43.345%208.494%2045.407%2010.359%2045.407%2012.564V24.313H49.589V12.098Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20oklch(0.3%200.0197%2081.53)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M26.243%2017.328C25.77%2019.561%2023.754%2021.053%2020.995%2021.053C17.296%2021.053%2014.852%2018.146%2014.852%2014.425C14.852%2012.556%2015.453%2010.897%2016.506%209.713C17.552%208.536%2019.074%207.796%2020.995%207.796C23.793%207.796%2025.772%209.443%2026.26%2011.533L26.365%2011.983H30.559L30.436%2011.297C29.689%207.153%2026.043%204.071%2020.995%204.071C17.864%204.071%2015.3%205.224%2013.522%207.117C11.749%209.005%2010.787%2011.595%2010.787%2014.425C10.787%2020.113%2014.807%2024.778%2020.995%2024.778C25.907%2024.778%2029.753%2022.074%2030.427%2017.535L30.527%2016.866H26.341L26.243%2017.328Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20oklch(0.3%200.0197%2081.53)%20!important%3B%22%2F%3E%3C%2Fsvg%3E",
    "favicon": "https://char.com/favicon.svg",
    "ogImage": "https://char.com/api/assets/blog/brand-assets/OG.png",
    "logoHref": "/"
  },
  "__llm_logo_reasoning": {
    "selectedIndex": 4,
    "reasoning": "Selected #4 because it is visible, located in the header, and links to the homepage, matching the brand 'Char'.",
    "confidence": 0.9,
    "source": "llm"
  },
  "__llm_button_reasoning": {
    "primary": {
      "index": 4,
      "text": "Developers",
      "reasoning": "Button #4 has a vibrant brand color (#7C47E5) and is likely the primary CTA due to its standout color and prominent placement."
    },
    "secondary": {
      "index": 8,
      "text": "View on GitHub",
      "reasoning": "Button #1 is a secondary action with a transparent background, making it less prominent and suitable as a secondary button."
    },
    "confidence": 0.95
  },
  "personality": {
    "tone": "modern",
    "energy": "medium",
    "targetAudience": "tech-savvy 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": 4,
        "selectedLogoReasoning": "Selected #4 because it is visible, located in the header, and links to the homepage, matching the brand 'Char'.",
        "confidence": 0.9
      }
    },
    "buttonClassification": {
      "llmCalled": true,
      "llmSucceeded": true
    }
  }
}