# Attentive Brand Identity A complete profile of **Attentive**'s visual system — colors, typography, components, and personality — extracted from https://attentive.com. Built for designers, agents, and AI tools. - Page: https://characterquilt.com/branding/attentive - Machine-readable JSON: https://characterquilt.com/branding/attentive.json - Per-page llms.txt: https://characterquilt.com/branding/attentive/llms.txt ## Quick Facts | Field | Value | |---|---| | Primary | #FFF382 | | Accent | #FFF382 | | Body Font | Maison Neue | | Heading Font | Maison Neue Extended | ## Color Palette - primary: #FFF382 - secondary: #F2EEE0 - accent: #FFF382 - background: #FFFFFF - textPrimary: #1A1E22 - link: #2C2014 ## Typography - primary: Maison Neue — https://fonts.google.com/specimen/Maison+Neue - heading: Maison Neue Extended — https://fonts.google.com/specimen/Maison+Neue+Extended ## Visual Assets - Logo: https://cdn.prod.website-files.com/684306b795a2c402456e92ba/68c7f39e24ac0da12787867d_Attentive%20icon.svg - Favicon: https://cdn.prod.website-files.com/684306b795a2c402456e92ba/68ca2e64ae46fe3b4e3e3b6c_Favicon%20Attentive.ico - Social card (og:image): https://cdn.prod.website-files.com/5f8dd331b45e61acc8ac985c/606dedfeb8fb8b813ce79552_Homepage%20Sharing%20Image-01.png ## UI Components - input: background=#1A1E22, textColor=#FFFFFF, borderColor=null, borderRadius=4px, shadow=none - buttonPrimary: background=#FFF382, textColor=#1A1E22, borderRadius=8px, shadow=none - buttonSecondary: background=transparent, textColor=#1A1E22, borderColor=#1A1E22, borderRadius=4px, shadow=none ## Brand Personality Tone: modern · Energy: high · Audience: businesses looking for AI-powered marketing solutions ## Attentive Brand in the Wild Real-world brand assets — ads, campaigns, marketing materials. - **8,000 Global Consumers Told Us What Keeps Them Coming Back — Blog | Attentive** - Image: https://cdn.prod.website-files.com/68485e1e40741050193e3d29/68cd614782200cd1fb342049_641e01de8af4e61378a4459a_1.png - Source: https://www.attentive.com/blog/state-of-conversational-commerce-highlights - **The Official Attentive Blog | Attentive** - Image: https://cdn.prod.website-files.com/68485e1e40741050193e3d29/69e10a3f3203471aa4a91330_May-Seasonal-Monthly_Blog%20Post_Hero-Image.png - Source: https://www.attentive.com/blog - **What Is Agentic AI? A Clear Guide to AI Agents in 2026 — Blog | Attentive** - Image: https://cdn.prod.website-files.com/68485e1e40741050193e3d29/68caea943b6eef17ccb39ca5_67a37f16e89ab2f554f3b49e_blog_feat-image_1080x680%2520(1).png - Source: https://www.attentive.com/blog/what-is-agentic-ai-2026-guide - **The Official Attentive Blog | Attentive** - Image: https://cdn.prod.website-files.com/68485e1e40741050193e3d29/68caeaa7fdc8559335b3c732_653012a614bb84cd42dc2cc8_Email%2520Segmentation%2520Best%2520Practices_blog_feat-image_1080x680.png - Source: https://www.attentive.com/blog - **How Jaded London won Gen Z and scaled their subscriber list from zero | Attentive** - Image: https://cdn.prod.website-files.com/68485e1e40741050193e3d29/68d060fab7765260840b37aa_6899ded916936ea30ecdb7f5_JadedLondon_Inline_1800x1000_1-ALT.png - Source: https://www.attentive.com/case-studies/jaded-london - **How to Build Towards a Gender-Inclusive Workplace — Blog | Attentive** - Image: https://cdn.prod.website-files.com/68485e1e40741050193e3d29/68caeaa0fbee380cfdfca7d7_60d36b0a36f3741a76a5477b_Gender-Workplace_Blog-Img_1080x680.png - Source: https://www.attentive.com/blog/building-towards-a-gender-inclusive-workplace ## 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": "Maison Neue Extended", "role": "heading" }, { "family": "Maison Neue", "role": "body" }, { "family": "Montserrat", "role": "unknown" }, { "family": "Ginto Nord", "role": "unknown" } ], "colors": { "primary": "#FFF382", "secondary": "#F2EEE0", "accent": "#FFF382", "background": "#FFFFFF", "textPrimary": "#1A1E22", "link": "#2C2014" }, "typography": { "fontFamilies": { "primary": "Maison Neue", "heading": "Maison Neue Extended" }, "fontStacks": { "heading": [ "Ginto Nord", "Arial", "sans-serif" ], "body": [ "Maison Neue Extended", "Arial", "sans-serif" ], "paragraph": [ "Maison Neue", "Arial", "sans-serif" ] }, "fontSizes": { "h1": "65px", "h2": "40px", "body": "10px" } }, "spacing": { "baseUnit": 4, "borderRadius": "10px" }, "components": { "input": { "background": "#1A1E22", "textColor": "#FFFFFF", "borderColor": null, "borderRadius": "4px", "borderRadiusCorners": { "topLeft": "4px", "topRight": "4px", "bottomRight": "4px", "bottomLeft": "4px" }, "shadow": "none" }, "buttonPrimary": { "background": "#FFF382", "textColor": "#1A1E22", "borderRadius": "8px", "borderRadiusCorners": { "topLeft": "8px", "topRight": "8px", "bottomRight": "8px", "bottomLeft": "8px" }, "shadow": "none" }, "buttonSecondary": { "background": "transparent", "textColor": "#1A1E22", "borderColor": "#1A1E22", "borderRadius": "4px", "borderRadiusCorners": { "topLeft": "4px", "topRight": "4px", "bottomRight": "4px", "bottomLeft": "4px" }, "shadow": "none" } }, "images": { "logo": "https://cdn.prod.website-files.com/684306b795a2c402456e92ba/68c7f39e24ac0da12787867d_Attentive%20icon.svg", "favicon": "https://cdn.prod.website-files.com/684306b795a2c402456e92ba/68ca2e64ae46fe3b4e3e3b6c_Favicon%20Attentive.ico", "ogImage": "https://cdn.prod.website-files.com/5f8dd331b45e61acc8ac985c/606dedfeb8fb8b813ce79552_Homepage%20Sharing%20Image-01.png", "logoHref": "/", "logoAlt": "Attentive Logo" }, "__llm_logo_reasoning": { "selectedIndex": 0, "reasoning": "Selected #0 because it is visible, medium-sized, located at the top, and links to the homepage, matching the brand 'Attentive'.", "confidence": 0.9, "source": "llm" }, "__llm_button_reasoning": { "primary": { "index": 1, "text": "Get a demo", "reasoning": "Button #6 has a vibrant brand color (#FFF382) and action-oriented text 'Get a demo', making it the primary CTA." }, "secondary": { "index": 4, "text": "Explore integrationsExplore integrationsExplore integrations", "reasoning": "Button #2 has a transparent background, providing a clear contrast to the primary button's vibrant color, making it suitable as a secondary CTA." }, "confidence": 0.95 }, "personality": { "tone": "modern", "energy": "high", "targetAudience": "businesses looking for AI-powered marketing solutions" }, "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, medium-sized, located at the top, and links to the homepage, matching the brand 'Attentive'.", "confidence": 0.9 } }, "buttonClassification": { "llmCalled": true, "llmSucceeded": true } } } ```