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 aesth…

High Quality

Join 0+ developers using this skill

skill

Designs

intermediate

0 installs

4/5 quality

View Source

Last updated: June 19, 2026

AI Skill Market Insights

Real data. Real impact.

Popularity

Rising

Emerging

Active Users

Developers

Quick Start

Install Command

Source: https://github.com/whyashthakker/design-md-templates-skills?ref=explainx

TEAR & SHARE

3-5hrs/WK

RISING

0.0K+ USING

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.

Attio

AI Skill Market Insights

Quick Start

Install Command

TEAR & SHARE

Tags

Raycast

Be Part of the 0+ Developer Community

Design System: Attio

Overview

Design Philosophy

Colors

Typography

Components

Visual Effects

License

MongoDB

NVIDIA

Mintlify

Spotify

Channels

Learn

Compare

Company

Agents