Airtable Design System

Airtable's marketing surfaces are quietly editorial. The base atmosphere is white canvas, dark ink type, generous whitespace, and a near-black pill CTA — nothing is fighting for attention until a section needs to. The brand voltage doesn't come from gradient washes or accent walls; it comes from full-bleed signature cards in {colors.signature-coral}, {colors.signature-forest}, and {colors.surface-dark} that punctuate long-scroll explainer pages every two or three screens. Between those signature bands, the page reads like a print magazine: a headline, supporting copy, a small image cluster, then breathing room.

Type voice is Haas Grotesk at modest weights (400 for display, 500 for sub-titles and buttons). Display headlines never go bolder than 500 — emphasis comes from size and color contrast, not from weight. Body copy stays at 14px / 400 throughout. The pricing surface runs its own dialect: Inter Display at unusual mid-weights (475 / 575) and pill-shaped buttons ({rounded.pill}) that don't appear on any other page — a deliberate sub-system signaling "this page is about commercial precision."

Key Characteristics:

• Primary CTA is {colors.primary} (near-black ink) with white text and a {rounded.lg} (12px) corner — it reads as confident and final, never decorative.
• ...

Brand & Accent

• Primary ({colors.primary} — #181d26): The dominant brand color. Used for the primary CTA background, h1/h2 display type, and the {component.surface-dark} band. Not "blue, then black" — black IS the primary throughout the marketing system.
• Primary Active ({colors.primary-active} — #0d1218): The press state on primary buttons.

Surface

• Canvas ({colors.canvas} — #ffffff): The default page surface; the floor of every editorial body.
• Surface Soft ({colors.surface-soft} — #f8fafc): Tabbed feature cards and the featured pricing tier.
• ...

Text

• Ink ({colors.ink} — #181d26): The strongest text — h1/h2 display type and primary button text-on-light. Same hex as {colors.primary} because they are the same role expressed at type and button layers.
• Body ({colors.body} — #333840): The default running-text color.
• ...

Signature Card Surfaces

• Coral ({colors.signature-coral} — #aa2d00): The largest signature card on the homepage ("Production apps in prototype speed"). Full-bleed dark coral with white type.
• Forest ({colors.signature-forest} — #0a2e0e): A deep-green signature card used in the homepage demo-grid cluster.
• ...

Semantic

• Link ({colors.link} — #1b61c9): Inline body links and anchor text. Darker on press to {colors.link-active} (#1a3866). Despite the --theme_button-background-primary CSS-variable name, this color is not the primary button color — it is the link color.
• Info ({colors.info} — #254fad) and Info Border ({colors.info-border} — #458fff): Inline info badges and focused-input outline.
• ...

Font Family

The pricing surface runs a separate Inter Display stack at mid-weights (475 / 575) — a deliberate sub-system signaling commercial precision.

Hierarchy

Principles

Note on Font Substitutes

Spacing System

• Base unit: 4px (all spacing snaps to 4-multiples).
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.
• ...

Grid & Container

• Max content width: ~1280px centered, with {spacing.xxl} (48px) horizontal breathing room.
• Editorial body: Single 8/12-column at large breakpoints, collapsing to single-column on mobile.
• ...

Whitespace Philosophy

Decorative Depth

• Vertical rainbow stripes appear on the articles hero only — multi-color vertical bands sitting on {colors.surface-dark-elevated}. This is a single-page treatment, not a system-wide signature.
• Photography-as-depth in the demo-card grid: every card carries a real product UI screenshot or mockup, contributing depth through legible artifact density rather than decorative effects.

Border Radius Scale

Photography Geometry

> No hover states documented. Per the global no-hover policy (Step 6), every component spec below documents only Default and Active/Pressed states. Variants live as separate entries in the components: front matter.

top-nav — A 64px-tall white bar pinned to the top of every page. Airtable wordmark sits at left; primary horizontal menu (Platform, Solutions, Resources, Enterprise, Pricing) sits center-left in {typography.body-md}; the right cluster carries a "Book Demo" outline link, "Sign up for free" {component.button-primary}, and "Log In" text link. The nav stays light on every page — Airtable does not invert the nav over dark sections.

Buttons

button-primary — The signature primary CTA. Background {colors.primary} (near-black), text {colors.on-primary}, type {typography.button}, padding 16px × 24px, rounded {rounded.lg} (12px). This is the "Get started for free" / "Sign up for free" button visible on every hero. It reads as confident and final — not decorative — which is why the system uses it sparingly (one per viewport).

• Active state: button-primary-active darkens to {colors.primary-active} (#0d1218).

button-secondary-on-dark — Same shape as {component.button-secondary} but used on signature coral / forest / dark surfaces. Background {colors.canvas}, text {colors.ink} — the white button stays white over dark surfaces because the system never inverts to a translucent on-dark style on the marketing site.

button-pricing-pill — The pricing-page CTA family. Background {colors.canvas}, text {colors.pricing-ink}, rounded {rounded.pill} (9999px), padding 12px × 24px. The only place pill-shape appears in the marketing system. Treat it as part of the pricing sub-system signaling.

button-legal — Cookie-consent and legal-banner CTAs. Background {colors.link}, text {colors.on-primary}, type {typography.legal} (13.12px / 600), rounded {rounded.xs} (2px), padding 12px × 10px. The 2px corner radius and 600 weight signal "this is a required system surface," not a designed brand surface.

button-icon-circular — 40px × 40px circular button with {colors.canvas} background, hairline border, and {colors.ink} icon. Used for carousel controls, "share", and "back" affordances.

text-link — Inline body links in {colors.link} (#1b61c9, the actual link blue). No underline by default. Type inherits {typography.body-md}.

Cards & Containers

hero-band — The full-page-width white-canvas hero. No surface card, no border, no shadow, no atmospheric gradient — just the headline, sub-headline, and primary + secondary button pair sitting in 96px of whitespace. Vertical padding {spacing.section} (96px).

signature-coral-card — The large full-bleed coral card on the homepage ("Production apps in prototype speed"). Background {colors.signature-coral} (#aa2d00, a dark coral / oxide red), text {colors.on-primary}, rounded {rounded.lg} (12px), internal padding {spacing.xxl} (48px). Carries an h2 in {typography.display-md}, supporting copy in {typography.body-md}, and {component.button-secondary-on-dark} as the CTA.

signature-forest-card — A deep green signature card ({colors.signature-forest} — #0a2e0e) used as a demo-grid sibling to the coral card on the homepage.

hero-card-dark — The dark navy mid-page CTA card (e.g. "The path to 10× every person in your organization"). Background {colors.surface-dark} (#181d26), text {colors.on-dark}, rounded {rounded.lg} (12px), internal padding {spacing.xxl} (48px). The same color as {colors.primary} because the system uses ink as both type color and signature dark surface.

feature-card-tabbed — Light-cream cards (e.g. the "Coke / Pelosi / Conde Nast / Time Inc" tabbed feature card on the homepage). Background {colors.surface-soft}, rounded {rounded.lg} (12px), internal padding {spacing.xl} (32px). Left rail carries vertically-stacked tab labels in {typography.title-md}; right pane shows the active tab's content (illustration + body copy + small CTA).

cream-callout-card — Beige callout cards ({colors.signature-cream}). Rounded {rounded.md} (10px), internal padding {spacing.lg} (24px). Carry product UI fragments or stat callouts — softer than the dark/coral signature cards but still a deliberate brand surface.

demo-grid-card — Used in multi-card grids that punctuate every page. Background {colors.canvas} or one of the demo-grid surfaces ({colors.signature-peach}, {colors.signature-mint}, {colors.signature-yellow}, {colors.signature-mustard}), rounded {rounded.md} (10px), internal padding {spacing.md} (16px). Each card frames a product UI fragment. Card heights vary deliberately to dodge a uniform "spec sheet" feel.

logo-strip — Horizontal monochrome partner-logo row (HBO, Netflix, Amazon, Time, Conde Nast). Logos render in {colors.muted}, surface is {colors.canvas}, vertical padding {spacing.xl} (32px). 6 logos at desktop, 3 at mobile.

article-card — The trending-stories grid on the articles page. Background {colors.canvas}, rounded {rounded.md} (10px), internal padding {spacing.md} (16px). Each card carries a colorful illustrated thumbnail (16:9), a small uppercase category tag, an {typography.title-sm} title, and a meta line. 3-up at desktop.

topic-filter-rail — The left rail on the articles page. 240px wide, {colors.canvas} background, {typography.body-md}, vertically grouped category headings ("Marketing", "Product", "Project management", "Operations") with sub-bullets. Active item carries a small numeric count badge.

Inputs & Forms

text-input — Standard text input. Background {colors.canvas}, text {colors.ink}, type {typography.body-md}, rounded {rounded.sm} (6px), padding 12px × 16px, height 44px. 1px hairline border in {colors.hairline}.

text-input-focus — Focus state. Border thickens or recolors to {colors.info-border}.

Pricing Sub-System

pricing-tier-card — Standard tier card. Background {colors.canvas}, text {colors.pricing-ink}, type {typography.pricing-card-title} for the plan name, rounded {rounded.md} (10px), internal padding {spacing.xl} (32px). Carries the plan name, a price block in {typography.pricing-display} (44.8px / 475), feature checklist, and a {component.button-pricing-pill} at the bottom.

pricing-tier-card-featured — The featured tier (typically "Team" or "Business"). Background shifts to {colors.surface-soft}. No accent border, no badge — the background tone shift is the only signal.

pricing-comparison-row — Each row of the long comparison table at the bottom of the pricing page. Labels in the left column; checkmarks or values across 4 plan columns. 12px vertical padding per row, hairline divider between rows.

Navigation Variants

footer — Light surface ({colors.canvas}), 6-column link list at desktop covering Platform / Solutions / Resources / Learn / Company sub-trees. Vertical padding {spacing.section} divided across upper link block and lower legal row. Type {typography.body-md}.

cta-band-light — The light gray "Start building with Airtable" CTA strip near the footer. Background {colors.surface-strong} (#e0e2e6), text {colors.ink}, rounded {rounded.lg} (12px), padding {spacing.xxl} (48px). Carries an h2 in {typography.display-md} and a {component.button-primary}.

Signature Components

Articles Vertical Rainbow Stripe Hero — The articles-page hero treatment. Multi-color vertical bands at varying widths sitting on {colors.surface-dark-elevated}. The h1 + sub-head + CTA cluster sits center-left on top of the stripes. This is a single-page hero treatment, not a system-wide signature — do not promote it to a multi-page pattern.

Do

• Keep {component.button-primary} near-black. The brand's primary CTA is {colors.primary}, not the link blue. Mixing them up turns a confident hero into a confused one.
• Reserve {component.button-primary} for one primary action per viewport. The system is designed for scarcity at the brand-action layer.
• Use {component.button-secondary} (white with hairline outline) as the natural pair with {component.button-primary}. The two together form Airtable's signature button row.
• Trust whitespace as the hero atmosphere. Hero bands are intentionally calm — no gradient, no mesh, no atmospheric backdrop. Going against this reads as off-brand.
• Use {component.signature-coral-card}, {component.signature-forest-card}, and {component.hero-card-dark} to break editorial monotony. These are the brand's voltage moments.
• Keep {component.demo-grid-card} heights uneven within a grid. Uniform heights feel like a spec sheet.
• Treat the pricing surface as its own dialect: keep {typography.pricing-display}, {typography.pricing-card-title}, and {component.button-pricing-pill} together. Mixing them with Haas Grotesk button type breaks the sub-system's voice.
• Anchor every editorial band with {spacing.section} (96px) vertical padding.

Don't

• Don't make {colors.link} (#1b61c9) the primary button color. It is the link color. The primary button is {colors.primary} (#181d26, near-black). Treating link-blue as the brand action is the most common mistake when reading Airtable's CSS variables.
• Don't add a gradient backdrop to the hero. Airtable's hero is white, full stop. Mesh, aurora, spotlight gradients all read as "another SaaS template" — not Airtable.
• Don't bold display-weight type. {typography.display-xl} and {typography.display-lg} are intentionally weight 400 / 500 — going to 700 reads as marketing-page-template.
• Don't use {rounded.pill} outside the pricing surface. It's a sub-system signal, not a general radius option.
• Don't repeat the same surface mode in two consecutive bands. The editorial pacing depends on rhythm: white → signature card → white → cream → dark → white. Two whites in a row read as a typography blog.
• Don't add hover state styling beyond what the system already encodes. The system documents Default and Active/Pressed only.
• Don't introduce additional accent colors beyond the documented signature card palette. The system's voltage already uses coral, forest, dark navy, cream, peach, mint, yellow, and mustard.

Breakpoints

Touch Targets

• {component.button-primary} and siblings render at 48 × 48px minimum (16px vertical padding + 16px line-height) — comfortably above WCAG AAA's 44 × 44.
• {component.button-icon-circular} is exactly 40 × 40px — slightly under WCAG's recommended 44, but the centered icon and dot-radius compensate visually.
• ...

Collapsing Strategy

• Top nav collapses to a hamburger at < 768px; the menu opens as a full-screen sheet rather than a dropdown.
• Card grids reduce columns rather than scaling cards down.
• ...

Image Behavior

• Demo-card UI screenshots crop to fit their container rather than scaling up.
• Hero illustrations bleed full-width on mobile, losing horizontal margin.
• ...

1. Focus on ONE component at a time. Reference its YAML key directly ({component.button-primary}, {component.signature-coral-card}). 2. When adding a new component, decide first which sub-system it belongs to: the main editorial system (Haas, {rounded.lg}/{rounded.md}) or the pricing sub-system (Inter Display, {rounded.pill}).

• ...

"Create a workspace mockup: white canvas, thin grey grid borders, dark text (#181d26), and colorful labels for statuses."

The parsed design tokens extracted from the core stylesheet of this design system: