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.

airtable.com

NEW · LIVE PREVIEW

Build something people love.

A mock UI rendered with the Airtable design tokens — straight from its DESIGN.md.

Get startedLearn more

Fast

Secure

Simple

Website

Airtable01 / 12

KEYNOTE

Design that ships itself.

One DESIGN.md — every surface on-brand.

NextAgenda

Slides

9:41

Airtable

Today

Make it yours.

App

Airtable2026

Make
it
real.

Open DesignDESIGN.md

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

Role	Font	Size	Weight	Line Height	Letter Spacing
Display Hero	Haas	48px	400	1.15	normal
Display Bold	Haas Groot Disp	48px	900	1.50	normal
Section Heading	Haas	40px	400	1.25	normal
Sub-heading	Haas	32px	400–500	1.15–1.25	normal
Card Title	Haas	24px	400	1.20–1.30	0.12px
Feature	Haas	20px	400	1.25–1.50	0.1px
Body	Haas	18px	400	1.35	0.18px
Body Medium	Haas	16px	500	1.30	0.08–0.16px
Button	Haas	16px	500	1.25–1.30	0.08px
Caption	Haas	14px	400–500	1.25–1.35	0.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

Airtable design system.

See it in context

Design tokens

Surface

Text

Border

Accent

Semantic

Typography

Type scale

Spacing

Radius

Elevation

Focus

Motion

Layout

Design System Inspired by Airtable

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Semantic

Neutral

Shadows

3. Typography Rules

Font Families

Hierarchy

4. Component Stylings

Buttons

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

Inputs: Standard Haas styling

5. Layout

6. Depth

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

9. Agent Prompt Guide

Tags

One design system. Every output unmistakably your brand

See it in context

Design tokens

Surface

Text

Border

Accent

Semantic

Typography

Type scale

Spacing

Radius

Elevation

Focus

Motion

Layout

Design System Inspired by Airtable

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Semantic

Neutral

Shadows

3. Typography Rules

Font Families

Hierarchy

4. Component Stylings

Buttons

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

Inputs: Standard Haas styling

5. Layout

6. Depth

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

9. Agent Prompt Guide

Tags

Related systems in Design & Creative

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