The built-in system copies Airtable's website: the Haas font, big rounded buttons and a blue glow under cards. Our copy is Airtable's app: small, dense and grey, with colour only where it means something. They share the navy text and the blue, and differ on most sizes.
Every value below is read from the two systems' own files. Colour verdicts are measured: the two colours are put on their page background and their distance is measured in OKLab, a colour space built to match how people see colour. Under 0.012 counts as the same, under 0.05 as close, anything above as different.
2the same
16close
18different
12only in our copy
Which one to use
For the AltLeads CRM (an app), use our copy as the Airtable reference. It has the app's real colours, sizes, 580 icons, grid, menus, states and real dark mode.
Use the built-in when you want Airtable's website look fast, for example a marketing page, a deck or an email.
Side by side
The same parts, drawn by each system's own CSS, row for row. Left: the built-in. Right: our copy. Hover and click work in both.
Built-inOpen Design's Airtable package
Part
Our copyfrom the real Airtable app
Colours
Swatches show each colour on its own page background.
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Page background | #ffffff--bg | rgb(255, 255, 255)--colors-background-default | Samedifference 0.000 | |
| Soft surface (behind the grid) | #ffffff--surface | rgb(246, 248, 252)--colors-background-subtler | Closedifference 0.022 | The built-in surface is white; the app puts a pale blue-grey behind its grid. |
| Main text | #181d26--fg | rgb(29, 31, 37)--colors-foreground-default | Closedifference 0.012 | Both are a dark navy-black. |
| Secondary text | rgba(4, 14, 32, 0.69)--muted | rgb(97, 102, 112)--colors-foreground-subtle | Closedifference 0.048 | The app grey is a little lighter and cooler. |
| Lines and borders | #e0e2e6--border | rgba(0, 0, 0, 0.1)--colors-border-default | Closedifference 0.012 | The app uses a see-through black line. |
| Grid lines | #eef0f3--border-soft | hsl(202, 10%, 88%)--cell-borderColor | Closedifference 0.046 | The app's cell lines are clearly darker than the website's row lines. |
| Accent blue (main button, links) | #1b61c9--accent | rgb(22, 110, 225)--colors-background-primary-control | Closedifference 0.048 | The website blue is deeper; the app blue is brighter. |
| Accent on hover | #254fad--accent-hover | rgb(13, 82, 172)--colors-background-primary-control-emphasis | Closedifference 0.015 | |
| Green (success) | #006400--success | rgb(0, 100, 0)--colors-foreground-accent-success | Samedifference 0.000 | Both use Airtable's forest green. |
| Yellow (warning) | #eab308--warn | rgb(255, 186, 5)--palette-yellow-yellow | Closedifference 0.039 | The built-in yellow is a generic one, not Airtable's. |
| Red (danger) | #dc2626--danger | rgb(220, 4, 59)--palette-red-red | Closedifference 0.033 | The built-in red is a generic one; Airtable's red leans pink. |
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Page background | #0f1115dark kit page | rgb(29, 31, 37)--colors-background-default | Differentdifference 0.063 | Built-in dark is near-black; Airtable's dark page is a lighter charcoal. |
| Soft surface | #171a21dark kit surface | rgb(49, 53, 62)--colors-background-subtle | Differentdifference 0.111 | Airtable lifts its toolbar and open tab to a lighter grey. |
| Main text | #f8fafcdark kit text | rgb(255, 255, 255)--colors-foreground-default | Closedifference 0.016 | |
| Secondary text | #a7adbadark kit muted | rgb(145, 149, 156)--colors-foreground-subtle | Differentdifference 0.079 | |
| Lines and borders | #2a2f3adark kit border | rgba(255, 255, 255, 0.1)--colors-border-default | Closedifference 0.028 | |
| Accent blue | #1b61c9dark kit accent | rgb(22, 110, 225)--colors-background-primary-control | Closedifference 0.048 | Same as light mode in both systems. |
Type
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Font | "Haas", Airtable's website font (not installed on this PC, so it falls back to your system font) | The system UI font, as the Airtable app uses it: Segoe UI on Windows, San Francisco on Mac (980 of 981 elements measured) | Close | On this PC both end up as Segoe UI. With Haas installed, the built-in would look like the website, not the app. |
| Body text | 16px · line 1.35 | 13px · line 18px (cells 19.5px) | Different | The app is much smaller and denser. |
| Buttons | 16px · weight 500 | 13px · weight 500 | Different | |
| Largest title | 48px "Haas Groot Disp" (website hero) | 23px record title · 21px base name | Different | A website headline against an app title. |
| Small labels | 12px · weight 500 (badges, eyebrow in blue capitals) | 11px counts · 9px grey capitals for group labels | Different | |
| Weights in use | 400 and 500 | 400, 500 and 600 | Close |
Shape and size
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Button corners | 12px | 6px | Different | |
| Button height | About 48px (14px + text + 14px) | 24 / 28 / 32 / 36px (Airtable's own size rules) | Different | App buttons are far smaller. |
| Toolbar button | None | 26px, 3px corners, grey until switched on | Only in ours | |
| Text field | White, 1px #e0e2e6 border, 12px corners, 12 × 14px padding | Pale grey fill with a 1px inner line, 6px corners, 32px tall | Different | |
| Card corners | 16px | 6px (gallery cards, record window) | Different | |
| Menu corners | No menu in the built-in | 3px | Only in ours | |
| Options and tags | Full pill, 12px, coloured text on a tint (only green and grey) | Full pill, 22px tall, 13px near-black text, 10 colours × 4 strengths | Close | Both are pills; the app has the full colour set and keeps text dark. |
| Grid | None | Rows 32 / 56 / 88 / 128px, 32px header, row numbers, groups | Only in ours |
Depth and focus
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Card shadow | 4 layers, the third a blue glow rgba(45,127,249,.28) | Grey layers only (elevation-medium); no blue glow | Different | The first two built-in layers match Airtable's real shadow exactly; the blue glow is from the website. |
| Menu shadow | No menu in the built-in | 6 soft layers (elevation-high) | Only in ours | |
| Keyboard focus | 3px soft blue halo (30% opacity) | 2px solid blue outline #166EE1 | Different | |
| Dark mode depth | Not defined | Low shadows add a white 15% ring; medium and high ones add a grey #31353E ring | Only in ours |
Motion
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Hover | 150ms, one curve for everything | 85ms ease-in on tools and rows; 150ms on the blue button | Different | |
| Card hover | Card lifts 2px | Shadow deepens; nothing moves | Different | |
| Menus opening | No menu in the built-in | No animation: no fade, no zoom (sampled frame by frame) | Only in ours | |
| Pressing | Darker blue on the primary button | Looks the same as hover (measured on a toolbar button) | Different | |
| Group arrow | None | Turns 90° in 200ms ease-out | Only in ours |
What each one includes
| What | Built-in | Our copy (real app) | Verdict | In plain words |
|---|---|---|---|---|
| Where the values come from | Open Design's curated summary of Airtable's website | Airtable's live app (public shared bases, 3 Oct 2026), its own stylesheet and help-centre screenshots | Different | |
| Design tokens | 56 | 89 palette + 113 light + 78 dark, plus 40 + 40 option colours | Only in ours | |
| Real Airtable icons | None (7 generic icons) | 580, from Airtable's own icon file | Only in ours | |
| Components | Buttons, text field, card, badge, base chips, page layouts | All of those plus base bar, table tabs, toolbar, views sidebar, grid, groups, options, linked chips, checkboxes, switches, menus, record window, gallery cards, tooltips | Only in ours | |
| States | Hover, press and focus on buttons and fields | Hover, pressed, focus, selected and on/off on every control, measured on the live app | Only in ours | |
| Dark mode | A generic dark kit (not Airtable's colours) | Airtable's own dark mode, copied from its stylesheet | Different | |
| Product screens | None. 6 sample pages in this style: landing, deck, form, email, newsletter, poster | 2 Airtable screens rebuilt and checked pixel by pixel (99.1% and 99.5%, dark 98.6% and 99.3%; edges only 96.2% and 94.3%), both clickable | Only in ours | |
| Guidelines | DESIGN.md in 18 languages | Plain-language rules plus a 29-law UX scorecard | Close |
The built-in package, as it ships
Open Design's own Airtable pages, unchanged. Pick one to open it here.
Our copy
Our Airtable design system, built from the real Airtable app
- One page, one scroll: colours, type, 580 real icons, every component and state, motion, real dark mode, rules and the UX scorecard
- Two real Airtable screens rebuilt and checked pixel by pixel (99.1% and 99.5%), both clickable, light and dark