version alpha
name Airtable
description A sober, editorial workflow-software interface anchored on white canvas and dark-ink type, where brand voltage comes from full-bleed signature cards in coral, dark green, peach, and dark navy that punctuate long-scroll explainer pages. Primary actions use a near-black pill CTA; secondary actions sit in a white outlined button. Type runs Haas Grotesk in modest weights — never bold for its own sake.
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" surface-dark: "#181d26" surface-dark-elevated: "#1d1f25" signature-coral: "#aa2d00" signature-forest: "#0a2e0e" signature-cream: "#f5e9d4" signature-peach: "#fcab79" signature-mint: "#a8d8c4" signature-yellow: "#f4d35e" signature-mustard: "#d9a441" on-primary: "#ffffff" on-dark: "#ffffff" link: "#1b61c9" link-active: "#1a3866" info: "#254fad" info-border: "#458fff" success: "#006400" success-border: "#39bf45" pricing-ink: "#1d1f25"
typography display-xl: fontFamily: "Haas Groot Disp, Haas, sans-serif" fontSize: 48px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0 display-lg: fontFamily: "Haas Groot Disp, Haas, sans-serif" fontSize: 40px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0 display-md: fontFamily: "Haas Groot Disp, Haas, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0 title-lg: fontFamily: "Haas, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.35 letterSpacing: 0.12px title-md: fontFamily: "Haas Groot Disp, Haas, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 title-sm: fontFamily: "Haas, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 label-md: fontFamily: "Haas, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 button: fontFamily: "Haas, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "Haas, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0 caption: fontFamily: "Haas, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0.16px legal: fontFamily: "Haas, sans-serif" fontSize: 13.12px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0 pricing-display: fontFamily: "Inter Display, system-ui, sans-serif" fontSize: 44.8px fontWeight: 475 lineHeight: 1.1 letterSpacing: 0 pricing-section: fontFamily: "Inter Display, system-ui, sans-serif" fontSize: 28px fontWeight: 475 lineHeight: 1.2 letterSpacing: 0 pricing-card-title: fontFamily: "Inter Display, system-ui, sans-serif" fontSize: 20px fontWeight: 475 lineHeight: 1.3 letterSpacing: 0
rounded xs: 2px sm: 6px md: 10px lg: 12px pill: 9999px full: 9999px
spacing xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px
components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.lg}" padding: 16px 24px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.lg}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.lg}" padding: 16px 24px button-secondary-on-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.lg}" padding: 16px 24px button-legal: backgroundColor: "{colors.link}" textColor: "{colors.on-primary}" typography: "{typography.legal}" rounded: "{rounded.xs}" padding: 12px 10px button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 40px button-pricing-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.pricing-ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 12px 24px text-link: backgroundColor: transparent textColor: "{colors.link}" typography: "{typography.body-md}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" height: 64px hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: 96px signature-coral-card: backgroundColor: "{colors.signature-coral}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.lg}" padding: 48px signature-forest-card: backgroundColor: "{colors.signature-forest}" textColor: "{colors.on-primary}" typography: "{typography.display-md}" rounded: "{rounded.lg}" padding: 48px hero-card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" rounded: "{rounded.lg}" padding: 48px feature-card-tabbed: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px cream-callout-card: backgroundColor: "{colors.signature-cream}" textColor: "{colors.ink}" typography: "{typography.title-lg}" rounded: "{rounded.md}" padding: 24px demo-grid-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.label-md}" rounded: "{rounded.md}" padding: 16px logo-strip: backgroundColor: "{colors.canvas}" textColor: "{colors.muted}" typography: "{typography.body-md}" padding: 32px article-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-sm}" rounded: "{rounded.md}" padding: 16px topic-filter-rail: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-md}" width: 240px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 12px 16px height: 44px text-input-focus: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.sm}" pricing-tier-card: backgroundColor: "{colors.canvas}" textColor: "{colors.pricing-ink}" typography: "{typography.pricing-card-title}" rounded: "{rounded.md}" padding: 32px pricing-tier-card-featured: backgroundColor: "{colors.surface-soft}" textColor: "{colors.pricing-ink}" typography: "{typography.pricing-card-title}" rounded: "{rounded.md}" padding: 32px pricing-comparison-row: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-md}" padding: 12px cta-band-light: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.lg}" padding: 48px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-md}" padding: 64px
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 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 te
