Design teardown
Asana
A white marketing page with a sticky wordmark bar, a centered signup, and a diagram of people and status chips around a very large light headline.
asana.com
Design character
Quiet work canvas
Near-black type on white, light display headlines, and fully round black actions. Color is reserved for small status chips and one selected pill.
Typography
One sans family, TWK Lausanne, from thin display sizes to medium UI labels. Big titles use weight 300 and tight negative tracking. Body and notes stay light, with positive tracking on small text.
Color system
The page is white, ink, and gray. Coral is limited to the mark. Green, yellow, pink, and blue appear as small chips and connector lines in the hero diagram. One pill on the dark band is pale pink.
Spacing and geometry
An 8px rhythm with large section padding. Controls are compact. Sections are loose.
Layout
A sticky header over a centered hero, then stacked bands. Content sits in a wide column, about 1432px, on a much wider viewport. The hero diagram occupies the margins around the signup.
Motion
The page is still. Navigation color changes over 0.3s. The hero diagram is drawn in place around the title. Two captures a moment apart barely differ, so the diagram does not travel.
UI fingerprint
- Light giant titles 102px and 54px headlines at weight 300, tighter than the body, on white.
- Black pills Primary actions are #0d0d0d, white type, and fully round.
- Diagram in the margins Status cards, faces, and pink connectors sit around the signup instead of under it.
- Color in chips only Green, yellow, pink, and coral stay small. Large areas stay white, gray, or black.