---
name: airtable-design-reference
provider: DesignSkill (https://designskill.dev)
reference: airtable.com
source_url: https://www.airtable.com/
tool: designskill-extract/3.2.0
extracted_at: 2026-07-27T08:48:49.485Z
mode: full-render
classification: reference_only
---

# Airtable — Design Reference (measured)

Measured design tokens extracted from `https://www.airtable.com/` by designskill-extract/3.2.0.
Every value below was observed in the live page (×N = observation count). Values not listed were **not observed** — do not invent them.
This document is `reference_only`: an analysis of a third-party site, not a license to its brand assets.

## Overview

- Extraction mode: **full-render** (viewports 390/768/1440px × light/dark), 1 page(s), 621 observation records.
- Primary action color observed as `#1b61c9` (basis: declared, confidence 0.92).
- Dominant font family: **Haas** (×700; secondary Haas Groot Disp ×24).
- Type scale observed at 8 sizes from 12px to 48px.
- Corner radius values in use: 12px, 16px, 32px, 24px….
- Not observed in this extraction: forms, cards, badges.

## Colors

### Role Tokens

Semantic roles inferred from observed usage. `basis` tells how the role was established (declared CSS var > cross-validated > inferred).

| Token | Value | Basis | Confidence | Observed |
|---|---|---|---|---|
| `{color.primary}` | `#1b61c9` | declared | 0.92 | ×22 — --mainNavButtonBackgroundPrimary |
| `{color.background}` | `#ffffff` | cross-validated | 0.94 | ×451 |
| `{color.ink}` | `#181d26` | cross-validated | 0.94 | ×373 |
| `{color.muted}` | `#9297a0` | inferred | 0.7 | ×53 |
| `{color.surface}` | `#e0e2e6` | inferred | 0.7 | ×82 |
| `{color.accent}` | `#949494` | declared | 0.9 | ×0 — --mainNavAccentCtaColor |

### Observed Palette

Full measured palette ordered by usage share. `Used in` lists the CSS properties the color appeared on.

| Hex | Share | Used in | Observed |
|---|---|---|---|
| `#ffffff` | 19.8% | background-color, color, border-color, spotlight-background, button-text-spotlight | ×451 (cross-validated, 0.94) |
| `#181d26` | 16.3% | color, background-color, border-color, text-strong, custom-property | ×373 (cross-validated, 0.94) |
| `#333840` | 15.3% | color, background-color, text, border-color, button-text-primary-disabled | ×350 (cross-validated, 0.93) |
| `#000000` | 3.5% | background-color, border-color, button-shadow-primary | ×80 (inferred, 0.61) |
| `#e0e2e6` | 3.6% | border-color, background-color, button-background-primary-disabled, custom-property, color | ×82 (cross-validated, 0.91) |
| `#254fad` | 2.9% | color, background-color, info-text, custom-property | ×65 (cross-validated, 0.91) |
| `#040e20` | 4.3% | color, border-color, background-color, text-weak, button-shadow-secondary-focus | ×97 (cross-validated, 0.92) |
| `#0768f8` | 1.5% | color, border-color, background-color, button-shadow-primary-focus, custom-property | ×34 (inferred, 0.6) |
| `#fcab79` | 1.5% | background-color, color, spotlight-background | ×34 (cross-validated, 0.9) |
| `#fa91e0` | 1.4% | color, spotlight-background, background-color | ×32 (cross-validated, 0.9) |
| `#9297a0` | 2.3% | color, button-shadow-primary-disabled, border-color, button-shadow-secondary | ×53 (cross-validated, 0.91) |
| `#011435` | 1.4% | border-color, background-color, button-shadow-secondary | ×31 (inferred, 0.6) |
| `#040e20` | 1.3% | color | ×30 (observed, 0.75) |
| `#214224` | 1.1% | color | ×24 (observed, 0.75) |
| `#458fff` | 1.0% | background-color, info-border | ×23 (inferred, 0.6) |
| `#0ab2fa` | 1.0% | background-color, spotlight-background-strong | ×23 (inferred, 0.6) |

## Typography

### Font Families

| Family | Observed |
|---|---|
| `Haas` | ×700 |
| `Haas Groot Disp` | ×24 |
| `ATSeasonSans` | ×8 |
| `ui-monospace` | ×2 |
| `ui-sans-serif` | ×1 |
| `monospace` | ×1 |

Use **Haas** as the default family — it accounts for the overwhelming majority of observed text nodes.

### Type Scale

| Token | Size | Observed |
|---|---|---|
| `{type.display}` | 48px | ×30 |
| `{type.h1}` | 32px | ×68 |
| `{type.h2}` | 24px | ×67 |
| `{type.h3}` | 20px | ×139 |
| `{type.body-lg}` | 18px | ×110 |
| `{type.body}` | 16px | ×371 |
| `{type.body-sm}` | 14px | ×221 |
| `{type.caption}` | 12px | ×50 |

The most frequently observed size is **16px** (×371) — treat it as the default body size.

## Spacing

| Value | Observed |
|---|---|
| `16px` | ×904 |
| `12px` | ×527 |
| `24px` | ×238 |
| `48px` | ×144 |
| `32px` | ×140 |
| `8px` | ×136 |
| `2px` | ×120 |
| `40px` | ×106 |
| `4px` | ×40 |
| `64px` | ×34 |
| `22px` | ×12 |
| `20px` | ×6 |

## Shape (Border Radius)

| Value | Observed |
|---|---|
| `12px` | ×62 |
| `16px` | ×47 |
| `32px` | ×44 |
| `24px` | ×30 |
| `6px` | ×27 |
| `10px` | ×18 |
| `20px` | ×13 |
| `8px` | ×8 |

## Elevation

| Shadow | Observed |
|---|---|
| `rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(45, 127, 249, 0.28) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset` | ×30 |
| `var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)` | ×8 |
| `rgba(15, 48, 106, 0.05) 0px 0px 20px 0px` | ×6 |
| `rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(0, 0, 0, 0.08) 0px 1px 3px 0px, rgba(1, 20, 53, 0.12) 0px 0px 0px 1px inset` | ×6 |
| `0 0 0 4px #99a0ae29,0 0 0 2px #fff` | ×4 |
| `0 0 0 2px #000e263b` | ×4 |

## Motion

| Duration | Observed |
|---|---|
| `0.25s` | ×94 |
| `0.15s` | ×70 |
| `0.2s` | ×48 |
| `.15s` | ×29 |
| `0.3s` | ×24 |

## Components

Measured computed styles of representative components (desktop viewport).

| Component | Measured spec | Samples |
|---|---|---|
| button.primary | bg `#181d26` · text `#ffffff` · radius `12px` · padding `16px 24px` · font `16px/500` | ×6 |
| button.outline | text `#181d26` · border `1px solid rgb(24, 29, 38)` · radius `12px` · padding `16px 24px` · font `16px` | ×2 |
| nav | height `121px` · position `sticky` · link `#254fad` | — |

### Interaction States (observed)

| State | Property | From | To |
|---|---|---|---|
| focus | box-shadow | `none` | `rgba(7, 104, 248, 0.5) 0px 0px 0px 2px, rgba(0, 0, 0, 0.32) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 2px 0px, rgba(45, 127, 249, 0.28) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset, rgb(255, 255, 255) 0px 0px 0px 1px inset` |
| focus | background-color | `rgba(0, 0, 0, 0)` | `rgba(249, 252, 255, 0.796)` |
| focus | color | `rgb(24, 29, 38)` | `rgba(4, 14, 32, 0.69)` |
| hover | color | `rgb(24, 29, 38)` | `rgba(4, 14, 32, 0.69)` |
| hover | border-color | `rgb(24, 29, 38)` | `rgba(4, 14, 32, 0.69)` |
| hover | outline-color | `rgb(24, 29, 38)` | `rgba(4, 14, 32, 0.69)` |

## Accessibility (WCAG Contrast)

| FG | BG | Ratio | AA | Source |
|---|---|---|---|---|
| `#333840` | `#ffffff` | 11.79 | pass | observed ×78 |
| `#181d26` | `#ffffff` | 16.9 | pass | observed ×71 |
| `#41454d` | `#faf5e8` | 8.84 | pass | observed ×36 |
| `#41454d` | `#f8fafc` | 9.19 | pass | observed ×21 |
| `#ffffff` | `#181d26` | 16.9 | pass | observed ×18 |
| `#333333` | `#ffffff` | 12.63 | pass | observed ×18 |
| `#181d26` | `#f8fafc` | 16.15 | pass | observed ×15 |
| `#214224` | `#faf5e8` | 10.32 | pass | observed ×12 |
| `#ffffff` | `#cccccc` | 1.61 | fail | observed ×12 |
| `#040e20` | `#ffffff` | 19.29 | pass | observed ×9 |
| `#9297a0` | `#ffffff` | 2.93 | fail | observed ×9 |
| `#040e20` | `#f8fafc` | 18.43 | pass | observed ×9 |
| `#181d26` | `#ffffff` | 16.9 | pass | ink_on_background |
| `#ffffff` | `#1b61c9` | 5.83 | pass | white_on_primary |
| `#9297a0` | `#ffffff` | 2.93 | fail | muted_on_background |

3 measured pair(s) fail AA — if you reuse those pairs, adjust lightness until the ratio reaches 4.5:1.

## Usage Rules

### Do
- Use `{color.primary}` (`#1b61c9`) for primary actions only — that is where it was observed.
- Default text pairing: `{color.ink}` (`#181d26`) on `{color.background}` (`#ffffff`).
- Set all text in `Haas` (fallbacks only for glyph coverage).
- Pick corner radii from the measured set (12px, 16px, 32px, 24px) — no intermediate values were observed.
- Cite this file's token names (`{color.*}`, `{type.*}`) when generating UI so output stays traceable to observations.

### Don't
- Don't invent colors, sizes, shadows, or spacing not listed above — absence means *not observed*, and this document records observations only.
- Don't assume the missing blocks (forms, cards, badges) don't exist on the site — they were simply not captured in this run.
- Don't copy brand assets (logo, wordmark, imagery, copy) — `reference_only` covers measured style values, not brand identity.

## Provenance

- Source: https://www.airtable.com/ (1 page(s))
- Tool: designskill-extract/3.2.0 · extracted 2026-07-27T08:48:49.485Z
- Mode: full-render — 풀렌더 모드 — 3뷰포트 × 라이트/다크 computed style + 상태 관측.
- Blocks observed: 00, 01, 02, 03, 04, 05, 09, 10, 11, 12 · missing: forms, cards, badges
- Warning: primary 불일치: static=#2d7ff9 vs render=#1b61c9 — render 채택

---

<sub>Generated & served by [DesignSkill](https://designskill.dev)</sub>