# Design System Inspiration of Airtable

A sober, editorial workflow-software interface anchored on white canvas and dark-ink type. Brand voltage comes from full-bleed signature cards in coral, dark green, and dark navy that punctuate long-scroll explainer pages.

Signature coral
Pastel peach
Cream callout
Dark CTA
01 — Color Palette

## Brand & Accent

Primary is near-black ink — not blue. The CSS variable `--theme_button-background-primary: #1b61c9` exists at root but maps to the link/info role; the actual hero CTA renders in `#181d26`. Brand voltage lives in signature surface cards, not in accent colors.

### Brand

primary (ink)
#181d26
Primary CTA, h1/h2 type, dark surface cards. Same hex serves three roles.
primary-active
#0d1218
Press state on primary buttons.
link
#1b61c9
Inline body links. NOT the primary button color.
primary-disabled
#e0e2e6
Disabled CTA background.

### Signature Card Surfaces

signature-coral
#aa2d00
Largest signature card on the homepage. Full-bleed dark coral with white type.
signature-forest
#0a2e0e
Deep-green signature card sibling to coral.
surface-dark
#181d26
Mid-page CTA cards ("The path to 10× every person…").
signature-cream
#f5e9d4
Cream callout band carrying product UI fragments.
signature-peach
#fcab79
Demo-card surface (warm).
signature-mint
#a8d8c4
Demo-card surface (sage / mint).
signature-yellow
#f4d35e
Demo-card surface (warm yellow).
signature-mustard
#d9a441
Demo-card surface (mustard / ochre).

### Surface

canvas
#ffffff
Default page surface. The hero is this — no gradient.
surface-soft
#f8fafc
Tabbed feature card / featured pricing tier.
surface-strong
#e0e2e6
"Start building with Airtable" CTA banner near the footer.
surface-dark-elevated
#1d1f25
Articles-page rainbow-stripe hero base.
hairline
#dddddd
1px input outlines, table dividers, secondary-button outlines.

### Text

ink
#181d26
h1/h2 display, primary button text on light.
body
#333840
Default running-text color.
muted
#41454d
Footer links, breadcrumbs, captions.
border-strong
#9297a0
Disabled secondary button outline.

### Semantic

info
#254fad
Inline informational badges.
info-border
#458fff
Focused-input outline.
success
#006400
Confirmation text.
success-border
#39bf45
Validation success border.
02 — Typography Scale

## Haas + Inter Display sub-system

Editorial voice runs Haas / Haas Groot Disp at modest weights (400 / 500). Pricing surface uses Inter Display at unusual mid-weights (475 / 575) as a deliberate sub-system. Inter Tight + Inter substituted here.

display-xl48px / 500 / 1.1 / 0
Articles h2
Build the workspace
display-lg40px / 400 / 1.2 / 0
Homepage h1 hero
All your teams, all their workflows
display-md32px / 400 / 1.2 / 0
Platform feature heads
Conversational app building
title-lg24px / 400 / 1.35 / 0.12px
Section titles
Sophisticated workflows
title-md20px / 400 / 1.5 / 0
Sub-section titles
Don't just talk. Deploy it.
title-sm18px / 500 / 1.4 / 0
Article-card titles
10 best AI app builders for 2026
label-md16px / 500 / 1.4 / 0
Demo-card titles
Production apps in prototype speed
button16px / 500 / 1.4 / 0
CTA button labels
Get started for free
body-md14px / 400 / 1.25 / 0
Body, footer, top-nav
From scrappy startups to enterprise teams, Airtable adapts to whatever you need next without forcing a rebuild.
caption14px / 500 / 1.35 / 0.16px
Captions, meta
AI PROJECT PLANNING
legal13.12px / 600 / 1.2 / 0
Cookie/legal CTA
Cookies Preferences
pricing-display44.8px / 475 / 1.1 / 0
Pricing h1
A plan for every organization's needs
pricing-section28px / 475 / 1.2 / 0
Pricing section heads
Compare plans
pricing-card-title20px / 475 / 1.3 / 0
Tier card plan name
Business
03 — Button Variants

## Black + white outline pair

Primary is near-black, secondary is a white outline button. The two together form Airtable's signature button row on every hero. Pricing-page pill buttons live in their own sub-system.

button-primary
primary (#181d26) / on-primary / lg radius
button-primary-active
primary-active background (#0d1218)
button-primary-focus
3px blue focus ring
button-primary-disabled
primary-disabled / muted text
button-secondary
canvas / ink / hairline outline / lg radius
button-secondary-on-dark
White with hairline outline. Stays white over signature surfaces.
button-secondary-on-dark
Same on dark navy CTA cards.
button-pricing-pill
Pill radius — pricing sub-system only
button-legal
link bg, 2px radius, 600 weight — system-required
button-icon-circular
40 × 40 / canvas / hairline outline / full radius
04 — Cards & Containers

## Color-block page rhythm

Surface modes alternate page-by-page: white canvas → coral signature → cream callout → dark navy CTA → light gray banner → footer. The canvas resets between every signature surface — no two consecutive bands repeat.

#### Production apps in prototype speed

Build, test, and ship internal tools in days — not quarters. The largest signature card on the homepage carries the brand's most direct value claim.

#### Don't just talk. Deploy it.

Deep-green signature card sibling to the coral — same shape, different voltage. Used in the homepage demo-grid cluster.

#### The path to 10× every person in your organization

Mid-page dark-navy CTA card. Same hex as primary — ink is both the type color and the signature dark surface.

Acme Co.
Press Corp.
Studio Inc.
Time Press

#### Tabbed feature card

Light surface-soft background; left rail of tabs; right pane carries content + small CTA.

#### Cream callout band

Soft beige surface holding stat callouts and inline product fragments. Quieter than the coral / forest / dark cards.

05 — Demo-Card Grid

## Bright single-color showcase grid

Demo cards carry product UI fragments on signature pastel surfaces. Card heights vary deliberately — uniform grids feel like a spec sheet.

Workflow editor
Drag-and-drop builder
Board view
Kanban for in-flight work
Calendar
Timeline visualization
Automation card
Trigger + condition + action
Linked records
Cross-table relationships
AI assistant
Natural language to formula
06 — Article Cards

## Articles page trending grid

3-up cards with colorful illustrated thumbnails (16:9). Thumbnails reuse signature surfaces (peach, coral, mint) rather than gradient washes.

AI · Article
AI readiness: How to get your organization agent ready
AI project planning
Strategy · Article
System of records: The key ingredient to AI agent success
AI project planning
Automation · Article
How to build an AI app that doesn't fall down on launch day
Automation
07 — Pricing Sub-System

## Inter Display + pill buttons

Separate dialect for the pricing surface. Mid-weights 475/575, pill-shaped CTAs (`rounded.pill`), surface-soft for the featured tier.

#### Free

$0
Per user / month

- Unlimited bases
- 1 GB attachments
- Up to 1,000 records

#### Team

$24
Per user / month, billed annually

- 50 GB attachments
- 50,000 records / base
- Standard sync integrations

#### Business

$45
Per user / month, billed annually

- Premium sync integrations
- SAML SSO
- Advanced calendar features

#### Enterprise Scale

$—
Custom — contact sales

- HyperDB
- On-premise sync
- Audit logs + compliance

08 — Form Elements

## Inputs and labels

Standard inputs at 44px height with 6px radius. Focus state shows a soft blue glow.

Email address
Email address (focused)
Workspace name
Notes
09 — Spacing Scale

## Base unit 4px

All spacing tokens are 4-multiples. The 96px section rhythm is the universal vertical constant across every page.

xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px
10 — Border Radius Scale

## Hierarchy not rule

12px primary CTAs and signature cards, 10px secondary cards, 6px inputs, 9999px icons + pricing pills.

2 · xs
6 · sm
10 · md
12 · lg
pill
full
11 — Elevation & Depth

## Color-block first, shadow second

Shadows are minimal. Depth comes from the contrast between white canvas and signature surface cards — not from heavy elevation.

##### Flat

No shadow. Body sections, top nav, footer.

##### Soft hairline

1px hairline border. Inputs, sub-nav rails, secondary buttons.

##### Button rest

Subtle drop with a faint shadow.

##### Button focus

3px outer ring in link blue at 30% alpha.

##### Card flat

No shadow; depth from color contrast against the surface band.

##### Signature card flat

Coral / forest / dark surfaces sit flat against the white canvas — no shadow needed.

12 — Responsive Behavior

## Editorial pacing across breakpoints

Card grids reduce columns rather than scaling cards down. Signature cards stay full-bleed at every breakpoint.

Name | Width | Key Changes
--- | --- | ---
Mobile | < 768px | Single-column; nav collapses to hamburger; demo-grid 1-up; signature cards stay full-bleed; logo strip wraps; footer single-column.
Tablet | 768–1024px | 2-up demo-grid; nav stays horizontal; cream-callout cards stack 2-up; pricing comparison becomes scrollable.
Desktop | 1024–1440px | 3- or 4-up demo-grid; full top-nav visible; pricing tiers render 4-across.
Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at ~1280px.

375
mobile
600
small phone
768
tablet
1024
laptop
1280
desktop
1440
wide

#### Touch Targets

- Primary CTA buttons render at minimum 48 × 48px (16px vertical padding + 16px line-height) — comfortably above WCAG AAA's 44 × 44 minimum.
- Circular icon buttons are exactly 40 × 40 — slightly under WCAG's preferred 44, but visually centered icons compensate.
- Text inputs sit at 44px height with 12px vertical padding.

#### Collapsing Strategy

- Top nav collapses to hamburger at < 768px; menu opens as a full-screen sheet.
- Card grids reduce columns rather than scaling cards down.
- Tabbed feature card re-stacks tabs above the content pane on mobile.
- Pricing comparison table becomes horizontally scrollable below 1024px.
- Hero illustrations bleed full-width on mobile.