CURATED · OPEN · FREE

Apple

A premium hardware showcase defined by cinematic dark layouts, pristine typography, and absolute restraint.

HardwarePremiumRestraintEditorial

↓ Download design system (39 MB)Open in OpenDesign

Visit: https://www.apple.com

📦 Browse pack contents →

Identity DNA

premiumminimalisthardwareeditorial

A high-end product gallery showcasing hardware with cinematic photography and restrained typography.

Color

#0071e3Accent

#1d1d1fInk

#86868bInk soft

#000000BG

#f5f5f7BG soft

rgba(255,255,255,0.8)Line

Extreme contrast between pure black, soft neutral grays, and crisp white text for a premium feel.

Typography

humanist-sans

display48px · 700
subtitle28px · 400
body17px · 400
caption12px · 400

Navigation text is extremely small and tightly spaced. · Headlines use tight tracking and high weight. · Body text maintains a generous line height for readability.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical padding around hero sections to emphasize whitespace and focus.

Surfaces

sm · 0px

md · 8px

lg · 0px

pill · 980px

1px solid rgba(255,255,255,0.8) for dark outlines, 1px solid #1d1d1f for light elements

rgba(0, 0, 0, 0.22) 3px 5px 30px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width edge-to-edge hero sections with centered content.

Motion & Interaction

180msmicro

240mssmall

400msmedium

cubic-bezier(0.4, 0, 0.6, 1)easing

Smooth opacity and transform transitions on hover. · Subtle fade-ins for UI elements.

Color transitions on links and buttons. · Subtle scale or opacity change.

Components

button Pill-shaped primary buttons with solid background and outline secondary buttons.
card Full-width product cards defined by large imagery and centered text.
hero Cinematic full-screen product photography with centered headline and dual CTA buttons.

Voice & Don'ts

Tone Confident, concise, and authoritative.
Headlines Short, punchy product names and single-word taglines.
CTAs Direct action verbs like 'Learn more' and 'Buy'.

Don't use heavy drop shadows — screenshot shows minimal, subtle elevation shadows.
Don't use complex gradients — screenshot shows solid, flat backgrounds.
Don't use small, cluttered typography — screenshot shows massive, clean display fonts.
Don't use bright, clashing colors — screenshot shows a highly restrained palette.
Don't use complex grid layouts — screenshot shows simple, centered, linear stacking.
Don't use decorative borders or frames — screenshot shows content breathing in open space.
Avoid: Overly technical jargon.
Avoid: Excessive exclamation points.
Avoid: Cluttered or busy layouts.
Avoid: Multiple competing colors.

Inside the pack — real screenshots

Apple — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Captured from the live site · real computed styles

System prompt

This design represents the ultimate refinement of premium hardware marketing. It relies on massive, centered typography (humanist-sans) against pure black or soft neutral gray backgrounds, creating a cinematic, editorial feel. The primary palette is strictly limited to #000000, #f5f5f7, and #1d1d1f, with a single high-contrast accent color of #0071e3 for primary actions. Key constraints include avoiding visual clutter, resisting the use of decorative elements, and maintaining absolute restraint in the color palette. Motion should be subtle and smooth, focusing on opacity and transform transitions to enhance the premium, seamless feel.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko