Design teardown
Loom
White marketing page with blue pills, huge rounded plates, and short friendly copy.
loom.com
Design character
Rounded blue marketing
A long, centered marketing scroll on white. A blue announcement strip sits over a white header, then a huge headline, one supporting sentence, two pills, and a wide rounded video. Later sections are large color plates: blue, white, near-black, charcoal, and four pastels, ending in a pale-blue footer. Copy is short and plain. Headlines are one clause. Support is usually one sentence, sometimes two. Buttons and labels are two to four words. The voice is warm, confident, and direct, with a longer editorial title only in the blog block.
Typography
Custom Charlie Display for headlines and Charlie Text for everything else. Display is bold with very tight leading and no letter-spacing. Body and UI sit at a normal 16px with 24px leading. Hero support jumps to 28px, feature copy to 19px.
Color system
Blue #1868db on white, with near-black ink, a pale blue quiet fill, four soft card pastels, and a coral record accent. Surfaces are flat fills. Borders are almost absent.
Spacing and geometry
An 8px step scale, with fluid section padding that reaches 144px on a wide screen. Plates are padded like small pages. Density is airy.
Layout
Sticky white header over a centered column about 1600px wide on a 2227px screen. Content alternates full-width rounded plates and a simple centered hero.
Motion
Buttons lift a little and grow slightly in a tenth of a second. Product scenes play short staged animations. A logo row scrolls, quotes carousel, and a pulse fades. The pulse is turned off when reduced motion is requested.
UI fingerprint
- Full pills Actions are fully rounded, 16px, and borderless. Blue fill for the main action, pale blue with dark type for the quiet one.
- 72px plates Major sections are large rounded panels with about 144px of padding. Photos and nested tiles step down to 44px.
- Tight display Headlines are Charlie Display at 70px and weight 700, with leading only 2px larger than the size and no tracking.
- Staged scenes Feature areas animate a press, a slide, and delayed fades, while the chrome itself barely moves.