Airtable

source

---
name: Airtable
description:
  Clean, enterprise-friendly platform with white canvas, deep navy text, and
  Airtable Blue CTAs using Swiss-precision Haas typography.
originalFonts:
  primary: "Haas"
  fallbacks:
    - "-apple-system"
    - "system-ui"
    - "Segoe UI"
    - "Roboto"
colors:
  background: "#ffffff"
  surface: "#ffffff"
  surface-raised: "#f8fafc"
  ink: "#181d26"
  ink-muted: "#333333"
  accent: "#1b61c9"
  accent-alt: "#254fad"
  border: "#e0e2e6"
  link: "#1b61c9"
  success: "#006400"
  deep-navy: "#181d26"
  airtable-blue: "#1b61c9"
  white: "#ffffff"
  dark-gray: "#333333"
  mid-blue: "#254fad"
  light-surface: "#f8fafc"
typography:
  h1:
    family: "Inter"
    size: "3rem"
    weight: 400
    lineHeight: 1.15
  h2:
    family: "Inter"
    size: "2.5rem"
    weight: 400
    lineHeight: 1.25
  h3:
    family: "Inter"
    size: "2rem"
    weight: 500
    lineHeight: 1.2
  body:
    family: "Inter"
    size: "1.125rem"
    weight: 400
    lineHeight: 1.35
  button:
    family: "Inter"
    size: "1rem"
    weight: 500
    lineHeight: 1.3
  caption:
    family: "Inter"
    size: "0.875rem"
    weight: 400
    lineHeight: 1.3
spacing:
  xs: "0.25rem"
  sm: "0.5rem"
  md: "1rem"
  lg: "1.5rem"
  xl: "3rem"
rounded:
  sm: "2px"
  md: "12px"
  lg: "16px"
  xl: "32px"
shadows:
  sm: "rgba(15,48,106,0.05) 0px 0px 20px"
  md:
    "rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px,
    rgba(45,127,249,0.28) 0px 1px 3px"
  lg:
    "rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px,
    rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset"
components:
  button-primary:
    background: "{colors.accent}"
    color: "#ffffff"
    border: "1px solid {colors.accent}"
    radius: "{rounded.md}"
    padding: "1rem 1.5rem"
  button-secondary:
    background: "#ffffff"
    color: "{colors.ink}"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "1rem 1.5rem"
  card:
    background: "{colors.surface}"
    border: "1px solid {colors.border}"
    radius: "{rounded.lg}"
    padding: "1.5rem"
  input:
    background: "{colors.surface}"
    color: "{colors.ink}"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "0.5rem 0.75rem"
---

<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->

# Design System Inspiration of Airtable

## 1. Visual Theme & Atmosphere

Airtable's website is a clean, enterprise-friendly platform that communicates
"sophisticated simplicity" through a white canvas with deep navy text
(`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The
Haas font family (display + text variants) creates a Swiss-precision typography
system with positive letter-spacing throughout.

**Key Characteristics:**

- White canvas with deep navy text (`#181d26`)
- Airtable Blue (`#1b61c9`) as primary CTA and link color
- Haas + Haas Groot Disp dual font system
- Positive letter-spacing on body text (0.08px–0.28px)
- 12px radius buttons, 16px–32px for cards
- Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`
- Semantic theme tokens: `--theme_*` CSS variable naming

## 2. Color Palette & Roles

### Primary

- **Deep Navy** (`#181d26`): Primary text
- **Airtable Blue** (`#1b61c9`): CTA buttons, links
- **White** (`#ffffff`): Primary surface
- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`

### Semantic

- **Success Green** (`#006400`): `--theme_success-text`
- **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
- **Secondary Active** (`rgba(7,12,20,0.82)`):
  `--theme_button-text-secondary-active`

### Neutral

- **Dark Gray** (`#333333`): Secondary text
- **Mid Blue** (`#254fad`): Link/accent blue variant
- **Border** (`#e0e2e6`): Card borders
- **Light Surface** (`#f8fafc`): Subtle surface

### Shadows

- **Blue-tinted**
  (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)
- **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)

## 3. Typography Rules

### Font Families

- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
- **Display**: `Haas Groot Disp`, fallback: `Haas`

### Hierarchy

| Role            | Font            | Size | Weight  | Line Height | Letter Spacing |
| --------------- | --------------- | ---- | ------- | ----------- | -------------- |
| Display Hero    | Haas            | 48px | 400     | 1.15        | normal         |
| Display Bold    | Haas Groot Disp | 48px | 900     | 1.50        | normal         |
| Section Heading | Haas            | 40px | 400     | 1.25        | normal         |
| Sub-heading     | Haas            | 32px | 400–500 | 1.15–1.25   | normal         |
| Card Title      | Haas            | 24px | 400     | 1.20–1.30   | 0.12px         |
| Feature         | Haas            | 20px | 400     | 1.25–1.50   | 0.1px          |
| Body            | Haas            | 18px | 400     | 1.35        | 0.18px         |
| Body Medium     | Haas            | 16px | 500     | 1.30        | 0.08–0.16px    |
| Button          | Haas            | 16px | 500     | 1.25–1.30   | 0.08px         |
| Caption         | Haas            | 14px | 400–500 | 1.25–1.35   | 0.07–0.28px    |

## 4. Component Stylings

### Buttons

- **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius
- **White**: white bg, `#181d26` text, 12px radius, 1px border white
- **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)

### Cards: `1px solid #e0e2e6`, 16px–24px radius

### Inputs: Standard Haas styling

## 5. Layout

- Spacing: 1–48px (8px base)
- Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px
  (large), 50% (circles)

## 6. Depth

- Blue-tinted multi-layer shadow system
- Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`

## 7. Do's and Don'ts

### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons

### Don't: Skip positive letter-spacing, use heavy shadows

## 8. Responsive Behavior

Breakpoints: 425–1664px (23 breakpoints)

## 9. Agent Prompt Guide

- Text: Deep Navy (`#181d26`)
- CTA: Airtable Blue (`#1b61c9`)
- Background: White (`#ffffff`)
- Border: `#e0e2e6`