Design teardown
Adobe
A white page, black type, and a full-bleed photo. Actions are pills.
adobe.com
Design character
A photograph with a short sentence
The first screen is a full-viewport photograph. A short stack sits on the left: a bold one-word label, a huge tightly leaded headline of a few words, one or two plain sentences, and a single pill. A row of category chips sits on the photo. Below, the page turns white, centers a large headline with a two-line dek, then a horizontal row of picture cards. Later bands return to photography for a feature and a quote, then a black footer. Motion is the hero advancing on its own, with a circular pause control, and sections easing up into place. Copy stays short. Tone is direct and confident. Hierarchy is size first, then weight.
Typography
Two faces from one family. Adobe Clean Display Black carries headlines at 900, with tight leading and negative tracking. Adobe Clean carries everything else at 400 or 700. Headlines are a few words. Supporting lines are one or two sentences at 20px. Labels and buttons are 14px and bold. Nothing is small for decoration.
Color system
The interface is black and white. Color lives in the photographs and in small product icons. Text is pure black or pure white. A softer gray is black at lower strength on white. Cards lift only to a light gray. The footer inverts to a black band with white type.
Spacing and geometry
An 8px rhythm, loosened hard between sections and kept tight inside the hero stack. Controls are a fixed 40px tall. Cards and sections use large, even padding rather than shadows.
Layout
The hero is edge to edge, with the story locked to the left third and the picture doing the rest. After the curve into white, headlines center and cards run in a horizontal row. The footer is a full-width black band of link columns.
Motion
The hero plays by itself. Slides crossfade, the headline is replaced, and the selected chip moves with the slide. A circular pause control sits at the lower right of the photograph. Entrances rise and fade rather than bounce. Hovers are short easings on fill and stroke.
UI fingerprint
- Photography is the color. The chrome stays black and white. Large areas of the page are pictures. Buttons, type, chips, and the footer only use black and white. Adding a brand color to the controls would fight the photographs.
- Headlines are heavy, tight, and short. Display Black at 80px or 56px, leading near 1, and tracking around -0.03em to -0.04em. The line is a few words. Body never tries to match that scale.
- Actions are pills, and there is only one of them in a stack. A 40px white pill with 14px bold type, or the same shape as a 1px outline. The hero does not offer a row of competing buttons.
- Corners are soft and shadows stay out of the way. 999px on controls, 16px on cards, 8px on chips, 32px where the white sheet meets the photo. Depth comes from the picture and from a gray card fill, not from a drop shadow.