glyph-ai 0.1.0

package/bundled/server/data/design-systems/apple-design-system.md

@@ -0,0 +1,474 @@
+# Apple.com Design System & Section Boilerplates
+
+> Source: https://www.apple.com/ (scraped 2026-03-22)
+
+---
+
+## Design System
+
+### Colors
+
+| Role | Value | Usage |
+|------|-------|-------|
+| **Primary** | `#0071E3` / `rgb(0, 113, 227)` | Primary CTA buttons (filled), interactive elements |
+| **Secondary** | `#0066CC` / `rgb(0, 102, 204)` | Text links, secondary button borders & text, "Buy" links |
+| **Neutral - Dark** | `#1D1D1F` / `rgb(29, 29, 31)` | Body text, headings on light backgrounds |
+| **Neutral - Light** | `#F5F5F7` / `rgb(245, 245, 247)` | Page background (light gray), footer background, headings on dark backgrounds |
+| **Neutral - White** | `#FFFFFF` | Card backgrounds, nav background (at 80% opacity) |
+| **Neutral - Black** | `#000000` | Entertainment section heading, dark card backgrounds |
+| **Muted Text** | `rgba(0, 0, 0, 0.56)` | Footer body text, footnotes |
+| **Muted Link** | `rgba(0, 0, 0, 0.72)` | Footer links |
+| **Muted Heading** | `rgba(0, 0, 0, 0.88)` | Footer column headings |
+| **Nav Link** | `rgba(0, 0, 0, 0.8)` | Navigation bar links |
+| **Nav Dropdown Heading** | `#6E6E73` / `rgb(110, 110, 115)` | Dropdown category labels |
+
+### Typography
+
+| Role | Size | Weight | Line Height | Letter Spacing | Font |
+|------|------|--------|-------------|----------------|------|
+| **Display / Hero Heading (h2)** | 56px | 600 (Semibold) | 60px | -0.28px | SF Pro Display |
+| **Section Card Heading (h3)** | 40px | 600 (Semibold) | - | - | SF Pro Display |
+| **Hero Subtitle / Body Large** | 28px | 400 (Regular) | 32px | - | SF Pro Text |
+| **Card Subtitle** | 21px | 400 (Regular) | 25px | - | SF Pro Text |
+| **Body / Button Text** | 17px | 400 (Regular) | 25px | - | SF Pro Text |
+| **Card Text Link** | 14px | 400 (Regular) | - | - | SF Pro Text |
+| **Nav Link** | 12px | 400 (Regular) | 16px | -0.12px | SF Pro Text |
+| **Footer Text** | 12px | 400 (Regular) | - | - | SF Pro Text |
+
+**Font Stack:** `"SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif`
+
+> Apple uses SF Pro Display for large headings and SF Pro Text for body/UI text. On non-Apple devices, falls back to Helvetica Neue.
+
+### Buttons
+
+#### Primary Button (Filled)
+```
+background: #0071E3
+color: #FFFFFF
+font-size: 17px
+font-weight: 400
+padding: 11px 21px
+border-radius: 980px (full pill)
+border: 1px solid transparent
+min-width: 26px
+display: inline-block
+line-height: 20px
+cursor: pointer
+```
+- Hover: slightly darker blue
+- Used for: "Learn more", "Get your estimate"
+
+#### Secondary Button (Outlined)
+```
+background: transparent
+color: #0066CC
+font-size: 17px
+font-weight: 400
+padding: 11px 21px
+border-radius: 980px (full pill)
+border: 1px solid #0066CC
+min-width: 26px
+display: inline-block
+cursor: pointer
+```
+- On dark backgrounds: white text, white border
+- Used for: "Shop iPhone", "Buy", "View pricing", "Apply now"
+
+#### Text Link (Arrow)
+```
+color: #0066CC
+font-size: 14px-21px (varies by context)
+font-weight: 400
+text-decoration: none
+```
+- Appended with a right-pointing chevron (`>`) on hover
+- Used for: "Read the letter from Tim", footer links
+
+### Input Fields
+
+#### Search Input
+```
+background: transparent
+font-size: ~28px (large, placeholder-style)
+color: #1D1D1F
+border: none
+padding: 0
+placeholder-color: #86868B (gray)
+width: 100%
+```
+- Full-width text input inside search overlay
+- No visible border, large placeholder text "Search apple.com"
+- Appears below nav when search icon is clicked
+
+### Spacing
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| **Section gap** | 12px | Gap between grid cards in product sections |
+| **Nav height** | 44px | Fixed navigation bar |
+| **Nav padding** | 0px | Nav uses flexbox centering, no padding |
+| **Footer top padding** | 20px | Footer directory section |
+| **Footnotes padding** | 17px top, 11px bottom | Footnotes area |
+| **Footnotes border** | 1px solid rgba(0,0,0,0.16) | Bottom border separating footnotes from directory |
+| **Page max-width** | ~1183px (content grid) | Main content container |
+| **Button gap** | ~16px | Space between primary and secondary CTA buttons |
+
+---
+
+## Section Boilerplates
+
+### Navigation
+
+**Structure:** Fixed top bar, 44px height, semi-transparent white with blur.
+
+```
+[nav] position: fixed; top: 0; width: 100%; height: 44px;
+      background: rgba(255,255,255,0.8);
+      backdrop-filter: saturate(1.8) blur(20px);
+      z-index: high;
+
+  [container] max-width: ~1024px; margin: auto; display: flex; align-items: center; justify-content: space-between;
+
+    [left]  Apple logo (link to /)
+    [center] Horizontal link list:
+             Store | Mac | iPad | iPhone | Watch | Vision | AirPods | TV & Home | Entertainment | Accessories | Support
+             - Each link: 12px, rgba(0,0,0,0.8), letter-spacing: -0.12px
+             - Each has a companion hidden "menu" button for mobile/accessibility
+    [right]  Search icon button | Shopping Bag icon button
+```
+
+**Interactions:**
+- **Hover on nav link:** Text opacity increases to full black
+- **Click Search icon:** Overlay expands below nav (white bg, fills ~400px height), pushes content down with dark overlay on page. Contains:
+  - Large search input ("Search apple.com" placeholder, ~28px)
+  - "Quick Links" heading (12px, gray `#6E6E73`)
+  - List of 5 quick links, each with arrow icon prefix (e.g., Find a Store, Apple Vision Pro, AirPods, Apple Intelligence, Apple Trade In)
+  - Live search results appear as you type
+  - Press Escape or click outside to close
+- **Click Shopping Bag:** Dropdown with bag contents / "Your bag is empty" message
+- **Nav dropdown menus (desktop):** Each product category has a mega-dropdown that slides down. Contains multi-column layout with categorized link lists (e.g., "Explore Mac", "Shop Mac", "More from Mac"). Headings are 12px gray, links are 12px darker text.
+- **Mobile:** Hamburger menu replaces horizontal links; accordion-style expansion for each category
+
+### Hero
+
+**Structure:** Full-width, single-column grid. Each hero card is a standalone block.
+
+```
+[section] display: grid; grid-template-columns: 1fr; gap: 12px;
+
+  [hero-card] width: 100%; text-align: center; overflow: hidden;
+              background: #F5F5F7 or product-specific color;
+              padding-top: ~56px;
+
+    [content-area] position: relative; z-index: above image;
+      [h2]         56px, semibold 600, #1D1D1F, letter-spacing: -0.28px
+      [subtitle]   28px, regular 400, #1D1D1F, margin-top: ~8px
+      [cta-group]  margin-top: ~16px; display: flex; gap: 16px; justify-content: center;
+        [primary-btn]   Filled blue pill button ("Learn more")
+        [secondary-btn] Outlined blue pill button ("Shop [Product]" or "Buy")
+
+    [image-area] width: 100%; margin-top: ~24px;
+      [img]      Large product hero image, edge-to-edge or centered
+                 Images typically overflow bottom of card or are cropped
+```
+
+**Repeats for each hero product (iPhone, MacBook Neo, iPad Air) as stacked full-width cards.**
+
+### Showcase (Product Grid - Half-Width Cards)
+
+**Structure:** 2-column grid of product cards, each ~50% width.
+
+```
+[section] display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
+
+  [card] overflow: hidden; text-align: center;
+         background: #FFFFFF (light) or #000000 (dark);
+         position: relative;
+
+    [content-area] padding-top: ~40px; position: relative; z-index: 1;
+      [h3]         40px, semibold 600, #1D1D1F or #F5F5F7 (dark cards)
+      [subtitle]   21px, regular 400, same color logic
+      [availability-text] 14px, #6E6E73 (optional, e.g., "Order 3.25")
+      [cta-group]  margin-top: ~12px; display: flex; gap: 12px; justify-content: center;
+        [primary-btn]   Filled blue pill (or white-filled on dark bg)
+        [secondary-btn] Outlined pill (blue on light, white on dark)
+
+    [image-area] margin-top: ~20px;
+      [img]      Product image, often cropped at card edges
+```
+
+**Cards in this section:** 50 Years of Thinking Different (text link only, rainbow logo), MacBook Pro (dark bg), AirPods Max 2 (light bg), Apple Watch Series 11 (dark bg), Apple Trade In (light bg, single CTA), Apple Card (light bg).
+
+**Dark card variant:**
+- Background: `#000000`
+- Heading color: `#F5F5F7`
+- Subtitle color: `#F5F5F7`
+- Primary button: white bg, black text
+- Secondary button: white border, white text
+
+### Store (CTA Cards)
+
+**Structure:** Same as Showcase half-width cards but focused on services/commerce.
+
+```
+[card] (same grid as Showcase)
+  [h3]       40px, semibold 600 -- uses Apple logo + "Trade In" or "Card" wordmark
+  [subtitle] 21px, regular 400, multi-line, text-align: center
+  [cta]      Single or dual pill buttons
+  [image]    Lifestyle/product photography, fills bottom of card
+```
+
+**Examples:** Apple Trade In (single green CTA "Get your estimate"), Apple Card (dual: "Learn more" + "Apply now").
+
+### Features
+
+**Not present as a dedicated section on apple.com homepage.** Product feature details are embedded within product-specific pages. The homepage communicates features through the hero/showcase card subtitles (e.g., "Now supercharged by M4", "Now with M5, M5 Pro, and M5 Max").
+
+**If replicating as a standalone section:**
+```
+[section] background: #F5F5F7; padding: 80px 0; text-align: center;
+  [h2]          56px, semibold, #1D1D1F
+  [subtitle]    28px, regular, #1D1D1F
+  [feature-grid] display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1024px; margin: 48px auto 0;
+    [feature]
+      [icon]    Product icon or illustration
+      [h3]      21px-28px, semibold
+      [p]       17px, regular, #6E6E73
+```
+
+### CTA
+
+**Apple uses inline CTA pairs within each card rather than a standalone CTA section.** The pattern:
+
+```
+[cta-group] display: flex; gap: 16px; justify-content: center; align-items: center;
+  [primary]   <a> pill button, filled blue, 17px, "Learn more"
+  [secondary] <a> pill button, outlined blue, 17px, "Buy" / "Shop [Product]"
+```
+
+**Standalone CTA banner (if replicating):**
+```
+[section] background: #F5F5F7; padding: 56px 0; text-align: center;
+  [h2]      40px, semibold, #1D1D1F
+  [p]       21px, regular, #6E6E73
+  [cta-group] margin-top: 24px;
+    [primary-btn]
+    [secondary-btn]
+```
+
+### Comparison
+
+**Not present on homepage.** Apple uses comparison tables on product pages (e.g., /iphone/compare/). General pattern:
+
+```
+[section] max-width: 1024px; margin: auto; padding: 80px 0;
+  [h2]    56px, semibold, centered
+  [table] display: grid; grid-template-columns: repeat(3-4, 1fr); gap: 24px;
+    [product-col] text-align: center;
+      [img]    Product image
+      [name]   21px, semibold
+      [specs]  List of spec rows, 14px, alternating alignment
+      [cta]    Pill button
+```
+
+### Pricing
+
+**Not present as a standalone section on homepage.** Apple embeds pricing in product pages and the Store. The homepage Trade In card is the closest proxy:
+
+```
+[card] text-align: center; background: #F5F5F7;
+  [h3]       Apple logo + "Trade In" wordmark, 40px
+  [price]    21px, regular, e.g., "Get up to $195-$685 in credit..."
+  [footnote] superscript reference
+  [cta]      Single filled pill button "Get your estimate"
+  [image]    Side-by-side product photography
+```
+
+### Blog / Newsroom
+
+**Not present on homepage.** Apple links to /newsroom/ in footer. Pattern from Newsroom:
+
+```
+[section] max-width: 1024px; margin: auto; padding: 48px 0;
+  [h2]        Section heading
+  [card-grid] display: grid; grid-template-columns: repeat(2-3, 1fr); gap: 24px;
+    [card]
+      [img]     Full-width thumbnail
+      [category] 12px, uppercase, #6E6E73
+      [h3]      21px, semibold, #1D1D1F
+      [date]    14px, #6E6E73
+      [link]    "Read more >" text link, #0066CC
+```
+
+### About
+
+**Not a standalone homepage section.** Apple's "About Apple" content lives in footer directory and links to dedicated pages. The "50 Years of Thinking Different" card on the homepage is the closest:
+
+```
+[card] grid-column: span 1 (in 2-col grid); overflow: hidden;
+       background: #FFFFFF;
+
+  [content]
+    [h3]        40px, semibold, #1D1D1F
+    [text-link] 14px, #FFFFFF (or #0066CC), "Read the letter from Tim >"
+
+  [image]       Full-bleed rainbow Apple logo / brand imagery
+```
+
+### How It Works
+
+**Not present on homepage.** Apple uses step-by-step flows on product/service pages. Replicable pattern:
+
+```
+[section] padding: 80px 0; text-align: center; background: #FFFFFF;
+  [h2]       56px, semibold, #1D1D1F
+  [steps]    display: flex; gap: 48px; max-width: 1024px; margin: 48px auto 0;
+    [step]   flex: 1; text-align: center;
+      [number] 28px, semibold, #0071E3 (or icon)
+      [h3]     21px, semibold, #1D1D1F
+      [p]      17px, regular, #6E6E73
+```
+
+### Social Proof / Stats
+
+**Not present as a standalone section on homepage.** Apple doesn't use traditional testimonials. The closest is the entertainment carousel which acts as content social proof. Stats pattern (from product pages):
+
+```
+[section] padding: 80px 0; text-align: center; background: #000000;
+  [stat-grid] display: grid; grid-template-columns: repeat(3-4, 1fr); gap: 24px;
+    [stat]
+      [number] 56px, semibold, #F5F5F7
+      [label]  17px, regular, #86868B
+```
+
+### Showcase (Entertainment Carousel)
+
+**Structure:** Horizontal scrolling carousel with tabbed navigation.
+
+```
+[section] background: #FFFFFF; padding: 56px 0;
+
+  [h2]    56px, semibold 600, #000000, text-align: center;
+          "Endless entertainment."
+
+  [carousel-controls] display: flex; justify-content: center; align-items: center;
+    [tablist] horizontal dots/indicators (9 items)
+      [tab]   Small dot, selected state = filled
+    [play-btn] Play/pause button for auto-scroll
+
+  [gallery-row-1] "Apple TV shows, movies, and sports"
+    [horizontal-scroll] display: flex; overflow-x: scroll; scroll-snap-type: x mandatory;
+      [card]  Large background image, full-bleed
+        [overlay-text] positioned bottom-left
+          [label]    "Stream now" or "F1 on Apple TV" -- small caps style
+          [subtitle] "Genre + tagline" -- 14px
+
+  [gallery-row-2] "Apple services (Fitness+, Arcade, Music)"
+    [horizontal-scroll] same pattern
+      [card]
+        [service-logo] Apple Fitness+ / Music / Arcade logo
+        [label]        "Watch now" / "Listen now" / "Play now"
+        [title]        Content title
+```
+
+### FAQ
+
+**Not present on homepage.** Apple uses expandable FAQ on support pages. Replicable pattern:
+
+```
+[section] max-width: 800px; margin: auto; padding: 80px 0;
+  [h2]       56px, semibold, centered
+  [faq-list] margin-top: 48px;
+    [item]   border-bottom: 1px solid rgba(0,0,0,0.16); padding: 16px 0;
+      [question] 17px, semibold, #1D1D1F; display: flex; justify-content: space-between;
+        [text]   Question text
+        [icon]   Chevron down (rotates on expand)
+      [answer]   17px, regular, #6E6E73; padding-top: 8px; (hidden by default, expands)
+```
+
+### Newsletter
+
+**Not present on homepage.** Apple doesn't use a traditional newsletter signup. The closest is the Apple Store email preferences. Pattern:
+
+```
+[section] background: #F5F5F7; padding: 56px 0; text-align: center;
+  [h2]    28px-40px, semibold, #1D1D1F
+  [p]     17px, regular, #6E6E73
+  [form]  display: flex; gap: 8px; justify-content: center; margin-top: 24px;
+    [input]  padding: 11px 16px; border: 1px solid rgba(0,0,0,0.24);
+             border-radius: 980px; font-size: 17px; width: 300px;
+    [button] Filled blue pill button, "Sign up"
+```
+
+### Contact
+
+**Not present as a section on homepage.** Footer has "Contact Apple" link and "1-800-MY-APPLE" phone number. Pattern:
+
+```
+[section] max-width: 800px; margin: auto; padding: 80px 0; text-align: center;
+  [h2]       40px, semibold, #1D1D1F
+  [p]        17px, regular, #6E6E73
+  [contact-options] display: grid; grid-template-columns: repeat(2-3, 1fr); gap: 24px; margin-top: 48px;
+    [option]
+      [icon]  24px icon
+      [h3]    17px, semibold
+      [p]     14px, regular, #6E6E73
+      [link]  Text link, #0066CC
+```
+
+### Downloads
+
+**Not present on homepage.** Apple links to app downloads via App Store badges. Pattern:
+
+```
+[section] padding: 56px 0; text-align: center;
+  [h2]       40px, semibold
+  [p]        17px, regular, #6E6E73
+  [badges]   display: flex; gap: 16px; justify-content: center; margin-top: 24px;
+    [badge]  App Store badge image (standardized Apple badge), height: ~40px
+```
+
+### Footer
+
+**Structure:** Light gray background, 5-column directory, footnotes, bottom bar.
+
+```
+[footer] background: #F5F5F7; color: rgba(0,0,0,0.56); font-size: 12px;
+         max-width: ~980px; margin: auto;
+
+  [footnotes] padding: 17px 0 11px; border-bottom: 1px solid rgba(0,0,0,0.16);
+    [ol]  Numbered list of legal footnotes
+          font-size: 12px; color: rgba(0,0,0,0.56); line-height: ~18px;
+
+  [directory] display: flex; padding-top: 20px; gap: 0;
+              5 equal columns (~196px each)
+
+    [column]
+      [group] (multiple per column)
+        [h3]   12px, font-weight: 600, color: rgba(0,0,0,0.88); margin-bottom: 8px;
+               Text: "Shop and Learn", "Account", "Apple Store", etc.
+        [ul]   list-style: none;
+          [li]
+            [a]  12px, color: rgba(0,0,0,0.72); hover: underline;
+                 line-height: ~28px (generous spacing between links)
+
+  [bottom-bar] padding: 16px 0; border-top: 1px solid rgba(0,0,0,0.16);
+    [row-1] display: flex; justify-content: space-between;
+      [left]  "More ways to shop: [Find an Apple Store] or [other retailer] near you.
+               Or call [1-800-MY-APPLE]."
+              font-size: 12px; color: rgba(0,0,0,0.56);
+              Links: color: #0066CC
+      [right] [United States] (country selector link)
+
+    [row-2] display: flex; justify-content: space-between; margin-top: 4px;
+      [left]  "Copyright (c) 2026 Apple Inc. All rights reserved."
+      [right] Privacy Policy | Terms of Use | Sales and Refunds | Legal | Site Map
+              Separated by " | ", 12px, links: rgba(0,0,0,0.72)
+```
+
+**Footer Directory Columns:**
+1. Shop and Learn (Store, Mac, iPad, iPhone, Watch, Vision, AirPods, TV & Home, AirTag, Accessories, Gift Cards) + Apple Wallet (Wallet, Apple Card, Apple Pay, Apple Cash)
+2. Account (Manage Your Apple Account, Apple Store Account, iCloud.com) + Entertainment (Apple One, Apple TV, Apple Music, Apple Arcade, Apple Fitness+, Apple News+, Apple Podcasts, Apple Books, App Store)
+3. Apple Store (Find a Store, Genius Bar, Today at Apple, Group Reservations, Apple Camp, Apple Store App, Certified Refurbished, Apple Trade In, Financing, Carrier Deals at Apple, Order Status, Shopping Help)
+4. For Business + For Education + For Healthcare + For Government
+5. Apple Values (Accessibility, Education, Environment, Inclusion and Diversity, Privacy, Racial Equity and Justice, Supply Chain Innovation) + About Apple (Newsroom, Apple Leadership, Career Opportunities, Investors, Ethics & Compliance, Events, Contact Apple)