DESIGN.md · explainx registry
Attio
Attio's design system is "The Modern CRM." It is a sophisticated, data-dense environment that balances technical precision with a fresh, teal-and-green aesthetic.
Design System#design#ui#ux#template
DESIGN.md (markdown body)
| name | Attio |
| colors | background: "#ffffff" foreground: "#1c1d1f" # Hunter Green / Black brand: "#3abdaf" # Primary Teal muted: "#666666" border: "#ebecf0" card: "#ffffff" accent: "#3abdaf" secondary: "#8bc269" # Light Green dark: background: "#0d0e10" foreground: "#eff3f4" muted: "#97a0af" border: "#1c2536" card: "#121417" accent: "#3abdaf" |
| typography | fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "14px" lineHeight: "1.5" heading: fontWeight: "600" letterSpacing: "-0.01em" |
| rounded | default: "6px" md: "8px" lg: "12px" |
Design System: Attio
Overview
Attio's design system is "The Modern CRM." It is a sophisticated, data-dense environment that balances technical precision with a fresh, teal-and-green aesthetic.
Design Philosophy
- Relational Clarity: Built to manage complex data relationships through clean grids, high-contrast labels, and a consistent layout.
- Professional Freshness: Uses a palette of forest greens and teals to feel more modern and "alive" than traditional enterprise software.
- The Power of the View: The UI is designed as a series of "views" (Grid, Kanban, List) that the user can customize with pixel-perfect accuracy.
- Quiet Sophistication: Relies on high-quality typography and subtle material effects rather than loud brand elements.
Colors
- Hunter Black (#1C1D1F): A deep, near-black with a hint of green that provides a professional foundation.
- Attio Teal (#3ABDAF): The primary identifier, used for focus states, primary buttons, and data highlights.
- The "Nature" Palette: Uses a scale of greens (Mint, Sage, Hunter) to differentiate between data types and categories.
Typography
- Inter: The backbone of the CRM, providing exceptional legibility for high-density tables and records.
- Semantic Labels: Uses small, bold, all-caps labels for metadata and tags to ensure they are scannable.
Components
- The Spreadsheet Grid: A high-density, interactive table with 1px borders and high-contrast headers.
- Record Sidebar: A clean, vertical overlay with integrated field editing and activity logs.
- Status Pills: Soft, pastel-background pills with bold text for CRM stages (e.g., "Lead," "Contract").
Visual Effects
- Subtle Layering: Uses light grey backgrounds (
#F4F5F7) to separate the navigation from the primary workspace. - Inner Borders: Uses 1px inner borders on cards and inputs to simulate a "carved" or "precise" look.
- Smooth Panel Transitions: Sidebars and drawers slide in with a fast, professional motion.
Usage
- Copy DESIGN.md into your project or paste it into your IDE agent chat.
- Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
- When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.
Common questions
- What is Attio on explainx.ai?
- Attio's design system is "The Modern CRM." It is a sophisticated, data-dense environment that balances technical precision with a fresh, teal-and-green aesthetic. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
- What is DESIGN.md?
- DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
- How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
- Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
- Where is the source repo?
- Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
- How current is this DESIGN.md?
- Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
- Need a fresh DESIGN.md from scratch?
- Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.
Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
List Your Design.md
Share your design system with AI agents worldwide