Design teardown
Guest homepage with a white bar, blue pills, and light bands of short professional copy.
linkedin.com
Design character
Quiet professional
A wide marketing page with a sticky white bar, a sign-in column beside a large illustration, then stacked bands. Painted bands are warm gray or sand. Copy is short, sentence case, and practical: a one- or two-line title, one or two sentences of support, then a short action. Tone is calm and direct, aimed at a person making a next step, with no shouting and no bold headlines.
Typography
One system sans for everything. Titles are regular, not bold, and tracking is even. Hierarchy comes from size: a 48px page title, 32px section titles, 20px support, 16px controls, and 12px labels and legal lines. Support copy stays to one or two sentences. Chips and buttons are a few words. The footer is a directory of short links.
Color system
Blue is reserved for the wordmark, links, and the main action. Text is near-black, softened gray, or muted gray. Ground is white, warm gray, or sand. A rust tone is used only on a few story titles.
Spacing and geometry
An 8-point rhythm with generous section padding. Controls are roomy. The column is centered and about 1128px wide.
Layout
Sticky white bar, then a two-column hero, then full-width bands inside a centered 1128px column. Each band puts a short text block on the left and chips, a list, or a round image on the right. Bands that paint a fill use canvas or sand. In this wide view, bands without their own fill showed a black backdrop, so near-black titles in those bands were hard to see.
Motion
Almost still. Button color changes have no duration. The only measured move is the feature track, which slides sideways, plus a short fade on the carousel icon.
UI fingerprint
- Full pills Primary and quiet actions share a 24px radius, 16px semibold type, and 12px by 24px padding.
- Regular titles 48px and 32px headlines stay at weight 400. Semibold is saved for controls and nav.
- Warm ground Bands sit on #f3f2f0, a callout uses #f1ece5, and a few titles use #b24020.
- Slow slide The feature row moves in 336ms on cubic-bezier(0.34, 0, 0.21, 1). Other UI does not ease.