Airtable DESIGN.md

Design System Inspiration of Airtable

Overview

Visual Theme & Atmosphere

Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (#181d26) and Airtable Blue (#1b61c9) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.

Key Characteristics:

• White canvas with deep navy text (#181d26)
• Airtable Blue (#1b61c9) as primary CTA and link color
• Haas + Haas Groot Disp dual font system
• Positive letter-spacing on body text (0.08px–0.28px)
• 12px radius buttons, 16px–32px for cards
• Multi-layer blue-tinted shadow: rgba(45,127,249,0.28) 0px 1px 3px
• Semantic theme tokens: --theme_* CSS variable naming

Primary tasks

• Create a first base to start organizing work
• Build a vendor tracker or content calendar for your team
• Link records across tables and automate what happens next
• Filter and sort your own view of shared data
• Connect an outside data source and keep it synced

Brand Narrative

Airtable was founded in 2012 by Howie Liu (CEO), Andrew Ofstad, and Emmett Nicholas in San Francisco — three engineers who met through Duke connections (Airtable — Wikipedia, Antler — Airtable with Andrew Ofstad). Howie Liu had previously co-founded Etacts (YC W2010, age 20), a Gmail relationship-management tool acquired by Salesforce on December 21, 2010 (Golden — Howie Liu); the question that became Airtable formed during his Salesforce PM stint working on social CRM. Andrew Ofstad came from Google as PM on Android, leading the redesign of Google Maps. Emmett Nicholas was a Stack Overflow engineer for 3+ years. The thesis: spreadsheets and databases occupied opposite ends of "ease of use" vs "structural rigor" — Airtable proposed a hybrid. 2 years in stealth (2012-2014) → invite-only beta 2014 → public launch March 2015 (Taskade history). Pre-seed angels included Ashton Kutcher + Michael Birch (Bebo) + Josh Reeves (Gusto). Series F Dec 13, 2021: $735M at $11B valuation (Tracxn). Total raised: $1.35B. Evolved from collaborative database (2015-2020) to platform-with-AI-workflows (2024+) — current tagline "Build Enterprise-ready AI Workflows, Apps & Agents" (verified live 2026-05).

What Airtable refuses: competing with Notion on docs, no-code-as-magic framing.

Principles

1. Records are the unit. Bases > tables > views > records. UI implication: hierarchies stay flat.
2. Views are personalized, data is shared. UI implication: view chrome (filters, sort) at view level, never global.
3. Spotlight surface signals "live work". rgba(249,252,255,0.97). UI implication: canonical work surface = spotlight white.
4. Color belongs to user data, not chrome. UI implication: avoid bright accents for chrome; reserve for user categorization.
5. AI workflows are first-class blocks. UI implication: every AI step has visible config + output preview.

Personas

Personas are fictional archetypes informed by Airtable user segments (operations leaders, internal-tooling builders), not individual people.

Renee Park, 34, San Francisco. Operations Manager at Series B SaaS. Builds CRM-lite, vendor tracker, content calendar in Airtable.

Tomás Reyes, 41, Mexico City. Independent consultant building Airtable-based tools for 8 clients. Cares about base portability + per-record pricing.

Linda Chen, 28, Singapore. Marketing Ops at multinational. Heavy cross-table linking + automations user.

Colors

Primary

• Deep Navy (#181d26): Primary text
• Airtable Blue (#1b61c9): CTA buttons, links
• White (#ffffff): Primary surface
• Spotlight (rgba(249,252,255,0.97)): --theme_button-text-spotlight

Semantic

• Success Green (#006400): --theme_success-text
• Weak Text (rgba(4,14,32,0.69)): --theme_text-weak
• Secondary Active (rgba(7,12,20,0.82)): --theme_button-text-secondary-active

Neutral

• Dark Gray (#333333): Secondary text
• Mid Blue (#254fad): Link/accent blue variant
• Border (#e0e2e6): Card borders
• Light Surface (#f8fafc): Subtle surface

Shadows

• Blue-tinted (rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset)
• Soft (rgba(15,48,106,0.05) 0px 0px 20px)

Typography

Font Families

• Primary: Haas, fallbacks: -apple-system, system-ui, Segoe UI, Roboto
• Display: Haas Groot Disp, fallback: Haas

Hierarchy

Layout

• Spacing: 1–48px (8px base)
• Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)

Responsive Behavior

Breakpoints: 425–1664px (23 breakpoints)

Elevation & Depth

Depth

• Blue-tinted multi-layer shadow system
• Soft ambient: rgba(15,48,106,0.05) 0px 0px 20px

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.soft: rgba(15,48,106,0.05) 0px 0px 20px
• shadow.standard: rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset

Motion & Easing

Easings: ease-enter cubic-bezier(0.2,0.6,0.25,1), ease-exit cubic-bezier(0.4,0,1,1). No bouncy springs. prefers-reduced-motion: reduce removes spotlight fade-in.

---

Verified: 2026-05-08 (B1 loop) Tier 1 sources: https://airtable.com (live DOM via playwright — round 50% icon buttons; ghost 12px; Sign up CTA) Tier 2 sources: styles.refero.design / getdesign.md — no record. Tier 1 (Philosophy): airtable.com homepage; Howie Liu (CEO) public talks. Style ref: notion. Conflicts unresolved: none.

Components

Buttons

Primary Blue

• Background: #1b61c9
• Text: #ffffff
• Radius: 12px
• Padding: 16px 24px
• Font: 16px / 500 / Haas
• Use: Primary CTA buttons across the marketing site

White

• Background: #ffffff
• Text: #181d26
• Border: 1px solid #ffffff
• Radius: 12px
• Padding: 16px 24px
• Font: 16px / 500 / Haas
• Use: Secondary CTA on dark/blue surfaces

Cookie Consent

• Background: #1b61c9
• Text: #ffffff
• Radius: 2px
• Padding: 16px 24px
• Font: 16px / 500 / Haas
• Use: Cookie banner accept (deliberately sharp 2px radius)

Inputs

Default

• Background: #ffffff
• Text: #181d26
• Border: 1px solid #e0e2e6
• Radius: 12px
• Padding: 12px 16px
• Font: 16px / 400 / Haas
• Use: Inferred from §1-§2 baseline (no explicit DS variant in source).

Cards

Standard

• Background: #ffffff
• Border: 1px solid #e0e2e6
• Radius: 16px
• Padding: 24px
• Shadow: rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset
• Use: Default card surface; blue-tinted multi-layer shadow

Large Section

• Background: #ffffff
• Border: 1px solid #e0e2e6
• Radius: 24px
• Padding: 32px
• Use: Larger feature/section containers

Badges

Default

• Background: #f8fafc
• Text: #181d26
• Border: 1px solid #e0e2e6
• Radius: 12px
• Padding: 4px 8px
• Font: 14px / 500 / Haas
• Use: Inferred from §1-§2 baseline (no explicit DS variant in source).

States

Do's and Don'ts

Do

• Use Airtable Blue (#1b61c9) only for CTAs and links, set on a white (#ffffff) canvas with Deep Navy (#181d26) text
• Set the Haas / Haas Groot Disp font system with positive letter-spacing on body and small text (0.08px–0.28px) — it is Airtable's typographic signature
• Apply the radius scale by component size: 12px buttons, 16px standard cards, 24px sections, 32px large containers
• Lift primary buttons with the signature blue-tinted multi-layer shadow (rgba(45,127,249,0.28) 0px 1px 3px) so elevation ties back to the brand color
• Reserve color for user data and keep chrome neutral, signaling 'live work' with the spotlight surface (rgba(249,252,255,0.97)) plus subtle #e0e2e6 borders
• Name theme variables with the semantic --theme_* convention (e.g. --theme_success-text for #006400) to match Airtable's internal tokens

Don't

• Skip the positive letter-spacing on body and caption text — it is what gives Airtable its Swiss-precision feel
• Lean on heavy gray backgrounds or dark drop shadows for depth instead of the spotlight surface and the soft ambient rgba(15,48,106,0.05) 0px 0px 20px glow
• Spread Airtable Blue (#1b61c9) across chrome or large backgrounds — color belongs to user data, not the UI frame
• Reach for the deliberately sharp 2px radius outside its cookie-consent context where buttons and cards use 12px and up
• Add bouncy spring motion or exceed the 150–400ms timing tokens, and respect prefers-reduced-motion by dropping the spotlight fade-in
• Use forbidden voice like 'revolutionary database', 'no-code magic', or emoji in product chrome

Voice & Tone

Airtable's voice is product-pragmatic and confidence-quiet — speaks like an internal tools team explaining what just shipped. Hero messaging: "Build enterprise-ready AI workflows, apps & agents" (homepage 2026-05) — verb-first, capability-list, no hyperbole.

Voice samples

• Marketing CTA: "Sign up" / "Talk to sales"

Forbidden phrases. "Revolutionary database", "no-code magic", emoji in product chrome.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Airtable Blue (#1b61c9)
• CTA hover: deepen to #0f4ba0 (estimated ~10% darker)
• Heading / body text: Deep Navy (#181d26)
• Muted text: ~#6b7280 (estimated)
• Page background: White (#ffffff)
• Border default: #e0e2e6
• Spotlight surface: rgba(249,252,255,0.97)
• Success: Green (#006400)

Example Component Prompts

• "Create an Airtable-style primary button: bg #1b61c9, white text, 12px border-radius, 12px 20px padding, Haas font weight 500 14px. Hover: bg darkens ~10%. Box-shadow: rgba(45,127,249,0.28) 0px 1px 3px for the signature blue-tinted lift."
• "Build a card: white bg, 1px solid #e0e2e6 border, 16px radius (or 24-32px for featured cards), 24px padding. Title in Haas Groot Disp 18px weight 600 #181d26. Body in Haas 14px weight 400 with 0.08-0.28px positive letter-spacing for that Swiss precision."
• "Design a navigation header: white sticky bar, Haas wordmark left, link nav (14px weight 500 #181d26, hover to #1b61c9), Airtable Blue CTA right. Bottom border 1px solid #e0e2e6 on scroll."

Iteration Guide

1. Apply positive letter-spacing on body and small text (0.08-0.28px) — it's Airtable's typographic signature.
2. Use the multi-layer blue-tinted shadow (rgba(45,127,249,0.28) 0px 1px 3px) on primary buttons — it ties elevation to the brand color.
3. Use semantic --theme_* token naming when building shadcn variables — matches Airtable's internal convention.
4. Cards use 12-32px radius depending on size — small components 12px, hero cards up to 32px.
5. Don't use heavy gray backgrounds — Airtable's depth comes from the spotlight surface (rgba(249,252,255,0.97)) and subtle borders.