Design teardown
Squarespace
Black and white chrome. Photography supplies the color, and headlines stay light and large.
squarespace.com
Design character
A gallery with a quiet interface
The homepage is a black frame around full-bleed photography, with white chapters in the middle. Headlines are a few words, set large and light, in sentence case. Under each sits one plain sentence, usually under twenty words. Card titles are two or three words, sometimes in a serif. Actions are two uppercase words plus an arrow. The tone is calm and concrete. Hierarchy comes from size: a light display line, a small regular sentence, then a small solid button.
Typography
A light grotesque does the display work at a tight leading, and the same family drops to a small regular body. A companion serif appears only on titles that sit on photographs. Uppercase is reserved for navigation and buttons, at 14px and medium weight, with no extra tracking.
Color system
The interface is black and white. Gray is only for secondary menu copy, a selected chip, and a search field. Color lives in the photographs, not in the chrome.
Spacing and geometry
A 4px grid, used loosely. Vertical section space jumps to 120px and 240px. Controls stay compact inside that air.
Layout
Full-bleed chapters alternate white and black. Headlines are often centered. Card text is left aligned over the image. A fixed bar holds the logo, three text menus, a quiet text action, and one solid button.
Motion
Motion eases and does not bounce. The bar settles to black, menus take a little longer than buttons, and carousels slide between photographs.
UI fingerprint
- Photography holds the color. The chrome stays black and white. Large images carry brown, blue, and skin tones. Buttons, bars, and type do not. A tinted surface or a colored button would break the frame.
- Display type is light, tight, and very large. Actions stay small and uppercase. Headlines sit around 50–72px at weight 300 with tracking near -0.04em to -0.06em. The button is 14px medium. The contrast of scale is the voice.
- Corners are tight, except on filter pills. Buttons are 4px. Cards and the search field are 8px. Only the category chips are fully round. A pill-shaped primary button would look like a different brand.
- Chapters are full-bleed color blocks, not boxed sections. White and black bands do the separating. Shadows, cards-around-everything, and extra rules are absent. The only lines are a footer divider and the carousel circles.