# Airtable — Design System
> A low-code platform for building collaborative, AI-powered business applications.
- **Canonical:** https://uiuxskills.com/library/airtable
- **Source:** https://www.airtable.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:39.453Z

---

---
version: alpha
name: Airtable
description: Enterprise-grade no-code platform for building AI-powered workflows and applications.
tone: >-
  Authoritative, innovative, and clear. The voice is direct and benefit-oriented, focusing on
  enterprise reliability and speed.
color-scheme: light
colors:
  primary: "#181D26"
  on-primary: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#181D26"
  surface-container: "#F7F8F9"
  surface-bright: "#FFFFFF"
  outline: "#DFE3E7"
  error: "#AA2D00"
  success: "#214224"
  focus-ring: "#254FAD"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#2D3440"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.focus-ring}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDEBE6"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Airtable maintains a professional, high-trust aesthetic that balances technical capability with accessibility. The visual language is clean and enterprise-focused, utilizing a disciplined, light-mode-first approach that prioritizes clarity, structural hierarchy, and the rapid communication of complex workflows.

## Colors

The color strategy is anchored in a high-contrast, professional palette designed to guide users through complex data-driven interfaces without distraction.

*   Primary (`{colors.primary}`): Deep ink tone used for primary actions, headers, and core brand identity.
*   On-Primary (`{colors.on-primary}`): Pure white for text and icons on dark backgrounds.
*   Surface (`{colors.surface}`): The standard white background for primary content areas.
*   On-Surface (`{colors.on-surface}`): Dark ink for primary body text, ensuring maximum readability.
*   Surface-Container (inferred) (`{colors.surface-container}`): A soft, light gray used to define section backgrounds and card containers.
*   Surface-Bright (inferred) (`{colors.surface-bright}`): Pure white for elevated components and cards.
*   Outline (`{colors.outline}`): A subtle neutral gray for borders, dividers, and input fields.
*   Error (`{colors.error}`): A high-visibility deep orange for critical alerts and validation states.
*   Success (`{colors.success}`): A professional forest green for positive feedback and status indicators.
*   Focus-Ring (`{colors.focus-ring}`): A distinct blue used exclusively for keyboard navigation and active focus states.

## Typography

The typography uses the Inter typeface to maintain a clean, modern, and highly legible interface suitable for enterprise-grade data management.

*   Display levels (`{typography.display-lg}`, `{typography.display-md}`): Bold, authoritative sizing for hero headlines and major section titles.
*   Headline levels (`{typography.headline-lg}`, `{typography.headline-md}`, `{typography.headline-sm}`): Hierarchical sizing for sub-headers and card titles.
*   Body (`{typography.body-md}`): Standard, comfortable reading size for paragraphs and long-form content.
*   Label (`{typography.label-sm}`): Small-scale, high-clarity text for UI metadata, button labels, and small badges.

## Layout

The layout follows a structured grid system with a max-width container to maintain readability across large screens. Spacing is generous, utilizing a base unit that emphasizes clear separation between functional blocks.

*   The page follows a consistent flow: Nav, Hero, Social Proof, Features, AI Agents, Use Cases, Resources, and Footer.
*   The hero pattern features a centered headline and subhead paired with two primary CTAs, followed by a full-width product visual.
*   Spacing is applied using an incremental scale (e.g., `{spacing.md}` for internal card spacing, `{spacing.xl}` for major section blocks).
*   The design is mobile-first, with navigation collapsing into a hamburger menu on smaller viewports.

## Elevation & Depth

Depth is used sparingly to differentiate interactive elements from the background, relying on a subtle, three-tier shadow scale.

*   `elevation.sm`: Used for subtle separation of small UI elements.
*   `elevation.md`: The primary shadow for cards and interactive containers, providing a clean lift.
*   `elevation.lg`: Reserved for modals, overlays, or high-priority floating elements.

## Shapes

The brand uses a balanced radius philosophy: structural containers use subtle rounding to remain professional, while primary interactive elements use full-rounded "pill" shapes to signal accessibility and modern software interaction.

*   Small elements (inputs, badges) use `{rounded.sm}` or `{rounded.md}` for a crisp, stable look.
*   Primary CTAs utilize `{rounded.full}` to create a distinct, approachable call to action that stands out from the enterprise-focused grid.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Primary buttons use `{colors.primary}` with `{rounded.full}` for a high-impact, accessible look. Secondary buttons use a transparent background with a `{colors.primary}` border to maintain a clean, secondary hierarchy.

### Card
Cards utilize `{colors.surface-container}` or `{colors.surface-bright}` with `{rounded.md}` to group related information. Use these to frame feature highlights or use-case content to ensure clear visual separation.

### Input Field
Input fields feature a subtle `{colors.outline}` border and `{rounded.sm}` corners. On focus, the border must transition to `{colors.focus-ring}` to ensure accessibility for keyboard users.

### Badge
Badges are used for status or category labeling, leveraging `{colors.surface-container}` for neutral states or `{colors.success}`/`{colors.error}` for semantic feedback. Keep text concise using `{typography.label-sm}`.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Use `{colors.error}` for non-critical UI elements. |
| Apply `{typography.display-lg}` for hero headlines only. | Use `{typography.body-md}` for headers. |
| Maintain consistent `{spacing.md}` between card elements. | Mix `{rounded.full}` with sharp-cornered containers. |
| Use `{colors.focus-ring}` for all keyboard navigation. | Use `{colors.primary}` text on `{colors.surface-container}` without checking contrast. |
| Apply `{rounded.full}` to all primary buttons. | Overcrowd sections; maintain at least `{spacing.xl}` between major blocks. |
| Use `{colors.surface-container}` for section backgrounds. | Use custom shadows; stick to the defined `{elevation}` scale. |
| Use `{colors.outline}` for input field borders. | Use high-contrast borders on non-interactive elements. |
| Use `{typography.label-sm}` for button text. | Use oversized typography for secondary labels. |

## Content Style

Airtable’s voice is authoritative, innovative, and clear. Content is direct and benefit-oriented, focusing on enterprise reliability and speed.

*   CTA Style: Use imperative verbs in sentence case (e.g., "Get started for free"). Keep labels concise and focused on the immediate user benefit.
*   Heading Tone: Headlines should be benefit-driven and declarative, clearly stating the value proposition of the section.
*   Copy Density: Prioritize scannability. Use short paragraphs and frequent bullet points to break up technical information, ensuring the content is easy to digest.

## Imagery & Icons

The imagery style is mixed, combining clean, flat-style vector illustrations with high-fidelity product screenshots to demonstrate platform capability. Icons are simple, stroke-based, and rounded, maintaining a minimal aesthetic that aligns with the enterprise-grade platform. Avoid overly complex or decorative imagery; all visuals should serve a functional purpose in explaining the product.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Airtable, an enterprise minimal brand. Match its authoritative, clarity-first tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name (`{colors.primary}`, `{typography.headline-md}`, `{rounded.full}`) — never hardcode hex values, font sizes, or pixel radii.
2. Respect all component definitions under `components:` exactly. Apply `{rounded.full}` to primary buttons and `{rounded.sm}` to inputs and badges; do not mix radii between categories.
3. Follow the Layout section for page structure and spacing rhythm — `{spacing.md}` for internal card spacing, `{spacing.xl}` or greater between major section blocks.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., applying `{colors.error}` decoratively, or using `{typography.body-md}` as a heading), surface the conflict before proceeding.
5. Apply elevation tokens from the three-tier scale (`elevation.sm`, `elevation.md`, `elevation.lg`) according to element hierarchy. Do not introduce custom shadows.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Cover hover, focus, and disabled states for interactive components wherever the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{colors.focus-ring}` to all keyboard focus indicators.
- Use the canonical spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding and gaps.
- Render hero headlines in `{typography.display-lg}` only; use headline tokens for sub-sections.
- Use `{typography.label-sm}` for all button labels and badges.

**Must NOT:**
- Invent colors, font sizes, radii, or shadows outside the spec.
- Use generic system defaults when a brand token exists.
- Apply `{rounded.full}` to cards or containers; that shape is reserved for primary CTAs.
- Add emoji, filler, or marketing copy.
- Rewrite, replace, or extend existing page copy, headings, button labels, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`.
- Tokens marked "(inferred)" in the spec are visual approximations. If an authoritative source (Storybook, theme file) exists, it takes precedence.
- For unspecified breakpoints, follow the mobile-first approach in Layout with one breakpoint at 768px.