Design System

Create your
perfect workflow.

A friendly data canvas — bright surfaces, vivid sky blue accents, and approachable typography that makes organizing data feel delightful.

17 color tokens 16 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutrals with a vivid sky blue accent for interactivity, plus a full status palette for data visualization. 17 tokens across surfaces, text, interaction, and status.

Pure White
#ffffff
Page background, cards
Cloud Gray
#f9fafb
Secondary sections
Whisper Gray
#f3f4f6
Table alternation, inactive
Border Light
#e5e7eb
Borders, dividers
Border Medium
#d1d5db
Strong borders, outlines
Ink Black
#1d1f25
Primary text, headings
Slate Gray
#4b5563
Secondary text
Stone Gray
#6b7280
Placeholders, helpers
Ash Gray
#9ca3af
Disabled, inactive
Sky Blue
#18bfff
Primary accent, buttons
Deep Blue
#0ea5e9
Hover state
Ocean Blue
#0284c7
Active, focused
Emerald
#10b981
Success, completed
Amber
#f59e0b
Warning, in-progress
Coral
#ef4444
Error, destructive
Violet
#8b5cf6
Decorative, special tags
Rose
#ec4899
Secondary decorative

Status Tags

Active Complete In Progress Overdue Idea
Typography

Type Scale

System font stack as primary typeface (Inter substitute). Native rendering across platforms with excellent legibility for dense data.

Display Create your base 36px / 1.2 / −0.02em
Heading-lg Project tracker 30px / 1.2 / −0.02px
Heading Section heading 24px / 1.25 / −0.02px
Heading-sm Subsection heading 20px / 1.4 / −0.02px
Body Default body text for readable content 14px / 1.5 / 0.01px
Body-sm Dense data, table cells, comparison rows 13px / 1.5 / 0.01px
Caption Meta info · Footer · Labels 11px / 1.5 / 0.04px

Fonts

Primary system-ui 400–700 · 11–36px
Mono ui-monospace 400–500 · 12–14px · Record IDs & formulas
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with ample breathing room for data grids. 12-step spacing scale, 7 border radius values.

Spacing Scale (4px base)

14px
28px
312px
416px
624px
832px
1248px
2496px

Border Radius

default 4px
buttons 6px
lg 8px
cards 12px
2xl 16px
3xl 20px
pill 9999px
Data Display

Table & Status

The heart of Airtable — data grids with clear hierarchy, alternating rows, and status indicators for at-a-glance understanding.

Project Owner Status Due
Homepage Redesign
Sarah Chen
Complete
Jun 15
API Integration
Marcus Lee
Active
Jun 28
User Research
Priya Patel
In Progress
Jul 02
Mobile App Launch
Alex Kim
Overdue
Jun 10
AI Features Brainstorm
Jordan Wu
Idea
—

Surfaces

Pure White #ffffff
Cloud Gray #f9fafb
Whisper Gray #f3f4f6
Card Elevated #ffffff + shadow
Components

Button Variants

Primary action (Sky Blue), secondary (outlined), and ghost variants for clear interaction hierarchy in data-dense interfaces.

Primary Button
Main call to action — highest visual weight
.btn-primary
Sky Blue (#18bfff) background, white text, 6px radius. Use for the single most important action per view.
Secondary Button
Secondary actions, navigation
.btn-secondary
White background, Ink Black text, Border Light outline. For actions that support but don't compete with primary.
Ghost Button
Tertiary actions, less prominent controls
.btn-ghost
Transparent background, Slate Gray text. For toolbar actions and less prominent controls.
Input Field
User text input
input
White background, Border Light outline, 6px radius. Focus adds Sky Blue border with subtle glow shadow.
Guidelines

Do's & Don'ts

Do — Embrace
  • Pure White (#ffffff) as primary background
  • Ink Black (#1d1f25) for all primary text
  • Sky Blue (#18bfff) for interactive elements only
  • Status colors consistently for data visualization
  • 6px radius for buttons, 12px for cards
  • 4px-based spacing with ample breathing room
  • Whisper Gray for table row alternation
Don't — Avoid
  • Dark backgrounds for primary content areas
  • Sky Blue for non-interactive decorative elements
  • Coral for non-error contexts
  • Hard sharp corners on cards or buttons
  • Dense data without whitespace breathing room
  • More than two accent colors per view
  • Mono fonts for non-technical content