---
title: "Airtable design system"
variant: extended
source: https://www.airtable.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/airtable-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Airtable · Design System

> A bright workspace, anchored by bold product storytelling

**Theme:** light · **Industry:** saas · **Source:** https://www.airtable.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Airtable’s homepage pairs an expansive white canvas and centered, typographic hero with vivid product-interface showcases. Restrained black CTAs, modular proof points, and a deep-green product band carry the page from promise to evidence.

## North star

Keep the interface calm and white, then let authentic product UI and a single deep-green showcase band provide the visual drama.

## Overview

The page is built on a predominantly white canvas, with ink-dark typography and restrained gray supporting text. The hero is centered and spacious: a large, two-line headline sits above concise copy and paired black-filled and outlined CTAs. ATSeasonSans gives the main message a distinctive, rounded sans-serif voice; the overall type treatment stays clean and unornamented. A deep-green, full-width product-showcase band creates the strongest change of mood, framing a dense, realistic Airtable interface against saturated imagery. Below it, narrow logo proof and a broad customer-story area use thin dividers and carefully separated content zones to restore a quieter rhythm. Orange accents appear in product data and highlighted details rather than defining the page’s main interface palette. The footer returns to white and organizes many links into compact columns. Spacing alternates between open hero and customer-story areas and denser interface and footer regions, keeping the long page legible without relying on heavy decoration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, hero, customer-story areas, cards, and white type on dark controls. |
| Rust Badge | `#7a2000` | `--color-rust-badge` | semantic | Badge-only palette color; treat as product or data illustration detail, not a page-wide brand surface. |
| Violet Badge | `#6231ae` | `--color-violet-badge` | semantic | Badge and status-detail color inside interface examples; not a defining page color. |
| Signal Orange | `#d54401` | `--color-signal-orange` | accent | Accent in interface details and gradient; use sparingly rather than as a dominant CTA color. |
| Burnt Badge | `#aa2d00` | `--color-burnt-badge` | semantic | Badge color in measured product-like content; keep it confined to data or illustration details. |
| Cloud Mist | `#f6f8fc` | `--color-cloud-mist` | surface | Pale navigation, card, and footer surface variation where a break from white is needed. |
| Apricot Detail | `#ffb68e` | `--color-apricot-detail` | accent | Small badge or illustration accent, not a defining background. |
| Status Green | `#006400` | `--color-status-green` | semantic | Sparse green badge text or status detail within product-like content. |
| Teal Detail | `#0e6c63` | `--color-teal-detail` | semantic | Rare badge, border, or illustrative detail; not a primary page surface. |
| Clay Detail | `#8c4934` | `--color-clay-detail` | semantic | Occasional badge or interface detail, including warm-toned mockup content. |
| Pale Green | `#9ae095` | `--color-pale-green` | semantic | Small status or illustration highlight; avoid using it as a general surface. |
| Plum Detail | `#743861` | `--color-plum-detail` | semantic | Sparse badge or data-visualization detail within the product presentation. |
| Slate Blue | `#2b4683` | `--color-slate-blue` | semantic | Small badge or interface detail; the hero media’s blue imagery is not the core brand palette. |
| Airtable Ink | `#1d1f25` | `--color-airtable-ink` | brand | Primary text, navigation, dark controls, and strong footer or UI details. |
| Forest Stage | `#03330b` | `--color-forest-stage` | surface | Deep-green full-width product showcase band, setting off the interface demonstration. |
| Blue Badge | `#0f68a2` | `--color-blue-badge` | semantic | Rare badge color in measured content; keep localized to illustrative data details. |
| Quiet Gray | `#5b5b5b` | `--color-quiet-gray` | neutral | Muted body copy and secondary text against the white canvas. |
| Night Panel | `#08090b` | `--color-night-panel` | surface | Dark card or contrast surface in product-led content; use selectively alongside the green showcase. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f8fc` (Cloud Mist) · `--color-surface-2` → `#03330b` (Forest Stage) · `--color-surface-3` → `#08090b` (Night Panel) · `--color-surface-4` → `#944d37` · `--color-text` → `#1d1f25` (Airtable Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#5b5b5b` (Quiet Gray) · `--color-border` → `#ededee` · `--color-accent` → `#d54401` (Signal Orange) · `--color-accent-2` → `#ffcdb3` · `--color-accent-3` → `#944d37`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1f25` | `#ffffff` | 16.47:1 | AAA |
| `#1d1f25` | `#f6f8fc` | 15.49:1 | AAA |
| `#1d1f25` | `#03330b` | 1.16:1 | fail |
| `#1d1f25` | `#08090b` | 1.21:1 | fail |
| `#ffffff` | `#f6f8fc` | 1.06:1 | fail |
| `#ffffff` | `#03330b` | 14.17:1 | AAA |
| `#ffffff` | `#08090b` | 19.92:1 | AAA |
| `#5b5b5b` | `#ffffff` | 6.79:1 | AA |
| `#5b5b5b` | `#f6f8fc` | 6.39:1 | AA |
| `#5b5b5b` | `#03330b` | 2.09:1 | fail |

### Gradients

- `linear-gradient(100deg, rgb(213, 68, 1) 38%, rgb(255, 205, 179) 50%, rgb(213, 68, 1) 62%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SF Pro Text | `--font-sf-pro-text` | system | 550, 400, 500, 600, 700 | Interface labels, product mockup text, compact captions, and supporting UI copy. | Inter |
| ATSeasonSans | `--font-body` | webfont | 550, 500, 650, 400, 600 | Primary brand voice for hero headline, body copy, navigation, and CTA labels. | DM Sans |
| SF Pro Display | `--font-sf-pro-display` | system | 700, 600, 400 | Limited display role for larger headings where the system display face appears. | Inter |

- **SF Pro Text:** Use measured regular through bold weights for crisp, compact UI; keep casing natural and avoid decorative tracking.
- **ATSeasonSans:** Use medium-to-semibold weights with clean, rounded sans forms; sentence case and neutral tracking dominate.
- **SF Pro Display:** Reserve bold or semibold weights for display emphasis; use natural case and avoid added letter spacing.

### Type scale — Custom (ratio ≈ 1.778, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 500 | 1.25 | 0 | — | ATSeasonSans | Centered two-line homepage promise above explanatory copy and paired CTAs. |
| body | 18px | 500 | 1.35 | 0 | — | ATSeasonSans | Hero explanation and customer-story descriptions. |
| caption | 10px | 550 | 1.45 | 0 | — | SF Pro Text | Compact interface labels, fine print, and secondary UI details. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 24, 40 px.
- Section rhythm 48px · element gap 6px · card padding 9px · max content width 1344px.

The page uses a wide, centered composition with measured max width of 1344px. The hero aligns its headline, supporting sentence, and CTAs on the center axis, while product media spans a much broader area. A full-width green band interrupts the white canvas; following sections shift to split customer proof and compact logo rows. The footer organizes navigation into multiple columns. Section spacing is generous in the hero and customer proof, while product UI and footer links are denser. Thin dividers distinguish content groups without heavy boxes.

## Shape & elevation

- Radius: button `50%` · card `5px` · media `50%` · badge `9999px` · nav `9999px` · xs `2px` · sm `3px` · md `4px` · lg `5px` · xl `6px` · 2xl `7px` · pill `9999px`
- Shadow `sm` (button): `rgba(0, 0, 0, 0.32) 0px 0px 0.5px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 1px 1.5px 0px`
- Shadow `sm-2` (card, other): `rgba(0, 0, 0, 0.32) 0px 0px 0.8px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1.6px 0px, rgba(0, 0, 0, 0.08) 0px 0.8px 2.4px 0px`
- Shadow `hairline` (media): `rgba(0, 0, 0, 0.2) 0px 1px 1.5px 0px`
- Shadow `sm-3` (text): `rgba(0, 0, 0, 0.32) 0px 0px 0.5px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 1px 1.5px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.24) 0px 0px 0.5px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 2px 2px 0px, rgba(22, 22, 22, 0.22) 0px 18px 44px 0px`
- Shadow `sm-4` (other, card): `rgba(0, 0, 0, 0.32) 0px 0px 0.44px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0.87px 0px, rgba(0, 0, 0, 0.08) 0px 0.87px 1.3px 0px`
- Motion: standard transition `0.15s ease-in` on interactive elements.

The page is mostly flat: white canvas, restrained hairlines, and clear section changes do most of the work. Product mockups and floating UI elements gain subtle layered shadows, with slightly stronger elevation reserved for overlays. Cards remain understated, using delicate edges and modest rounding rather than large, soft shadow fields.

## Imagery

Product interfaces are the main visual asset: realistic table views, controls, badges, and dashboards presented as layered product media. The showcase uses saturated blue-toned imagery behind a white interface in the viewport, while the full-page view shows a deep-green band. Customer stories pair brand marks with interface or dashboard visuals. Treat these as product evidence, not decorative stock imagery; keep crops broad and interface details legible.

## Components

### Announcement strip

A compact, pale top banner contains a short product message, linked action, and close control.

### Primary and secondary CTAs

Pair a dark filled button with a white outlined alternative; measured button corners are compactly rounded, with clear text contrast.

### Product showcase

A wide, deep-green stage contains a tab-like category selector and a large, detailed Airtable interface mockup.

### Customer proof row

A restrained horizontal band of customer logos acts as a transition into customer-story content.

### Customer story

Use a split layout with a trust statement and contact action beside a customer-specific case study and dashboard visual.

### Footer navigation

Return to a light surface; group numerous links into compact columns, with a narrow utility and legal row below.

### Measured component styles

- **Primary button** (“Sign up for free”): background #181d26 · text #ffffff · border 1px solid #181d26 · radius 4px · padding 8px 16px · 550 14px ATSeasonSans
- **Secondary button** (“Start building for free”): background #161616 · text #ffffff · radius 4px · padding 12px 24px · 650 16px ATSeasonSans
- **Card** (“1 Radiant Night Runner”): background #ffffff · text #161616 · radius 0px · padding 5px 6px 5px 19px · 550 20px SF Pro Text
- **Badge** (“IPO”): background #e0dafd · text #6231ae · radius 100px · padding 0px 10px · 400 12.5px SF Pro Text
- **Navigation item** (“Airtable home”): transparent background · text #181d26 · border 2px solid · radius 0px · padding 0px · 550 20px ATSeasonSans

## Do

- Lead with a centered, concise headline on white.
- Keep primary actions dark with high-contrast labels.
- Use Forest Stage (#03330b) as a focused product showcase surface.
- Show realistic product interfaces as evidence.
- Separate customer proof with subtle dividers.
- Maintain clear contrast between headline and muted supporting copy.

## Don't

- Do not turn the badge palette into broad page backgrounds.
- Do not use orange as the dominant CTA color.
- Do not crowd the hero with product details.
- Do not add heavy shadows to ordinary content sections.
- Do not make every section a boxed card.
- Do not rely on decorative imagery where product UI should explain the feature.

## Agent prompt

Build a new page in Airtable’s visual style using Gallery White (#ffffff) as the main canvas and Airtable Ink (#1d1f25) for primary text and dark actions. Use ATSeasonSans or a close sans-serif substitute for the hero and navigation, with restrained gray supporting copy in Quiet Gray (#5b5b5b). Keep the hero centered, open, and typographic, with a short explanation and paired filled and outlined CTAs. Create one deliberate product showcase stage in Forest Stage (#03330b), featuring authentic-looking interface UI rather than generic illustration. Keep other sections modular and mostly flat, using light dividers, occasional Cloud Mist (#f6f8fc) surfaces, and subdued elevation only for floating media. Use orange and status hues only for localized interface details. Finish with a clean, multi-column link footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting copy, and paired CTAs within a broad white hero. | clear value proposition, primary and secondary action | large centered headline, dark filled CTA, outlined CTA, open white canvas |
| 2 | product-showcase | Wide product interface and category tabs on a contrasting full-width stage. | switchable use-case categories, show product in context | deep-green band, tab-like selector, large interface mockup, floating UI details |
| 3 | logo-cloud | A narrow centered transition band followed by a single horizontal row of customer marks. | social proof, brand recognition | centered bridge message, logo strip, light dividers |
| 4 | feature-split | Split proof section with trust statement on one side and customer story and product visual on the other. | customer proof, contact action, case-study storytelling | split columns, customer marks, dashboard visual, stacked story rows |
| 5 | footer | Multi-column link directory with a compact brand and utility row above legal links. | category-based navigation, legal and support access | column link groups, thin divider, social icons, utility row |

## Source CSS custom properties (selected)

```css
--theme_background: #f8fafc;
--theme_background-weak: #fff;
--theme_background-medium: #f8fafc;
--theme_background-strong: #e0e2e6;
--theme_success-text: #006400;
--theme_info-text: #254fad;
--theme_text: #333840;
--theme_text-weak: #040e20b0;
--theme_text-strong: #181d26;
--theme_upsell-text: #181d26;
--theme_upsell-text-weak: #41454d;
--theme_upsell-text-strong: #333840;
--theme_upsell-border: #9297a0;
--theme_info-border: #458fff;
--theme_success-border: #39bf45;
--theme_border: #040e20b0;
--theme_border-weak: #0114351f;
--theme_spotlight-text-strong: #fff;
--theme_background-z20: #fff;
--theme_button-background-primary: #1b61c9;
--theme_button-background-primary-hover: linear-gradient(0deg, #00000040, #00000040), #254fad;
--theme_button-background-primary-active: #1a3866;
--theme_button-background-primary-focus: #254fad;
--theme_button-background-primary-loading: #1a3866;
--theme_button-background-primary-disabled: #e0e2e6;
--theme_button-text-primary: #fff;
--theme_button-text-primary-hover: #fff;
--theme_button-text-primary-active: #fff;
--theme_button-text-primary-focus: #fff;
--theme_button-text-primary-loading: #fff;
--theme_button-text-primary-disabled: #41454d;
--theme_button-shadow-primary: 0px 0px 1px #00000052, 0px 0px 2px #00000014, 0px 1px 3px #2d7ff947, inset 0px 0px 0px .5px #0000000f;
--theme_button-shadow-primary-hover: 0px 0px 1px #00000052, 0px 0px 3px #0000001c, 0px 1px 4px #2d7ff97a, inset 0px 0px 0px .5px #0000001f;
--theme_button-shadow-primary-active: 0px 0px 1px #00000052, 0px 0px 3px #0000001c, 0px 1px 4px #2d7ff97a, inset 0px 0px 0px .5px #0000001f;
--theme_button-shadow-primary-loading: 0px 0px 1px #00000052, 0px 0px 3px #0000001c, 0px 1px 4px #2d7ff97a, inset 0px 0px 0px .5px #0000001f;
--theme_button-shadow-primary-disabled: inset 0 0 0 1px #9297a0;
--theme_button-filter-primary: none;
--theme_button-filter-primary-hover: none;
--theme_button-filter-primary-active: none;
--theme_button-filter-primary-focus: none;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/airtable-com