Airtable: Build Enterprise-ready AI Workflows, Apps & Agents | Airtable

Design Specification — Airtable: Build Enterprise-ready AI Workflows, Apps & Agents | Airtable

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#0066FF). All type is set in Haas,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif. Detected font weights: 100, 400, 500, 600, 700, 900. Detected style signatures: glassmorphism; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://cdn.sanity.io/images/hlcyrtq5/production/b6863f568a03bcc0815f410996fd34a83289824a-168x52.svg?w=336&fm=webp · https://cdn.sanity.io/images/hlcyrtq5/production/d09c309b62a3e7db843f45c293d59b6dacd07632-168x52.svg?w=336&fm=webp

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(#0000 71.99%,#181d26e6 100%,#000000e6 0),linear-gradient(#0000004d,#0000004d)

> 1 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Haas — stack: Haas,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif

Font stacks (most used first)

• Haas,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif
• Haas
• Haas Groot Disp
• var(--font-mono)
• Haas Groot Disp,Haas,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif!important
• "Haas Groot Disp", "Haas", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important
• var(--font-sans)
• var(--default-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)
• Haas,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif!important

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 400, 500, 600, 700, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 0 4px rgba(153,160,174,.16),0 0 0 2px #fff
• 0 0 0 4px #2d7ff9
• 0 0 0 4px #fcb400
• 0 0 0 4px rgba(255,255,255,.7)
• 0 0 0 4px rgba(0,0,0,.5)

Layout

Container max-width: 1536px

Grid columns (largest detected grid): 12

Breakpoints

• 640px
• 768px
• 1024px
• 1536px
• 96rem
• 1600px
• 1664px

Animation & Motion

Transitions

• all .15s ease-in
• all .2s linear
• all .25s ease-in
• all .6s cubic-bezier(.4,0,.2,1)
• background .2s
• none
• transform .3s ease
• opacity .2s

Easing curves

• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.2,1)
• var(--tw-ease,var(--default-transition-timing-function))
• var(--ease-out)
• var(--tw-ease,var(--bk-default-transition-timing-function,cubic-bezier(.4,0,.2,1)))
• cubic-bezier(.215,.61,.355,1)
• cubic-bezier(.4,0,.2,1)

Keyframes

@keyframes pulse { 50%{opacity:.5} }
@keyframes BkButton_animatedBackground__TvL_u { 0%{background-position-x:-100px}to{background-position-x:0} }
@keyframes BkButton_counterAnimatedBackground__KQlvv { 0%{background-position-x:0}to{background-position-x:-100px} }
@keyframes BkLoadingAnimation_loader__7rDWK { to{opacity:.33;background:var(--theme_upsell-text-weak)} }
@keyframes MarketoSubmitButton_blink___3LAW { 0%{opacity:.2}20%{opacity:1}to{opacity:.2} }
@keyframes BkArticleTopics_fadeIn___xR3x { 0%{opacity:0}to{opacity:1} }
@keyframes LoadingIcon_blink__blZLo { 0%{opacity:.2}20%{opacity:1}to{opacity:.2} }
@keyframes BkInlineBanner_animatedBackground__fpzCV { 0%{background-position-x:-100px}to{background-position-x:0} }
@keyframes BkInlineBanner_counterAnimatedBackground__l4VeQ { 0%{background-position-x:0}to{background-position-x:-100px} }
@keyframes baymax_progress__e2KKg { 0%{width:0}to{width:100%} }
@keyframes baymax_spinScale__KWEif { 0%{transform:rotate(0) scale(1)}50%{transform:rotate(1turn) scale(.9)}to{transform:rotate(2turn) scale(1)} }
@keyframes baymax_swayHorizontal__Mrnw1 { 0%{transform:translateX(-3%)}60%{transform:translateX(3%)}to{transform:translateX(-3%)} }
@keyframes baymax_spin__YD_aN { 0%{transform:rotate(0deg)}to{transform:rotate(1turn)} }
@keyframes baymax_spinReverse__Rilon { 0%{transform:rotate(0deg)}to{transform:rotate(-1turn)} }
@keyframes baymax_highlight__uipL0 { 0%{background-color:#d0f0fd;border-radius:20px;box-shadow:0 0 0 20px #d0f0fd}to{background-color:rgba(255,255,255,0);border-radius:20px;box-shadow:0 0 0 20px rgba(255,255,255,0)} }
@keyframes baymax_highlightYellow__PPmAV { 0%{background-color:#ffeab6}to{background-color:rgba(255,255,255,0)} }
@keyframes baymax_spacey__51CUM { 0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-2560px);transform:translateX(-2560px)} }
@keyframes baymax_bounceIn__XIAK5 { 0%,50%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:.9;-webkit-transform:scale3d(.98,.98,.98);transform:scale3d(.98,.98,.98)}70%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}to{-webkit-transform:scaleX(1);transform:scaleX(1)} }

Animations

• var(--animate-pulse)

CTA labels found on page

• Explore the platform
• Learn more

Source Design Tokens (CSS custom properties)

:root {
  --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --color-blue-50: oklch(97% .014 254.604);
  --color-blue-400: oklch(70.7% .165 254.624);
  --color-blue-600: oklch(54.6% .245 262.881);
  --color-blue-700: oklch(48.8% .243 264.376);
  --color-purple-600: oklch(55.8% .288 302.321);
  --color-fuchsia-500: oklch(66.7% .295 322.15);
  --color-gray-50: oklch(98.5% .002 247.839);
  --color-gray-100: oklch(96.7% .003 264.542);
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-700: oklch(37.3% .034 259.733);
  --color-gray-800: oklch(27.8% .033 256.848);
  --color-gray-900: oklch(21% .034 264.665);
  --color-neutral-50: oklch(98.5% 0 none);
  --color-neutral-100: oklch(97% 0 none);
  --color-neutral-200: oklch(92.2% 0 none);
  --color-neutral-300: oklch(87% 0 none);
  --color-neutral-500: oklch(55.6% 0 none);
  --color-neutral-600: oklch(43.9% 0 none);
  --color-neutral-700: oklch(37.1% 0 none);
  --color-neutral-800: oklch(26.9% 0 none);
  --color-neutral-900: oklch(20.5% 0 none);
  --spacing: .25rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm--line-height: calc(1.25 / .875);
  --text-base--line-height: calc(1.5 / 1);
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl--line-height: calc(2 / 1.5);
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-wide: .025em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-relaxed: 1.625;
  --radius-sm: .25rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --ease-out: cubic-bezier(0,0,.2,1);
  --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
  --aspect-video: 16/9;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --marketing-content-max-width: 1536px;
  --CARD_HEIGHT: 427px;
  --theme_text-strong: var(--theme_text);
  --theme_text-weak: var(--theme_text);
  --theme_upsell-text: var(--theme_text);
  --theme_upsell-text-weak: var(--theme_text);
  --theme_upsell-text-strong: var(--theme_text);
}

Do's and Don'ts

Do

• Do reserve the accent #0066FF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 400, 500, 600, 700, 900.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #FFFFFF;
  --color-accent: #0066FF;
  --color-background: #FFFFFF;
  --color-surface: #F8FAFC;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #333333;
  --color-border: #9297A0;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F5F5F5;
  --color-surface-container: #F2F4F7;
  --color-surface-container-high: #F2F0EF;
  --color-surface-container-highest: #EFEFEF;
  --font-sans: Haas,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  --font-size-display: 120px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 24px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14.8px;
  --font-size-label-sm: 12px;
  --radius-sm: 0.6px;
  --radius-md: 8px;
  --radius-lg: 32px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 0 4px rgba(153,160,174,.16),0 0 0 2px #fff;
  --shadow-md: 0 0 0 4px #fcb400;
  --shadow-lg: 0 0 0 4px rgba(0,0,0,.5);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-display: -.1px;
  --tracking-label: .005em;
  --container-max: 1536px;
}