# SuperHi Brand Identity

A complete profile of **SuperHi**'s visual system — colors, typography, components, and personality — extracted from [https://www.superhi.com/](https://www.superhi.com/). Built for designers, agents, and AI tools.

## Colors

### Primary

#2727E6

### Accent

#2727E6

## Typography

### Body Font

Haas Grot Text

### Heading

Haas Grot Display

## Color Palette

Brand palette extracted from https://www.superhi.com/.  
**Primary**: #2727E6  
**RGB**: rgb(39, 39, 230)  
**Secondary**: #16AB59  
**RGB**: rgb(22, 171, 89)  
**Accent**: #2727E6  
**RGB**: rgb(39, 39, 230)  
**Background**: #F0F6FF  
**RGB**: rgb(240, 246, 255)  
**Text Primary**: #2727E6  
**RGB**: rgb(39, 39, 230)  
**Link**: #2727E6  
**RGB**: rgb(39, 39, 230)

## Typography

Each font links to its Google Fonts page where available.  
**Primary**: Haas Grot Text [Google Fonts →](https://fonts.google.com/specimen/Haas+Grot+Text)  
**Heading**: Haas Grot Display [Google Fonts →](https://fonts.google.com/specimen/Haas+Grot+Display)

## UI Components

Live previews rendered using SuperHi's actual button styles.

**Input**  
- Background: #F0F6FF  
- Text Color: #000000  
- Border Color: null  
- Border Radius: 5000px  
- Shadow: none

**Button Primary**  
- Background: #2727E6  
- Text Color: #FFFFFF  
- Border Radius: 48px  
- Shadow: none

**Button Secondary**  
- Background: #FFFFFF  
- Text Color: #111118  
- Border Radius: 48px  
- Shadow: none

## Brand Personality

- **Tone:** modern  
- **Energy:** medium  
- **Audience:** creative professionals and students

## Frequently Asked Questions

**What is SuperHi's primary brand color?**  
SuperHi's primary brand color is #2727E6. It anchors the visual identity across their website, product UI, and marketing materials.

**What font does SuperHi use?**  
SuperHi uses Haas Grot Text for body text and Haas Grot Display for headings. Fonts were detected on https://www.superhi.com/ as part of their live design system.

**Does SuperHi use a light or dark theme?**  
SuperHi's primary site uses a light color scheme, with a background of #F0F6FF.

**Where can I find SuperHi's logo?**  
SuperHi's logo is available directly on their site (https://www.superhi.com/). The current logo URL is included in the machine-readable JSON profile linked above.

**How was this brand profile generated?**  
This profile was extracted from https://www.superhi.com/ using the Firecrawl branding extraction API, which inspects the live page's CSS, fonts, color tokens, and component styles. It is not affiliated with or endorsed by SuperHi.

## Machine-Readable Profile

Direct endpoints for agents, designers, and tooling. No login or auth required.

```json
{
  "colorScheme": "light",
  "fonts": [
    {
      "family": "Haas Grot Text",
      "role": "body"
    },
    {
      "family": "Haas Grot Display",
      "role": "heading"
    }
  ],
  "colors": {
    "primary": "#2727E6",
    "secondary": "#16AB59",
    "accent": "#2727E6",
    "background": "#F0F6FF",
    "textPrimary": "#2727E6",
    "link": "#2727E6"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Haas Grot Text",
      "heading": "Haas Grot Display"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "16px"
  },
  "components": {
    "input": {
      "background": "#F0F6FF",
      "textColor": "#000000",
      "borderColor": null,
      "borderRadius": "5000px",
      "shadow": "none"
    },
    "buttonPrimary": {
      "background": "#2727E6",
      "textColor": "#FFFFFF",
      "borderRadius": "48px",
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "#FFFFFF",
      "textColor": "#111118",
      "borderRadius": "48px",
      "shadow": "none"
    }
  },
  "images": {
    "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20104%2046%22%20data-fc-idx%3D%220%22%3E%3Cg%20class%3D%22SiteHeader_logoLetter__tW243%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%2025.3886H2.52622C2.62735%2026.2346%202.92497%2026.838%203.41893%2027.1991C3.9126%2027.5602%204.54907%2027.7408%205.32777%2027.7408C6.06856%2027.7408%206.69201%2027.574%207.19856%2027.2403C7.7051%2026.9068%207.9583%2026.4238%207.9583%2025.791C7.9583%2025.2822%207.81246%2024.8764%207.52135%2024.5737C7.2301%2024.2711%206.78389%2024.0373%206.18243%2023.8722L3.59935%2023.1293C2.5103%2022.8198%201.7031%2022.3127%201.17774%2021.6076C0.652099%2020.9027%200.38935%2020.0241%200.38935%2018.9718C0.38935%2018.394%200.503362%2017.8611%200.731387%2017.3727C0.959268%2016.8845%201.28047%2016.4649%201.69528%2016.1141C2.10995%2015.7634%202.61491%2015.4899%203.21%2015.2939C3.80509%2015.0979%204.47311%2015%205.21376%2015C5.88481%2015%206.51%2015.0842%207.08932%2015.2527C7.66864%2015.4212%208.17186%2015.6809%208.59926%2016.0315C9.02666%2016.3824%209.37637%2016.8328%209.64867%2017.3831C9.92082%2017.9334%2010.0887%2018.5797%2010.152%2019.3225H7.62582C7.58805%2018.9305%207.49459%2018.6004%207.34585%2018.3321C7.19697%2018.064%207.01177%2017.8491%206.79025%2017.6874C6.56845%2017.5258%206.31858%2017.4141%206.04006%2017.3521C5.76125%2017.2902%205.47318%2017.2592%205.17585%2017.2592C4.47311%2017.2592%203.92055%2017.4103%203.51862%2017.7124C3.11639%2018.0145%202.91557%2018.4264%202.91557%2018.9481C2.91557%2019.4972%203.07212%2019.9142%203.38608%2020.199C3.69947%2020.4842%204.17332%2020.7191%204.80704%2020.9044L7.0585%2021.5413C8.18459%2021.8654%209.03708%2022.3548%209.61597%2023.0096C10.1949%2023.6644%2010.4844%2024.5847%2010.4844%2025.7703C10.4844%2026.4306%2010.361%2027.0222%2010.1141%2027.5448C9.867%2028.0675%209.51729%2028.5111%209.06472%2028.8756C8.61199%2029.2401%208.07058%2029.5187%207.44076%2029.7111C6.8108%2029.9037%206.11906%2030%205.36582%2030C4.62489%2030%203.94124%2029.9158%203.31446%2029.7473C2.68769%2029.5788%202.13687%2029.3106%201.66201%2028.9425C1.18729%2028.5747%200.80402%2028.0983%200.513056%2027.5138C0.221659%2026.9293%200.0506401%2026.2209%200%2025.3886%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22SiteHeader_logoLetter__tW243%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17.1563%2024.4488V15H19.722V24.5647C19.722%2025.5126%2019.9453%2026.2589%2020.3922%2026.803C20.8392%2027.3473%2021.5094%2027.6193%2022.4033%2027.6193C23.3101%2027.6193%2023.9883%2027.3507%2024.4384%2026.8135C24.8885%2026.2764%2025.1134%2025.5268%2025.1134%2024.5647V15H27.6406V24.4488C27.6406%2025.2986%2027.5188%2026.0657%2027.2755%2026.7503C27.0318%2027.4351%2026.6843%2028.018%2026.2327%2028.499C25.7812%2028.9801%2025.2332%2029.3505%2024.5894%2029.6103C23.9455%2029.87%2023.2168%2030%2022.4033%2030C21.5866%2030%2020.8568%2029.87%2020.2139%2029.6103C19.5709%2029.3505%2019.0209%2028.9835%2018.5646%2028.5096C18.1079%2028.0355%2017.7592%2027.4561%2017.518%2026.7713C17.2771%2026.0867%2017.1563%2025.3125%2017.1563%2024.4488%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22SiteHeader_logoLetter__tW243%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M34.3125%2029V15H39.6951C41.1065%2015%2042.1507%2015.3601%2042.8279%2016.0804C43.505%2016.8007%2043.8438%2017.9381%2043.8438%2019.4924C43.8438%2020.9732%2043.4672%2022.0904%2042.7141%2022.8442C41.9608%2023.598%2040.961%2023.9749%2039.7142%2023.9749H36.8378V29H34.3125V29ZM36.8378%2021.7136H39.9706C40.4134%2021.7136%2040.7314%2021.5965%2040.9245%2021.3619C41.1176%2021.1273%2041.214%2020.779%2041.214%2020.3167V18.588C41.214%2018.1191%2041.1239%2017.7824%2040.9436%2017.578C40.7632%2017.3736%2040.4388%2017.2714%2039.9706%2017.2714H36.8378V21.7136V21.7136Z%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22SiteHeader_logoLetter__tW243%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M50.5156%2029V15H60.0469V17.2714H53.1622V20.7085H59.1116V22.9699H53.1622V26.7387H60.0469V29H50.5156%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22SiteHeader_logoLetter__tW243%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M65.7656%2029V15H71.5711C73.0932%2015%2074.2193%2015.3534%2074.9498%2016.0602C75.6803%2016.7672%2076.0453%2017.8543%2076.0453%2019.3215C76.0453%2020.434%2075.7758%2021.3267%2075.2365%2022.0001C74.6972%2022.6733%2073.9464%2023.1407%2072.984%2023.4021L76.25%2029H73.2296L70.2297%2023.6232H68.4891V29H65.7656V29ZM68.4891%2021.4221H71.9294C72.7826%2021.4221%2073.2092%2020.9566%2073.2092%2020.0252V18.588C73.2092%2018.1191%2073.1153%2017.7824%2072.9276%2017.578C72.7398%2017.3736%2072.4071%2017.2714%2071.9294%2017.2714H68.4891V21.4221V21.4221Z%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M84.148%2024L81.0156%209.67576L83.5146%209.02091L84.8009%2014.9029L90.0143%2013.5367L88.7281%207.65484L91.227%207L94.3594%2021.3244L91.8605%2021.9791L90.5204%2015.8505L85.3067%2017.2165L86.647%2023.3453L84.148%2024%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M83.1063%2038L101.984%2036.2696L101.8%2034L82.9219%2035.7304L83.1063%2038%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M97.2712%2025.0988C97.4823%2024.3007%2098.2701%2023.8335%2099.0308%2024.055C99.7913%2024.2767%20100.237%2025.1033%20100.026%2025.9012C99.8144%2026.6993%2099.0267%2027.1665%2098.266%2026.945C97.5053%2026.7233%2097.0601%2025.8967%2097.2712%2025.0988%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M103.891%2014.7199L101.803%2022L99.125%2021.2799L101.213%2014L103.891%2014.7199%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3C%2Fsvg%3E"
,
  "favicon": "https://www.superhi.com/favicon.ico",
  "ogImage": "https://superhi.com/social-share-default.png"
}