Design teardown
1Password
Light display type on deep color fields, with pill actions and almost no shadow.
1password.com
Design character
Light type on deep fields
A white page holds a gold notice, a white bar, then large inset panels in iron and blue. Headlines are sentence case, two or three lines, and set light so size does the shouting. Support copy is one or two sentences. Actions are two or three words. The only long passage is a single quote paragraph. The tone is calm, plain, and institutional.
Typography
One variable sans does every job. Display stays at weight 300 with tight tracking. Interface text sits at 16px, mostly weight 350. Uppercase kickers are the only loud labels, and they stay the same size as body.
Color system
The page ground is white. Large rounded fields are iron or blue. The hero moves from iron through blue into a pale blue. Gold is only the top notice. Type is black on white, white on the dark fields, and a gray for the quote.
Spacing and geometry
A 4px rhythm with wide page insets and tall section padding. Panels are separated by a small outer margin, then padded heavily inside.
Layout
A sticky white bar over a centered column. Marketing sections are wide rounded color fields, not a stack of bordered cards. On a wide screen the product area is four columns.
Motion
Entrances are a short rise and fade. Hovers recolor a pill or grow an underline. Menus travel a small distance sideways. Nothing bounces, and nothing casts a shadow to show depth.
UI fingerprint
- Headlines stay light, and size is the hierarchy. Display, titles, and feature names are weight 300 with tracking at -0.02em. A heavier headline would break the calm. The quote is the first step up, to weight 350, and it is still not bold.
- Color arrives as large rounded fields, not as borders. Iron #1d1d21 and blue #145fe4 fill inset panels with 24px to 48px corners. The page ground stays #ffffff. Gold #cbb88e is only the thin notice.
- Actions are pills. Quiet actions are underlined words. The primary pill is #145fe4 with white type, or white with #145fe4 type on a dark field. The alternate is a 1px outline. Text actions use a 1.5px underline and no chip.
- Motion is a short fade and a few pixels of travel. Hero content rises 20px in half a second. Menus slide 25px. The switch takes 0.15s. Shadows are not used to explain the layout.