# Airtable · Design system migration spec

> Source: https://www.airtable.com  ·  Curated by OpenDesign  ·  en

> Airtable exemplifies a refined, trustworthy enterprise SaaS design that prioritizes clarity and ease of use through minimalist aesthetics.

## 1. Identity DNA

Airtable’s design system is built as a digital workspace, where every element serves the purpose of organization and clarity. It functions less as a branded experience and more as a neutral infrastructure for user-generated content and workflows.

**One-liner:** Unified workspace connecting team workflows through AI-powered data management.
**Keywords:** Workflow · Enterprise · Data · Connected · No-code
**Analogy:** Digital spreadsheet meets project management tool

## 2. Color

The color system is defined by restraint, using a neutral palette to create a quiet backdrop. It recedes from view to allow user data, images, and statuses to become the focal points of the interface.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F8FAFC` | card background |
| `--ink` | `#181D26` | body text |
| `--ink-soft` | `#444444` | secondary text |
| `--muted` | `#6E6E6E` | placeholder |
| `--line` | `rgba(24,29,38,0.12)` | divider |

**Color principle:** Clean, high-contrast black on white with minimal accent color usage.

This commitment to neutrality ensures the tool remains a container for work rather than a competing visual layer.

## 3. Typography

Typography employs a clean **humanist sans-serif** voice that prioritizes legibility and functional communication. The type scale is structured to support clear information hierarchy within dense data structures.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.1 | 500 | -0.5px | Main hero headlines |
| heading | 32px | 1.2 | 500 | -0.2px | Section headers |
| body | 20px | 1.4 | 400 | 0.2px | Main paragraph text |

**Type rules:**
- Haas Groot Disp used for large display headings.
- Haas used for body copy and UI elements.
- Line height tightens as font size increases.
- Letter spacing is slightly positive for body text.

## 4. Spacing

A consistent **4px-based spacing scale** establishes a predictable rhythm for both vertical and horizontal alignment.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical spacing follows a 4px base unit with standard increments.

## 5. Surfaces

Depth is achieved through subtle, light grey borders rather than heavy drop shadows. This creates minimal separation between components on a predominantly white canvas.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(15, 48, 106, 0.05) 0px 0px 20px 0px
  - rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset
- **Borders:** Subtle 1px borders using primary ink color with low opacity.

## 6. Layout

The layout follows a clean, centered content structure that establishes a clear visual hierarchy. Generous whitespace is a core component, preventing information density from becoming visual clutter.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard centered content with wide margins on desktop.

## 7. Motion & Interaction

Motion is applied with utilitarian purpose, used only to signal state changes and provide continuity. Subtle fades and smooth transitions (200-400ms) guide attention without creating distraction or decorative noise.

- **Durations:** micro 150ms · small 200ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle color and background transitions on hover.
  - Smooth element visibility changes.

- **Hover:** Button colors darken slightly or fill changes on hover.
- **Click:** Subtle scale or color feedback.
- **Transition:** 0.15s ease-in for micro-interactions, 0.6s for larger transitions.
- **Keyboard:** Standard focus states using browser defaults or subtle outlines.

## 8. Voice & Don'ts

The editorial voice is professional, helpful, and clear, using direct, benefit-oriented language. It avoids overly technical jargon, aggressive sales language, and confusing metaphors.

- **Tone:** Professional, clear, and enterprise-focused.
- **Headline style:** Concise, benefit-oriented statements emphasizing connectivity and efficiency.
- **CTA style:** Direct and action-oriented ('Get started for free', 'Book demo').
- **Avoid:** Jargon / Overly casual language / Hype words

### Don'ts
- ❌ don't use bright, saturated accent colors — screenshot shows a predominantly monochromatic palette with black and white.
- ❌ don't use decorative or script fonts — screenshot shows clean, modern sans-serif typography.
- ❌ don't use heavy, complex shadows — screenshot shows subtle, almost flat design with minimal elevation.
- ❌ don't clutter the layout — screenshot shows generous whitespace and focused content areas.
- ❌ don't use dark mode as default — screenshot shows a clean white background as the primary canvas.
- ❌ don't use irregular or overly playful border-radius — screenshot shows consistent, mostly rectangular or subtly rounded corners.

The system deliberately rejects dark backgrounds, saturated accent colors, and decorative typography in favor of pure functional clarity.

## System Prompt (paste into AI tool)

```
Airtable's design is a clean, enterprise-focused SaaS aesthetic centered on clarity and professionalism. The color palette is monochromatic, using a dark ink color (#181D26) on a pure white background (#FFFFFF), with soft grays (#F8FAFC) for secondary surfaces. There is no dominant accent color; emphasis is achieved through strong contrast and button styling. Typography is a modern humanist sans-serif family, used with clear hierarchy for display and body text. Layouts are spacious with generous whitespace and centered content blocks. Critical constraints: Avoid saturated accent colors, use only clean sans-serif fonts, and maintain high contrast between text and background. Do not use heavy shadows or complex gradients in standard UI components.
```
