Airtable

Overview

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.

Colors

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