Apple HIG
You might say
I want that polished Apple website feel: big images, big type, and lots of white space.
Use precise hierarchy, generous space, and polished product imageryApple-style web design combines large, controlled type, focused storytelling, high-quality product visuals, and restrained motion. The useful lesson is the clarity of the presentation, not copying Apple's fonts, hardware shapes, glass effects, or page transitions.
Scroll sideways to explore the full example
Design Principles
- Give each section one clear message
- Use large type with disciplined line length and spacing
- Let product imagery explain real form and behavior
- Keep controls familiar and visually precise
- Use motion to connect states, not to delay the story
When to use it
- Hardware or premium product launchThe new one is here.
- A focused feature storySample priceBuy >
- A brand with strong original imagery
- A page that can support careful art directionForest Focus★ 4.9 · 1st place in efficiency category
When NOT to use it
- Copy Apple's assets or interface detailsIn a data-dense back-office tool, excessive whitespace wastes useful space.
- Use huge headings when the content is weakFrosted glass everywhere
- Hide basic information behind scroll effectsLow-resolution images + mismatched corner radii + default typographyMismatched image and component details weaken the overall quality.
- Apply glossy surfaces to an unrelated productExpense-report approval (80px between each field)Form tools should prioritize information density and completion efficiency.
Anatomy
Large rounded corner 16-28px
Frosted glass
Layered soft shadow
Gradient accent
AaLarge fonts with tight kerning
Generous whitespace
Use generous corner radii consistently across cards, buttons, and icons.
Translucent surfaces can borrow color from the background, but text and controls still need sufficient contrast.
A crisp edge and soft shadow create visual elevation; tune them to the component and surrounding surface.
Use gradients sparingly to add emphasis or suggest material depth, while preserving contrast.
Large, tightly set display type can create impact; test tracking and line breaks separately in Chinese and English.
Use generous whitespace to focus attention while keeping the next step and essential context visible.
AI Prompt
Premium product page with generous whitespace, one focused message per screen, frosted-glass navigation, 16–28px continuous corner radius, layered soft shadows, restrained gradient accents, large headlines with tight tracking
Typical use cases
Product launch
Scroll sideways to explore the full example
Feature story
Scroll sideways to explore the full example
Hardware page
Scroll sideways to explore the full example
Premium service
Scroll sideways to explore the full example
Further reading
