Designing like Apple.

Clarity, Deference, Depth

Apple's Human Interface Guidelines rest on three ideas. Everything else flows from them.

Big, confident typography

Apple leads with huge, tightly-tracked headlines in a clean sans-serif (San Francisco). The type is the design — bold weight, negative letter-spacing, generous line spacing.

<div class="bigtype">
  <p class="pretitle">Studio Display</p>
  <h1>Stunning in<br>every sense.</h1>
  <p class="sub">5K Retina. 600 nits. Pure clarity.</p>
</div>

h1 {
  font-family: -apple-system, 'SF Pro Display', sans-serif;
  font-size: clamp(2.2rem, 6vw, 4rem);  /* big, fluid */
  font-weight: 700;
  letter-spacing: -0.04em;   /* tighten large type */
  line-height: 1.02;
}

Generous whitespace

Apple gives every element room to breathe. Whitespace isn't empty — it's what makes the content feel important and the page feel calm and expensive.

<section class="feature">
  <h2>Less, but better.</h2>
  <p>One idea per screen. Lots of space around it.</p>
</section>

.feature {
  padding: 90px 24px;       /* generous breathing room */
  max-width: 720px;
  margin: 0 auto;           /* center one idea */
  text-align: center;
}

Restrained color

Mostly white, near-black, and shades of grey — with one confident accent (Apple's signature blue) reserved for links and buttons. Color is used sparingly, so it means something.

:root {
  --canvas: #fbfbfd;   /* page background  */
  --ink:    #1d1d1f;   /* near-black text  */
  --grey:   #6e6e73;   /* secondary text   */
  --accent: #0071e3;   /* one bold accent  */
}
body { background: var(--canvas); color: var(--ink); }
a, .btn { color: var(--accent); }   /* accent only where it matters */

<a href="#" class="btn">Buy</a>   <!-- the rare splash of blue -->

The centered product hero

The most recognizable Apple layout: a short name, a big headline, two text links (Learn more / Buy), then the product centered on white with nothing competing for attention.

<section class="hero">
  <p class="eyebrow">YourPhone Pro</p>
  <h1>Titanium. So strong. So light.</h1>
  <p class="price">From $999 or $41.62/mo. for 24 mo.</p>
  <div class="links">
    <a href="#">Learn more ›</a>
    <a href="#">Buy ›</a>
  </div>
  <img src="product.png" alt="" class="product">
</section>

/* everything centered, product on a clean background */
.hero { text-align: center; padding: 80px 24px; background: #fff; }
.hero .links { display: flex; gap: 24px; justify-content: center; }
.links a { color: #0071e3; text-decoration: none; }
.product { max-width: 70%; margin: 40px auto 0; display: block; }

Soft depth & material

Apple uses gentle shadows, rounded corners, and frosted-glass blur (“materials”) to layer the interface. backdrop-filter: blur() is the CSS behind that translucent navigation bar look.

<div class="glass">
  <h4>Frosted glass</h4>
  <p>backdrop-filter: blur(16px)</p>
</div>

.glass {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(16px);          /* the frosted effect */
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 18px;
}
/* big, soft, rounded — never harsh */
.card { border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.12); }

They tell a story, one scroll at a time

An Apple page isn't a brochure — it's a guided story. You scroll, and it reveals one idea at a time, often pinning the product in place while the words change around it. That's “scrollytelling,” and the CSS behind the pinning is position: sticky. Scroll inside the box:

<div class="story">
  <img src="phone.png" class="product" alt="">   <!-- pinned -->
  <div class="scenes">
    <section class="scene">
      <h4>Meet YourPhone.</h4>
      <p>Scroll down — the product stays put.</p>
    </section>
    <section class="scene">
      <h4>Titanium.</h4>
      <p>Strong, and impossibly light.</p>
    </section>
    <section class="scene">
      <h4>All-day battery.</h4>
      <p>From sunrise to long past sunset.</p>
    </section>
    <section class="scene">
      <h4>One more thing…</h4>
      <p>The story ends with a single call to action.</p>
    </section>
  </div>
</div>

/* the visual stays pinned while the captions scroll past it */
.product { position: sticky; top: 0; }

/* each "scene" gets its own full-height block, revealed in turn */
.scene { min-height: 100vh; display: flex; align-items: center; }

Designed from the user's point of view

Apple writes for the person, not the spec sheet. Every page answers “what does this do for me?” before it ever mentions a number — a UX-first way of thinking you can copy on any project.

Why Apple almost never uses bullet points

Bullet lists read like an instruction manual. Apple instead stacks short, confident statements with plenty of space — each one a mini-headline you can't help but read. Same information, completely different feeling.

The technology behind the magic

None of it is exotic — it's standard web tech used with discipline. Here's the toolkit, and exactly how to use each piece on your own page.

Scroll reveals — IntersectionObserver

Elements fade and rise into view as you reach them. Scroll down a touch and these appear:

<div class="reveal">     <!-- each starts hidden; JS adds .in -->
  <h4>Fast</h4>
  <p>Reveals on scroll.</p>
</div>
<div class="reveal">
  <h4>Light</h4>
  <p>CSS plus a few lines of JS.</p>
</div>
<div class="reveal">
  <h4>Subtle</h4>
  <p>Never overdone.</p>
</div>

// add the .in class when an element scrolls into view
const io = new IntersectionObserver((entries) => {
  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
}, { threshold: 0.2 });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));

.reveal     { opacity: 0; transform: translateY(24px); transition: .6s ease; }
.reveal.in  { opacity: 1; transform: none; }

Autoplay product video

Apple loops short, muted clips instead of static images. Always muted + playsinline so it autoplays on phones too.

<video autoplay muted loop playsinline poster="product.jpg">
  <source src="product.mp4" type="video/mp4">
</video>

font-family: -apple-system, "SF Pro Display", system-ui, sans-serif;

.product { position: sticky; top: 0; }

.nav { background: rgba(255,255,255,.72); backdrop-filter: blur(20px); }

<img src="p.jpg" srcset="p.jpg 1x, p@2x.jpg 2x, p@3x.jpg 3x"
     alt="" loading="lazy">

.scroller { scroll-snap-type: y mandatory; }
.section  { scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

html { scroll-behavior: smooth; }

How to apply the Apple feel

• Lead with one big headline per section — tighten the letter-spacing.
• Add more whitespace than feels comfortable, then a little more.
• Stick to white, black, grey + one accent. Resist extra colors.
• Center the content and let the product/image be the hero.
• Use rounded corners and soft shadows — nothing sharp or heavy.
• Keep buttons pill-shaped and motion subtle.

A pill button, the Apple way