Attio

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.