Airtable Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

11type steps

4radius steps

4pxspacing base

Airtable, in one page

Airtable's marketing surfaces are quietly editorial. The base atmosphere is white canvas, dark ink type, generous whitespace, and a near-black pill CTA — nothing is fighting for attention until a section needs to. The brand voltage doesn't come from gradient washes or accent walls; it comes from full-bleed signature cards in {colors.signature-coral}, {colors.signature-forest}, and {colors.surface-dark} that punctuate long-scroll explainer pages every two or three screens. Between those signature bands, the page reads like a print magazine: a headline, supporting copy, a small image cluster, then breathing room.

Type voice is Haas Grotesk at modest weights (400 for display, 500 for sub-titles and buttons). Display headlines never go bolder than 500 — emphasis comes from size and color contrast, not from weight. Body copy stays at 14px / 400 throughout. The pricing surface runs its own dialect: Inter Display at unusual mid-weights (475 / 575) and pill-shaped buttons ({rounded.pill}) that don't appear on any other page — a deliberate sub-system signaling "this page is about commercial precision."

Key Characteristics:

Primary CTA is {colors.primary} (near-black ink) with white text and a {rounded.lg} (12px) corner — it reads as confident and final, never decorative.
Secondary CTA is a {colors.canvas} button with {colors.ink} text and a hairline outline. The two together form Airtable's signature button pair.
Hero is white canvas. There is no atmospheric gradient, no mesh, no background flourish. The brand strength comes from the type and the buttons sitting in clean whitespace.
Brand voltage lives in signature surface cards: {colors.signature-coral}, {colors.signature-forest}, and {colors.surface-dark} carry full-bleed product callouts every few screens.
Demo-card grids carry product UI fragments on {colors.signature-peach}, {colors.signature-mint}, {colors.signature-cream} and other warm pastel surfaces.
Section rhythm: white canvas → coral signature card → white body → cream callout band → dark navy CTA → light gray CTA banner → footer. The canvas resets between every signature surface.
Border radius is hierarchical: {rounded.lg} (12px) for primary CTAs and large signature cards, {rounded.md} (10px) for content cards and demo grids, {rounded.sm} (6px) for inputs, {rounded.full} for icon buttons. Pricing buttons jump to {rounded.pill} to mark themselves as a separate dialect.
Vertical rhythm is {spacing.section} (96px) between major bands — universal across every page.

Do's and don'ts

Do

Keep {component.button-primary} near-black. The brand's primary CTA is {colors.primary}, not the link blue. Mixing them up turns a confident hero into a confused one.
Reserve {component.button-primary} for one primary action per viewport. The system is designed for scarcity at the brand-action layer.
Use {component.button-secondary} (white with hairline outline) as the natural pair with {component.button-primary}. The two together form Airtable's signature button row.
Trust whitespace as the hero atmosphere. Hero bands are intentionally calm — no gradient, no mesh, no atmospheric backdrop. Going against this reads as off-brand.
Use {component.signature-coral-card}, {component.signature-forest-card}, and {component.hero-card-dark} to break editorial monotony. These are the brand's voltage moments.
Keep {component.demo-grid-card} heights uneven within a grid. Uniform heights feel like a spec sheet.
Treat the pricing surface as its own dialect: keep {typography.pricing-display}, {typography.pricing-card-title}, and {component.button-pricing-pill} together. Mixing them with Haas Grotesk button type breaks the sub-system's voice.
Anchor every editorial band with {spacing.section} (96px) vertical padding.

Don't

Don't make {colors.link} (#1b61c9) the primary button color. It is the link color. The primary button is {colors.primary} (#181d26, near-black). Treating link-blue as the brand action is the most common mistake when reading Airtable's CSS variables.
Don't add a gradient backdrop to the hero. Airtable's hero is white, full stop. Mesh, aurora, spotlight gradients all read as "another SaaS template" — not Airtable.
Don't bold display-weight type. {typography.display-xl} and {typography.display-lg} are intentionally weight 400 / 500 — going to 700 reads as marketing-page-template.
Don't use {rounded.pill} outside the pricing surface. It's a sub-system signal, not a general radius option.
Don't repeat the same surface mode in two consecutive bands. The editorial pacing depends on rhythm: white → signature card → white → cream → dark → white. Two whites in a row read as a typography blog.
Don't add hover state styling beyond what the system already encodes. The system documents Default and Active/Pressed only.
Don't introduce additional accent colors beyond the documented signature card palette. The system's voltage already uses coral, forest, dark navy, cream, peach, mint, yellow, and mustard.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Airtable design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #181d26
- primary-active: #0d1218
- ink: #181d26
- body: #333840
- muted: #41454d
- hairline: #dddddd
- border-strong: #9297a0
- canvas: #ffffff
- surface-soft: #f8fafc
- surface-strong: #e0e2e6

Type:
- families: Haas Groot Disp, Haas, Inter Display
- scale: 13.12, 14, 16, 18, 20, 24, 28, 32, 40
- weights: 400, 475, 500, 600

Shape:
- radius: 2, 6, 10, 12

Spacing: 4, 8, 12, 16, 24, 32, 48, 96

Rules:
- Keep `{component.button-primary}` near-black. The brand's primary CTA is `{colors.primary}`, not the link blue. Mixing them up turns a confident hero into a con…
- Reserve `{component.button-primary}` for one primary action per viewport. The system is designed for scarcity at the brand-action layer.
- Use `{component.button-secondary}` (white with hairline outline) as the natural pair with `{component.button-primary}`. The two together form Airtable's signatu…
- Trust whitespace as the hero atmosphere. Hero bands are intentionally calm — no gradient, no mesh, no atmospheric backdrop. Going against this reads as off-bran…
- Use `{component.signature-coral-card}`, `{component.signature-forest-card}`, and `{component.hero-card-dark}` to break editorial monotony. These are the brand's…
- Keep `{component.demo-grid-card}` heights uneven within a grid. Uniform heights feel like a spec sheet.

Avoid:
- Don't make `{colors.link}` (#1b61c9) the primary button color. It is the link color. The primary button is `{colors.primary}` (#181d26, near-black). Treating li…
- Don't add a gradient backdrop to the hero. Airtable's hero is white, full stop. Mesh, aurora, spotlight gradients all read as "another SaaS template" — not Airt…
- Don't bold display-weight type. `{typography.display-xl}` and `{typography.display-lg}` are intentionally weight 400 / 500 — going to 700 reads as marketing-pag…
- Don't use `{rounded.pill}` outside the pricing surface. It's a sub-system signal, not a general radius option.
- Don't repeat the same surface mode in two consecutive bands. The editorial pacing depends on rhythm: white → signature card → white → cream → dark → white. Two…
- Don't add hover state styling beyond what the system already encodes. The system documents Default and Active/Pressed only.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Primary ({colors.primary} — #181d26): The dominant brand color. Used for the primary CTA background, h1/h2 display type, and the {component.surface-dark} band. Not "blue, then black" — black IS the primary throughout the marketing system.
Primary Active ({colors.primary-active} — #0d1218): The press state on primary buttons.

Surface

Canvas ({colors.canvas} — #ffffff): The default page surface; the floor of every editorial body.
Surface Soft ({colors.surface-soft} — #f8fafc): Tabbed feature cards and the featured pricing tier.
Surface Strong ({colors.surface-strong} — #e0e2e6): The light gray "Start building with Airtable" CTA banner near the footer.
Surface Dark ({colors.surface-dark} — #181d26): The dark navy CTA cards used mid-page (for example "The path to 10× every person in your organization").
Surface Dark Elevated ({colors.surface-dark-elevated} — #1d1f25): The articles-page hero base behind the rainbow-stripe overlay.
Hairline ({colors.hairline} — #dddddd): The 1px border tone for input outlines, table dividers, secondary-button outlines.

Text

Ink ({colors.ink} — #181d26): The strongest text — h1/h2 display type and primary button text-on-light. Same hex as {colors.primary} because they are the same role expressed at type and button layers.
Body ({colors.body} — #333840): The default running-text color.
Muted ({colors.muted} — #41454d): Footer links, breadcrumbs, captions.
Border Strong ({colors.border-strong} — #9297a0): The 1px outline color on disabled secondary buttons.
On Primary / On Dark ({colors.on-primary} — #ffffff): The text color on primary buttons and dark surfaces.

Signature Card Surfaces

These are the colors that carry Airtable's brand voltage. They appear as full-bleed, full-card surfaces — never as accents on a small element.

Coral ({colors.signature-coral} — #aa2d00): The largest signature card on the homepage ("Production apps in prototype speed"). Full-bleed dark coral with white type.
Forest ({colors.signature-forest} — #0a2e0e): A deep-green signature card used in the homepage demo-grid cluster.
Cream ({colors.signature-cream} — #f5e9d4): The cream callout band ("The path to 10× every person in your organization") — a soft beige surface holding dark type and product UI fragments.
Peach ({colors.signature-peach} — #fcab79), Mint ({colors.signature-mint} — #a8d8c4), Yellow ({colors.signature-yellow} — #f4d35e), Mustard ({colors.signature-mustard} — #d9a441): Demo-card surfaces that carry small product UI fragments inside the multi-card grid sections.

Semantic

Link ({colors.link} — #1b61c9): Inline body links and anchor text. Darker on press to {colors.link-active} (#1a3866). Despite the --theme_button-background-primary CSS-variable name, this color is not the primary button color — it is the link color.
Info ({colors.info} — #254fad) and Info Border ({colors.info-border} — #458fff): Inline info badges and focused-input outline.
Success ({colors.success} — #006400) and Success Border ({colors.success-border} — #39bf45): Confirmation states.

Type scaleRead the full spec

Font Family

The system runs Haas / Haas Groot Disp (Airtable's licensed display + text type). Haas Groot Disp covers display sizes (h1 / h2); Haas Grotesk covers everything 24px and below. The fallback stack walks -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif.

The pricing surface runs a separate Inter Display stack at mid-weights (475 / 575) — a deliberate sub-system signaling commercial precision.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xl}`	48px	500	1.1	0	Articles page h2 — second-tier editorial headline
`{typography.display-lg}`	40px	400	1.2	0	Homepage h1 hero
`{typography.display-md}`	32px	400	1.2	0	Platform-page h2 — feature-section headlines
`{typography.title-lg}`	24px	400	1.35	0.12px	Section titles
`{typography.title-md}`	20px	400	1.5	0	Sub-section titles in tabbed feature cards
`{typography.title-sm}`	18px	500	1.4	0	Article-card titles
`{typography.label-md}`	16px	500	1.4	0	Demo-card titles, list labels
`{typography.button}`	16px	500	1.4	0	Standard CTA button labels
`{typography.body-md}`	14px	400	1.25	0	Body copy, footer links, top-nav items
`{typography.caption}`	14px	500	1.35	0.16px	Light captions and meta text
`{typography.legal}`	13.12px	600	1.2	0	Cookie/legal CTA buttons
`{typography.pricing-display}`	44.8px	475	1.1	0	Pricing-page h1
`{typography.pricing-section}`	28px	475	1.2	0	Pricing-page section heads
`{typography.pricing-card-title}`	20px	475	1.3	0	Pricing tier card plan name

Principles

The Haas system prefers weight 400 for display sizes — a 40px h1 is not bold. Visual emphasis is delegated to size, color contrast, and the signature surface cards. Where the system does want weight, it pivots to 500 (sub-titles, buttons, article titles), never 600 or 700 in the editorial body. The only true bold (600) lives in {typography.legal} — a sign that boldness is reserved for terms-of-service surfaces, not marketing.

The pricing-page sub-system uses Inter Display at font-weight: 475 — a custom mid-weight between regular (400) and medium (500), shipped as a variable font.

Note on Font Substitutes

If Haas Groot Disp and Haas Grotesk are unavailable, Inter Display (variable) is the closest open-source substitute for both — adjust line-height down by ~5% to match Haas's tighter cap-height. For the pricing sub-system, use Inter Display directly. On macOS / iOS, system-ui is sufficient; on Windows, the chain falls through to Segoe UI, which is a usable but slightly cooler substitute.

Components and layoutRead the full spec

No hover states documented. Per the global no-hover policy (Step 6), every component spec below documents only Default and Active/Pressed states. Variants live as separate entries in the components: front matter.

top-nav — A 64px-tall white bar pinned to the top of every page. Airtable wordmark sits at left; primary horizontal menu (Platform, Solutions, Resources, Enterprise, Pricing) sits center-left in {typography.body-md}; the right cluster carries a "Book Demo" outline link, "Sign up for free" {component.button-primary}, and "Log In" text link. The nav stays light on every page — Airtable does not invert the nav over dark sections.

Buttons

button-primary — The signature primary CTA. Background {colors.primary} (near-black), text {colors.on-primary}, type {typography.button}, padding 16px × 24px, rounded {rounded.lg} (12px). This is the "Get started for free" / "Sign up for free" button visible on every hero. It reads as confident and final — not decorative — which is why the system uses it sparingly (one per viewport).

Active state: button-primary-active darkens to {colors.primary-active} (#0d1218).

button-secondary — White outline button (e.g. "Book demo"). Background {colors.canvas}, text {colors.ink}, type {typography.button}, rounded {rounded.lg} (12px), 1px hairline outline. Sits next to {component.button-primary} as the "less-committed" choice.

button-secondary-on-dark — Same shape as {component.button-secondary} but used on signature coral / forest / dark surfaces. Background {colors.canvas}, text {colors.ink} — the white button stays white over dark surfaces because the system never inverts to a translucent on-dark style on the marketing site.

button-pricing-pill — The pricing-page CTA family. Background {colors.canvas}, text {colors.pricing-ink}, rounded {rounded.pill} (9999px), padding 12px × 24px. The only place pill-shape appears in the marketing system. Treat it as part of the pricing sub-system signaling.

button-legal — Cookie-consent and legal-banner CTAs. Background {colors.link}, text {colors.on-primary}, type {typography.legal} (13.12px / 600), rounded {rounded.xs} (2px), padding 12px × 10px. The 2px corner radius and 600 weight signal "this is a required system surface," not a designed brand surface.

button-icon-circular — 40px × 40px circular button with {colors.canvas} background, hairline border, and {colors.ink} icon. Used for carousel controls, "share", and "back" affordances.

text-link — Inline body links in {colors.link} (#1b61c9, the actual link blue). No underline by default. Type inherits {typography.body-md}.

Cards & Containers

hero-band — The full-page-width white-canvas hero. No surface card, no border, no shadow, no atmospheric gradient — just the headline, sub-headline, and primary + secondary button pair sitting in 96px of whitespace. Vertical padding {spacing.section} (96px).

signature-coral-card — The large full-bleed coral card on the homepage ("Production apps in prototype speed"). Background {colors.signature-coral} (#aa2d00, a dark coral / oxide red), text {colors.on-primary}, rounded {rounded.lg} (12px), internal padding {spacing.xxl} (48px). Carries an h2 in {typography.display-md}, supporting copy in {typography.body-md}, and {component.button-secondary-on-dark} as the CTA.

signature-forest-card — A deep green signature card ({colors.signature-forest} — #0a2e0e) used as a demo-grid sibling to the coral card on the homepage.

hero-card-dark — The dark navy mid-page CTA card (e.g. "The path to 10× every person in your organization"). Background {colors.surface-dark} (#181d26), text {colors.on-dark}, rounded {rounded.lg} (12px), internal padding {spacing.xxl} (48px). The same color as {colors.primary} because the system uses ink as both type color and signature dark surface.

feature-card-tabbed — Light-cream cards (e.g. the "Coke / Pelosi / Conde Nast / Time Inc" tabbed feature card on the homepage). Background {colors.surface-soft}, rounded {rounded.lg} (12px), internal padding {spacing.xl} (32px). Left rail carries vertically-stacked tab labels in {typography.title-md}; right pane shows the active tab's content (illustration + body copy + small CTA).

cream-callout-card — Beige callout cards ({colors.signature-cream}). Rounded {rounded.md} (10px), internal padding {spacing.lg} (24px). Carry product UI fragments or stat callouts — softer than the dark/coral signature cards but still a deliberate brand surface.

demo-grid-card — Used in multi-card grids that punctuate every page. Background {colors.canvas} or one of the demo-grid surfaces ({colors.signature-peach}, {colors.signature-mint}, {colors.signature-yellow}, {colors.signature-mustard}), rounded {rounded.md} (10px), internal padding {spacing.md} (16px). Each card frames a product UI fragment. Card heights vary deliberately to dodge a uniform "spec sheet" feel.

logo-strip — Horizontal monochrome partner-logo row (HBO, Netflix, Amazon, Time, Conde Nast). Logos render in {colors.muted}, surface is {colors.canvas}, vertical padding {spacing.xl} (32px). 6 logos at desktop, 3 at mobile.

article-card — The trending-stories grid on the articles page. Background {colors.canvas}, rounded {rounded.md} (10px), internal padding {spacing.md} (16px). Each card carries a colorful illustrated thumbnail (16:9), a small uppercase category tag, an {typography.title-sm} title, and a meta line. 3-up at desktop.

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
Mobile	< 768px	Single-column body; top nav collapses to hamburger; demo-grid drops to 1-up; signature cards stay full-bleed; logo strip wraps to 2 rows; footer collapses to single-column
Tablet	768–1024px	2-up demo-grid; top nav stays horizontal but tightens; cream-callout cards stack 2-up; pricing comparison table becomes horizontally scrollable
Desktop	1024–1440px	3-up demo-grid (and 4-up for tighter content); full top-nav with all menu items visible; pricing tier cards render 4-across
Wide	> 1440px	Same as Desktop with more outer breathing room; max content width caps at ~1280px and the page adds outer margin rather than scaling type up

Touch Targets

{component.button-primary} and siblings render at 48 × 48px minimum (16px vertical padding + 16px line-height) — comfortably above WCAG AAA's 44 × 44.
{component.button-icon-circular} is exactly 40 × 40px — slightly under WCAG's recommended 44, but the centered icon and dot-radius compensate visually.
{component.text-input} height is 44px.

Collapsing Strategy

Top nav collapses to a hamburger at < 768px; the menu opens as a full-screen sheet rather than a dropdown.
Card grids reduce columns rather than scaling cards down.
The {component.feature-card-tabbed} re-stacks the tab rail above the content pane on mobile.
The pricing comparison table converts to horizontally-scrollable swipe at < 1024px; the four plan headers stay visible while body rows scroll.

Image Behavior

Demo-card UI screenshots crop to fit their container rather than scaling up.
Hero illustrations bleed full-width on mobile, losing horizontal margin.
Signature card images (inside coral / forest / dark cards) compress to their card width without cropping.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-airtable {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #181d26;
  --heading-color: #181d26;
  --link-color: #1b61c9;
  --link-hover-color: #154b9c;
  --border-color: #d5d6d8;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(24,29,38,0.06);
  --card-hover-shadow: 0 6px 18px rgba(24,29,38,0.12);
  --header-bg: #181d26;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #696c72;
  --button-bg: #181d26;
  --button-text-color: #ffffff;
  --button-hover-bg: #040507;
  --button-border: none;
  --button-border-radius: 10px;
  --button-secondary-bg: #f1f1f2;
  --button-secondary-text-color: #181d26;
  --button-secondary-hover-bg: #e3e4e5;
  --button-secondary-border: 1px solid #d5d6d8;
  --prompt-bg: #f3f4f4;
  --prompt-text-color: #181d26;
  --base-font: var(--font-inter);
  --heading-font: var(--font-inter);
  --card-border-radius: 10px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

gmail 78.7%
pandora 76.8%
zoom 76.4%
flighty 74.7%
zomato 74.4%

Where this came from

Source document: volt/design-md/airtable/DESIGN.md · 34.2 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.