# 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.

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

## Quick Facts

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

## Color Palette

- primary: #332D23
- secondary: #EFF6FF
- accent: #7C47E5
- background: #F2F1EF
- textPrimary: #000000
- link: #7C47E5

## Typography

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

## Visual Assets

- 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
- Social card (og:image): https://char.com/api/assets/blog/brand-assets/OG.png

## UI Components

- input: background=#FFFFFF, textColor=#000000, borderColor=null, borderRadius=0px, shadow=none
- buttonPrimary: background=#7C47E5, textColor=#FFFFFF, borderRadius=28px, shadow=none
- buttonSecondary: background=transparent, textColor=#332D23, borderColor=#B7B6B5, borderRadius=33554400px, shadow=none

## Brand Personality

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

## Hyprnote Brand in the Wild

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

- **Char vs Tactiq - Privacy-First AI Notetaking**
  - Image: https://image.mux.com/rbkYuZpGJGLHx023foq9DCSt3pY1RegJU5PvMCkRE3rE/thumbnail.webp
  - Source: https://hyprnote.com/vs/tactiq
- **Char vs Tactiq - Privacy-First AI Notetaking**
  - Image: https://char.com/icons/file.webp
  - Source: https://hyprnote.com/vs/tactiq
- **Char - Meeting Notes You Own**
  - Image: https://image.mux.com/1s01BC9LBwzygOUWk9Pdn011KuxvIQRMbTEfCpOypfdrw/thumbnail.webp
  - Source: https://hyprnote.com/?ref=ggoom.blog
- **Char vs Tactiq - Privacy-First AI Notetaking**
  - Image: https://image.mux.com/lKr5l1fWGNnRqOehiz15mV79VHtFOCiuO9urmgqs6V8/thumbnail.jpg?width=1920&height=1080&fit_mode=smartcrop
  - Source: https://hyprnote.com/vs/tactiq
- **Char vs Tactiq - Privacy-First AI Notetaking**
  - Image: https://image.mux.com/sMWkuSxKWfH3RYnX51Xa2acih01ZP5yfQy01Q00XRd1yTQ/thumbnail.jpg?width=1920&height=1080&fit_mode=smartcrop
  - Source: https://hyprnote.com/vs/tactiq
- **OSS Friends - Char**
  - Image: https://argos-ci.com/opengraph-image.jpg?opengraph-image.17375fb1.jpg
  - Source: https://hyprnote.com/oss-friends/

## 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": "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
    }
  }
}
```