Digg
digg.com · 1 day ago
SaveUnofficial A style guide made by SiteStyleGuide from airtable.com’s public web pages. Not affiliated with or endorsed by Airtable. The real site is airtable.com ↗
Unofficial style guide
Airtablestyle guide
Airtable’s website (airtable.com) uses Haas for its headings and body text. Its palette is led by Royal Blue (#0768F8), Black (#040E20) and Orange (#FCB400), with #333333 text on #FFFFFF. Captured from the live site on 23 October 2026.
- Website
- airtable.com
- Typefaces
- Haas, Haas Groot Disp, ATSeasonSans
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 23 Oct 2026 · added by @sitestyleguide
https://www.airtable.com/
Screenshot
airtable.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Airtable: Build Enterprise-ready AI Workflows, Apps & Agents | Airtable
- ▲ 71 / 60 characters
- Meta description
- 500,000+ brands use Airtable to enable real-time collaboration, automate repetitive tasks & manual work, and streamline business processes in minutes. Join them.
- ▲ 161 / 160 characters
- Site name
- Airtable
- og:title
- Airtable: Build Enterprise-ready AI Workflows, Apps & Agents
- og:description
- 500,000+ brands use Airtable to enable real-time collaboration, automate repetitive tasks & manual work, and streamline business processes in minutes. Join them.
- Language
- en
In search results
Airtablehttps://www.airtable.com/
Airtable: Build Enterprise-ready AI Workflows, Apps & Agents …
500,000+ brands use Airtable to enable real-time collaboration, automate repetitive tasks & manual work, and streamline business processes in minutes. Join them.
When shared
airtable.com
Airtable: Build Enterprise-ready AI Workflows, Apps & Agents
500,000+ brands use Airtable to enable real-time collaboration, automate repetitive tasks & manual work, and …
Logo & favicons
Found as: SVG in the header. SVG, 27 × 23.
Logo
On white
On black
On Royal Blue
Favicons
1 found-
48 px · PNG
icon
Airtable: Build Enterprise-ready AI Workflows, Apps & Agents | Airtable
Light browser tab
Airtable: Build Enterprise-ready AI Workflows, Apps & Agents | Airtable
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#333333) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 39.1%
- Cool Near Black 21.3%
- Near Black 9.5%
- Off White 6.7%
- Royal Blue 2.6%
- Black 2.4%
- Orange 2.2%
- Dark Slate Blue 2%
- Moccasin 1.9%
- Light Misty Rose 1.9%
- Deep Lavender 1.9%
- Light Cyan 1.9%
- Pale Turquoise 1.7%
- Deep Misty Rose 1.7%
- Thistle 1.7%
- Light Lavender 1.7%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 12.63:1 AAA
- On white
- —
Background, text, border · .BkButton-module-scss-module__b-zy-W__bkButton.BkButton-module-scss-module__b-zy, .Hero-module-scss-module__l-t4wW__heading
-
Cool Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 37 24 0 85
- On text
- 1.34:1 Fail
- On white
- 16.90:1 AAA
Text, background, border · .BkButton-module-scss-module__b-zy-W__bkButton.BkButton-module-scss-module__b-zy, .index-module-scss-module__qYDJ5a__mediaSwitchGridButton .index-module-scss-modu
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 91
- On text
- 1.43:1 Fail
- On white
- 18.10:1 AAA
Text, background, border · .CtaBanner-module-scss-module__wRTcqG__ctaPrimary, .CtaBanner-module-scss-module__wRTcqG__ctaSecondary
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 7
- On text
- 10.89:1 AAA
- On white
- 1.16:1 Fail
Background, border, text · [data-color=grayLight] .baymax-module__FRh8ba__parentColoredLinearGradientFromTr, [data-color=greyLight] .baymax-module__FRh8ba__parentColoredLinearGradientFromTr
Colours
Brand colours and accents, most used first-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 97 58 0 3
- On text
- 2.61:1 Fail
- On white
- 4.83:1 AA
Text, background, graphic · .Cta-module__OipKta__button, .Cta-module__OipKta__link
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 88 56 0 87
- On text
- 1.53:1 Fail
- On white
- 19.29:1 AAA
Text · .LogosBarSection-module-scss-module__Aj_6TG__heading, .LogoCarouselGridSection-module-scss-module__T9VQya__introHeading p
-
Orange
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 29 100 1
- On text
- 7.02:1 AAA
- On white
- 1.80:1 Fail
Background, border, text · inline style on <i>, .index-module-scss-module__Tg2KvW__banner
-
Dark Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 79 54 0 32
- On text
- 1.68:1 Fail
- On white
- 7.50:1 AAA
Text, background, graphic · [data-color=blue].baymax-module__FRh8ba__darkColoredText, [data-color=blue].baymax-module__FRh8ba__darkColoredBackground
-
Moccasin
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 8 29 0
- On text
- 10.65:1 AAA
- On white
- 1.19:1 Fail
Background, text, border · [data-color=yellowLight] .baymax-module__FRh8ba__parentColoredLinearGradientFrom, [data-color=yellowLight].baymax-module__FRh8ba__coloredText
-
Light Misty Rose
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 11 16 0
- On text
- 10.26:1 AAA
- On white
- 1.23:1 Fail
Background, text, border · [data-color=orangeLight] .baymax-module__FRh8ba__parentColoredLinearGradientFrom, [data-color=orangeLight].baymax-module__FRh8ba__coloredText
-
Deep Lavender
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 19 13 0 0
- On text
- 9.42:1 AAA
- On white
- 1.34:1 Fail
Background, text, border · [data-color=blueLight] .baymax-module__FRh8ba__parentColoredLinearGradientFromTr, [data-color=blueLight].baymax-module__FRh8ba__coloredText
-
Light Cyan
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 18 5 0 1
- On text
- 10.57:1 AAA
- On white
- 1.20:1 Fail
Background, text, border · [data-color=cyanLight] .baymax-module__FRh8ba__parentColoredLinearGradientFromTr, [data-color=cyanLight].baymax-module__FRh8ba__coloredText
-
Pale Turquoise
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 21 0 5 4
- On text
- 10.55:1 AAA
- On white
- 1.20:1 Fail
Background, text, border · [data-color=tealLight] .baymax-module__FRh8ba__parentColoredLinearGradientFromTr, [data-color=tealLight].baymax-module__FRh8ba__coloredText
-
Deep Misty Rose
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 14 10 0
- On text
- 10.00:1 AAA
- On white
- 1.26:1 Fail
Background, text, border · [data-color=redLight] .baymax-module__FRh8ba__parentColoredLinearGradientFromTra, [data-color=redLight].baymax-module__FRh8ba__coloredText
-
Thistle
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 15 4 0
- On text
- 9.99:1 AAA
- On white
- 1.26:1 Fail
Background, text, border · [data-color=pinkLight] .baymax-module__FRh8ba__parentColoredLinearGradientFromTr, [data-color=pinkLight].baymax-module__FRh8ba__coloredText
-
Light Lavender
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 7 11 0 0
- On text
- 10.17:1 AAA
- On white
- 1.24:1 Fail
Background, text, border · [data-color=purpleLight] .baymax-module__FRh8ba__parentColoredLinearGradientFrom, [data-color=purpleLight].baymax-module__FRh8ba__coloredText
Gradients
-
linear-gradient(initial)
-
linear-gradient(to right, 0%, 100%)
-
linear-gradient(#0000 71.99%,#181d26e6 100%,#000000e6 100%),linear-gradient(#0000004d,#0000004d)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
Haas
Aa
400
Aa
700
Haas
Self-hosted · weights 400, 500, 700 · headings, body, buttons · shown in a stand-in if you don’t have it
Aa
400
Aa
900
Haas Groot Disp
Self-hosted · weights 400, 500, 600, 700, 900 · headings, body · shown in a stand-in if you don’t have it
Aa
100
Aa
900
ATSeasonSans
Self-hosted · weights 100, 550, 650, 900 · headings · shown in a stand-in if you don’t have it
Aa
500
Aa
600
Haas Grot Text R
System font, or not loaded on this page · weights 500, 550, 600 · headings, buttons · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
5rem · 80 px / 1.3
weight 500
Airtable
Heading 2
4rem · 64 px / 1.3
weight 500
Airtable: Build Enterprise-ready AI Workflows, …
Heading 3
3rem · 48 px / 1.3
weight 500
Airtable: Build Enterprise-ready AI Workflows, …
Heading 4
2.5rem · 40 px / 1.3
weight 500
Airtable: Build Enterprise-ready AI Workflows, …
Heading 5
2rem · 32 px / 1.3
weight 500
Airtable: Build Enterprise-ready AI Workflows, …
Heading 6
1.5rem · 24 px / 1.3
weight 500
Airtable: Build Enterprise-ready AI Workflows, …
Body
1.25rem · 20 px / 1.5
weight 400 · Haas Groot Disp
500,000+ brands use Airtable to enable real-time collaboration, automate repetitive tasks & manual work, and streamline business processes …
Paragraph
.875rem · 14 px / 1.5
weight 400 · uppercase · Haas
500,000+ brands use Airtable to enable real-time collaboration, automate repetitive tasks & manual work, and streamline business processes …
Small
1.25rem · 20 px
500,000+ brands use Airtable to enable real-time collaboration, automate repetitive tasks & manual work, and streamline business processes …
Link
1rem · 16 px
Read more about Airtable
Sizes in use
Most common across the site- 32pxline 1.25 · 37 rules
- 24pxline 1.3 · 44 rules
- 20pxline 1.35 · 48 rules
- 18pxline 1.35 · 42 rules
- 16pxline 1.35 · 108 rules
- 14pxline 1.35 · 102 rules
- 12pxline 1.35 · 57 rules
- 11pxline 1.4 · 28 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Button
Get started
.Cta-module__OipKta__button · #0768F8 · radius .25rem
Corner radius
- 6px · 59×
- 16px · 40×
- 8px · 39×
- 50% · 37×
- 4px · 35×
- 999px · 26×
Shadows
- 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000
- 0 0 1px #181d263d,0 2px 4px #181d2614,0 2px 16px #181d260f
- 0 0 1px #181d263d,0 6px 8px #181d2614,0 18px 32px #0000001a
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
640
768
832
900
1024
1152
1600
1664
On a scale of 0 to 1664 px.
Content widths (max-width)
1536 px
1344 px
1152 px
768 px
512 px
384 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 71 characters. Google usually cuts titles near 60, so the end may not show in results.
- ▲ CheckThe description is 161 characters. Search results usually show about 160.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Airtable use?
- Airtable’s website uses three typefaces: Haas (headings and body text), self-hosted; Haas Groot Disp, self-hosted; ATSeasonSans, self-hosted.
- What are Airtable’s brand colours?
- The main colours on airtable.com are Royal Blue (#0768F8), Black (#040E20), Orange (#FCB400), Dark Slate Blue (#254FAD), Moccasin (#FFEAB6) and Light Misty Rose (#FEE2D5).
- What colour is Airtable’s text and background?
- Body text is #333333 on a #FFFFFF background.
- Where is Airtable’s logo from?
- The logo shown in this guide was found on airtable.com’s homepage. For official logo files and usage rules, check Airtable’s own brand or press page.
- Is this Airtable’s official style guide?
- No. SiteStyleGuide made it from airtable.com’s public web pages on 23 October 2026, and isn’t affiliated with Airtable. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
airtable-com-tokens.css
/* airtable.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/airtable.com) */
:root {
/* Colours */
--text: #333333;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-cool-near-black: #181D26;
--colour-near-black: #161616;
--colour-off-white: #EEEEEE;
--colour-royal-blue: #0768F8;
--colour-black: #040E20;
--colour-orange: #FCB400;
--colour-dark-slate-blue: #254FAD;
--colour-moccasin: #FFEAB6;
--colour-light-misty-rose: #FEE2D5;
--colour-deep-lavender: #CFDFFF;
--colour-light-cyan: #D0F0FD;
--colour-pale-turquoise: #C2F5E9;
--colour-deep-misty-rose: #FFDCE5;
--colour-thistle: #FFDAF6;
--colour-light-lavender: #EDE2FE;
--gradient-1: linear-gradient(initial);
--gradient-2: linear-gradient(to right, 0%, 100%);
--gradient-3: linear-gradient(#0000 71.99%,#181d26e6 100%,#000000e6 100%),linear-gradient(#0000004d,#0000004d);
/* Typefaces */
--font-headings: 'Haas', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen';
--font-body: 'Haas', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen';
--font-buttons: 'Haas', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen';
/* Type scale */
--text-h1: 5rem;
--leading-h1: 1.3;
--text-h2: 4rem;
--leading-h2: 1.3;
--text-h3: 3rem;
--leading-h3: 1.3;
--text-h4: 2.5rem;
--leading-h4: 1.3;
--text-h5: 2rem;
--leading-h5: 1.3;
--text-h6: 1.5rem;
--leading-h6: 1.3;
--text-body: 1.25rem;
--leading-body: 1.5;
--text-p: .875rem;
--leading-p: 1.5;
--text-small: 1.25rem;
--text-a: 1rem;
/* Shape */
--radius-1: 6px;
--radius-2: 16px;
--radius-3: 8px;
--radius-4: 50%;
--radius-5: 4px;
--radius-6: 999px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 640px;
--breakpoint-2: 768px;
--breakpoint-3: 832px;
--breakpoint-4: 900px;
--breakpoint-5: 1024px;
--breakpoint-6: 1152px;
--breakpoint-7: 1600px;
--breakpoint-8: 1664px;
--max-width-1: 1536px;
--max-width-2: 1344px;
--max-width-3: 1152px;
--max-width-4: 768px;
--max-width-5: 512px;
--max-width-6: 384px;
}
{
"site": "airtable.com",
"source": "https://sitestyleguide.com/airtable.com",
"text": "#333333",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Cool Near Black",
"hex": "#181D26",
"rgb": [
24,
29,
38
]
},
{
"name": "Near Black",
"hex": "#161616",
"rgb": [
22,
22,
22
]
},
{
"name": "Off White",
"hex": "#EEEEEE",
"rgb": [
238,
238,
238
]
},
{
"name": "Royal Blue",
"hex": "#0768F8",
"rgb": [
7,
104,
248
]
},
{
"name": "Black",
"hex": "#040E20",
"rgb": [
4,
14,
32
]
},
{
"name": "Orange",
"hex": "#FCB400",
"rgb": [
252,
180,
0
]
},
{
"name": "Dark Slate Blue",
"hex": "#254FAD",
"rgb": [
37,
79,
173
]
},
{
"name": "Moccasin",
"hex": "#FFEAB6",
"rgb": [
255,
234,
182
]
},
{
"name": "Light Misty Rose",
"hex": "#FEE2D5",
"rgb": [
254,
226,
213
]
},
{
"name": "Deep Lavender",
"hex": "#CFDFFF",
"rgb": [
207,
223,
255
]
},
{
"name": "Light Cyan",
"hex": "#D0F0FD",
"rgb": [
208,
240,
253
]
},
{
"name": "Pale Turquoise",
"hex": "#C2F5E9",
"rgb": [
194,
245,
233
]
},
{
"name": "Deep Misty Rose",
"hex": "#FFDCE5",
"rgb": [
255,
220,
229
]
},
{
"name": "Thistle",
"hex": "#FFDAF6",
"rgb": [
255,
218,
246
]
},
{
"name": "Light Lavender",
"hex": "#EDE2FE",
"rgb": [
237,
226,
254
]
}
],
"fonts": [
{
"name": "Haas",
"stack": "Haas, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
"weights": [
400,
500,
700
],
"source": "Self-hosted"
},
{
"name": "Haas Groot Disp",
"stack": "Haas Groot Disp, Haas, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
"weights": [
400,
500,
600,
700,
900
],
"source": "Self-hosted"
},
{
"name": "ATSeasonSans",
"stack": "ATSeasonSans, Haas, sans-serif",
"weights": [
100,
550,
650,
900
],
"source": "Self-hosted"
},
{
"name": "Haas Grot Text R",
"stack": "Haas Grot Text R, Haas, sans-serif",
"weights": [
500,
550,
600
],
"source": "System font, or not loaded on this page"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run airtable.com?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/airtable.com" title="Airtable style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to Airtable’s
WeTransfer
we.tl · 2 days ago
Save
Open Broadcaster Software
obsproject.com · 4 days ago
Save
Electronic Arts Home Page
ea.com · 2 days ago
Save
Captured from airtable.com on 23 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Airtable; this guide describes the public website for reference.