A sober, editorial workflow-software interface anchored on white canvas and dark-ink type. Brand voltage comes from full-bleed signature cards in coral, dark green, and dark navy that punctuate long-scroll explainer pages.
Primary is near-black ink — not blue. The CSS variable `--theme_button-background-primary: #1b61c9` exists at root but maps to the link/info role; the actual hero CTA renders in `#181d26`. Brand voltage lives in signature surface cards, not in accent colors.
Editorial voice runs Haas / Haas Groot Disp at modest weights (400 / 500). Pricing surface uses Inter Display at unusual mid-weights (475 / 575) as a deliberate sub-system. Inter Tight + Inter substituted here.
Primary is near-black, secondary is a white outline button. The two together form Airtable's signature button row on every hero. Pricing-page pill buttons live in their own sub-system.
Surface modes alternate page-by-page: white canvas → coral signature → cream callout → dark navy CTA → light gray banner → footer. The canvas resets between every signature surface — no two consecutive bands repeat.
Build, test, and ship internal tools in days — not quarters. The largest signature card on the homepage carries the brand's most direct value claim.
Deep-green signature card sibling to the coral — same shape, different voltage. Used in the homepage demo-grid cluster.
Mid-page dark-navy CTA card. Same hex as primary — ink is both the type color and the signature dark surface.
Light surface-soft background; left rail of tabs; right pane carries content + small CTA.
Soft beige surface holding stat callouts and inline product fragments. Quieter than the coral / forest / dark cards.
Demo cards carry product UI fragments on signature pastel surfaces. Card heights vary deliberately — uniform grids feel like a spec sheet.
3-up cards with colorful illustrated thumbnails (16:9). Thumbnails reuse signature surfaces (peach, coral, mint) rather than gradient washes.
Separate dialect for the pricing surface. Mid-weights 475/575, pill-shaped CTAs (`rounded.pill`), surface-soft for the featured tier.
Standard inputs at 44px height with 6px radius. Focus state shows a soft blue glow.
All spacing tokens are 4-multiples. The 96px section rhythm is the universal vertical constant across every page.
12px primary CTAs and signature cards, 10px secondary cards, 6px inputs, 9999px icons + pricing pills.
Shadows are minimal. Depth comes from the contrast between white canvas and signature surface cards — not from heavy elevation.
No shadow. Body sections, top nav, footer.
1px hairline border. Inputs, sub-nav rails, secondary buttons.
3px outer ring in link blue at 30% alpha.
No shadow; depth from color contrast against the surface band.
Coral / forest / dark surfaces sit flat against the white canvas — no shadow needed.
Card grids reduce columns rather than scaling cards down. Signature cards stay full-bleed at every breakpoint.
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Single-column; nav collapses to hamburger; demo-grid 1-up; signature cards stay full-bleed; logo strip wraps; footer single-column. |
| Tablet | 768–1024px | 2-up demo-grid; nav stays horizontal; cream-callout cards stack 2-up; pricing comparison becomes scrollable. |
| Desktop | 1024–1440px | 3- or 4-up demo-grid; full top-nav visible; pricing tiers render 4-across. |
| Wide | > 1440px | Same as desktop with more outer breathing room; max content width caps at ~1280px. |