# Heptabase Brand Identity A complete profile of **Heptabase**'s visual system — colors, typography, components, and personality — extracted from [https://heptabase.com/](https://heptabase.com/). Built for designers, agents, and AI tools. ## Color Palette Brand palette extracted from https://heptabase.com/. - **Primary**: #F7EDE4 - rgb(247, 237, 228) - **Secondary**: #FEBC2E - rgb(254, 188, 46) - **Accent**: #FF5F57 - rgb(255, 95, 87) - **Background**: #F7F7F7 - rgb(247, 247, 247) - **Text Primary**: #2E2E2E - rgb(46, 46, 46) - **Link**: #FF5F57 - rgb(255, 95, 87) ## Typography Each font links to its Google Fonts page where available. - **Primary**: Inter [Google Fonts →](https://fonts.google.com/specimen/Inter) - **Heading**: Inter [Google Fonts →](https://fonts.google.com/specimen/Inter) Inter, sans-serif ```markdown 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. ``` ## Visual Assets %20!important%3B%22%2F%3E%3C%2Fsvg%3E) Logo Favicon Social Card ## UI Components Live previews rendered using Heptabase's actual button styles. ### Button Primary - **Background**: #2E2E2E - **Text Color**: #FFFFFF - **Border Radius**: 10px - **Shadow**: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px 0px ### Button Secondary - **Background**: #FFFFFF - **Text Color**: #454545 - **Border Color**: #D7D7D7 - **Border Radius**: 8px - **Shadow**: none ## Brand Personality - **Tone**: modern - **Energy**: medium - **Audience**: tech-savvy professionals ## Heptabase Brand in the Wild Real-world brand assets — ads, campaigns, and marketing materials. Image: [heptabase.com](https://heptabase.com/assets/images/gallery/avatars/derrick.jpg) Source: [heptabase.com](https://heptabase.com/@derrick) Image: [heptabase.com](https://heptabase.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fai-research-pdf.66ba41c4.png&w=3840&q=75) Source: [heptabase.com](https://heptabase.com/) Image: [heptabase.com](https://heptabase.com/assets/images/gallery/whiteboards/dd0caeb9-f140-49f7-9460-8311dd72f2a2.png) Source: [heptabase.com](https://heptabase.com/@derrick) Image: [heptabase.com](https://heptabase.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fhero-poster.6c3a44b6.png&w=3840&q=75) Source: [heptabase.com](https://heptabase.com/) Image: [heptabase.com](https://heptabase.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbg-hero.da56bd06.webp&w=3840&q=75) Source: [heptabase.com](https://heptabase.com/) Image: [heptabase.com](https://heptabase.com/assets/images/gallery/whiteboards/60f3c51a-749e-4b54-ba33-2616ad92593a.png) Source: [heptabase.com](https://heptabase.com/@yao_hsiao) ## Frequently Asked Questions - **What is Heptabase's primary brand color?** Heptabase's primary brand color is #F7EDE4. It anchors the visual identity across their website, product UI, and marketing materials. - **What accent color does Heptabase use?** Heptabase uses #FF5F57 as an accent color, typically applied to interactive elements like links, buttons, and call-to-action emphasis. - **What font does Heptabase use?** Heptabase uses Inter as the primary typeface across body and headings. - **Does Heptabase use a light or dark theme?** Heptabase's primary site uses a light color scheme, with a background of #F7F7F7. - **Where can I find Heptabase's logo?** Heptabase's logo is available directly on their site (https://heptabase.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://heptabase.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 Heptabase. ## Methodology Brand data on this page was extracted from [https://heptabase.com/](https://heptabase.com/) on 2026-07-27 using the [Firecrawl](https://firecrawl.dev/) branding extraction API, which inspects each site's live CSS, font network requests, color tokens, and component styles. Brand-in-the-wild images were sourced via Google Image Search restricted to ad/webinar/report queries and link out to their original third-party publishers; we link to the source rather than re-hosting third-party content. This page is published by **CharacterQuilt** and is not affiliated with or endorsed by Heptabase. ## Machine-Readable Profile Direct endpoints for agents, designers, and tooling. No login or auth required. ```json { "colorScheme": "light", "fonts": [ {"family": "Inter", "role": "body"}, {"family": "Manrope", "role": "unknown"} ], "colors": { "primary": "#F7EDE4", "secondary": "#FEBC2E", "accent": "#FF5F57", "background": "#F7F7F7", "textPrimary": "#2E2E2E", "link": "#FF5F57" }, "typography": { "fontFamilies": { "primary": "Inter", "heading": "Inter" }, "fontStacks": { "heading": ["Inter", "sans-serif"], "body": ["Times New Roman"], "paragraph": ["Inter", "sans-serif"] }, "fontSizes": { "h1": "18px", "h2": "36px", "body": "22px" } }, "spacing": { "baseUnit": 4, "borderRadius": "6px" }, "components": { "buttonPrimary": { "background": "#2E2E2E", "textColor": "#FFFFFF", "borderRadius": "10px", "borderRadiusCorners": { "topLeft": "10px", "topRight": "10px", "bottomRight": "10px", "bottomLeft": "10px" }, "shadow": "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px 0px" }, "buttonSecondary": { "background": "#FFFFFF", "textColor": "#454545", "borderColor": "#D7D7D7", "borderRadius": "8px", "borderRadiusCorners": { "topLeft": "8px", "topRight": "8px", "bottomRight": "8px", "bottomLeft": "8px" }, "shadow": "none" } }, "images": { "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2028%2028%22%20class%3D%22shrink-0%22%20style%3D%22width%3A28px%3Bheight%3A28px%22%20data-fc-idx%3D%220%22%3E%3Cpath%20fill%3D%22%232E2E2E%22%20d%3D%22M27.96%2024.466a3.495%203.495%200%201%201-6.99%200%203.495%203.495%200%200%201%206.99%200ZM0%2020.388V2.913a2.913%202.913%200%200%201%205.825%200c0%20.73%200%203.799.002%205.242v1.517c0%20.848.501%201.616%201.278%201.956a5.34%205.34%200%200%200%204.115.073l.243-.096a2.145%202.145%200%200%200%201.354-1.994l-.001-2.038a2.913%202.913%200%200%201%205.825%200v17.475a2.913%202.913%200%200%201-5.825%200V18.35c0-.879-.536-1.669-1.353-1.993l-.243-.097a5.34%205.34%200%200%200-4.115.073%202.136%202.136%200%200%200-1.278%201.957v1.517l-.002.582a2.913%202.913%200%200%201-5.825%200Z%22%20style%3D%22fill%3A%20rgb(46%2C%2046%2C%2046)%20!important%3B%22%2F%3E%3C%2Fsvg%3E", "favicon": "https://heptabase.com/assets/images/favicon-32x32.png", "ogImage": "https://heptabase.com/assets/images/opengraph-image.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 'Heptabase'.", "confidence": 0.9, "source": "llm" }, "__llm_button_reasoning": { "primary": { "index": 0, "text": "Start your 7-day trial", "reasoning": "Button #0 ('Start your 7-day trial') has a strong call-to-action text and uses a dark background color (#2E2E2E) which stands out, making it the primary CTA." }, "secondary": { "index": 13, "text": "Explore more", "reasoning": "Button #1 ('Explore more') has a different background color (#FFFFFF) and serves as a secondary action with less emphasis, suitable for exploration rather than immediate action." }, "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": 0, "selectedLogoReasoning": "Selected #0 because it is visible, located in the header, and links to the homepage, matching the brand 'Heptabase'.", "confidence": 0.9 } }, "buttonClassification": { "llmCalled": true, "llmSucceeded": true } } } ``` ## Related Brand Profiles - [Zapier](/content/branding/zapier/index.html) - [Scale AI](/content/branding/scale-ai/index.html) - [Fivetran](/content/branding/fivetran/index.html) - [Stripe](/content/branding/stripe/index.html) - [PagerDuty](/content/branding/pagerduty/index.html) - [Brex](/content/branding/brex/index.html) --- This profile was extracted from [https://heptabase.com/](https://heptabase.com/) using the Firecrawl branding extraction API, which inspects the live page's CSS, fonts, color tokens, and component styles. This page is published by **CharacterQuilt** and is not affiliated with or endorsed by Heptabase.