# Airtable: where every value came from

Collected 3 Oct 2026. Private study copy for internal education; Airtable's brand, icons and product belong to Airtable.
No login, no sign-up, no bot-check bypass. Cookie banner answered with "Reject all, except strictly necessary".

## 1. The live app (main source)

Four public shared bases from Airtable's own template pages. They are the real Airtable app in read-only mode.
Opened in headless Chrome at 1440 x 900, 2x pixels, light and dark.

| Base | Link | Used for |
|---|---|---|
| Product planning | https://airtable.com/appVMM6yAFvMxp7q2/shrhYxCmHPopRVpzf | Rebuild targets (grid, expanded record), menus, states, motion |
| Project resource management | https://airtable.com/appqCRIjtiko9EXNp/shr0L0YpJnDxQz0s7 | Team grid with photos, gallery view |
| Marketing campaign tracker | https://airtable.com/appVzgyk69EN3i1IR/shryE53WZpbSApJMv | Grid and gallery variety |
| Design project pipeline | https://airtable.com/appRPlFcBf1Om8gG8/shrvibKbHdRdtG4it | Grid variety |

**Dark mode.** Airtable has a real dark mode (public beta since May 2025: Account > Appearance).
Public views don't follow it. We switched on Airtable's own `.theme-dark` class in the page, so the dark captures use Airtable's own dark CSS.
The coloured base top bar keeps its colour in our captures. We can't check whether the signed-in app darkens it.

What was read from the live app:
- **Every element's computed style**: about 1,000 elements per screen, with their place in the page. Covers light and dark, the grid, the record and 8 menus.
- **Hover, pressed and keyboard-focus** states on the real controls.
- **Open and close timing**, sampled every frame: menus and the record window appear instantly.

## 2. Airtable's own files

- **App stylesheet**: `static.airtable.com/css/compiled/v2/all.577fc8dd….css`. It gave:
  - the token file, copied 1:1: 89 palette colours, 113 light values and 78 dark values;
  - shadows, motion curves, corner sizes and type sizes;
  - the 40 select-option colours in light and dark;
  - button heights.
- **Icon sprite**: `airtable.com/icons/icon_definitions.svg`, 580 icons, embedded in `design-systems/airtable/airtable-icons.js`.
- **Fonts**:
  - The app uses the computer's own font (Segoe UI on Windows, San Francisco on Mac). This was measured on 980 of 981 visible elements.
  - Airtable's stylesheet also declares Inter Display and IBM Plex Mono, both open licence. Inter Display's font rule lists the real file and then a second, empty source that overrides it in Chrome, so the shared views never show it. Copies are in `design-systems/airtable/fonts/`.
  - The base icon (a beaker) comes from Airtable's icon font. We turned that one glyph into an SVG.

## 3. Airtable help centre (support.airtable.com)

35 official screenshots of the signed-in app are kept in the raw folder. The best 6 are in `help-center/` here.
- **Used for** parts a public view can't show: the 2025 home screen, interface designer, list view, form view and the toolbar's filter/sort colours.
- **Dark mode**: the help centre has no dark screenshots. Its home-screen article only mentions the Appearance switch.

## 4. Where the files are

- **Page images**: `design-systems/airtable/img/` (WebP, next to the page so nothing breaks if folders move).
- **Raw captures**: screenshots, element dumps, stylesheet copies, motion samples and all 35 help-centre images. They live in
  `C:\Users\pc\OpenDesign-archive\altleads-design-project\research\airtable\` (outside the project, so Open Design stays fast).