What is Airtable's primary brand color?

Near-black #181d26. It's the same hex as the ink token because Airtable uses the same role for both primary button background and h1/h2 display type. Notably, this is NOT the #1b61c9 blue that appears as --theme_button-background-primary in the CSS — that misleadingly-named variable is actually the inline-link color, not the brand action. Treating link-blue as the primary is the most common mistake when reading Airtable's CSS.

What typography does Airtable use, and what should I use if Haas isn't available?

Haas Grotesk and Haas Groot Disp — a custom display variant Airtable licenses. Haas Groot Disp covers display sizes 32–48px; Haas Grotesk covers everything 24px and below. The pricing surface uses a separate Inter Display stack at an unusual 475 weight, marking it as a deliberate sub-system. The closest open-source substitute for both is Inter Display — adjust line-height down by ~5% to match Haas's tighter cap height.

Why are Airtable's display headlines so modest in weight?

The system delegates emphasis to size and color contrast, not to weight. A 40px h1 sits at weight 400, not 700 — going bolder would read as 'another SaaS marketing template' instead of Airtable's quiet editorial confidence. The only true bold (600) in the whole system lives in legal CTAs, signaling 'this is a required system surface, not a designed brand surface.'

How does Airtable break up its long-scroll explainer pages?

With signature surface cards. Three distinct surfaces — dark coral (#aa2d00), forest green (#0a2e0e), and navy (#181d26) — punctuate the editorial body every two or three screens. Between them sit white-canvas bands with headlines and copy, demo-card grids on warm pastel surfaces (peach, mint, yellow, mustard), and cream callouts. The canvas always resets to white between signature surfaces — never two darks in a row.

What's different about Airtable's pricing page?

It's a deliberate sub-system with its own typographic voice. The pricing surface uses Inter Display at weight 475 (a custom mid-weight between regular and medium) and pill-shaped buttons (9999px radius) that don't appear anywhere else in the system. The shape and font dialect signal 'this page is about commercial precision,' not editorial storytelling. Mixing the pricing dialect with the main marketing surface breaks the sub-system's voice.

Can I use this DESIGN.md to build my own workflow product?

Yes — feed it to Claude, Cursor, or GitHub Copilot. The agent will reproduce Airtable's restraint (near-black primary, modest type weights, signature surface cards) rather than a generic SaaS theme. You can also reference the tokens directly — every color, type style, radius, and spacing value is a quoted value ready to paste into Tailwind config, CSS variables, or your own component library.

Airtable Design System

Airtable's design system as a DESIGN.md file.

About Airtable DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source airtable.com

Workflow & No-code
Productivity & SaaS

Airtable's marketing site reads like a quiet editorial magazine. The base atmosphere is white canvas, deep #181d26 ink, generous whitespace, and a single confident primary CTA — never a gradient backdrop, never an atmospheric mesh, never the busy aurora that's become the default SaaS template. Nothing fights for attention until a section needs to. Brand voltage doesn't come from accent walls; it comes from full-bleed signature cards in dark coral, deep forest green, navy, and cream that punctuate the long-scroll explainer pages every two or three screens.

This page captures Airtable's marketing system as a DESIGN.md file — Google Labs' open spec for machine-readable design tokens. Inside: 28 color tokens covering brand, surface, text, signature cards, and a pricing sub-system; 14 typography tokens split between Haas Grotesk for the main editorial body and Inter Display at a custom 475 weight for the pricing surface; six radius tokens hierarchically assigned (12px CTAs, 10px cards, 6px inputs, pill for pricing only); and 26 component definitions covering buttons, signature surfaces, demo cards, pricing tiers, and the articles topic rail.

Drop the file into Claude, Cursor, GitHub Copilot, or any AI assistant that reads structured design tokens. The agent will produce React components and Tailwind classes that match Airtable's actual voice — sober editorial calm, not a generic SaaS template. Use it as a reference for design audits, a starting point for your own workflow product, or a teaching artifact for talking about restraint and the discipline of letting whitespace do the framing.

What makes it distinct

Near-black primary#181d26 is the brand CTA, not the link blue (#1b61c9) hiding in the CSS variables
Modest type weightsdisplay headlines stay at 400–500; weight is delegated to size and signature surface cards
Signature surface cardsfull-bleed coral, forest, navy, and cream blocks punctuate long-scroll pages every two or three screens
Pricing is its own dialectInter Display at weight 475 plus pill-shaped buttons that don't appear anywhere else
White hero, full stopno gradient, no mesh, no atmospheric backdrop; whitespace and Haas do the framing

Live at airtable.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

airtable.com

Explore Airtable

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Airtable design system FAQ

Common questions about Airtable's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Airtable in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→