---
name: "Apple"
description: "Clean, editorial layout with high-impact typography, vibrant crimson highlights, dark contrast red accent blocks, and signature Apple minimal, precision-aligned device showcases."
version: "1.0"
colors:
  primary: "#f73558"
  primary-strong: "#f03355"
  primary-hover: "#f84969"
  on-primary: "#ffffff"
  ink: "#1d1d1f"
  ink-strong: "#000000"
  body: "#6e6e73"
  body-muted: "#86868b"
  canvas: "#ffffff"
  surface-soft: "#f5f5f7"
  surface-muted: "#e8e8ed"
  surface-dark: "#1d1d1f"
  hairline: "#d2d2d7"
  hairline-soft: "rgba(0, 0, 0, 0.16)"
  accent-blue: "#0066cc"
  accent-blue-bright: "#0071e3"
  accent-dark-red: "#3c010d"
  accent-pink-soft: "#ffd6df"
  accent-pink-bright: "#fd3159"
  accent-rust: "#bf4800"
typography:
  display-xl:
    fontFamily: "SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: "64px"
    fontWeight: "700"
    lineHeight: "1.08"
    letterSpacing: "-0.025em"
  heading-xl:
    fontFamily: "SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: "48px"
    fontWeight: "700"
    lineHeight: "1.10"
    letterSpacing: "-0.02em"
  heading-lg:
    fontFamily: "SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: "32px"
    fontWeight: "600"
    lineHeight: "1.15"
    letterSpacing: "-0.015em"
  heading-md:
    fontFamily: "SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: "24px"
    fontWeight: "600"
    lineHeight: "1.20"
    letterSpacing: "-0.01em"
  body-lg:
    fontFamily: "SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: "19px"
    fontWeight: "400"
    lineHeight: "1.42"
    letterSpacing: "-0.005em"
  body-md:
    fontFamily: "SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: "17px"
    fontWeight: "400"
    lineHeight: "1.47"
    letterSpacing: "0em"
  caption:
    fontFamily: "SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "1.33"
    letterSpacing: "0em"
rounded:
  button-primary: "28px"
  button-secondary: "22px"
  card: "18px"
  badge: "12px"
  full: "9999px"
spacing:
  section-y: "96px"
  container-max: "1024px"
  grid-gap: "24px"
  card-padding: "32px"
  nav-height: "44px"
  localnav-height: "52px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.button-primary}"
    padding: "12px 22px"
    fontSize: "17px"
    fontWeight: "600"
  secondary-button:
    background: "{colors.surface-muted}"
    color: "{colors.ink}"
    borderRadius: "{rounded.button-secondary}"
    padding: "8px 16px"
    fontSize: "14px"
    fontWeight: "500"
  local-nav:
    height: "{spacing.localnav-height}"
    borderBottom: "1px solid {colors.hairline}"
    background: "rgba(255, 255, 255, 0.8)"
    backdropFilter: "blur(20px)"
    color: "{colors.ink}"
  offer-banner:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "0px"
    padding: "48px 24px"
  feature-card:
    background: "{colors.surface-soft}"
    borderRadius: "{rounded.card}"
    padding: "{spacing.card-padding}"
    border: "none"
  puzzle-tile:
    background: "{colors.accent-pink-soft}"
    borderColor: "rgb(208, 197, 200)"
    borderRadius: "4px"
    fontSize: "20px"
    fontWeight: "700"
  accordion-item:
    borderTop: "1px solid {colors.hairline}"
    padding: "20px 0px"
    iconColor: "{colors.body-muted}"
  global-footer:
    background: "{colors.surface-soft}"
    color: "{colors.body}"
    fontSize: "12px"
    borderTop: "1px solid {colors.hairline-soft}"
source: "https://www.apple.com/apple-news/"
captured: "2026-09-14T09:53:59.260Z"
---

# DESIGN.md: Apple

## Source

- URL: https://www.apple.com/apple-news/
- Captured: 2026-09-14T09:53:59.260Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of Apple](./screenshot.png)

## Design Summary

Apple News+ visual system built on clean light backgrounds, high contrast dark headings, precise typography scaling, and vibrant crimson call-to-actions, accompanied by rich multi-device product imagery.

## Visual Language

- Use SF Pro font hierarchy with large tight-line-height titles.
- Highlight key brand text in distinct vibrant crimson #f73558.
- Pair full-width bright action banners with pill-shaped rounded action buttons.
- Utilize soft gray background cards for feature grids with clean generous inner spacing.
- Provide clear interactive subtle accordion dividers for FAQ blocks.

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Fixed dual-tier navigation: global utility navigation overlaid with a sticky product-specific subnav.
- Centered display headers with stacked product device imagery.
- Full-width hero callout bar transition for promotional offers.
- Multi-column feature comparisons with bullet grid layouts.
- Clean accordion structured content lists for deep Q&A sections.

## Components

- Primary CTAs must use #f73558 background with high-contrast white text and 28px border-radius.
- Offer sections use white pills on red background or red text on white container panels.
- Cards in grids receive #f5f5f7 background with 18px rounding and no border.
- Footer links use small 12px text in muted gray with tight multi-column flex listing.

## Content Style

- Short punchy headline copy paired with concise benefit bullet points.
- Clear free-trial CTA triggers with superscript disclaimers.
- Direct value propositions emphasizing comprehensive access and privacy.

## Agent Build Instructions

- Configure Tailwind or Motion design layout with custom primary hue #f73558 and dark red text #3c010d.
- Implement backdrop-filter blur on subnav sticky bar.
- Set font-family stack to System SF Pro / Helvetica Neue fallbacks.
- Construct fluid scaling text tokens from 12px captions up to 64px hero display titles.

## Evidence And Confidence

- Observed: Brand vibrant red/pink #f73558 used for main buttons and section highlights in stylesheetPalette.
- Observed: Standard Apple light background #f5f5f7 and white canvas #ffffff used across content sections.
- Observed: Secondary button border radii measured at 28px for primary news buttons and 22px for secondary buttons.
- Inferred: Typography hierarchy constructed based on computed stylesheet text sizes and standard Apple SF Pro scale.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://www.apple.com/apple-news/

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.