Design teardown
Figma
A white marketing page with black type, wide margins, and color held inside product scenes. Controls are solid black or thinly outlined, copy stays to one or two short lines, and motion is a brief ease-out.
figma.com
Design character
Monochrome open canvas
The page is a tall white field with a fixed header and a black footer. Large type sits in a wide column, product scenes carry the color, and the interface chrome stays black, white, and a few grays. Corners are softly rounded, shadows are almost absent, and the writing is short and declarative.
Typography
Interface text uses figmaSans at computed weights 330 and 400. Large sizes tighten the tracking and keep the line height close. figmaMono appears for uppercase group labels, menu eyebrows, and tiny status chips.
Color system
The chrome is white, black, and gray. A 16% black ring reads as a light gray hairline. Saturated color shows up in product imagery and in five small mark fills, not in buttons or type.
Spacing and geometry
Vertical rhythm is loose. Sections use 80px of block padding and the footer uses 120px. Button padding includes 12px and 22px, so the grid is mostly 8px with a few off-steps.
Layout
A fixed header spans the viewport. Main sections sit in a centered column about 1520px wide on a 2227px screen, with a measured content token of 1680px. Media frames run wide, then text splits into two columns.
Motion
Controls change background and ring over 0.18s ease-out. The wide button also animates its radius. Media autoplays, and a template row moves with pause, previous, and next.
UI fingerprint
- White field, black type Page and header are #ffffff. Text, solid buttons, and the footer are #000000. Gray is only for secondary lines and hairlines.
- Tight large type 64px type has a 1 line height and -0.031em tracking at weight 400. Section lines repeat the same tight tracking at 48px and 32px.
- Radius by importance Header actions are 8px, the hero action is 16px, the banner is 24px, and media controls are full pills.
- Color stays in the scenes Interface chrome does not use the mark hues. Those five fills, and the product frames, are where chroma appears.