Design teardown
Airtable
A white marketing page with a short centered headline, a dark fill button beside an outline button, and a large rounded product window sitting on a looping sky video.
airtable.com
Design character
Calm product theater
The page is a single vertical story: a thin pale-blue notice, a white bar, a two-line headline, one supporting sentence, then two actions. Below that, a photographic stage holds a glass pill of section tabs and a floating app window. Further down, a one-line accent sentence, a logo strip, and a split proof block with a sticky left headline and a right-hand story, stat, and interface card. Copy is short and declarative. Headlines are one or two lines in sentence case and end with a period. Support text is a single sentence. Proof rows are one line each. Stats are a short figure plus a short label. The product UI uses operational words: column names, filters, and status chips. Tone is plain, confident, and enterprise, with the interface doing more talking than the prose.
Typography
Marketing type is ATSeasonSans, a variable sans with tight display leading and almost no tracking. Body copy on the page is 20px over 30px. The product window switches to SF Pro Text at about 13px, with SF Pro Display for in-app titles. Haas Groot Disp sits on the root stack and the footer element.
Color system
The page is white with near-black ink. The only marketing accent is a teal sentence. Color lives inside the product window: tinted sidebars and many small status pills. The hero backdrop is a sky video; its fallback fill is a deep green.
Spacing and geometry
Spacing is an 4px grid used loosely. The hero stack and the two actions sit 20px apart. The nav and hero inset are 48px. Controls are compact; the page around them is open.
Layout
A centered headline over a full-bleed product stage, then a logo band, then a two-column proof section, then a white link footer. The product window is the largest object on the page.
Motion
Motion is short and functional. A muted sky video loops behind the product. Switching tabs slides a white ring and fades the app pieces up by a few pixels. Logos crawl in a slow marquee. Reduced motion removes the slides and pauses the marquee.
UI fingerprint
- White page, dark type Almost every marketing surface is #ffffff with #161616 or #181d26 text. Color is saved for the product demo.
- App window as hero The largest object is a 14px-radius product shell on a sky video, not an illustration or a type lockup.
- 4px buttons, pill chips Marketing actions are barely rounded. Tabs and status marks are full pills.
- Two type worlds ATSeasonSans runs the page. SF Pro runs the interface inside the window.