Calm enterprise-AI platform (refreshed away from the older bright multi-colour look): a white canvas with dark navy-black ink, a centered hero whose Haas Groot display sits at a regular 400 weight, large 12px buttons at 55px pairing a near-black fill with a white outlined twin, and a saturated accent set rationed to the record grid, field-type chips and illustration.
Browse Airtable in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background |
| surface | #f8fafc | Pale inset panels / banner |
| ink-fill | #181d26 | Primary button fill, dark blocks |
| 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 |
| 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.
"Haas Groot Disp", Haas, Helvetica, Arial, sans-serif — set at a calm regular 400.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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.