# Material Design 3

  Apply M3 rules when designing screens, reviewing UI, or writing component code (Compose, Flutter, MUI, Material Web).

  ## Layout
  - 4dp baseline grid. Spacing in multiples of 4, mostly 8/12/16/24.
  - Window size classes and navigation:
    - Compact (<600dp): navigation bar (3–5 destinations), single pane
    - Medium (600–839dp): navigation rail, one or two panes
    - Expanded (840–1199dp): rail or persistent drawer, list-detail panes
    - Large (1200–1599dp) / Extra-large (1600dp+): drawer, up to 3 panes
  - Body margins: 16dp on compact, 24dp on medium and larger.
  - Minimum touch target 48x48dp, even if the visible icon is 24dp.

  ## Color (use roles, never raw hex in components)
  - Key colors: primary, secondary, tertiary, error, neutral, neutral-variant.
  - Each accent has 4 roles: `primary`, `on-primary`, `primary-container`, `on-primary-container`.
  - Surfaces: `surface`, `surface-dim`, `surface-bright`, `surface-container-lowest/low/(default)/high/highest`, `on-surface`, `on-surface-variant`.
  - Lines: `outline` (important boundaries), `outline-variant` (dividers).
  - Elevation comes from tonal surface containers, not only shadows.
  - Support dynamic color (generated from wallpaper or a seed color) and providethe same seed.
  - Text and icons on a role always use its paired `on-*` role.

  ## Typography (type scale, sp)
  | Role | L | M | S |
  |---|---|---|---|
  | Display | 57 | 45 | 36 |
  | Headline | 32 | 28 | 24 |
  | Title | 22 | 16 | 14 |
  | Body | 16 | 14 | 12 |
  | Label | 14 | 12 | 11 |
  - Default typeface is Roboto / Roboto Flex. Use Label for buttons and chips, Body for paragraphs, Title for app bars and card headers.

  ## Shape scale
  None 0 · Extra-small 4 · Small 8 · Medium 12 · Large 16 · Extra-large 28 · Ful
  Buttons are Full, cards Medium, dialogs Extra-large, FABs Large.

  ## Elevation
  Levels 0–5 (0, 1, 3, 6, 8, 12dp). Most components sit at levels 0–3. Communicate elevation with tonal color first and add shadow only where separation is needed.

  ## States
  State layers are overlays of the content color: hover 8%, focus 10%, pressed 10%, dragged 16%. Disabled: content 38% opacity, container 12%.

  ## Motion
  - Easing: emphasized (most transitions), standard (small utility motion).
  - Durations: short 50–200ms (selection, small toggles), medium 250–400ms (expanding, entering), long 450–600ms (full-screen transitions).
  - Use container transform for card→detail, shared axis for steps, fade-through for unrelated swaps.

  ## Component choice
  - Buttons by emphasis: Filled > Filled tonal > Elevated > Outlined > Text. One Filled button per view region.
  - FAB only for the single primary action on a screen.
  - Top app bar: center-aligned, small, medium, or large (collapsing).
  - Selection: checkbox (multi), radio (single, visible options), switch (immediate on/off), segmented button (2–5 options).
  - Snackbar for brief feedback, dialog only for decisions that block work.

  ## Output
  When producing code, use the platform's M3 library tokens (`MaterialTheme.colorScheme.primary`, `--md-sys-color-primary`, etc.). When reviewing, list violations by category with the rulebroken and the fix.

  ---

  2. Apple Human Interface Guidelines

  ---
  name: apple-hig
  description: Design UI that follows Apple's Human Interface Guidelines for iOS, iPadOS, macOS, watchOS, and visionOS. Use when the user mentions HIG, iOS design, SwiftUI or UIKit styling, "native iPhone feel", App Store review readiness, SF Symbols, Dynamic Type, or asks for an Apple-style interface.
  ---

  # Apple Human Interface Guidelines

  ## Principles
  Hierarchy (content first, controls recede), harmony (match the platform and hardware), consistency (use system components and behaviors the user already knows).

  ## Layout
  - Respect safe areas and layout margins. Never place controls under the Dynamic Island, home indicator, or rounded corners.
  - Minimum hit target 44x44pt (iOS/iPadOS). 28x28pt is acceptable on macOS for pointer-driven controls.
  - Support every orientation and size class the app ships on. iPad layouts should use sidebars and split views, not stretched iPhone screens.

  ## Typography
  - Use the system font (SF Pro, SF Compact on watchOS, New York for serif) through text styles, not fixed sizes.
  - iOS default (Large) Dynamic Type sizes, in pt:
    Large Title 34 · Title 1 28 · Title 2 22 · Title 3 20 · Headline 17 semibold · Body 17 · Callout 16 · Subheadline 15 · Footnote 13 · Caption 1 12 · Caption 2 11
  - All text must scale with Dynamic Type, including accessibility sizes. Layouts reflow (stack horizontally arranged items vertically) at large sizes rather than truncating.

  ## Color
  - Use semantic system colors: `label`, `secondaryLabel`, `tertiaryLabel`, `systemBackground`, `secondarySystemBackground`, `separator`, `tint`.
  - One app tint color for interactive elements. Don't use the tint for non-interactive text.
  - Support Light and Dark Mode and Increase Contrast. Never rely on color alone to convey state.

  ## Materials and depth
  - Use system materials (and Liquid Glass on current OS versions) for bars, sheets, and overlays so content shows through. Don't recreate them with custom blur or opacity.
  - Avoid stacking translucent layers on top of each other.

  ## Navigation
  - Tab bar for top-level sections (keep to about 5 on iPhone). Each tab keeps its own navigation stack.
  - Navigation stack (push) for hierarchical drill-down, with a back button labeled with the previous title.
  - Sheets for focused, self-contained tasks. Include a clear Cancel/Done. Use detents (medium/large) when partial height makes sense.
  - Avoid hamburger menus on iOS.

  ## Controls
  - Prefer standard controls (buttons, toggles, pickers, menus, segmented controls, steppers).
  - Button styles by emphasis: prominent (filled), bordered, borderless/plain. One prominent action per view.
  - Destructive actions use the destructive role (red) and confirmation through an action sheet or alert.
  - Alerts are for important, rare information. Keep titles short, give at most 2–3 buttons, and make the safe choice the default.

  ## Icons
  - Use SF Symbols, matched to the adjacent text weight and scale. Use the outline variant in tab bars and the fill variant for the selected state where the system does so.
  - App icon: no text, no transparency, simple silhouette, provided in all required sizes and appearances.

  ## Interaction
  - Support standard gestures (swipe back, pull to refresh, swipe actions on rows, long-press context menus). Never override system edge gestures.
  - Use haptics sparingly and consistently with system meaning (success, warning, selection).

  ## Accessibility (required)
  VoiceOver labels on every control, Dynamic Type, Reduce Motion alternatives, Reduce Transparency, sufficient contrast (4.5:1 text), and full keyboard control on iPad/Mac.

  ## Output
  For SwiftUI, use system styles (`.font(.headline)`, `.foregroundStyle(.secondary)`, `.buttonStyle(.borderedProminent)`). For reviews, flag each deviation from HIG with the specificguideline and a fix.