A modern CRM platform for go-to-market teams. Fits CRM SaaS, sales platforms, customer-data tools, and B2B-workflow landing page designs.
Screenshots of 5 pages from attio.com: homepage, product, resources, customers and pricing.
Design tokens
16 colors · 12 type stylesNear-black (#1c1d1f) primary on a pure white (#ffffff) canvas, set in Inter Display for headlines and Inter for body text. These values are read from the Attio DESIGN.md in the Pass bundle, which carries all 16 color tokens, 12 type styles, the radius and spacing scales and the full component rules.
Three ways to ship a Attio-style UI.
Use in your AI builder, no-code tool, or CMS
Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.
Not affiliated with Attio. All trademarks belong to their respective owners.
About Attio
Home page hero
The home page is white and centered inside a column marked by thin dotted vertical guides. A top bar has a lowercase wordmark with a small swoosh logo, product and resources dropdowns, customers and pricing links, and a bordered sign-in button and a black start-for-free pill at the right. A tiny pill announces a new sequences feature. The headline, "The next gen of CRM.," is set in a very large, heavy, tightly spaced sans-serif in near-black. A short paragraph says the product is the engine that builds, scales and grows a company, followed by a black start-for-free pill and an outlined talk-to-sales pill. A row of five small tabs (data, automations, pipeline, productivity and reporting) sits above a huge product window.
Product window
The window shows a companies table. A left sidebar lists quick actions, search, notifications, tasks, notes, emails, reports, automations with workflows and sequences, a favorites group and records for companies, people, deals and workspaces. The main grid shows a sorted list of well-known software companies with a logo, domain, associated deals, an estimated revenue range in a colored chip, a last email interaction time and a connection-strength label from very strong to weak, with small sparkle icons that mark AI-filled columns.
Automations and AI
A statement, "GTM at full throttle," sets its first sentence in black and the rest in grey, about designing workflows, deploying AI and building reports. A bordered grid of cells follows. "Automate everything" shows a flow of trigger, switch and sequence blocks with green completed chips, beside a list of example workflows. "Deploy AI" shows a research agent flow with cards that ask whether a company sells software to other businesses, evaluate the size of the opportunity and identify key stakeholders, next to a company record with domain, estimated revenue, location, funding and categories.
Data model page
The data syncing page has a small tag, then a large headline, "The data model for go-to-market magic," and a paragraph about control and flexibility. A diagram of five object cards (partnership and lead marked custom, company, deal and person marked standard) is joined by thin elbow lines, each card listing a few attributes and a count of more. A deals table below has deal names, a type chip, a value, a point of contact, a source chip and a next due task date.
Help and customers pages
The resources page is a help center. A left sidebar holds a search box and two groups, a reference tree and an academy list, while the center has a big headline, "How can we help?," a search field with popular search chips, three cards for reference, academy and API and a numbered get-started list. The customers page, "The CRM behind thousands of companies," shows two rows of grey logos, including a beverage brand, a voice-AI startup and a code-hosting startup, then large photo cards of teams with titles such as how a company uses the product to accelerate product-led growth.
Based on full-page screenshots of attio.com: the home page, the data model page, the help center and the customers page. Company names in the product previews are sample data. The pricing page was not reviewed. Check the live site before relying on specific details.
Related designs
Catalog Pass included
Catalog Pass included
Catalog Pass included