Airtable design system

Left: the real Airtable app, captured live on 3 Oct 2026. Right: our copy, built only from this design system. The copies work. Open one full size to try the tables, groups, rows and menus. You can also open a record, switch to dark, or wipe against the original with the bar at the bottom.

Screen 1 · grid view (grouped)

99.1% of all pixels match98.6% in dark mode96.2% on edges only (text, lines, icons): the stricter check5 rounds of compare and fixHow to read it: the original was captured on this laptop with the same browser and Windows font, which makes a high score easier. A blank page in the main colour would already score 45 to 72%, so the edges number is the honest one.

Screen 2 · expanded record

99.5% of all pixels match99.3% in dark mode94.3% on edges only3 rounds of compare and fixOnly story S143 was captured in full; the arrows step to other stories with the fields we have.

Both screens in Airtable's dark mode

This time the dark originals are real too: Airtable's own dark CSS, switched on in the live app. Our dark copies are measured against them.

98.6% grid · 99.3% record, against Airtable's real dark mode (edges only: 96.1% and 94.1%)Difference maps: grid · record

Airtable today (live, 3 Oct 2026)

Airtable names each colour by its job: foreground = text and icons, background = fills, border = lines. subtle / subtler / subtlest get fainter step by step. Values below are read live from the token file (Airtable's list of named colours), so they are always the real ones.

Airtable's app has no custom font. It uses the computer's own: Segoe UI on Windows, San Francisco on a Mac. We measured 981 visible elements on the grid screen, and 980 use it. Weights in use: 400, 500 and 600. This page follows the same rule, so you see what Airtable shows on your laptop.

All 580 of Airtable's own app icons, copied from its icon file (icon_definitions.svg). None are redrawn; numbers are rounded to 0.001 and checked against the original. They are drawn on a 16px square and filled with the text colour. Many names match the open-source Phosphor icon family. View icons take a colour: blue grid, pink form, purple gallery and so on.

Airtable uses three corner sizes plus a full round, and keeps everything low so a table fits a lot on screen.

Airtable calls them elevations: how high a thing seems to float. Most start with a sharp 1px edge, so cards stay crisp on white, then add a soft blur. In dark mode the low ones add a faint white ring and the medium and high ones a grey ring (#31353E), because shadows hardly show on dark.

Live and clickable, built with airtable.css. Hover, click and use the keyboard: the states and timings are Airtable's real ones. Under each one: the exact numbers and Airtable's token names.

One working base, built only from this design system. Switch tables, search, filter, group, sort and hide fields. Tick rows and delete them (with a confirm and Undo), add a record, or open one full size and edit it. Keyboard: click a cell, then the arrow keys move the blue outline, Space opens the record, Delete removes ticked rows, Esc closes.

Every clickable thing has the same small set of looks. Each state is shown frozen below, so you can compare them without hovering. Airtable's hover is a 5% grey wash; pressing looks the same as hovering (we held the mouse down on a real toolbar button to check).

Airtable has a real dark mode (public beta since May 2025: Account › Appearance). Same token names, dark values: page #1D1F25, behind the grid pure black, text white. Only the token file switches; the components are unchanged. Flip this whole page with the switch at the top.

Checked against the live app on 3 Oct 2026. The small grey label after each rule names the Law of UX it comes from. Click it to jump to that law in the scorecard. A red bullet marks a rule where Airtable itself falls short.

The rules behind Airtable's feel, for AltLeads too. Each card names the UX law, explains it simply, and shows where Airtable follows it. All 29 laws are checked one by one in the scorecard below.

All 29 laws from lawsofux.com, each checked against Airtable. Every card says what the law means in plain words, what Airtable really does, and what AltLeads should take from it. Click a coloured bar to jump to a law, or filter by result.

Add four files to any HTML page, then use the classes. Add at-dark to any parent for dark mode, and a base colour such as at-base-cyan for the top bar.

<link rel="stylesheet" href="airtable/airtable-tokens.css">  <!-- Airtable's own tokens, light + dark -->
<link rel="stylesheet" href="airtable/airtable.css">         <!-- components (.at-…) -->
<body class="at-root at-base-cyan">                          <!-- add at-dark for dark mode -->
<script src="airtable/airtable-icons.js"></script>          <!-- 580 real icons -->
<script src="airtable/airtable-kit.js"></script>            <!-- draws <svg data-i="…"> -->

<span class="at-token greenLight1">Customer</span>
<span class="at-tool on green"><svg class="at-i" data-i="FunnelSimple"></svg>Filtered by Status</span>
<button class="at-btn primary">Share</button>