An Apple-style landing page, without copying Apple
What makes a product page read as Apple-like: space, one product image, a short headline and plain specs. How to borrow the principles for your own app's site.
Many app makers want their site to feel like Apple's product pages. The look is easy to recognise and easy to get wrong, because what makes it work is not a font or a gradient. It is restraint: one idea per screen, and the product doing the talking.
The principles
- One message per section. A headline, a line under it, an image. Then the next section.
- Space. More than feels comfortable at first.
- The product as the hero, in a real window frame, at a size where it can be read.
- Short sentences that state what it does, not how revolutionary it is.
- Few colours. Neutral ground, white or near black, and one accent.
The hero
Centred headline in the system font, bold and large. One phrase can carry a two-stop gradient if the brand has one. Below: a white pill download button, then fine print with the version and the macOS requirement, then the app in a window frame with traffic lights.
.gradient-phrase {
background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}Specs and reassurance
A short row of plain facts works better than feature cards: runs on Apple silicon, no account needed, works offline. Only say what is true. The system font for all of it; see the SF Pro font stack.
What not to borrow
Apple's photos, product names, taglines or exact layouts. A page that looks like Apple's own reads as imitation, and it invites trouble. Use the principles with your own product and colours. The hero advice in a hero that shows the product applies here too.
macOS Native Dark UI covers both surfaces: the dense app window and its open, Apple-style marketing site, with the centred hero, gradient phrase, white pill download, version fine print and the app in a window frame.
Questions
What makes a landing page look like Apple's?
Large type, lots of space, one product image at a time, short sentences, and very few colours. The product is the decoration.
Can I use Apple's images or wording?
No. Borrow the principles, not the assets. Apple's images, product names and phrases are theirs, and a page that imitates their identity reads as a knock-off.
Does an Apple-style page work for a small app?
Yes, especially for a Mac or iOS app, where the style matches where the product runs. It works best when the product itself looks good in a screenshot.