# Supper Brand Identity A complete profile of **Supper**'s visual system — colors, typography, components, and personality — extracted from https://www.supper.co/. Built for designers, agents, and AI tools. - Page: https://characterquilt.com/branding/supper - Machine-readable JSON: https://characterquilt.com/branding/supper.json - Per-page llms.txt: https://characterquilt.com/branding/supper/llms.txt ## Quick Facts | Field | Value | |---|---| | Primary | #17B588 | | Accent | #FFD678 | | Body Font | Host Grotesk | | Heading Font | Lazzer | ## Color Palette - primary: #17B588 - secondary: #D7F5FF - accent: #FFD678 - background: #FFFFFF - textPrimary: #000000 - link: #FFD678 ## Typography - primary: Host Grotesk — https://fonts.google.com/specimen/Host+Grotesk - heading: Lazzer — https://fonts.google.com/specimen/Lazzer ## Visual Assets - Logo: data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20viewBox%3D%220%200%20181%2041%22%20fill%3D%22none%22%20class%3D%22header_logo%22%20data-fc-idx%3D%220%22%3E%3Cg%20clip-path%3D%22url(%23clip0_835_36)%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3Crect%20x%3D%220.207031%22%20y%3D%220.00390625%22%20width%3D%2240.0592%22%20height%3D%2240.0592%22%20rx%3D%226.15854%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M9.10962%2040.0633V35.6123C9.10962%2030.6958%2013.0952%2026.7103%2018.0117%2026.7103H24.6882C25.9173%2026.7103%2026.9137%2025.7139%2026.9137%2024.4847V24.4847C26.9137%2023.2556%2025.9173%2022.2592%2024.6882%2022.2592H15.7862C12.0988%2022.2592%209.10962%2019.27%209.10962%2015.5827V15.5827C9.10962%2011.8953%2012.0988%208.90614%2015.7862%208.90614H22.4627C24.9209%208.90614%2026.9137%206.91335%2026.9137%204.45512V4.45512V0.00408936%22%20stroke%3D%22white%22%20stroke-width%3D%222.82645%22%20style%3D%22fill%3A%20none%20!important%3B%20stroke%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%20stroke-width%3A%202.82645px%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M13.5611%2040.0625V35.6115V35.6115C13.5611%2033.1532%2015.5539%2031.1604%2018.0122%2031.1604H24.6887C28.376%2031.1604%2031.3652%2028.1713%2031.3652%2024.4839V24.4839C31.3652%2020.7966%2028.376%2017.8074%2024.6887%2017.8074H15.7866C14.5575%2017.8074%2013.5611%2016.811%2013.5611%2015.5818V15.5818C13.5611%2014.3527%2014.5575%2013.3563%2015.7866%2013.3563H22.4632C27.3796%2013.3563%2031.3652%209.37075%2031.3652%204.45428V0.00325775%22%20stroke%3D%22white%22%20stroke-width%3D%222.82645%22%20style%3D%22fill%3A%20none%20!important%3B%20stroke%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%20stroke-width%3A%202.82645px%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M167.941%2033.4618V11.5977H173.219L173.596%2014.915C174.274%2012.8793%20175.933%2011.5977%20178.044%2011.5977C180.155%2011.5977%20180.954%2012.0357%20180.954%2012.0357L179.715%2016.7998H178.459C175.518%2016.7998%20173.897%2019.137%20173.897%2022.7936V33.4618H167.941Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M156.336%2033.9134C149.777%2033.9134%20145.441%2028.7866%20145.441%2022.5289C145.441%2016.309%20149.513%2011.1445%20155.883%2011.1445C163.101%2011.1445%20166.61%2016.9881%20166.145%2023.7154H151.171C151.473%2026.5804%20153.32%2028.6735%20156.336%2028.6735C158.447%2028.6735%20160.482%2027.1541%20160.934%2025.7594L165.526%2027.8748C164.494%2031.796%20161.161%2033.9134%20156.336%2033.9134ZM151.397%2019.664H160.181C160.068%2017.4399%20158.334%2015.9697%20155.996%2015.9697C153.81%2015.9697%20152.038%2017.3268%20151.397%2019.664Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M122.912%2011.5969H128.529V13.6641C129.886%2011.6285%20132.072%2011.1445%20134.485%2011.1445C140.064%2011.1445%20144.022%2015.6681%20144.022%2022.5289C144.022%2029.4274%20140.026%2033.9134%20134.485%2033.9134C132.223%2033.9134%20130.225%2033.6179%20128.868%2031.8461V40.171H122.912V11.5969ZM128.868%2022.5289C128.868%2026.2232%20130.64%2028.5227%20133.392%2028.5227C136.181%2028.5227%20138.028%2026.2609%20138.028%2022.5289C138.028%2018.797%20136.181%2016.5352%20133.392%2016.5352C130.64%2016.5352%20128.868%2018.8724%20128.868%2022.5289Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M100.217%2011.5969H105.834V13.6641C107.191%2011.6285%20109.377%2011.1445%20111.79%2011.1445C117.369%2011.1445%20121.327%2015.6681%20121.327%2022.5289C121.327%2029.4274%20117.331%2033.9134%20111.79%2033.9134C109.528%2033.9134%20107.53%2033.6179%20106.173%2031.8461V40.171H100.217V11.5969ZM106.173%2022.5289C106.173%2026.2232%20107.945%2028.5227%20110.696%2028.5227C113.486%2028.5227%20115.333%2026.2609%20115.333%2022.5289C115.333%2018.797%20113.486%2016.5352%20110.696%2016.5352C107.945%2016.5352%20106.173%2018.8724%20106.173%2022.5289Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M97.8771%2011.5977V33.4618H92.5996L92.2603%2030.4083C90.9032%2032.5947%2088.7545%2033.9141%2086.1534%2033.9141C81.5544%2033.9141%2078.3125%2030.7853%2078.3125%2025.8847V11.5977H84.2686V24.603C84.2686%2027.0156%2085.7388%2028.5235%2087.9629%2028.5235C90.4131%2028.5235%2091.921%2026.6386%2091.921%2024.0376V11.5977H97.8771Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M65.1466%2033.9144C58.9266%2033.9144%2055.0164%2031.0746%2053.7266%2024.5736L59.4921%2023.0954C59.7936%2026.1865%2062.357%2028.2976%2065.5989%2028.2976C67.823%2028.2976%2069.7833%2027.0536%2069.7833%2025.2818C69.7833%2019.175%2054.1014%2023.5933%2054.1014%2013.0681C54.1014%208.2429%2058.625%204.8125%2064.9204%204.8125C71.1027%204.8125%2074.9323%207.80504%2076.0674%2012.4486L69.8964%2014.1236C69.5194%2011.9372%2068.1217%2010.1376%2064.3827%2010.1376C62.0832%2010.1376%2060.3968%2011.2209%2060.3968%2012.7288C60.3968%2017.8556%2076.0786%2014.6672%2076.0786%2024.8295C76.0786%2030.2578%2071.9398%2033.9144%2065.1466%2033.9144Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3C%2Fsvg%3E - Favicon: https://cdn.prod.website-files.com/6878f348cb0839fd6dc7599d/68912d0c9f55a3fb68b2f8b1_Supper%20Favicon.png - Social card (og:image): https://cdn.prod.website-files.com/6878f348cb0839fd6dc7599d/6892361798f9bef9d3c1a4a1_supper-open-graph%20(1).jpg ## UI Components - buttonPrimary: background=#17B588, textColor=#000000, borderRadius=0px, shadow=none - buttonSecondary: background=#FFD678, textColor=#000000, borderColor=#FFD678, borderRadius=9.6px, shadow=none ## Brand Personality Tone: modern · Energy: high · Audience: high-growth companies ## Supper Brand in the Wild Real-world brand assets — ads, campaigns, marketing materials. - **Privacy Policy** - Image: https://cdn.prod.website-files.com/6878f348cb0839fd6dc7599d/6892361798f9bef9d3c1a4a1_supper-open-graph%20(1).jpg - Source: https://www.supper.co/privacy-policy - **Supper | The AI Data Agent for High-Growth Companies** - Image: https://cdn.prod.website-files.com/6878f348cb0839fd6dc7599d%2F689f9a1d52d473a121c8927e_SUPER_Security_v002-poster-00001.jpg - Source: https://www.supper.co/ - **Supper | The AI Data Agent for High-Growth Companies** - Image: https://cdn.prod.website-files.com/6878f348cb0839fd6dc7599d%2F689f99fbbb4b2743c68cd9b2_SUPPER_Fast_Integration_v005-poster-00001.jpg - Source: https://www.supper.co/ - **Supper | The AI Data Agent for High-Growth Companies** - Image: https://cdn.prod.website-files.com/6878f348cb0839fd6dc7599d/692e8d5ffcb133958f1d60df_1%20(3).png - Source: https://www.supper.co/ - **Supper | The AI Data Agent for High-Growth Companies** - Image: https://cdn.prod.website-files.com/6878f348cb0839fd6dc7599d/692e8d7b623052f6682923de_1%20(6).png - Source: https://www.supper.co/ ## 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": "Lazzer", "role": "heading" }, { "family": "Host Grotesk", "role": "body" } ], "colors": { "primary": "#17B588", "secondary": "#D7F5FF", "accent": "#FFD678", "background": "#FFFFFF", "textPrimary": "#000000", "link": "#FFD678" }, "typography": { "fontFamilies": { "primary": "Host Grotesk", "heading": "Lazzer" }, "fontStacks": { "heading": [ "Lazzer", "Arial", "sans-serif" ], "body": [ "Lazzer", "Arial", "sans-serif" ], "paragraph": [ "Lazzer", "Arial", "sans-serif" ] }, "fontSizes": { "h1": "96px", "h2": "24px", "body": "28.8px" } }, "spacing": { "baseUnit": 4, "borderRadius": "10px" }, "components": { "buttonPrimary": { "background": "#17B588", "textColor": "#000000", "borderRadius": "0px", "borderRadiusCorners": { "topLeft": "0px", "topRight": "0px", "bottomRight": "0px", "bottomLeft": "0px" }, "shadow": "none" }, "buttonSecondary": { "background": "#FFD678", "textColor": "#000000", "borderColor": "#FFD678", "borderRadius": "9.6px", "borderRadiusCorners": { "topLeft": "9.6px", "topRight": "9.6px", "bottomRight": "9.6px", "bottomLeft": "9.6px" }, "shadow": "none" } }, "images": { "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20viewBox%3D%220%200%20181%2041%22%20fill%3D%22none%22%20class%3D%22header_logo%22%20data-fc-idx%3D%220%22%3E%3Cg%20clip-path%3D%22url(%23clip0_835_36)%22%20style%3D%22fill%3A%20none%20!important%3B%22%3E%3Crect%20x%3D%220.207031%22%20y%3D%220.00390625%22%20width%3D%2240.0592%22%20height%3D%2240.0592%22%20rx%3D%226.15854%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M9.10962%2040.0633V35.6123C9.10962%2030.6958%2013.0952%2026.7103%2018.0117%2026.7103H24.6882C25.9173%2026.7103%2026.9137%2025.7139%2026.9137%2024.4847V24.4847C26.9137%2023.2556%2025.9173%2022.2592%2024.6882%2022.2592H15.7862C12.0988%2022.2592%209.10962%2019.27%209.10962%2015.5827V15.5827C9.10962%2011.8953%2012.0988%208.90614%2015.7862%208.90614H22.4627C24.9209%208.90614%2026.9137%206.91335%2026.9137%204.45512V4.45512V0.00408936%22%20stroke%3D%22white%22%20stroke-width%3D%222.82645%22%20style%3D%22fill%3A%20none%20!important%3B%20stroke%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%20stroke-width%3A%202.82645px%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M13.5611%2040.0625V35.6115V35.6115C13.5611%2033.1532%2015.5539%2031.1604%2018.0122%2031.1604H24.6887C28.376%2031.1604%2031.3652%2028.1713%2031.3652%2024.4839V24.4839C31.3652%2020.7966%2028.376%2017.8074%2024.6887%2017.8074H15.7866C14.5575%2017.8074%2013.5611%2016.811%2013.5611%2015.5818V15.5818C13.5611%2014.3527%2014.5575%2013.3563%2015.7866%2013.3563H22.4632C27.3796%2013.3563%2031.3652%209.37075%2031.3652%204.45428V0.00325775%22%20stroke%3D%22white%22%20stroke-width%3D%222.82645%22%20style%3D%22fill%3A%20none%20!important%3B%20stroke%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%20stroke-width%3A%202.82645px%20!important%3B%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M167.941%2033.4618V11.5977H173.219L173.596%2014.915C174.274%2012.8793%20175.933%2011.5977%20178.044%2011.5977C180.155%2011.5977%20180.954%2012.0357%20180.954%2012.0357L179.715%2016.7998H178.459C175.518%2016.7998%20173.897%2019.137%20173.897%2022.7936V33.4618H167.941Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M156.336%2033.9134C149.777%2033.9134%20145.441%2028.7866%20145.441%2022.5289C145.441%2016.309%20149.513%2011.1445%20155.883%2011.1445C163.101%2011.1445%20166.61%2016.9881%20166.145%2023.7154H151.171C151.473%2026.5804%20153.32%2028.6735%20156.336%2028.6735C158.447%2028.6735%20160.482%2027.1541%20160.934%2025.7594L165.526%2027.8748C164.494%2031.796%20161.161%2033.9134%20156.336%2033.9134ZM151.397%2019.664H160.181C160.068%2017.4399%20158.334%2015.9697%20155.996%2015.9697C153.81%2015.9697%20152.038%2017.3268%20151.397%2019.664Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M122.912%2011.5969H128.529V13.6641C129.886%2011.6285%20132.072%2011.1445%20134.485%2011.1445C140.064%2011.1445%20144.022%2015.6681%20144.022%2022.5289C144.022%2029.4274%20140.026%2033.9134%20134.485%2033.9134C132.223%2033.9134%20130.225%2033.6179%20128.868%2031.8461V40.171H122.912V11.5969ZM128.868%2022.5289C128.868%2026.2232%20130.64%2028.5227%20133.392%2028.5227C136.181%2028.5227%20138.028%2026.2609%20138.028%2022.5289C138.028%2018.797%20136.181%2016.5352%20133.392%2016.5352C130.64%2016.5352%20128.868%2018.8724%20128.868%2022.5289Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M100.217%2011.5969H105.834V13.6641C107.191%2011.6285%20109.377%2011.1445%20111.79%2011.1445C117.369%2011.1445%20121.327%2015.6681%20121.327%2022.5289C121.327%2029.4274%20117.331%2033.9134%20111.79%2033.9134C109.528%2033.9134%20107.53%2033.6179%20106.173%2031.8461V40.171H100.217V11.5969ZM106.173%2022.5289C106.173%2026.2232%20107.945%2028.5227%20110.696%2028.5227C113.486%2028.5227%20115.333%2026.2609%20115.333%2022.5289C115.333%2018.797%20113.486%2016.5352%20110.696%2016.5352C107.945%2016.5352%20106.173%2018.8724%20106.173%2022.5289Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M97.8771%2011.5977V33.4618H92.5996L92.2603%2030.4083C90.9032%2032.5947%2088.7545%2033.9141%2086.1534%2033.9141C81.5544%2033.9141%2078.3125%2030.7853%2078.3125%2025.8847V11.5977H84.2686V24.603C84.2686%2027.0156%2085.7388%2028.5235%2087.9629%2028.5235C90.4131%2028.5235%2091.921%2026.6386%2091.921%2024.0376V11.5977H97.8771Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M65.1466%2033.9144C58.9266%2033.9144%2055.0164%2031.0746%2053.7266%2024.5736L59.4921%2023.0954C59.7936%2026.1865%2062.357%2028.2976%2065.5989%2028.2976C67.823%2028.2976%2069.7833%2027.0536%2069.7833%2025.2818C69.7833%2019.175%2054.1014%2023.5933%2054.1014%2013.0681C54.1014%208.2429%2058.625%204.8125%2064.9204%204.8125C71.1027%204.8125%2074.9323%207.80504%2076.0674%2012.4486L69.8964%2014.1236C69.5194%2011.9372%2068.1217%2010.1376%2064.3827%2010.1376C62.0832%2010.1376%2060.3968%2011.2209%2060.3968%2012.7288C60.3968%2017.8556%2076.0786%2014.6672%2076.0786%2024.8295C76.0786%2030.2578%2071.9398%2033.9144%2065.1466%2033.9144Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3C%2Fsvg%3E", "favicon": "https://cdn.prod.website-files.com/6878f348cb0839fd6dc7599d/68912d0c9f55a3fb68b2f8b1_Supper%20Favicon.png", "ogImage": "https://cdn.prod.website-files.com/6878f348cb0839fd6dc7599d/6892361798f9bef9d3c1a4a1_supper-open-graph%20(1).jpg", "logoHref": "/" }, "__llm_logo_reasoning": { "selectedIndex": 0, "reasoning": "Selected #0 because it is visible, located in the header, and links to the homepage, which are strong indicators of the main brand logo.", "confidence": 0.9, "source": "llm" }, "__llm_button_reasoning": { "primary": { "index": 0, "text": "See Case StudiesGet a Demo", "reasoning": "Button #1 has a vibrant green background (#17B588), which is a strong brand color and typically used for primary CTAs. The text 'See Case StudiesGet a Demo' suggests a direct action, aligning with primary CTA characteristics." }, "secondary": { "index": 1, "text": "Schedule a demo", "reasoning": "Button #7 has a vibrant orange background (#FFD678), distinct from the primary button's green. The text 'Schedule a demo' indicates a secondary action, making it suitable as a secondary CTA." }, "confidence": 0.95 }, "personality": { "tone": "modern", "energy": "high", "targetAudience": "high-growth companies" }, "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": 0, "selectedLogoReasoning": "Selected #0 because it is visible, located in the header, and links to the homepage, which are strong indicators of the main brand logo.", "confidence": 0.9 } }, "buttonClassification": { "llmCalled": true, "llmSucceeded": true } } } ```