# Airtable — Marketing Site Design Spec

> Source: airtable.com (live DOM, computed styles), 2026-07-18 (desktop 1512px).
> Coverage: home / marketing. Workspace app: pending login (`needs-dashboard`). Responsive: breakpoints from tokens only; mobile rendering not verified.
> Note: the brand has moved away from its older bright multi-colour look toward a calm enterprise-AI presentation — the display is set at a regular 400 weight, and colour is now rationed to product UI and illustration.

## 1. Visual Theme & Atmosphere

Calm enterprise-AI platform: a clean white canvas with a centered hero whose Haas Groot Display headline sits at a *regular* 400 weight rather than a bold one, so the page reads composed and corporate rather than playful. Ink is a dark navy-black `#181d26`/`#333840`; the sub-headline is small and quiet. Controls are the loudest structural element — large, generously rounded (12px) buttons at 55px tall pairing a near-black fill with a white outlined twin. Colour survives from the older Airtable identity but is now rationed: a saturated set (blue, pink, amber, rust, deep green) that appears in the record grid, field chips and illustration rather than in page chrome. Feels: composed, corporate, clean, capable.

## 2. Color Palette & Roles

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#ffffff` | Page background |
| surface | `#f8fafc` | Pale inset panels / banner |
| ink-fill | `#181d26` | Primary button fill, dark blocks |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#181d26` | Primary text |
| ink-2 | `#333840` | Headline colour |
| ink-3 | `#040e20` | Body / sub-headline |
| navy-deep | `#001031` / `#040e1f` | Deepest text |
| muted | `#41454d` | Secondary text |
| faint | `#9297a0` | Captions, placeholder |
| gray | `#333333` / `#444444` | Neutral text |

### Accent — rationed multi-hue set (product UI & illustration)
| Token | Hex | Role / usage |
|---|---|---|
| blue | `#254fad` | Links, primary accent |
| pink | `#fa91e0` | Field/record chip, illustration |
| amber | `#fcb42a` | Field/record chip, illustration |
| peach | `#fcab79` | Field/record chip |
| rust | `#aa2d00` | Accent / illustration |
| brick | `#912e1f` | Accent / illustration |
| green-deep | `#0a2e0e` / `#214224` | Accent / illustration |

Rule: page chrome is near-black on white; the multi-hue set lives in the record grid, field chips and illustration — not in nav, headings or buttons.

## 3. Typography Rules

- Display: `"Haas Groot Disp", Haas, Helvetica, Arial, sans-serif` — set at a calm regular 400.
- UI / Body: `Haas, Helvetica, Arial, sans-serif`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 40 / 48 | 400 | normal |
| Eyebrow / small head | 14 / 18.9 | 400 | +0.16px |
| Sub / body | 16 / 21.6 | 400 | normal |
| Button | 16 | 500 | normal |

Patterns: the notable choice is a display at **400** — hierarchy comes from size and generous whitespace, not weight. Weight only rises to 500 for buttons. One type family across the page.

## 4. Component Stylings

### Buttons (large, generously rounded)
- **Primary (near-black)**: bg `#181d26`, white text, radius `12px`, h `55px`, Haas 16px 500. ("Get started for free" / "Sign up for free".)
- **Secondary (outlined)**: white bg, 1px border, ink text, same radius/height. ("Book demo".)
- **Nav text link**: plain ink ("Log in").

### Nav
- White bar: Airtable cube glyph + wordmark left, links with chevrons (Platform / Solutions / Resources) plus Enterprise / Pricing, right outlined Book-Demo + dark Sign-up + Log-in text.

### Announcement banner
- Full-width pale surface strip with centered text and a blue `#254fad` inline arrow link.

### Signature component — record grid
- Table of records with a header row, field-type chips in the rationed accent hues (blue / pink / amber / peach), avatar cells and hairline row separators inside a rounded panel.

### Inputs
- Not prominently captured on marketing. Focus ring not captured.

## 5. Layout Principles

- Centered hero: headline → short sub → two large CTAs, with generous vertical whitespace.
- Wide max-width container; product grid/imagery sits below in a rounded panel.
- Whitespace and button scale carry the hierarchy.

## 6. Depth & Elevation

- Radii: `12px` (buttons and most panels) as the dominant value; smaller radii for chips.
- Elevation: flat — hairline borders and pale `#f8fafc` fills separate content instead of shadows.

## 7. Motion

- Restrained: hover shifts on buttons and links; dropdown nav menus with chevrons. No heavy scroll library confirmed.

## 8. Backgrounds, Effects & WebGL

- Flat white and pale `#f8fafc` surfaces. No gradients, grain or WebGL captured.
- Visual interest comes from product screenshots, the record grid and flat illustration in the accent hues.

## 9. Do's and Don'ts

### Do
- Keep the canvas white with dark navy-black ink (`#181d26` / `#333840`).
- Set the display in Haas Groot at a **regular 400** — let size and whitespace carry hierarchy.
- Use large `12px`-radius buttons at `55px`: a near-black primary beside a white outlined twin.
- Ration the multi-hue accent set to the record grid, field chips and illustration.
- Center the hero and give it generous vertical space.

### Don't
- Don't set the display bold — the calm 400 is the current identity.
- Don't return to the older bright multi-colour chrome; colour belongs to product UI now.
- Don't make buttons small or pill-shaped — they are large 12px rectangles.
- Don't add drop shadows; hairlines and pale fills do the work.

## 10. Responsive Behavior

- Centered column scales down; nav collapses on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Surface `#f8fafc` · Ink `#181d26` / `#333840` · Body `#040e20` · Muted `#41454d` · Faint `#9297a0` · Accents blue `#254fad`, pink `#fa91e0`, amber `#fcb42a`, peach `#fcab79`, rust `#aa2d00`, green `#0a2e0e`
- Font: Haas Groot Disp 400 (display 40/48) / Haas (body 16/21.6, button 16/500) · Radius 12px · Button height 55px
- Focus: not captured · Hover: subtle darken on buttons

<airtable_design_language>
Use the Airtable design language: a calm enterprise-AI platform on a clean white canvas with dark navy-black ink (#181d26, headlines #333840, body #040e20). The defining choice is a centered hero whose Haas Groot Display headline sits at a REGULAR 400 weight (40px/48) rather than bold — hierarchy comes from size, generous whitespace and control scale, and weight only rises to 500 for buttons. Controls are the loudest structural element: large, generously rounded 12px buttons at 55px tall pairing a near-black #181d26 fill with a white outlined twin, plus a pale #f8fafc announcement banner carrying a blue #254fad inline link. Colour survives from the older Airtable identity but is now rationed to product UI — a saturated set of blue #254fad, pink #fa91e0, amber #fcb42a, peach #fcab79, rust #aa2d00 and deep green #0a2e0e appears in the record grid, field-type chips and flat illustration, never in nav, headings or buttons. Surfaces are flat with hairlines and pale fills instead of shadows, and 12px is the dominant radius. Feels: composed, corporate, clean, capable. Avoid: bold display weights, bright multi-colour page chrome, small or pill-shaped buttons, and drop shadows.
</airtable_design_language>