mdshop
Back to designs
A

Design System inspired by Airtable

Database-spreadsheet hybrid. Blue brand, colorful data views, friendly.

Usage
npx getdesign@latest add airtable

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs
15
Bookmarked
0
Not an official Airtable design system. A curated starting point for building Airtable-like UIs with your AI coding agent.

Database-spreadsheet hybrid. Blue brand, colorful data views, friendly.

Preview
airtable.design.md
Brand System Catalog

DESIGN SYSTEM INSPIRATION OF AIRTABLE

Database-spreadsheet hybrid. Blue brand, colorful data views, friendly.

Explore the systemView tokens

Color Palette

Database-spreadsheet hybrid. Blue brand, colorful data views, friendly.

Primary
Airtable Blue
#2d7ff9
Brand color
Teal
#18bfff
Brand color
Green
#20c933
Brand color
Yellow
#fcb400
Brand color
Red
#f82b60
Brand color
Purple
#8b46ff
Brand color
White
#ffffff
Brand color
Light BG
#f5f5f5
Brand color
Dark
#1f2124
Brand color

Typography

A type system inspired by Airtable.

Inter
Inter, Inter
DISPLAY / 64px / 700 / 1.1
EVERYONE
H1 / 48px / 700 / 1.2
A disciplined editorial voice
H2 / 32px / 600 / 1.3
Section heading
BODY / 16px / 400 / 1.6
Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.
SMALL / 14px / 400 / 1.5
Small
CODE / 14px / 400 / 1.6
Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Airtable.

Not detected on this URL

Components

Other component primitives mapped from the Airtable spec.

Not detected on this URL