CURATED · OPEN · FREE

Airtable

Unified workspace connecting team workflows through AI-powered data management.

CleanProductivitySaaSToolingReference

↓ Download design system (9 MB)Open in OpenDesign

Visit: https://www.airtable.com

📦 Browse pack contents →

Identity DNA

WorkflowEnterpriseDataConnectedNo-code

Digital spreadsheet meets project management tool

Color

#181D26Ink

#444444Ink soft

#FFFFFFBG

#F8FAFCBG soft

#6E6E6EMuted

rgba(24,29,38,0.12)Line

Clean, high-contrast black on white with minimal accent color usage.

Typography

humanist-sans

display48px · 500
heading32px · 500
body20px · 400

Haas Groot Disp used for large display headings. · Haas used for body copy and UI elements. · Line height tightens as font size increases. · Letter spacing is slightly positive for body text.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Vertical spacing follows a 4px base unit with standard increments.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

Subtle 1px borders using primary ink color with low opacity.

rgba(15, 48, 106, 0.05) 0px 0px 20px 0px · rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard centered content with wide margins on desktop.

Motion & Interaction

150msmicro

200mssmall

600msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Subtle color and background transitions on hover. · Smooth element visibility changes.

Button colors darken slightly or fill changes on hover. · Subtle scale or color feedback.

Components

button Solid black primary buttons with white text, white secondary buttons with black borders. Pill-shaped and rectangular variants.
card Light gray background cards with subtle rounded corners.
chip N/A in screenshot.
input Standard text inputs with subtle borders.
hero Centered headline and subtext with dual CTA buttons, followed by a logo wall of trusted companies.

Voice & Don'ts

Tone Professional, clear, and enterprise-focused.
Headlines Concise, benefit-oriented statements emphasizing connectivity and efficiency.
CTAs Direct and action-oriented ('Get started for free', 'Book demo').

don't use bright, saturated accent colors — screenshot shows a predominantly monochromatic palette with black and white.
don't use decorative or script fonts — screenshot shows clean, modern sans-serif typography.
don't use heavy, complex shadows — screenshot shows subtle, almost flat design with minimal elevation.
don't clutter the layout — screenshot shows generous whitespace and focused content areas.
don't use dark mode as default — screenshot shows a clean white background as the primary canvas.
don't use irregular or overly playful border-radius — screenshot shows consistent, mostly rectangular or subtly rounded corners.
Avoid: Jargon
Avoid: Overly casual language
Avoid: Hype words

Inside the pack — real screenshots

Airtable — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Airtable's design is a clean, enterprise-focused SaaS aesthetic centered on clarity and professionalism. The color palette is monochromatic, using a dark ink color (#181D26) on a pure white background (#FFFFFF), with soft grays (#F8FAFC) for secondary surfaces. There is no dominant accent color; emphasis is achieved through strong contrast and button styling. Typography is a modern humanist sans-serif family, used with clear hierarchy for display and body text. Layouts are spacious with generous whitespace and centered content blocks. Critical constraints: Avoid saturated accent colors, use only clean sans-serif fonts, and maintain high contrast between text and background. Do not use heavy shadows or complex gradients in standard UI components.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko