Apple (España)

Quick Color Reference: - text: #1d1d1f - background: #ffffff - border: #dedfe2 - accent: #0071e3 - link: #0066cc - primary action: #0071e3 (filled action) Example Component Prompts: 1. Hero section: #ffffff background, no card chrome. Headline 'iPad Air' in SF Pro Display 80px weight 600, color #1d1d1f, letter-spacing -1.2px, line-height 1.05, centered. Subtitle in SF Pro Display 28px weight 600 #1d1d1f centered below. Product render centered with 160px vertical breathing room above and below. 2. Feature card: #ffffff background, border-radius 28px, no border, no shadow, 40px internal padding. Headline SF Pro Display 48px weight 600 #1d1d1f. Body SF Pro Text 17px weight 400 #6e6e73. Text-link button below body: transparent fill, color #0066cc, with right-arrow ›, zero padding. 3. Create a Primary Action Button: #0071e3 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 4. Section header: left-aligned SF Pro Display 56px weight 600 #1d1d1f letter-spacing -0.28px. Right-aligned text link 'Ver el vídeo' in SF Pro Text 17px weight 400 #0066cc on the same baseline. 80px vertical gap to following content. 5. Inline text link within paragraph: SF Pro Text 17px weight 400 body copy in #6e6e73, with one inline link in #0066cc no underline at rest, underline on hover. Sits mid-paragraph with zero padding and no chrome.

Two-family system with no decorative type: SF Pro Display (≥21px, editorial and display roles) and SF Pro Text (≤17px and all body/nav/label roles). The split is strict — Display never renders body copy, Text never renders above 44px. Weight 600 is the universal bold across both families; there is no weight 700 or 800. Negative letter-spacing tightens with size — at 80px it reaches -1.2px (carved), at 17px it is -0.37px (comfortable), at 12px it is -0.12px. The font feature setting "numr" (numeral alternates) is enabled on both families globally, making tabular figures consistent in price displays and counters.

Full-bleed sections stacked vertically, each internally centered within a max-width container of ~1440px. Hero sections are vertically tall (~800px+) with centered single-product photography — no split layouts, no sidebars. Feature sections alternate between centered text-and-image stacks and 2-column image+text pairings. Cards are used sparingly as content modules, not as layout scaffolding — the page reads as one continuous editorial scroll rather than a dashboard. Navigation is a single persistent 44px top bar; no side nav, no breadcrumbs. Section rhythm: 80px between editorial sections, 40px between adjacent cards, 10–12px between paired elements within a section.

Product photography dominates — every editorial section is anchored by a single high-resolution product render on pure white, often photographed at a 15–25° angle rather than flat-on. Photography treatment is clean and high-key: pure white seamless backgrounds, no lifestyle staging, no human models, no props. Illustrations are absent — the visual language is 100% product photography plus typography. Icons are minimal and monochrome: SF Symbols-style outlined or filled glyphs in #1d1d1f or #313131, 1.5–2px stroke weight. Decorative use of color is limited to one product hero gradient wash (linear-gradient #004c94 → #297bc4) and the Apple Intelligence rainbow gradient (blue → violet → red → orange) — both rare and reserved for specific product stories. Density is image-heavy in hero zones, text-dominant in feature grids.