Typography
scale ratio 1.201- Haasdisplay + body400 500 600100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Haas | 40px | 400 | 1.2 | 0em |
| headline | Haas | 32px | 400 | 1.3 | 0em |
| body | Haas | 16px | 400 | 1.35 | 0.01em |
| body-sm | Haas | 14px | 400 | 1.25 | 0em |
| label | Haas | 16px | 500 | 1.3 | 0em |
Type scale
Aa14Aa16Aa18Aa20Aa24Aa32Aa40
- Body size
- 16px / 1.625
- Display size
- 40px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 16.90:1
- Muted on bg
- 11.79:1
- Accent on bg
- 16.90:1
- Dark mode
- none
Declared accent tokens
- --color-brand-red#E33A3Dnot on page
- --color-brand-pink#EA4ECBnot on page
- --color-brand-blue#2572FFnot on page
- --color-brand-cyan#00B1ECnot on page
Space, shape & depth
Spacing scale (base 8px)
- 2
- 4
- 6
- 8
- 12
- 16
- 22
- 24
- 32
- 40
- 48
- 64
Corner radii
212162432pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 64px
Components
exact computed valuesbutton-primary
Sign up for free
- backgroundColor
- #181D26
- textColor
- #FFFFFF
- rounded
- 12px
- padding
- 16px 24px
- height
- 54.8px
- fontFamily
- Haas
- fontSize
- 16px
- fontWeight
- 500
- border
- 1px solid #181D26
button-secondary
Learn more
- backgroundColor
- #FFFFFF
- textColor
- #181D26
- rounded
- 12px
- padding
- 16px 24px
- height
- 55.6px
- fontFamily
- Haas
- fontSize
- 16px
- fontWeight
- 500
- border
- 1px solid #FFFFFF
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #F8FAFC
- border
- 1px solid #E0E2E6
Layout & motion
- Container
- 1376px
- Grid columns
- 3
- Hero
- centered+media-below
- Navigation
- none-detected
- Page height
- 7,707px
- Easing
- ease-in
- Durations
- 150ms 200ms 250ms 600ms
- Transitions
- 64
- Keyframes
- 0
- Stack
- next.js, shadcn/ui, sanity, google-tag-manager, vercel, cloudfront
Page sections (11)
section labels are heuristic
01heroAll your teams, all their workflows—connected in one workspace
02logosTrusted by 500,000 leading teams
03feature detail?Sophisticated workflows in minutes, not months
04gallery?Production apps at prototype speed
05feature detail?Don’t just ask AI. Deploy it.
06feature detail?Say hello to Omni
07features?The power of AI with the industrial-grade platform your business demands
08feature detail?The path to 10x every person in your organization
09content?
10feature detail?Start building with Airtable
11footer
How Airtable compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 40px: smaller than 79% of indexed sites (median 60px).
- Type scale
- 1.20×: flatter than 80% of indexed sites (median 1.28×).
- Container
- 1376px: wider than 96% of indexed sites (median 1242px).
- Text contrast
- 16.9:1: lower than 59% of indexed sites (median 17.6:1).
- Page length
- 7,707px: shorter than 55% of indexed sites (median 8,217px).
- Corner radius
- Mostly 12px, shared by 14 of 274 indexed sites (5%).
- Haas
- One of 2 indexed sites that load Haas (1%).
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Airtable use?
Airtable uses Haas for headings and body text.
What are Airtable's brand colors?
Airtable's website uses a light scheme: background #FFFFFF, surface #FAF5E8, text #181D26, muted text #333840 and borders #E0E2E6.
How is Airtable's website laid out?
The most common corner radius is 12px, body text is 16px with 1.625 line height, and the page container is 1376px wide.
Similar to Airtable
Roobertvf#FFFFFF
Clayclay.com
Saans / font-1cffa098-abaa-461c-a3c4-5e421dc49b08 / font-9395b7be-5393-4b58-84e8-b12654b4aee1#FFFFFF
Displaaydisplaay.net
Inter / SF Pro (system-ui) / Newsreader#F9F9F8
Loopsloops.so
Notion Inter / Lyon Text#FFFFFF
Notionnotion.com
SF Pro (system-ui) / Cahuenga / Spectral#FFFFFF
Substacksubstack.com