01Restraint
Remove what doesn't earn its place.
Every accent, every animation, every gradient is asked: 'what would the page lose if this were gone?' If the answer is 'not much', it goes. Jony Ive's first edit is always a subtraction.
PRDesign principles
How we make visual decisions.
Eight principles — the rules behind every page, every component, every animation. Companion to our manifesto: that one is what we believe about the product; this one is how we decide what to ship.
02Repetition
Brand consistency is design discipline at scale.
Every page hero uses the same numbered eyebrow. Every card uses one of two materials. Every primary CTA uses the same physics. Nothing is bespoke unless bespoke is the point — and bespoke is almost never the point.
03Materials
Surfaces should feel like they have weight.
Frosted glass with backdrop-saturate, not flat tints. Top-edge inner highlight on every glass card so the eye reads thickness. Outer shadow that breathes on hover. This is what separates a 2026 product page from a 2018 one.
04Hierarchy
Three font sizes per screen. No more.
Display headline. Body. Mono label. Anything else is decoration. The .font-display utility tightens letter-spacing and enables SF-Pro-leaning OpenType features so the headline does the work without a second size to help it.
05Motion
Slow-out, deliberate arrival.
cubic-bezier(0.16, 1, 0.30, 1). Slower than spring physics, more intentional than ease-out. Apple's product-video curve. Click flashes pulse once, slowly, then wait — they don't strobe.
06Color
One accent. Coral.
Violet is the cool base. Coral (#F472B6) is the warm signal. Cyan appears in ambient washes only. Every other color is semantic (emerald for success, rose for danger, amber for warning) and used only at semantic boundaries.
07Density
Apple-grade vertical rhythm.
py-28 for major sections. py-12 for sub-sections. Line-height 1.75 for body, 1.04 for display. Whitespace is the design — every page should feel like it can breathe without scrolling.
08Honesty
Design must tell the truth about state.
Live = pinging dot. Disabled = greyed. Loading = skeleton. Don't disguise an inactive feature as active just because it looks better. The product page should accurately reflect what shipped.
Companion piece
Our manifesto — what we believe about the product.