Airtable Design System
Light · Generated 13/04/2026 · 66 colors · 42 type tokens · 22 spacing steps · 23 breakpoints · 7 motion tokens
v1.0.0
Color Palette
Background Colors
Dark Gray
#181D26
Black
#000000
White
#FFFFFF
Orange
#FCB42A
Blue
#254FAD
Dark Green
#0A2E0E
Dark Orange
#AA2D00
Light Pink
#FA91E0
White 2
#F8FAFC
Dark Green 2
#214224
Text Colors
Dark Gray 2
#333333
Dark Gray 3
#444444
Dark Gray 4
#333840
Dark Blue
#040E20
Dark Gray 5
#41454D
Mid Gray
#9297A0
Blue 2
#1B61C9
Cyan
#0DBDB4
Border Colors
Light Gray
#E0E2E6
Fill & Gradient Colors
Purple
#9B67F0
Red
#FC4777
Blue 3
#458FFF
Orange 2
#F5620C
Pink
#E848C0
Cyan 2
#0AB2FA
Green
#39BF45
Yellow
#F9BC00
Purple 2
#7C37EF
Cyan 3
#39CAFF
Shadow Colors
Blue 4
rgba(45,127,249,.28)
Dark Blue 3
rgba(15,48,106,.05)
Typography
Base Font · Haas Grotesk / Plus Jakarta Sans
Haas Grotesk
Build apps and workflows that connect your data, your team, and your AI.
Regular · 400 Medium · 500 Semibold · 600 Black · 900
Display Font · Times / DM Serif Display
Haas Groot Disp
Enterprise-ready AI workflows, apps & agents at scale.
Regular · 400 Italic · 400
Build enterprise AI
3xl · 48px · Black · lh: 48px · ls: 0.08px
Workflows & Agents
2xl · 40px · Black · lh: 40px · ls: 0.08px
Connect your data and teams
xl · 32px · Semibold · lh: 30px · ls: 0.08px
The platform for AI-powered work
lg · 24px · Semibold · lh: 26px · ls: 0.1px
Airtable is the enterprise platform for connecting all your work, data, and AI — in one place.
base · 20px · Regular · lh: 26px · ls: 0.1px
Updated just now · 12 records synced · 3 automations triggered today
xs · 16px · Regular · lh: 25px · ls: 0.1px
TABLES · VIEWS · AUTOMATIONS · AI
2xs · 14px · Semibold · lh: 18.9px · label/caption
Line Heights
tight
17.5px
snug
18.9px
normal
20px
lh-6
24px
lh-10
30px
lh-13
40px
lh-15
48px
lh-18
72px
Letter Spacing
Airtable Platform
--letter-spacing-tight
0.08px · headings, display
AI Workflows
--letter-spacing-wider
0.14px · UI body text
TABLES · VIEWS
--letter-spacing-ls-9
0.7px · uppercase labels
Spacing
Spacing Scale
22 tokens — 1px → 338.703px
1
2
3
4
6
7
8
12
16
20
22
24
32
40
48
64
72
96
121
335+
337
339
Borders
Border Radii
sm
2px
md
6px
lg
10px
xl
12px
2xl
16px
full
20px
r7
24px
r8
32px
r9
50%
r10
999px · Pill
Border Widths
--border-width-hairline
1px · ×92
--border-width-thin
2px · ×320
Shadow / Elevation
Shadow Tokens
3 tokens
--shadow-sm
×5
Multi-layer with blue tint + 0.5px inset ring — buttons, focused inputs, CTAs
--shadow-md
×4
Soft 20px spread — cards, panels, floating containers
--shadow-lg
×1
Multi-layer with dark inset ring — secondary buttons, elevated surfaces
Z-Index
LayerValueUsage
--z-1-15Deep background decorations
--z-2-10Background canvas elements
--z-3-1Behind-content decorative layers
--z-41Base content layer
--z-52Slightly raised base
--z-63Interactive content above base
--z-74Elevated interactive components
--z-810Sticky headers, navigation bars
--z-99,999Modals, dialogs, overlays
--z-102,147,483,642Critical top-layer, maximum-1 UI
--z-112,147,483,646Absolute maximum — browser-level overlays
Breakpoints
Responsive Breakpoints
23 tokens — 400px → 1664px
--breakpoint-xs
400px
--breakpoint-sm
426px
--breakpoint-md
530px
--breakpoint-lg
550px
--breakpoint-xl
600px
--breakpoint-2xl
642px
--breakpoint-3xl
720px
--breakpoint-bp-8
749px
--breakpoint-bp-9
768px
--breakpoint-bp-10
832px
--breakpoint-bp-11
834px
--breakpoint-bp-12
896px
--breakpoint-bp-13
904px
--breakpoint-bp-14
1024px
--breakpoint-bp-15
1080px
--breakpoint-bp-16
1100px
--breakpoint-bp-17
1184px
--breakpoint-bp-18
1344px
--breakpoint-bp-19
1350px
--breakpoint-bp-20
1408px
--breakpoint-bp-21
1440px
--breakpoint-bp-22
1600px
--breakpoint-bp-23
1664px
Opacity
Opacity Tokens
6 tokens — 0.1 → 0.7
--opacity-10
10% · ×4
--opacity-12
12% · ×1
--opacity-20
20% · ×1
--opacity-25
25% · ×14
--opacity-50
50% · ×6
--opacity-70
70% · ×5
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Text TokenBackground TokenRatioWCAG Rating
--color-dark-gray-2--color-dark-gray1.34:1Fail
--color-dark-gray-2--color-black1.66:1Fail
--color-dark-gray-2--color-white12.63:1AAA
--color-dark-gray-2--color-orange7.04:1AAA
--color-dark-gray-2--color-blue1.68:1Fail
--color-dark-gray-3--color-dark-gray1.74:1Fail
--color-dark-gray-3--color-black2.16:1Fail
--color-dark-gray-3--color-white9.74:1AAA
--color-dark-gray-3--color-orange5.43:1AA
--color-dark-gray-3--color-blue1.3:1Fail
--color-dark-gray-4--color-dark-gray1.43:1Fail
--color-dark-gray-4--color-black1.78:1Fail
--color-dark-gray-4--color-white11.79:1AAA
--color-dark-gray-4--color-orange6.57:1AA
--color-dark-gray-4--color-blue1.57:1Fail
--color-dark-blue--color-dark-gray1.14:1Fail
--color-dark-blue--color-black1.09:1Fail
--color-dark-blue--color-white19.29:1AAA
--color-dark-blue--color-orange10.75:1AAA
--color-dark-blue--color-blue2.57:1Fail
--color-dark-gray-5--color-dark-gray1.76:1Fail
--color-dark-gray-5--color-black2.18:1Fail
--color-dark-gray-5--color-white9.62:1AAA
--color-dark-gray-5--color-orange5.36:1AA
--color-dark-gray-5--color-blue1.28:1Fail
CSS Variables Reference
Background Colors 19 tokens
Dark Gray--color-dark-gray#181D26
Black--color-black#000000
White--color-white#FFFFFF
Orange--color-orange#FCB42A
Blue--color-blue#254FAD
Light Pink--color-light-pink#FA91E0
White 2--color-white-2#F8FAFC
Dark Green--color-dark-green#0A2E0E
Dark Orange--color-dark-orange#AA2D00
Dark Blue 4--color-dark-blue-4#002D98
White 3--color-white-3#F0F6FF
Light Cyan--color-light-cyan#C7E5F2
Light Green--color-light-green#B6E995
Text & Border Colors 13 tokens
Dark Gray 2--color-dark-gray-2#333333
Dark Gray 3--color-dark-gray-3#444444
Dark Gray 4--color-dark-gray-4#333840
Dark Blue--color-dark-blue#040E20
Dark Gray 5--color-dark-gray-5#41454D
Mid Gray--color-mid-gray#9297A0
Blue 2--color-blue-2#1B61C9
Cyan--color-cyan#0DBDB4
Dark Cyan--color-dark-cyan#0076A8
Dark Cyan 2--color-dark-cyan-2#097A76
Light Gray (border)--color-light-gray#E0E2E6
Blue 4 (shadow)--color-blue-4rgba(45,127,249,.28)
Dark Blue 3 (shadow)--color-dark-blue-3rgba(15,48,106,.05)
Typography 42 tokens
Base Font--font-family-baseHaas Grotesk
Display Font--font-family-2Haas Groot Disp
Alternate--font-family-3Haas / Times
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Black--font-weight-black900
2xs--font-size-2xs14px
xs--font-size-xs16px
sm--font-size-sm18px
base--font-size-base20px
lg--font-size-lg24px
xl--font-size-xl32px
2xl--font-size-2xl40px
3xl--font-size-3xl48px
Tight--letter-spacing-tight0.08px
Normal--letter-spacing-normal0.1px
Wide--letter-spacing-wide0.12px
Wider--letter-spacing-wider0.14px
Widest--letter-spacing-widest0.16px
ls-9--letter-spacing-ls-90.7px
Spacing 22 tokens
Space 1--space-11px · ×2
Space 2--space-22px · ×24
Space 4--space-44px · ×57
Space 5--space-56px · ×14
Space 8--space-88px · ×21
Space 10--space-1012px · ×449
Space 12--space-1216px · ×222
Space 16--space-1620px · ×21
Space 24--space-2424px · ×121
Space 32--space-3232px · ×79
Space 40--space-4040px · ×36
Space 48--space-4848px · ×250
Space 64--space-6464px · ×12
Space 80--space-8072px · ×4
Space 96--space-9696px · ×1
Space 128--space-128120.984px · ×13
Space 160--space-160335px · ×1
Space 256--space-256338.703px · ×1
Borders & Radius 12 tokens
Hairline--border-width-hairline1px · ×92
Thin--border-width-thin2px · ×320
sm--radius-sm2px
md--radius-md6px
lg--radius-lg10px
xl--radius-xl12px
2xl--radius-2xl16px
full--radius-full20px
r7--radius-r724px
r8--radius-r832px
r9--radius-r950%
r10 · Pill--radius-r10999px
Motion, Opacity & Z-Index 24 tokens
Motion
Instant--duration-instant0.15s
Fast--duration-fast0.2s
Normal--duration-normal0.25s
Slow--duration-slow0.3s
Slower--duration-slower0.6s
Ease In--easing-ease-inease-in
Linear--easing-linearlinear
Opacity
10%--opacity-100.1
12%--opacity-120.12
20%--opacity-200.2
25%--opacity-250.25
50%--opacity-500.5
70%--opacity-700.7
Z-Index
Deep BG--z-1-15
Canvas BG--z-2-10
Below--z-3-1
Base--z-41
Raised--z-52
Interactive--z-63
Elevated--z-74
Navigation--z-810
Modal--z-99,999
Critical--z-102,147,483,642
Max--z-112,147,483,646
Breakpoints 23 tokens
xs--breakpoint-xs400px
sm--breakpoint-sm426px
md--breakpoint-md530px
lg--breakpoint-lg550px
xl--breakpoint-xl600px
2xl--breakpoint-2xl642px
3xl--breakpoint-3xl720px
bp-8--breakpoint-bp-8749px
bp-9--breakpoint-bp-9768px
bp-10--breakpoint-bp-10832px
bp-11--breakpoint-bp-11834px
bp-12--breakpoint-bp-12896px
bp-13--breakpoint-bp-13904px
bp-14--breakpoint-bp-141024px
bp-15--breakpoint-bp-151080px
bp-16--breakpoint-bp-161100px
bp-17--breakpoint-bp-171184px
bp-18--breakpoint-bp-181344px
bp-19--breakpoint-bp-191350px
bp-20--breakpoint-bp-201408px
bp-21--breakpoint-bp-211440px
bp-22--breakpoint-bp-221600px
bp-23--breakpoint-bp-231664px
Design System Preview · Airtable (Light) · Generated 13/04/2026 · 66 color tokens · 8 font-size · 3 font-family · 4 font-weight · 18 line-height · 9 letter-spacing · 22 spacing · 10 radius · 2 border-width · 3 shadow · 5 duration · 2 easing · 11 z-index · 23 breakpoints · 6 opacity