# Apple Design System (Consolidated)

A consolidated Apple Human Interface Guidance applied to FlagshipIndex B.
Consumer storefront and pricing index, cross-platform marketing web.

Source tokens: [`tokens.apple.css`](./tokens.apple.css).

---

## 1. Look and feel

- Premium whitespace; content breathes. Generous section spacing.
- Continuous corner radii (squircle-style): use `corner-shape: round` where
  supported, with matching `border-radius` values as the fallback.
- 1px hairline borders separate surfaces. Never heavy outlines.
- Elevation appears only on floating and navigation layers (backdrop-blur
  translucent bars, popovers, modals). No shadows on cards, buttons, inputs or
  chips.
- Clean, flat, restrained. One idea per screen.

## 2. Color

- Canvas: `#FFFFFF` light, `#000000` dark. Alternate sections: `#F5F5F7`.
- Ink (text): `#1D1D1F` light, `#F5F5F7` dark.
- Action Blue: `#0066CC` light, `#2997FF` dark - primary CTA accent and links.
- Neutral ink button: `#1D1D1F` light / `#F5F5F7` dark (primary CTA).
- Mondo Orange: `#FF6A13` light, `#FF8A45` dark - secondary accent badge or
  deal tag only, at most one per viewport. Never on primary CTAs.
- Hairlines: `#E8E8ED` light, `rgba(255,255,255,0.15)` dark.

## 3. Typography

- System font stack: `-apple-system, BlinkMacSystemFont, "SF Pro Text",
  "SF Pro Display", "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto`.
- Weights 400, 600 and 700 only. No intermediate weights.
- Body 17px, minimum 16px on mobile. Captions minimum 12px.
- Large headlines may use tight negative tracking.

## 4. Layout grid

- 4 columns below 768px; 8 columns at 768-1023px; 12 columns at 1024px+.
- Marketing content max-width 1200px, centered.

## 5. Components

### Buttons
- No shadow. Height 44px+, pill or continuous radius.
- Primary: neutral ink (`--ink-btn`) or Action Blue (`--accent`) fill,
  `--text-on-ink` / `--text-on-accent` label, weight 600.
- Subtle press: opacity or slight scale on active; hover darkens the fill.
- Visible `:focus-visible` ring in Accent.

### Cards
- Flat `--canvas` or `--canvas-alt` fill, 1px hairline border, continuous
  radius. No shadow. Hover may darken the fill hairline only when interactive.

### Inputs / chips
- Flat, `--fill-2` background, hairline border, continuous radius, no shadow.

### Navigation & floating layers
- Translucent backdrop-blur bar (`--elevated`), hairline bottom border.
- Popovers / modals: floating layer only elevation, continuous radius.

## 6. Country / region picker

- Clean modal or popover, auto-closes on selection.
- Keyboard: Escape closes, arrow keys navigate, Enter selects.
- 44px touch targets, visible focus ring, accessible labels.
- Selected region persists (`localStorage['sd.country']` + URL for SEO).

## 7. Theme

- Light default for consumers. Dark via `[data-theme="dark"]` on `<html>`.
- Inline script in `<head>` applies stored or system preference before paint.
- Header includes a light/dark theme toggle.

## 8. Motion & accessibility

- Respect `prefers-reduced-motion` (zero out transitions/transforms),
  `prefers-reduced-transparency` (flatten translucent layers), and
  `prefers-contrast: more` (strengthen hairlines and secondary text).
- Focus states never use color alone; pair with ring or underline.

## 9. Reference implementation

Implemented in FlagshipIndex B (`src/styles.css` consumes the tokens, with the
same values mirrored in `tokens.apple.css` for reference).