# Apple Content Hierarchy > Structure and write content the way apple.com does — the eyebrow → headline → body hierarchy, sentence-case headlines ending in periods, verb-led benefit copy, the rule of three, one-idea-per-block discipline, and the specific content recipes Apple uses for heroes, section headers, promo cards, product tiles, feature galleries, comparison tables, spec lists, FAQs, footnotes, CTAs, and support copy. Use this whenever writing or restructuring any marketing page, landing page, product page, pricing page, feature section, card, hero, empty state, or microcopy — and whenever the user asks how to word things, how to lay out information, how to make copy sound premium or "like Apple", or why their page feels cluttered or generic. Pairs with the apple-design-system skill, which covers the visual layer; this one covers what goes in the slots and how it is written. - Skill: `parthkishan20/apple-content-hierarchy` (Agent Skill) - Install (CLI): `npx skillmds@latest add parthkishan20/apple-content-hierarchy` - Raw SKILL.md: https://api.skillmd.com/api/skills/parthkishan20/apple-content-hierarchy/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: parthkishan20 (https://skillmd.com/u/parthkishan20) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/parthkishan20/apple-content-hierarchy --- # Apple Content Hierarchy Apple's pages look calm because the content is structured before it is styled. Every block on apple.com fills a small, fixed set of slots, each slot carries exactly one job, and the writing in each slot follows rules tight enough to be checkable. Copying the visual system without this produces good-looking pages that still read as noise. This skill covers **what goes in each slot and how it's worded**. For colors, spacing, and component CSS, use the `apple-design-system` skill alongside it. Values marked **[verified]** were read from Apple's compiled `typography-*` stylesheet. **[observed]** means captured from live apple.com pages. **[measured]** means third-party teardown. **[derived]** means a consistent extension where Apple publishes nothing. Prefer verified values; never invent a new one where a verified one exists. --- ## The core pattern Almost every content block on apple.com is some subset of four slots, always in this order: ``` EYEBROW → what category is this? (small, semibold, dark) HEADLINE → what's the one benefit? (large, semibold, dark) BODY → how does it work? (small, regular, gray) ACTION → where do I go next? (link or control) ``` The hierarchy trick people usually miss: **the eyebrow and headline share the same weight (600) and the same color, and differ only in size.** Same weight says "these belong together, both matter." Size assigns reading order. The body then separates by *color* (gray) rather than by weight, so it recedes without looking disabled. That's why the eyebrow can be bold yet clearly subordinate. If you instead make the eyebrow gray or light-weight, it stops reading as a label and starts reading as a caption — the whole block loses its anchor. **One idea per block.** If a headline contains "and," you probably have two blocks. If body copy needs a second sentence to introduce a new concept, you have two blocks. --- ## Type values for the slots [verified] Desktop is ≥1069px, tablet ≤1068px, mobile ≤734px. All eyebrow and headline styles are weight **600**, SF Pro Display. Body styles are weight **400**, SF Pro Text. Apple's typography classes set **no color** — color comes from the section theme. | Slot | Desktop | Tablet | Mobile | |---|---|---|---| | Eyebrow (elevated) | 28px / 1.143 / .007em | — | — | | Eyebrow (standard) | 24px / 1.167 / .009em | 21px / 1.190 / .011em | ~19px *[derived]* | | Eyebrow (reduced) | 21px / 1.190 / .011em | — | 19px / 1.211 / .012em | | Headline (elevated) | 64px / 1.0625 / −.009em | 48px / 1.083 / −.003em | 40px / 1.1 / 0em | | Headline (standard) | 48px / 1.083 / −.003em | 40px / 1.1 / 0em | 32px / 1.125 / .004em | | Headline (reduced) | 40px / 1.1 / 0em | 32px / 1.125 / .004em | 28px / 1.143 / .007em | | Intro / lead | 21px / 1.381 / .011em | — | 19px / 1.421 / .012em | | Body | 17px / 1.471 / −.022em | 17px | 17px | | Body (reduced) | 14px / 1.429 / −.016em | 14px | 14px | | Footnote | ~12px / 1.33 *[measured]* | | | Read the pattern so you can extend it: **larger sizes take tighter line-height and more negative tracking; smaller sizes take looser line-height and positive tracking.** Body stays 17px at every breakpoint — it does not scale. Slot colors **[measured]**: eyebrow and headline `#1d1d1f`, body `#6e6e73`, footnote `#86868b`, links `#0066cc`. Vertical gaps between slots **[derived from observed rhythm]**: eyebrow → headline 8px, headline → body 12–16px, body → action 16–20px. --- ## Writing rules These apply to every slot on every page type. **Sentence case, always.** "Save on iPad with education pricing." Not "Save On iPad With Education Pricing." Sentence case scans faster and is Apple's marketing standard. The one documented exception: Apple's HIG prescribes **title case for in-app button labels** ("Add to Cart"), so native UI follows a different rule than marketing web copy. **Headlines end with a period.** This is the most recognizable Apple tic and the cheapest to adopt. The period turns a fragment into a statement and stops the eye. "Pay over time, interest-free." reads as settled; without the period it reads as an unfinished thought. **No exclamation marks.** Ever. Apple's confidence comes from understatement; an exclamation mark signals the writer is trying to generate excitement the product didn't earn. **Lead with a verb or a benefit, never a feature.** "Get credit towards your next iPad." not "Trade-in program available." The benefit is what the reader gets; the feature is what you built. **Use digits for numbers and prices.** "Save up to $905." "24 or 36 months." Digits are scannable; spelled-out numbers hide in the text. **Second person.** "your next iPad," "when you trade in." Apple addresses one reader, not a market. **Body elaborates, never echoes.** The body's job is the *condition* or the *how* that the headline omitted. Headline "Save with Apple Trade In." → body "Get credit towards your next iPad when you trade in an eligible device." If the body repeats the headline's nouns, rewrite it or delete it. **Read it aloud.** Apple's HIG says this literally: when in doubt, read your writing out loud. If you run out of breath or stumble, cut. ### Rhythm patterns Apple reuses - **Two-beat.** `[Verb] it [prep]. [Verb] it [prep].` — "Dream it up. Jot it down." The safest default for a short headline. - **Three-beat (tricolon).** `[Verb] it. [Verb] it. [Verb] it.` — "Love it. Lease it. Upgrade it." Three is the minimum to establish a pattern. Reserve this for hero moments; used everywhere it becomes a gimmick. - **Anaphora.** Repeat the opening word across clauses — "Your photo. Your font. Your widgets. Your iPhone." - **Benefit + qualifier.** `[Benefit], [qualifier].` — "Pay over time, interest-free." The comma does the work of a whole second sentence. Parallel structure is the requirement, not the beat count. "Love it. Lease it. Upgrade it." works because all three are verb + "it." Break the parallel and the rhythm collapses. ### Length budgets [observed] | Slot | Words | Characters | |---|---|---| | Eyebrow | 1–3 | 8–22 | | Headline | 3–8 (one clause) | 25–48 | | Body | 10–25 (one sentence) | 60–160 | | Intro / lead | 15–30 | — | | CTA / link | 1–3 | — | --- ## Content recipes by block type Each recipe lists the slots in order, the rules specific to that block, and real examples. ### Section header ``` HEADLINE (large, sentence case, period) LINK (top right, verb-led, chevron) ``` The section headline states the section's thesis; the top-right link is the single section-level action. No body copy at section level — the cards below carry it. Example **[observed]**: "Why Apple is the best place to shop iPad." with "Shop iPad ›" aligned right. Apple inserts non-breaking spaces to control where headlines wrap, so the break lands on a sense boundary rather than wherever the viewport says. Worth doing on any headline over ~5 words. ### Hero ``` EYEBROW (product or category name — optional) HEADLINE (elevated size, the single positioning claim) INTRO (21px lead, one sentence — optional) ACTIONS (primary + secondary, max two) ``` The hero makes one claim. Not a feature list, not three benefits. If you can't reduce the page's value to one clause, the page isn't ready to design. ### Promo / why-buy card ``` EYEBROW (program or category name) HEADLINE (reduced size, the benefit) BODY (one sentence: the condition or how) FOOTNOTE (superscript marker, if a claim) CONTROL (circular + or ›, bottom right) ``` This is the card in the screenshot pattern. Real triplets **[observed]**: - Apple Trade In → "Save with Apple Trade In." → "Get credit towards your next iPad when you trade in an eligible device.¹" - Education → "Save on iPad with education pricing.*" → "College students and educators can save through the Apple Store." - Personal Setup → "Meet your new iPad with Personal Setup." → "Jump into online sessions with a Specialist to set up your iPad and discover new features." - Delivery and Pickup → "Get flexible delivery and easy pickup." → "Choose two-hour delivery from an Apple Store, free delivery or easy pickup options." - Engraving → "Personalize your iPad for free." → "Engrave your new iPad with a mix of emoji, names, initials and numbers." Note the eyebrow capitalization rule: **Title Case for proper program names** ("Apple Trade In," "Ways to Buy"), sentence case for generic categories. ### Product tile (lineup / compare row) ``` IMAGE NAME (product name only — no tagline in the name slot) TAGLINE (one short positioning line) PRICE ("From $X" or "$X/mo. for 12 mo.") ACTIONS ("Learn more" + "Buy" — exactly two) ``` Apple pairs precisely two actions per product tile: a secondary text link to go deeper and a primary button to transact. Adding a third ("Compare," "Watch video") splits attention and measurably weakens both. ### Feature gallery tile ``` EYEBROW (feature area — optional) HEADLINE (the experience, not the spec) BODY (one sentence — often omitted entirely) ``` Feature tiles are where the temptation to list specs is strongest. Apple writes the experience and puts the spec in the tech-specs page. "1,000 songs in your pocket" rather than "5GB hard drive" is the canonical instance of this choice. ### Comparison table ``` COLUMN HEADS (product names, image + name only) ROW LABELS (plain-language attribute names) CELLS (short values, digits, consistent units) ``` Row labels use human words ("Battery life," "Weight"), not internal taxonomy. Keep every cell in a row in the same format and unit — mixed formats are what make comparison tables feel like spreadsheets. ### Spec list ``` GROUP HEADING (category) LABEL : VALUE (pairs, one per line) ``` This is the one place plain technical language is correct. No persuasion, no benefits — the reader arrived here specifically for facts. Keep the ordering identical across products so the page can be diffed by eye. ### FAQ / accordion ``` QUESTION (semibold, phrased in the user's words, ends with ?) ANSWER (body, 1–3 sentences, leads with the answer) ``` Write questions the way a customer would ask them, not the way the org describes them. Answer first, explain second — never build to the answer. ### Footnotes & legal ``` MARKER (superscript, at the end of the claim it qualifies) TEXT (page bottom, ~12px, #86868b) ``` Apple runs two parallel marker systems **[observed]**: **numbers** (¹ ² ³) for substantive disclosures, and **symbols** (`*` `**` `***`, then `†` `‡` `§`) for promoted or priority claims. Keeping them separate means a promoted legal line doesn't disturb the numeric sequence. Claims are framed with "up to" and "as low as" — "Save up to $905," "start as low as $11.99/mo." The attractive number goes in the headline; the qualifying conditions go in the footnote. This is legally necessary and rhetorically deliberate, and it only works if the footnote is genuinely findable. ### CTA and links ``` Verb-led, 1–3 words, sentence case. Chevron (›) for navigational "go deeper" links. No chevron on primary buttons. ``` Real examples **[observed]**: "Learn more," "Shop iPad ›," "Buy," "Compare all models." Never "Click here," never "Read more," never "Submit." And behind short links, always attach a descriptive accessible label — Apple's own markup expands "Learn more" to "Learn more about Apple Trade In," "Learn more, education pricing," so screen-reader users get the context sighted users get from proximity. ### Support and help copy ``` TASK HEADING (what the user is trying to do) STEPS (numbered, one action per step) ``` Support copy drops the marketing voice entirely — it becomes plain, procedural, and literal. The voice stays friendly; the persuasion goes away. Apple's HIG frames this as modulating tone while keeping voice constant. ### Empty and error states ``` HEADLINE (what's happening, neutral) BODY (what to do about it) ACTION (the fix) ``` Never blame the user, never expose error codes in the headline, and always give the next action. "No results" plus a suggestion beats "Your search returned 0 results." --- ## Rewrites Generic → Apple-style. The pattern in each: cut the hedging, lead with the verb, drop the title case, add the period. | Generic | Apple-style | |---|---| | "Our Trade-In Program Offers Great Savings!" | "Save up to $905 with Apple Trade In." | | "Financing Options Available" | "Pay over time, interest-free." | | "Learn More About Our Education Discounts" | "Save on iPad with education pricing." | | "We Offer Fast Shipping and Store Pickup" | "Get flexible delivery and easy pickup." | | "Customize Your Device With Free Engraving!!!" | "Personalize your iPad for free." | | "Get Help Setting Up Your New Device" | "Meet your new iPad with Personal Setup." | | "Talk to a Sales Representative Over Video Chat" | "Shop live with a Specialist." | | "A Powerful Tablet for Work, Play, and Everything in Between" | "For work, creativity, or play." | | "Click Here to Buy Now!" | "Shop iPad ›" | | "Our platform leverages AI to streamline your workflow" | "Get through your work faster." | | "Enterprise-Grade Security Features Included" | "Your data stays yours." | | "Sign Up Today to Start Your Free Trial!" | "Try it free for 30 days." | --- ## Why it works Useful to know so you can make judgment calls the rules don't cover. - **Cognitive fluency.** Information that's easy to process gets judged as more likeable and more true (Reber, Winkielman & Schwarz, 1998). Short fragments and large type aren't just aesthetics — they buy credibility. - **Chunking.** Working memory holds about four chunks (Cowan, 2001). Four cards, one idea each, sits exactly at capacity. Six dense cards does not. - **Layer-cake scanning.** Per Nielsen Norman Group, users fixate mostly on headings and subheadings when those are descriptive and visually distinct. This is the practical test below: your eyebrows and headlines alone must carry the message. - **Progressive disclosure.** Deferring detail to a secondary layer makes interfaces easier to learn (Nielsen, 1995). That's the job of the "+" control — one sentence visible, full terms one tap away. - **Anchoring and loss aversion.** "Save up to $905" sets a reference point and frames inaction as losing money rather than not gaining it. - **Risk reversal.** "interest-free," "for free," free returns — each removes a specific objection at the moment it would occur. - **Restraint on urgency.** Apple almost never uses countdowns or "Hurry." Manufactured scarcity reads as cheap and undercuts a premium position. --- ## The layer-cake test Before shipping any page: **hide the body copy and read only the eyebrows and headlines.** If the page still communicates what's on offer, the hierarchy works. If it reads as a list of vague nouns, the headlines are doing too little and the body is doing too much — fix the headlines before adding anything. ## Self-check - [ ] Every block has one idea; no headline contains "and" joining two concepts - [ ] Headlines are sentence case and end with a period - [ ] Eyebrow and headline share weight 600 and color `#1d1d1f`; only size differs - [ ] Body is gray (`#6e6e73`), regular weight, and adds the condition rather than repeating the headline - [ ] No exclamation marks anywhere - [ ] Numbers and prices are digits - [ ] Copy addresses "you," not "users" or "customers" - [ ] Exactly one primary action per card; at most two per hero - [ ] Links are verb-led with descriptive accessible labels behind short text - [ ] Claims with "up to" / "as low as" have a reachable footnote - [ ] The page passes the layer-cake test ## Anti-patterns Title Case Headlines Everywhere · exclamation marks · "Click here" / "Read more" / "Submit" · headlines that are two ideas joined by "and" · body copy restating the headline · three or more CTAs competing in one card · spelled-out numbers in benefit claims · feature-speak in marketing slots ("leverages," "enterprise-grade," "seamless," "robust") · countdown timers and fake scarcity · gray light-weight eyebrows · buried or missing footnotes on qualified claims. --- ## Caveats worth knowing - Mobile eyebrow and body steps were not all captured verbatim from Apple's stylesheet; the values marked *[derived]* follow the visible pattern but should be sanity-checked against a live inspection. - All slot colors are third-party measured — Apple's `typography-*` classes carry no color, so the mapping of specific hex to specific slot is inferred from rendered pages. - `typography-section-headline` and `typography-caption` are **not** real Apple class names, despite appearing in some community write-ups. The real classes are `typography-headline` / `typography-headline-elevated` and `typography-body-reduced`. - Dollar figures like "$905" are point-in-time and vary by device and region. - HIG title case for in-app buttons genuinely conflicts with marketing sentence case. Follow HIG inside apps, this skill on the web.