Design teardown
HubSpot
Warm paper, a light serif, and orange used only when something can be clicked.
hubspot.com
Design character
A brochure set in light type
The homepage is a wide, calm marketing page on warm off-white. A small uppercase sans kicker sits over a large light serif headline, then one or two light sans sentences, then a pair of buttons. Later sections switch to a left serif title with short explanatory copy beside it. Product blocks use a short title, two brief lines, and a text link. Proof is a longer quotation, a name and role, and a few large serif figures. The tone is plain and reassuring, with sentences that close on a period.
Typography
Two custom families split the work. HubSpot Serif carries headlines, photo lines, and big figures at a light or medium weight. HubSpot Sans carries body, navigation, and buttons. Body and headlines both sit at weight 300, so hierarchy comes from size and from the serif, not from boldness. Tracking stays at zero, including the uppercase kicker.
Color system
A warm off-white page, near-black text, and cream used for type on photography and in the footer. Orange is the only strong color, and it is limited to buttons, checks, link underlines, and the selected tab. A peach band and full-bleed photos do the rest of the color work.
Spacing and geometry
An 8px rhythm with a 4px half-step. Sections use 24, 40, and 64px of vertical padding. The text column stops at 1080px, while the photo row runs wider with an 8px gap.
Layout
The hero is centered in a column about 1080px wide. Below that, sections go left: a serif title in one column and short copy in the next, then a wider row of square photo tiles, then white cards on the paper. The footer is a full-width ink band.
Motion
Motion is short and linear. Buttons recolor in 150ms. Carousel slides move and fade in 300ms. A logo row scrolls at a constant speed. Nothing bounces.
UI fingerprint
- Orange is the click, and almost nothing else. Filled buttons, outlined buttons, checks, and the active tab rule share #ff4800. Large areas stay paper, white, peach, or photography, so the orange stays easy to find.
- Headlines are light serif, and body is light sans. Weight 300 does the reading at 65px, 40px, and 16px. Medium weight is saved for buttons, kickers, and card titles. The page feels soft because it rarely goes bold.
- Corners split by job. Buttons are 8px, cards and video frames are 16px, chips are 4px, and the photo tiles are square. The mix keeps the marketing soft without rounding the photography.
- Structure is a hairline and one soft header shadow. Cards and chips use a 1px line in #e3e3e3. Depth on the rest of the page is a background change, from paper to white to peach to ink, rather than stacked shadows.