# Air Brand Identity A complete profile of **Air**'s visual system — colors, typography, components, and personality — extracted from https://air.inc/. Built for designers, agents, and AI tools. - Page: https://characterquilt.com/branding/air - Machine-readable JSON: https://characterquilt.com/branding/air.json - Per-page llms.txt: https://characterquilt.com/branding/air/llms.txt ## Quick Facts | Field | Value | |---|---| | Primary | #11335F | | Accent | #13396A | | Body Font | Control | | Heading Font | Control Compressed | ## Color Palette - primary: #11335F - secondary: #E5EDFA - accent: #13396A - background: #1B1B1B - textPrimary: #13396A - link: #13396A ## Typography - primary: Control — https://fonts.google.com/specimen/Control - heading: Control Compressed — https://fonts.google.com/specimen/Control+Compressed ## Visual Assets - Logo: data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201391.33%20572.14%22%20class%3D%22Logo_root__CHViX%20Header_root_logo_item__U0eOO%22%20style%3D%22--stroke-length%3A%203898.549072265625px%3B%22%20data-fc-idx%3D%220%22%3E%3Cpath%20fill%3D%22none%22%20stroke-width%3D%2267%22%20stroke-linecap%3D%22round%22%20d%3D%22M1357.83%2C457.51s-49.35%2C81.13-149.45%2C81.13c-26.54%2C0-55.27-22.45-55.27-56.42%2C0-57.09%2C51.05-179.74%2C54.59-186.9.1-.19-.02-.42-.24-.45-58.86-7.71-267.52%2C31.33-267.52-90.35%2C0-47.15%2C29.21-65.66%2C51.56-65.66%2C13.97%2C0%2C56.57%2C7.19%2C56.57%2C68.18%2C0%2C119.14-90.03%2C331.61-217.73%2C331.61-149.67%2C0-30.26-226.79-22.15-242.82.21-.42-.08-.92-.55-.93-10.86-.41-108.58-3.89-231.16-1.78-228.36%2C3.92-543%2C33.47-543%2C183.09%2C0%2C44.69%2C35.21%2C62.45%2C58.8%2C62.45%2C100.58%2C0%2C167.49-112.93%2C237.36-231.89%2C77.76-132.39%2C183.97-273.25%2C234-273.25%2C123.64%2C0%2C5.31%2C371.93-55.07%2C503.14%22%20style%3D%22fill%3A%20none%20!important%3B%20stroke%3A%20rgb(27%2C%2027%2C%2027)%20!important%3B%20stroke-width%3A%2067px%20!important%3B%20stroke-linecap%3A%20round%20!important%3B%22%2F%3E%3Ccircle%20cx%3D%22812.36%22%20cy%3D%22154.14%22%20r%3D%2248.28%22%20style%3D%22fill%3A%20rgb(27%2C%2027%2C%2027)%20!important%3B%22%2F%3E%3C%2Fsvg%3E - Favicon: https://air.inc/favicon.ico - Social card (og:image): https://a.storyblok.com/f/338771/1820x956/706e30d903/newsharecard.png/m/1200x630 ## UI Components - input: background=#F5F5F5, textColor=#1B1B1B, borderColor=#11335F, borderRadius=4px, shadow=none - buttonPrimary: background=#13396A, textColor=#000000, borderColor=#FFFFFF, borderRadius=8px, shadow=none - buttonSecondary: background=#FFFFFF, textColor=#1B1B1B, borderColor=#000000, borderRadius=8px, shadow=none ## Brand Personality Tone: modern · Energy: medium · Audience: creative professionals ## Air Brand in the Wild Real-world brand assets — ads, campaigns, marketing materials. - **The Creative Breather: October 2025** - Image: https://a.storyblok.com/f/338771/2976x1536/bd114c3272/creativebreatherblog.png - Source: https://air.inc/resources/the-creative-breather-october-25 - **Air 4.0** - Image: https://a.storyblok.com/f/338771/3840x2880/e8db1769c8/dropbox-protest.webp - Source: https://air.inc/resources/air-4 - **Video Intelligence** - Image: https://a.storyblok.com/f/338771/3840x1663/db9d23ec57/blog-hero.webp/m/1200x630 - Source: https://air.inc/resources/video-intelligence - **julian-cohen-johannes-leonardo** - Image: https://a.storyblok.com/f/338771/1698x1698/b3918a85ef/creative-intelligence.png/m/3840x0/filters:quality(80):format(webp) - Source: https://air.inc/resources/julian-cohen-johannes-leonardo - **Customer stories - Beautiful Destination** - Image: https://a.storyblok.com/f/338771/2000x1000/921fbd4c0b/beautiful-destinations-blog-preview.png/m/2880x0/filters:format(webp):quality(80) - Source: https://air.inc/resources/customer-stories-beautiful-destination - **Air | Creative Operations platform** - Image: https://a.storyblok.com/f/338771/1432x2000/5cce634bd1/isolatedbag.png/m/3840x5760/filters:quality(80):format(webp) - Source: https://air.inc/zoltair ## 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": "dark", "fonts": [ { "family": "Control", "role": "body" }, { "family": "Control Compressed", "role": "heading" } ], "colors": { "primary": "#11335F", "secondary": "#E5EDFA", "accent": "#13396A", "background": "#1B1B1B", "textPrimary": "#13396A", "link": "#13396A" }, "typography": { "fontFamilies": { "primary": "Control", "heading": "Control Compressed" }, "fontStacks": { "heading": [ "Control", "Arial", "Helvetica", "sans-serif" ], "body": [ "Control", "Arial", "Helvetica", "sans-serif" ], "paragraph": [ "Control", "Arial", "Helvetica", "sans-serif" ] }, "fontSizes": { "h1": "300px", "h2": "300px", "body": "16px" } }, "spacing": { "baseUnit": 4, "borderRadius": "12px" }, "components": { "input": { "background": "#F5F5F5", "textColor": "#1B1B1B", "borderColor": "#11335F", "borderRadius": "4px", "borderRadiusCorners": { "topLeft": "4px", "topRight": "4px", "bottomRight": "4px", "bottomLeft": "4px" }, "shadow": "none" }, "buttonPrimary": { "background": "#13396A", "textColor": "#000000", "borderColor": "#FFFFFF", "borderRadius": "8px", "borderRadiusCorners": { "topLeft": "8px", "topRight": "8px", "bottomRight": "8px", "bottomLeft": "8px" }, "shadow": "none" }, "buttonSecondary": { "background": "#FFFFFF", "textColor": "#1B1B1B", "borderColor": "#000000", "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%20viewBox%3D%220%200%201391.33%20572.14%22%20class%3D%22Logo_root__CHViX%20Header_root_logo_item__U0eOO%22%20style%3D%22--stroke-length%3A%203898.549072265625px%3B%22%20data-fc-idx%3D%220%22%3E%3Cpath%20fill%3D%22none%22%20stroke-width%3D%2267%22%20stroke-linecap%3D%22round%22%20d%3D%22M1357.83%2C457.51s-49.35%2C81.13-149.45%2C81.13c-26.54%2C0-55.27-22.45-55.27-56.42%2C0-57.09%2C51.05-179.74%2C54.59-186.9.1-.19-.02-.42-.24-.45-58.86-7.71-267.52%2C31.33-267.52-90.35%2C0-47.15%2C29.21-65.66%2C51.56-65.66%2C13.97%2C0%2C56.57%2C7.19%2C56.57%2C68.18%2C0%2C119.14-90.03%2C331.61-217.73%2C331.61-149.67%2C0-30.26-226.79-22.15-242.82.21-.42-.08-.92-.55-.93-10.86-.41-108.58-3.89-231.16-1.78-228.36%2C3.92-543%2C33.47-543%2C183.09%2C0%2C44.69%2C35.21%2C62.45%2C58.8%2C62.45%2C100.58%2C0%2C167.49-112.93%2C237.36-231.89%2C77.76-132.39%2C183.97-273.25%2C234-273.25%2C123.64%2C0%2C5.31%2C371.93-55.07%2C503.14%22%20style%3D%22fill%3A%20none%20!important%3B%20stroke%3A%20rgb(27%2C%2027%2C%2027)%20!important%3B%20stroke-width%3A%2067px%20!important%3B%20stroke-linecap%3A%20round%20!important%3B%22%2F%3E%3Ccircle%20cx%3D%22812.36%22%20cy%3D%22154.14%22%20r%3D%2248.28%22%20style%3D%22fill%3A%20rgb(27%2C%2027%2C%2027)%20!important%3B%22%2F%3E%3C%2Fsvg%3E", "favicon": "https://air.inc/favicon.ico", "ogImage": "https://a.storyblok.com/f/338771/1820x956/706e30d903/newsharecard.png/m/1200x630", "logoHref": "/" }, "__llm_logo_reasoning": { "selectedIndex": 17, "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": 1, "text": "Start for free", "reasoning": "Button #1 ('Start for free') uses the vibrant brand color #13396A, which is a strong indicator of a primary CTA. The text is action-oriented, encouraging users to begin using the service." }, "secondary": { "index": 2, "text": "Book a demo", "reasoning": "Button #2 ('Book a demo') has a different background color (#FFFFFF) and serves as a secondary action, offering a more informational engagement." }, "confidence": 0.95 }, "personality": { "tone": "modern", "energy": "medium", "targetAudience": "creative professionals" }, "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 } } } ```