Download

Airtable design system.

Airtable design system — Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.

Use this plugin → Find on GitHub →

See it in context

The same design tokens applied across artifact kinds — a website, an app, a slide, a poster. Original mocks re-skinned with this system, not screenshots.

Website
Slides
App
Poster

Design tokens

56 tokens conforming to the Open Design token contract — the same structured palette, type, spacing, and motion values your agent reads to theme any artifact.

Surface

  • --bg #ffffff
  • --surface #ffffff
  • --surface-warm var(--surface)

Text

  • --fg #181d26
  • --fg-2 #333333
  • --muted rgba(4, 14, 32, 0.69)
  • --meta var(--muted)

Border

  • --border #e0e2e6
  • --border-soft #eef0f3

Accent

  • --accent #1b61c9
  • --accent-on #ffffff
  • --accent-hover #254fad
  • --accent-active color-mix(in oklab, var(--accent), black 14%)

Semantic

  • --success #006400
  • --warn #eab308
  • --danger #dc2626

Typography

  • --font-display "Haas Groot Disp", Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif
  • --font-body Haas, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif
  • --font-mono ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace

Type scale

  • --text-xs 12px
  • --text-sm 14px
  • --text-base 16px
  • --text-lg 20px
  • --text-xl 24px
  • --text-2xl 32px
  • --text-3xl 40px
  • --text-4xl 48px
  • --leading-body 1.35
  • --leading-tight 1.2
  • --tracking-display 0

Spacing

  • --space-1 4px
  • --space-2 8px
  • --space-3 12px
  • --space-4 16px
  • --space-5 20px
  • --space-6 24px
  • --space-8 32px
  • --space-12 48px
  • --section-y-desktop 96px
  • --section-y-tablet 64px
  • --section-y-phone 48px

Radius

  • --radius-sm 12px
  • --radius-md 16px
  • --radius-lg 24px
  • --radius-pill 9999px

Elevation

  • --elev-flat none
  • --elev-ring 0 0 0 1px var(--border)
  • --elev-raised 0 0 1px rgba(0, 0, 0, 0.32), 0 0 2px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(45, 127, 249, 0.28), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06)

Focus

  • --focus-ring 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)

Motion

  • --motion-fast 150ms
  • --motion-base 200ms
  • --ease-standard cubic-bezier(0.2, 0, 0, 1)

Layout

  • --container-max 1200px
  • --container-gutter-desktop 24px
  • --container-gutter-tablet 16px
  • --container-gutter-phone 12px

Design System Inspired by Airtable

Category: Design & Creative Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.

1. 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

2. Color Palette & Roles

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)

3. Typography Rules

Font Families

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

Hierarchy

RoleFontSizeWeightLine HeightLetter Spacing
Display HeroHaas48px4001.15normal
Display BoldHaas Groot Disp48px9001.50normal
Section HeadingHaas40px4001.25normal
Sub-headingHaas32px400–5001.15–1.25normal
Card TitleHaas24px4001.20–1.300.12px
FeatureHaas20px4001.25–1.500.1px
BodyHaas18px4001.350.18px
Body MediumHaas16px5001.300.08–0.16px
ButtonHaas16px5001.25–1.300.08px
CaptionHaas14px400–5001.25–1.350.07–0.28px

4. Component Stylings

Buttons

  • Primary Blue: #1b61c9, white text, 16px 24px padding, 12px radius
  • White: white bg, #181d26 text, 12px radius, 1px border white
  • Cookie Consent: #1b61c9 bg, 2px radius (sharp)

Cards: 1px solid #e0e2e6, 16px–24px radius

Inputs: Standard Haas styling

5. Layout

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

6. Depth

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

7. Do’s and Don’ts

Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons

Don’t: Skip positive letter-spacing, use heavy shadows

8. Responsive Behavior

Breakpoints: 425–1664px (23 breakpoints)

9. Agent Prompt Guide

  • Text: Deep Navy (#181d26)
  • CTA: Airtable Blue (#1b61c9)
  • Background: White (#ffffff)
  • Border: #e0e2e6
Mode
design-system
Scenario
design
Surface
web
Manifest id
design-system-airtable

Tags

  • design-system
  • first-party
  • design
  • design-creative