---
version: alpha
name: Airtable
description: "Near-black ink on white, split by a workflow rainbow the product alone earns."
colors:
  on-surface-variant: "#41454D"
  on-surface: "#161616"
  surface: "#FFFFFF"
  outline: "#E0DCDB"
  error: "#DC053B"
  primary: "#1B61C9"
  cool-mist: "#F8FAFC"
  panel-blue: "#F0F6FF"
  warm-paper: "#F8F6F6"
  airtable-ink: "#181D26"
  body-slate: "#333840"
  deep-link-blue: "#254FAD"
  active-navy: "#011435"
  sky-accent: "#07A2DC"
  cyan-edge: "#39CAFF"
  cool-hairline: "#E5E9F0"
typography:
  caption:
    fontFamily: Haas
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body-small:
    fontFamily: Haas
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: Haas
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  lead:
    fontFamily: Haas
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  subheading:
    fontFamily: Haas
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  heading:
    fontFamily: Haas
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  display:
    fontFamily: Haas
    fontSize: 44.8px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  hero:
    fontFamily: Haas
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
rounded:
  small-chips-inputs: 4px
  cards-links: 6px
  buttons: 12px
  large-media: 30.444px
  pills-avatars: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 32px
  xl: 48px
  btn-x: 48px
---
# Airtable — Style Reference
> Near-black ink on white, split by a workflow rainbow the product alone earns.

**Theme:** light

Airtable's marketing surface is disciplined to the point of austerity: a white canvas, a near-black Neue Haas wordmark and headline, and a body set in cool blue-grey ink. The whole identity leans on one restraint — the loud, saturated "spotlight" rainbow (orange → pink → violet → blue → teal) is walled off from the marketing chrome and reserved for product moments, so the homepage reads calm while the app reads alive. Two action registers coexist: a solid near-black CTA for the marketing hero, and an Airtable-blue (`#1B61C9`) for in-product primary buttons and links. Type is a custom Neue Haas Grotesk cut ("Haas") carrying unusual half-weights — 550 for display, 650 for buttons — that give the sans a bespoke, slightly heavier-than-medium presence. Layout is generously centered and airy, with a fixed pill-shaped nav floating over a wide 1536px content frame. Elevation is quiet: buttons carry a faint blue-tinted (`#2d7ff9`) shadow instead of hard borders.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#FFFFFF` | `--color-bg` | The default page ground; nearly everything sits on plain white. |
| Cool Mist | `#F8FAFC` | `--color-bg-medium` | The app/theme background — a barely-there cool tint under panels. |
| Panel Blue | `#F0F6FF` | `--color-surface-blue` | Pale-blue card and callout fill (announcement bar, feature cards). |
| Warm Paper | `#F8F6F6` | `--color-surface-warm` | Occasional warm off-white section ground. |
| Ink Black | `#161616` | `--color-ink` | Marketing headline + hero CTA fill; the closest thing to pure black used on text. |
| Airtable Ink | `#181D26` | `--color-text-strong` | The signature blue-black — wordmark, strong headings, primary text. |
| Body Slate | `#333840` | `--color-text` | Default running body text; a desaturated cool grey. |
| Muted Slate | `#41454D` | `--color-text-weak` | Secondary/caption text and disabled labels. |
| Airtable Blue | `#1B61C9` | `--color-primary` | In-product primary button and default link color. |
| Deep Link Blue | `#254FAD` | `--color-primary-strong` | Link hover, info text, "learn more" accents. |
| Active Navy | `#011435` | `--color-navy` | Deepest button/press state and dark section grounds. |
| Sky Accent | `#07A2DC` | `--color-accent-sky` | Occasional cyan accent within product illustration. |
| Cyan Edge | `#39CAFF` | `--color-accent-cyan` | Bright cyan focus/selection edge. |
| Hairline | `#E0DCDB` | `--color-border` | Warm neutral hairline for dividers and card edges. |
| Cool Hairline | `#E5E9F0` | `--color-border-cool` | Cool-grey border on panels and inputs. |
| Alert Red | `#DC053B` | `--color-danger` | Error/validation edge — used sparingly. |
| Spotlight | `linear-gradient(91.6deg, #f5620c, #fc4777, #e848c0, #9b67f0, #458fff, #0ab2fa, #0dbdb4)` | `--color-spotlight` | The signature product rainbow — NEVER on marketing chrome; product highlights only. |
| Spotlight Button | `linear-gradient(81deg, #ff00a8, #7c37ef)` | `--color-spotlight-button` | Pink→violet fill for the rare "spotlight" CTA over `#1b61c9`. |

## Tokens — Typography
### Haas (Neue Haas Grotesk, custom cut) — the entire UI: wordmark, display headings, body, and buttons · `--font-sans`
- **Substitute:** Neue Haas Grotesk, Helvetica Neue, -apple-system, sans-serif
- **Weights:** 400, 475, 500, 550, 575, 600, 650 — note the bespoke half-weights (550 display, 650 buttons)
- **Sizes:** 11px, 13px, 14px, 16px, 18px, 20px, 24px, 28px, 32px, 44.8px, 48px, 64px
- **Line height:** ~1.05–1.1 on display, ~1.5 on body
- **Letter spacing:** near-zero; large display trends slightly tight (negative) but stays close to 0
- **Role:** Single-family system — Haas does display, body, and controls; hierarchy comes from size and the half-weight steps, not from a second face.

### Inter Display — secondary/loaded fallback face for numeric and dense UI · `--font-inter`
- **Substitute:** Inter, ui-sans-serif, system-ui, sans-serif
- **Weights:** variable 400–675
- **Sizes:** shares the body scale (13–20px)
- **Line height:** ~1.4–1.5
- **Letter spacing:** default
- **Role:** A loaded fallback / dense-UI companion; Haas leads everywhere the brand is visible.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 11px / 13px | 1.4 | 0 | `--text-caption` |
| Body Small | 14px | 1.5 | 0 | `--text-sm` |
| Body | 16px | 1.5 | 0 | `--text-base` |
| Lead | 20px | 1.5 | 0 | `--text-lead` |
| Subheading | 24px / 28px | 1.3 | 0 | `--text-subhead` |
| Heading | 32px | 1.2 | ~0 | `--text-heading` |
| Display | 44.8px / 48px | 1.1 | slightly tight | `--text-display` |
| Hero | 64px | 1.05 | slightly tight | `--text-hero` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 12px | `--spacing-md` |
| lg | 32px | `--spacing-lg` |
| xl | 48px | `--spacing-xl` |
| btn-x | 48px | `--spacing-button-x` |

### Border Radius
| Element | Value |
|---------|-------|
| Small chips / inputs | 4px |
| Cards / links | 6px–10px |
| Buttons | 12px |
| Large media | 30.444px |
| Pills / avatars | 9999px / 50% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Button (primary) | `0px 0px 1px #00000052, 0px 0px 2px #00000014, 0px 1px 3px #2d7ff947, inset 0px 0px 0px .5px #0000000f` | `--shadow-button` |
| Card (soft) | `rgba(0,0,0,0.32) 0px 0px 0.8px, rgba(0,0,0,0.08) 0px 0px 1.6px, rgba(0,0,0,0.08) 0px 0.8px 2.4px` | `--shadow-card` |
| Card (lifted) | `rgba(22,22,22,0.1) 0px 24.013px 42.69px, rgba(22,22,22,0.08) 0px 5.336px 10.672px, rgba(22,22,22,0.24) 0px 0px 1.334px` | `--shadow-lift` |

### Layout
- **Page max-width:** 1536px (`--marketing-content-max-width`)
- **Section gap:** generous vertical air, ~48px+ between hero blocks
- **Card padding:** 12px 32px inline for compact cards; larger for feature panels
- **Element gap:** buttons padded 12px 48px; nav is a fixed 702×79px pill

## Components
### Marketing Primary CTA ("Get started for free")
**Role:** The single loudest action on the homepage hero.
Solid near-black fill (`#161616`/`#181D26`) with white label, ~12px radius, 12px 48px padding, weight 650. Elevation comes from the faint blue-tinted button shadow, not a border — it reads as a confident, quiet block against white.

### Secondary CTA ("Book demo")
**Role:** The lower-commitment companion to the primary CTA.
White fill, `#181D26` label, hairline inset border (`inset 0 0 0 1px #0114351f`), 12px radius, matched padding and 650 weight. A `blur(6px)` backdrop filter is available for overlay contexts.

### Product Primary Button (blue)
**Role:** The in-app primary action (distinct from marketing chrome).
Airtable-blue fill `#1B61C9`, white text, 12px radius, blue-tinted shadow. Hover darkens toward `#254FAD`; active/press drops to `#1a3866`/`#011435`.

### Spotlight Button
**Role:** The rare hero moment that earns the brand rainbow.
Pink→violet gradient `linear-gradient(81deg, #ff00a8, #7c37ef)` layered over `#1b61c9`, near-white label (`#f9fcfff7`). Used only where the product wants to signal AI/spotlight capability.

### Top Nav
**Role:** Persistent global navigation.
A floating fixed pill (702×79px) over white, near-black `#181D26` links with dropdown carets (Platform, Solutions, Resources), right-aligned Book Demo / Sign up / Log in cluster.

### Announcement Bar
**Role:** Site-wide promo strip above the nav.
Full-width pale-blue band (`#F0F6FF`), centered body text with an inline blue link (`#166EE1`/`#1B61C9`) and a dismiss ✕ at the right.

### Link
**Role:** Inline and standalone text links.
Airtable-blue `#1B61C9` at rest, hover to `#1b61c9cc` (softened) or `#254FAD`, active `#1a3866`. Standalone "learn more" links run at 14px weight 650.

### Feature Card
**Role:** Content module on feature/solutions pages.
Pale-blue (`#F0F6FF`) or white fill, soft multi-layer shadow, `#333840` body with `#181D26` headings. Corners in the 6–10px range; larger media blocks round to ~30px.

### Hero Heading
**Role:** The page's primary statement.
64px Haas at weight 500–550, `#181D26`, centered, tight line-height (~1.05) with an em-dash break used to shape the two-line rag ("workflows— / connected").

### Body Text
**Role:** Running supporting copy.
16–20px Haas, weight 400, color `#333840` on white, line-height ~1.5, centered under the hero and left-aligned in dense sections.

### Input
**Role:** Form fields (search, sign-up).
Cool-grey hairline (`#E5E9F0`), 4–6px radius, `#333840` text; focus adds the cyan/blue edge (`#39CAFF`/`#458fff`).

## Do's and Don'ts
### Do
- Keep marketing chrome monochrome: near-black ink (`#181D26`/`#161616`) on white, blue-grey body (`#333840`).
- Use the two-weight system — 550 for display, 650 for buttons — to build hierarchy inside one family.
- Reserve Airtable-blue `#1B61C9` for links and in-product primary actions.
- Let buttons float on the faint blue-tinted shadow instead of drawing hard borders.
- Give the hero room: wide 1536px frame, centered, lots of vertical air.

### Don't
- Never spill the spotlight rainbow onto marketing navigation, headings, or the hero CTA — it belongs to the product.
- Don't paint the hero CTA blue; the marketing primary is near-black, blue is the in-app register.
- Don't reach for a second typeface — Haas carries the whole system.
- Don't use heavy drop shadows; elevation here is a whisper.
- Don't tint the body copy pure black — it's the softer blue-grey `#333840`.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Default page ground. |
| 1 | Cool Mist | `#F8FAFC` | App/theme background tint. |
| 2 | Panel Blue | `#F0F6FF` | Cards, callouts, announcement bar. |
| 2-alt | Warm Paper | `#F8F6F6` | Alternate warm section ground. |
| Dark | Active Navy | `#011435` | Deep dark section / press state. |

## Elevation
Depth is conveyed almost entirely by soft, low-opacity shadows rather than borders or luminance steps. Primary buttons carry a signature blue-tinted shadow (`0px 1px 3px #2d7ff947`) plus a hairline inset, so they lift off white without a visible outline. Cards use gentle multi-stop shadows (`0px 0.8px 2.4px` up to a lifted `0px 24px 42px`) that keep the surface calm. Borders, when present, are near-invisible hairlines (`#E0DCDB` warm, `#E5E9F0` cool).

## Imagery
Product-forward: screenshots of the Airtable grid, interface panels, and colorful record chips do the heavy lifting, framed in generously rounded (~30px) media blocks. The brand's saturated palette lives inside these product shots — this is where the orange/pink/violet/teal spotlight colors legitimately appear. Marketing photography is minimal; the app UI itself is the hero image.

## Layout
Contained and centered on a 1536px max-width frame. A fixed pill-shaped nav (702×79px) floats above the fold, with a dismissible pale-blue announcement bar stacked over it. The hero is single-column, centered: oversized 64px headline, a short grey subhead, then a two-button CTA row (dark primary + white secondary). Section rhythm is airy and vertical, favoring whitespace over dense grids.

## Typography Voice
Airtable runs a **single-family, weight-driven** system. Instead of pairing a display serif with a body sans, it leans on one custom Neue Haas Grotesk cut and mines its unusual half-weights — 475, 550, 575, 650 — to separate display from controls from body. The signature move is the near-tight display setting at 64px with a manual em-dash line break shaping the rag, paired with a soft blue-black (`#181D26`) rather than true black. Body copy relaxes to weight 400 at 16–20px with a comfortable ~1.5 line-height in cool `#333840`. The result feels engineered and neutral — appropriate for a product about structured data — while the half-weights keep it from reading generic.

## Agent Prompt Guide
## Quick Color Reference
- background: `#FFFFFF` (tint `#F8FAFC`) / text: `#333840` (strong `#181D26`) / surface: `#F0F6FF` / border: `#E0DCDB` / accent: `#1B61C9` / primary action: near-black `#161616` on marketing, blue `#1B61C9` in product

## Example Component Prompts
1. **Hero**: Centered single-column hero on white, max-width 1536px. Headline in Haas (Neue Haas Grotesk) 64px weight 550 color `#181D26`, tight line-height ~1.05, two lines split on an em-dash. Grey subhead `#333840` 20px weight 400. Below, a button row: solid near-black `#161616` primary "Get started for free" (white text, 12px radius, 12px 48px padding, weight 650, faint blue-tinted shadow) beside a white secondary "Book demo" with a `#0114351f` inset hairline.
2. **Announcement Bar**: Full-width pale-blue `#F0F6FF` strip, centered `#333840` text with an inline blue link `#166EE1`, dismiss ✕ at the far right.
3. **Product Primary Button**: Airtable-blue `#1B61C9` fill, white label, 12px radius, weight 650, shadow `0px 1px 3px #2d7ff947`; hover text `#254FAD`, active fill `#1a3866`.
4. **Feature Card**: Pale-blue `#F0F6FF` card, 10px radius, soft shadow, heading `#181D26` and body `#333840`, with a rounded (~30px) product screenshot where the spotlight rainbow colors are allowed to appear.
5. **Spotlight CTA**: Gradient button `linear-gradient(81deg, #ff00a8, #7c37ef)` over `#1b61c9`, near-white label `#f9fcfff7`, 12px radius — used only for AI/product moments, never in the nav.

## Similar Brands
- **Notion** — the same monochrome-marketing / colorful-product discipline, one neutral sans carrying everything.
- **Linear** — near-black ink on white, tight display type, restraint as a brand signal.
- **Coda** — adjacent structured-data category with a calm, product-forward light aesthetic.
- **Retool** — engineered neutral marketing chrome that lets dense product UI supply the color.
- **Stripe** — reserves saturated gradients for signature moments over an otherwise disciplined light palette.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-bg: #FFFFFF;
  --color-bg-medium: #F8FAFC;
  --color-surface-blue: #F0F6FF;
  --color-surface-warm: #F8F6F6;
  --color-ink: #161616;
  --color-text-strong: #181D26;
  --color-text: #333840;
  --color-text-weak: #41454D;
  --color-primary: #1B61C9;
  --color-primary-strong: #254FAD;
  --color-navy: #011435;
  --color-accent-sky: #07A2DC;
  --color-accent-cyan: #39CAFF;
  --color-link-blue: #166EE1;
  --color-border: #E0DCDB;
  --color-border-cool: #E5E9F0;
  --color-danger: #DC053B;
  --color-spotlight: linear-gradient(91.6deg, #f5620c, #fc4777, #e848c0, #9b67f0, #458fff, #0ab2fa, #0dbdb4);
  --color-spotlight-button: linear-gradient(81deg, #ff00a8, #7c37ef);

  /* Typography — Families */
  --font-sans: 'Neue Haas Grotesk', 'Helvetica Neue', -apple-system, sans-serif;
  --font-inter: 'Inter Display', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lead: 20px;
  --text-subhead: 28px;
  --text-heading: 32px;
  --text-display: 48px;
  --text-hero: 64px;
  --leading-hero: 1.05;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-button: 12px;
  --radius-media: 30.444px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-button: 0px 0px 1px #00000052, 0px 0px 2px #00000014, 0px 1px 3px #2d7ff947, inset 0px 0px 0px .5px #0000000f;
}
```
### Tailwind v4
```css
@theme {
  --color-bg: #FFFFFF;
  --color-bg-medium: #F8FAFC;
  --color-surface-blue: #F0F6FF;
  --color-surface-warm: #F8F6F6;
  --color-ink: #161616;
  --color-text-strong: #181D26;
  --color-text: #333840;
  --color-text-weak: #41454D;
  --color-primary: #1B61C9;
  --color-primary-strong: #254FAD;
  --color-navy: #011435;
  --color-accent-sky: #07A2DC;
  --color-accent-cyan: #39CAFF;
  --color-link-blue: #166EE1;
  --color-border: #E0DCDB;
  --color-border-cool: #E5E9F0;
  --color-danger: #DC053B;

  --font-sans: 'Neue Haas Grotesk', 'Helvetica Neue', -apple-system, sans-serif;
  --font-inter: 'Inter Display', ui-sans-serif, system-ui, sans-serif;

  --text-caption: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lead: 20px;
  --text-subhead: 28px;
  --text-heading: 32px;
  --text-display: 48px;
  --text-hero: 64px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-button: 12px;
  --radius-media: 30.444px;
  --radius-full: 9999px;
}
```