attio.json
Attio Brand Identity
A complete profile of Attio's visual system — colors, typography, components, and personality — extracted from https://attio.com/. Built for designers, agents, and AI tools.
Quick Facts
| Field | Value |
|---|---|
| Primary | #B5BDC9 |
| Accent | #202124 |
| Body Font | Inter |
| Heading Font | Inter Display |
Color Palette
- primary: #B5BDC9
- secondary: #A4ADBA
- accent: #202124
- background: #FFFFFF
- textPrimary: #2E3238
- link: #6F7988
Typography
- primary: Inter — Google Font
- heading: Inter Display — Google Font
Visual Assets
- Logo: data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22103%22%20height%3D%2226%22%20viewBox%3D%220%200%20103%2026%22%20fill%3D%22none%22%20class%3D%22mb-1%20h-6%20text-primary-foreground%22%20data-fc-idx%3D%220%22%3E%3Cpath%20d%3D%22M84.2267%201.03809H79.9922V5.27257H84.2267V1.03809Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20lab(10.7201%20-0.0959039%20-1.54182)%20!important%3B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M67.7423%2011.9094H64.0236V18.7905C64.0236%2019.364%2064.1661%2019.7836%2064.4529%2020.0473C64.7396%2020.3129%2065.1592%2020.4669%2065.7097%2020.5112C66.2602%2020.5324%2066.9454%2020.5227%2067.7615%2020.4785V24.3492C64.8725%2024.6802%2062.811%2024.4146%2061.5753%2023.5562C60.3627%2022.6746%2059.7564%2021.0867%2059.7564%2018.7924V11.9113H56.8789V7.80774H59.7564V4.46635L64.0236%203.17676V7.80967H70.6198V4.46828L74.887%203.17868V7.81159H78.6249V11.9152H74.887V18.7962C74.887%2019.3698%2075.0294%2019.7894%2075.3162%2020.0531C75.603%2020.3187%2076.0226%2020.4727%2076.5731%2020.517C77.1236%2020.5381%2077.8088%2020.5285%2078.623%2020.4842V24.3549C75.7339%2024.686%2073.6725%2024.4204%2072.4368%2023.5619C71.2242%2022.6804%2070.6179%2021.0925%2070.6179%2018.7981V11.9171H67.7404L67.7423%2011.9094Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20lab(10.7201%20-0.0959039%20-1.54182)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M84.2477%207.80371H79.9805V24.3471H84.2477V7.80371Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20lab(10.7201%20-0.0959039%20-1.54182)%20!important%3B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M94.3015%207.375C89.4973%207.375%2085.6016%2011.2707%2085.6016%2016.0769C85.6016%2020.883%2089.4973%2024.7787%2094.3015%2024.7787C99.1057%2024.7787%20103.001%2020.883%20103.001%2016.0769C103.001%2011.2707%2099.1076%207.375%2094.3015%207.375V7.375ZM94.2861%2020.6771C91.7377%2020.6771%2089.6705%2018.6099%2089.6705%2016.0615C89.6705%2013.5131%2091.7377%2011.4459%2094.2861%2011.4459C96.8345%2011.4459%2098.8998%2013.5111%2098.8998%2016.0615C98.8998%2018.6118%2096.8345%2020.6771%2094.2861%2020.6771V20.6771Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20lab(10.7201%20-0.0959039%20-1.54182)%20!important%3B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M51.2865%207.7715V8.68961C49.9526%207.85812%2048.3782%207.375%2046.6902%207.375C41.886%207.375%2037.9902%2011.2707%2037.9902%2016.0769C37.9902%2020.883%2041.886%2024.7787%2046.6902%2024.7787C48.3782%2024.7787%2049.9526%2024.2975%2051.2865%2023.4641V24.3822H55.521V7.7715H51.2865ZM46.6748%2020.6771C44.1264%2020.6771%2042.0592%2018.6099%2042.0592%2016.0615C42.0592%2013.5131%2044.1264%2011.4459%2046.6748%2011.4459C49.2232%2011.4459%2051.2461%2013.4707%2051.2865%2015.9845V16.1365C51.2461%2018.6503%2049.1981%2020.6751%2046.6748%2020.6751V20.6771Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20lab(10.7201%20-0.0959039%20-1.54182)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M30.6468%2017.7823L28.0599%2013.6422C28.0599%2013.6422%2028.0503%2013.6248%2028.0445%2013.6172L27.8405%2013.2919C27.4555%2012.674%2026.7895%2012.3045%2026.062%2012.3025L21.8949%2012.2891L21.6042%2012.7549L16.6249%2020.7234L16.3496%2021.1642L18.4361%2024.4978C18.821%2025.1176%2019.487%2025.4872%2020.2203%2025.4872H26.06C26.7799%2025.4872%2027.4613%2025.108%2027.8424%2024.4998L28.0483%2024.1706C28.0483%2024.1706%2028.056%2024.161%2028.058%2024.1572L30.6487%2020.0112C31.0741%2019.3337%2031.0741%2018.4579%2030.6487%2017.7823H30.6468ZM29.8576%2019.5166L27.2669%2023.6625C27.2553%2023.6817%2027.2419%2023.6971%2027.2303%2023.7125C27.1398%2023.8146%2027.0224%2023.828%2026.9705%2023.828C26.9108%2023.828%2026.7645%2023.8107%2026.6702%2023.6606L24.0795%2019.5146C24.0506%2019.4684%2024.0256%2019.4203%2024.0025%2019.3683C23.9794%2019.3183%2023.9621%2019.2683%2023.9467%2019.2163C23.8889%2019.0084%2023.8889%2018.7851%2023.9467%2018.5773C23.9755%2018.4753%2024.0198%2018.3732%2024.0775%2018.2809L26.6644%2014.1388C26.6644%2014.1388%2026.6683%2014.133%2026.6702%2014.1291C26.7318%2014.0367%2026.8088%2013.9944%2026.8762%2013.9809C26.9031%2013.9732%2026.9262%2013.9713%2026.9454%2013.9675C26.9551%2013.9675%2026.9647%2013.9675%2026.9743%2013.9675C27.034%2013.9675%2027.1822%2013.9867%2027.2746%2014.1368L29.8615%2018.277C30.0982%2018.6543%2030.0982%2019.1393%2029.8615%2019.5166H29.8576Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20lab(10.7201%20-0.0959039%20-1.54182)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M22.9913%207.7644C23.4148%207.08496%2023.4148%206.21112%2022.9913%205.53553L20.4044%201.39536L20.1889%201.04697C19.802%200.429125%2019.136%200.0595703%2018.4046%200.0595703H12.5649C11.8354%200.0595703%2011.1694%200.429125%2010.7806%201.0489L0.323361%2017.7847C0.113561%2018.1196%200%2018.5065%200%2018.8992C0%2019.2918%200.111636%2019.6787%200.321436%2020.0117L3.12582%2024.5022C3.5127%2025.1219%204.17866%2025.4896%204.90815%2025.4896H10.7479C11.4812%2025.4896%2012.1472%2025.12%2012.5321%2024.5002L12.7458%2024.1615C12.7458%2024.1615%2012.7458%2024.1615%2012.7458%2024.1576C12.7458%2024.1576%2012.7496%2024.1519%2012.7496%2024.1499L14.8342%2020.8162L21.0127%2010.9287L22.9875%207.76633L22.9913%207.7644ZM22.3812%206.64996C22.3812%206.86361%2022.3215%207.07919%2022.2002%207.26974L11.9566%2023.6649C11.8643%2023.8131%2011.716%2023.8304%2011.6564%2023.8304C11.5967%2023.8304%2011.4504%2023.8131%2011.3561%2023.6649L8.7673%2019.517C8.53248%2019.1417%208.53248%2018.6586%208.7673%2018.2794L19.0109%201.8881C19.1033%201.73797%2019.2515%201.72064%2019.3112%201.72064C19.3708%201.72064%2019.519%201.73797%2019.6134%201.89002L22.2002%206.03019C22.3215%206.22074%2022.3812%206.43632%2022.3812%206.64996V6.64996Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20lab(10.7201%20-0.0959039%20-1.54182)%20!important%3B%22%2F%3E%3C%2Fsvg%3E
- Favicon: https://attio.com/favicon.ico?favicon.17i4ytxwoisgb.ico?dpl=dpl_9h43FG2NcmDmMYQFGjw3Yox8eXHa
- Social card (og:image): https://a.storyblok.com/f/234930/1200x630/df480627b4/attio-og-image.jpg
UI Components
- buttonPrimary: background=#202124, textColor=#F3F4F6, borderColor=#505967, borderRadius=10px, shadow=none
- buttonSecondary: background=#FFFFFF, textColor=#2E3238, borderColor=#CAD0D9, borderRadius=10px, shadow=none
Brand Personality
Tone: modern · Energy: medium · Audience: tech-savvy professionals
Attio Brand in the Wild
Real-world brand assets — ads, campaigns, marketing materials.
- Teammates Integration | Attio
- Introducing Call Intelligence | Attio
- fastn.ai Integration | Attio
- Engineering Blog | Attio
- Insights & updates | Attio Blog
- Introducing AI Attributes | Attio
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:
- Open the company's homepage in a browser with DevTools open.
- In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf).
- Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes.
- For each captured font URL: right-click → Save As to download the file locally.
- 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.