ima2-gen 2.0.15 → 2.0.16

package/skills/ima2-uiux/references/logo-trust-sections.md

@@ -0,0 +1,96 @@
+# Logo Trust Sections — Design Patterns & Judgment
+
+Design guidance for integration/partner/client logo sections. These are trust signals, not UI components.
+
+Read `dev-frontend/references/core/logo-sections.md` for the CSS implementation.
+Read `dev-frontend/references/core/brand-asset-sourcing.md` for SVG sourcing.
+
+---
+
+## 1. Purpose
+
+Logo sections serve ONE job: **social proof**. They answer: "Who else uses this?"
+
+They are NOT:
+- Navigation (users don't click them)
+- Feature lists (no detailed info needed)
+- Calls to action (no conversion expected)
+- Interactive components (no hover/click feedback expected)
+
+Design them as passive, ambient trust signals. Like a restaurant displaying a Michelin star — you notice it, you don't interact with it.
+
+---
+
+## Pattern Decision Table
+
+| Situation | Pattern | Rationale |
+|-----------|---------|-----------|
+| 3-6 recognizable logos | Static flex row, centered | Clean, scannable, no animation needed |
+| 8-15 logos | Single-row marquee | Avoids orphan cells, shows volume |
+| 15+ logos | Dual-row opposing marquee | Shows scale, feels dynamic |
+| Logos link to case studies | Static grid, clickable | Links add value, hover justified |
+| Premium/enterprise feel | Static grid, generous spacing | Motion can feel unserious |
+| Startup/modern SaaS feel | Marquee, fast but smooth | Energy matches brand |
+
+---
+
+## Anti-Patterns (Do NOT)
+
+### 1. Individual hover effects on non-clickable logos
+Users hover, expect a click target, find nothing. Trust signals should never feel broken.
+
+### 2. CSS Grid with orphan cells
+One logo alone on the last row looks broken. Use flexbox or marquee instead.
+
+### 3. Generic stroke icons instead of brand marks
+Use actual brand SVGs from Simple Icons, SVGL, or press kits. See `brand-asset-sourcing.md`.
+
+### 4. Colorful logos clashing with each other
+Multiple full-color logos fight for attention. Apply uniform grayscale treatment.
+
+---
+
+## Visual Treatment
+
+**Default state:** All logos monochrome, dimmed, uniform height (28-32px).
+
+**Dark mode:** Invert for visibility with `brightness(1.2) invert(1)`.
+
+**Consistent sizing:** Set a uniform `height` and let `width: auto` maintain aspect ratios. Do NOT stretch logos.
+
+---
+
+## Placement on Page
+
+| Position | Effectiveness | Notes |
+|----------|--------------|-------|
+| Below hero, above fold | Highest | Immediate credibility before scroll |
+| Near pricing/CTA | High | Reduces purchase anxiety |
+| Mid-page section break | Medium | Trust reinforcement during consideration |
+| Footer area | Low | Afterthought feel |
+
+**Best practice:** Place near the primary conversion point (pricing, sign-up, CTA). "Trusted by" directly above the CTA is a strong pattern.
+
+---
+
+## Marquee Speed Guidelines
+
+| Speed | Duration | Feel | Use |
+|-------|----------|------|-----|
+| Very slow | 50-60s | Calm, premium | Enterprise, finance |
+| Slow | 30-40s | Professional | General SaaS |
+| Medium | 20-30s | Energetic | Startups, dev tools |
+| Fast | <15s | Cheap, frantic | **Avoid** |
+
+`linear` timing function only — no easing. Constant speed feels intentional; eased motion feels like a carousel.
+
+---
+
+## Accessibility Requirements
+
+- [ ] `aria-label` on marquee container: "Trusted by leading companies"
+- [ ] Duplicate logos get `aria-hidden="true"` and empty `alt=""`
+- [ ] `prefers-reduced-motion: reduce` stops all animation
+- [ ] Sufficient contrast between logos and background
+- [ ] Logos have meaningful `alt` text (first set only)
+- [ ] Pause-on-hover behavior for marquee

package/skills/ima2-uiux/references/mobile-native-ux.md

@@ -0,0 +1,207 @@
+# Mobile Native UX Conventions
+
+**Last reviewed**: 2026-06-16
+**Applies to**: iOS 18+, Android 15+, cross-platform (RN/Flutter/KMP)
+**When to read**: Native mobile app UX decisions, platform conventions, deep linking, app store submission, native mobile product work
+**Canonical owner**: `ima2-uiux` — platform UX judgment (when/why)
+**Non-goals**: Framework selection and code patterns (→ `dev-frontend/references/stacks/mobile-native.md`), push/offline API (→ `dev-backend/references/core/mobile-api.md`), mobile web UX (→ `dev-frontend/references/core/mobile-ux.md`)
+
+---
+
+## 1. Platform UX Conventions
+
+| Convention | iOS (HIG) | Android (Material 3) | Cross-Platform Guidance |
+|-----------|----------|---------------------|------------------------|
+| **Navigation** | Tab bar (bottom), back via swipe-right | Bottom nav bar, back via system gesture/button | Use platform-native nav; don't force iOS tabs on Android or vice versa |
+| **Primary action** | Right side of nav bar or prominent button | FAB (56dp) or top app bar action | Respect platform placement; FAB on Android, bar button on iOS |
+| **Destructive confirm** | Action sheet from bottom | Dialog (centered) | Use platform-native confirmation pattern |
+| **Pull to refresh** | Native `UIRefreshControl` spinner | `SwipeRefresh` circular indicator | Use platform-native indicator; don't custom-animate |
+| **Settings** | System Settings deep link for permissions | In-app settings screen | iOS: link to Settings app for system permissions; Android: handle in-app |
+| **Typography** | SF Pro (system), Dynamic Type support mandatory | Roboto (system), `sp` units for accessibility scaling | Always use system font; support dynamic/accessibility text sizing |
+| **Haptics** | `UIImpactFeedbackGenerator` (light/medium/heavy) | `HapticFeedbackConstants` (confirm/reject/long press) | Map semantic haptics to platform API; never skip on destructive actions |
+
+### Platform detection decision
+
+| Approach | When | Risk |
+|----------|------|------|
+| Single UI, platform-adaptive widgets | MVP, small team, content-heavy apps | May feel "off" to power users |
+| Platform-specific UI shells, shared logic | Production apps, platform-critical UX | Higher maintenance, better native feel |
+| Fully native per platform | Finance, health, OS-integrated apps | 2x effort, best UX |
+
+---
+
+## 2. Native Gestures
+
+| Gesture | iOS | Android | Usage |
+|---------|-----|---------|-------|
+| Swipe-to-dismiss | `interactiveDismissTransition` / sheet detent | `predictiveBackGesture` (Android 14+) | Modal/detail screens; always provide alternative close button |
+| Long press | `UIContextMenuInteraction` (peek/pop) | `onLongClickListener` → context menu | Secondary actions; discoverable via visible menu icon |
+| Pinch zoom | `UIPinchGestureRecognizer` | `ScaleGestureDetector` | Images, maps; show zoom controls for accessibility |
+| Edge swipe | System back gesture (left edge) | System back (both edges on gesture nav) | Never override system back; use `popGesture` only within app nav |
+| Pull down | Refresh (`UIRefreshControl`) | Notification shade (system) | iOS: pull-to-refresh is standard; Android: avoid pull-to-refresh conflict with notification shade |
+
+### Gesture conflict resolution
+
+| Conflict | Resolution |
+|----------|-----------|
+| Horizontal swipe (carousel) vs edge-back | Inset carousel 16dp from edges; let edge gesture pass through |
+| Pull-to-refresh vs scroll-up | Trigger refresh only when `scrollY === 0` |
+| Bottom sheet drag vs list scroll | Lock sheet drag when inner list is scrollable and `scrollY > 0` |
+
+---
+
+## 3. Deep Linking
+
+### Universal Links (iOS) + App Links (Android)
+
+```json
+// apple-app-site-association (AASA) — host at /.well-known/
+{
+  "applinks": {
+    "apps": [],
+    "details": [{
+      "appID": "TEAMID.com.example.app",
+      "paths": ["/product/*", "/invite/*", "/u/*"]
+    }]
+  }
+}
+```
+
+```json
+// assetlinks.json — host at /.well-known/
+[{
+  "relation": ["delegate_permission/common.handle_all_urls"],
+  "target": {
+    "namespace": "android_app",
+    "package_name": "com.example.app",
+    "sha256_cert_fingerprints": ["AB:CD:..."]
+  }
+}]
+```
+
+### Deferred deep linking (first install)
+
+| Method | Mechanism | Accuracy |
+|--------|-----------|----------|
+| Clipboard-based | Copy link → app reads on first launch | High but requires user consent prompt (iOS 16+) |
+| Fingerprint matching | IP + UA + timestamp → match install to click | ~80%, degrades with VPN/carrier NAT |
+| Platform SDK | Firebase Dynamic Links (deprecated) → use Branch.io or Adjust | High, third-party dependency |
+
+### Korean in-app browser fallback
+
+카카오톡, 네이버 앱 내 브라우저는 Universal Links/App Links를 무시하는 경우가 많다.
+
+| Platform | Workaround |
+|----------|-----------|
+| KakaoTalk in-app | Intent scheme (`intent://...#Intent;scheme=myapp;package=com.example.app;end`) for Android; iOS는 `kakaolink://` scheme으로 외부 브라우저 유도 |
+| Naver in-app | `naversearchapp://` intent or JavaScript bridge `openExternalBrowser()` |
+| General fallback | `window.location.href = "myapp://path"` → setTimeout → redirect to store |
+
+```javascript
+// Universal fallback pattern for Korean in-app browsers
+function openAppOrStore(appUrl, iosStore, androidStore) {
+  const ua = navigator.userAgent;
+  const isAndroid = /android/i.test(ua);
+  const isKakao = /kakaotalk/i.test(ua);
+  const isNaver = /naver/i.test(ua);
+
+  if (isAndroid && (isKakao || isNaver)) {
+    // Intent scheme bypasses in-app browser restrictions
+    location.href = `intent://${appUrl}#Intent;scheme=myapp;package=com.example.app;S.browser_fallback_url=${encodeURIComponent(androidStore)};end`;
+  } else {
+    location.href = `myapp://${appUrl}`;
+    setTimeout(() => {
+      location.href = isAndroid ? androidStore : iosStore;
+    }, 1500);
+  }
+}
+```
+
+---
+
+## 4. Onboarding & Permissions
+
+### Permission request timing
+
+| Permission | When to Ask | Never Ask |
+|-----------|-------------|-----------|
+| Push notifications | After first value delivery (e.g., first order placed) | On app launch before any interaction |
+| Camera | When user taps "scan" or "take photo" | During onboarding |
+| Location | When showing map or nearby results | Before showing why location is needed |
+| Contacts | When user taps "invite friends" | During onboarding |
+| Tracking (ATT) | After explaining personalized experience benefit | As the very first screen (iOS rejects) |
+
+### Korean privacy compliance (개인정보보호법)
+
+| Requirement | Implementation |
+|-------------|---------------|
+| 개인정보 수집·이용 동의 | Separate consent checkbox, not bundled with terms of service |
+| 마케팅 수신 동의 | Opt-in (not opt-out), separate from service consent |
+| 만 14세 미만 | Legal guardian consent required; age gate before signup |
+| 수집 항목 명시 | List exact fields collected (이름, 이메일, 전화번호) in consent screen |
+| 보유 기간 | State retention period explicitly ("회원 탈퇴 시까지" or specific duration) |
+
+### Consent screen pattern
+
+```
+┌─────────────────────────────────┐
+│  [서비스 이용약관] (필수) [보기>] │  ☑
+│  [개인정보 수집·이용] (필수) [보기>]│  ☑
+│  [마케팅 수신 동의] (선택) [보기>]  │  ☐
+│  [위치정보 이용] (선택) [보기>]     │  ☐
+│                                   │
+│  [전체 동의]                       │
+│  [다음]                           │
+└─────────────────────────────────┘
+```
+
+---
+
+## 5. App Store UX
+
+### Screenshot specifications
+
+| Store | Size (iPhone 16 Pro Max) | Size (Pixel 9 Pro) | Count |
+|-------|------------------------|--------------------:|-------|
+| App Store | 1320 × 2868 px (6.9") | — | 3-10 per locale |
+| Google Play | — | 1080 × 2400 px | 2-8 per locale |
+
+| Rule | Detail |
+|------|--------|
+| First 2 screenshots | Must show core value proposition; 80% of users decide without scrolling further |
+| Text overlay | Max 5 words per screenshot, 60pt+ font, high contrast |
+| Locale adaptation | Korean screenshots for KR store (not English with Korean subtitle) |
+| Status bar | Show realistic status bar (time, signal, battery) or crop above it |
+
+### App icon requirements
+
+| Platform | Size | Shape | Notes |
+|----------|------|-------|-------|
+| iOS | 1024 × 1024 px | Auto-masked to rounded square | No transparency; no alpha channel |
+| Android | 1024 × 1024 px (foreground) + 512 × 512 px (background) | Adaptive icon (foreground + background layers) | Safe zone: inner 66% circle for foreground content |
+| Both | — | — | Test at 29px (notification), 60px (home), 1024px (store) |
+
+---
+
+## 6. Anti-Patterns & Pre-flight
+
+### Anti-patterns
+
+| Banned | Symptom | Fix |
+|--------|---------|-----|
+| iOS-style bottom tabs on Android | Users expect Material bottom nav behavior (no swipe between tabs) | Use platform-native navigation component |
+| Custom back button overriding system gesture | Predictive back animation breaks, user disoriented | Use system back; add close button only as secondary |
+| Permission request on first launch | Low opt-in rate (<30%), user distrust | Ask at point of need with pre-prompt explaining value |
+| Alert dialog for everything | User fatigue, dismissed without reading | Action sheets (iOS) / bottom sheets (Android) for choices; dialogs only for confirmations |
+| Ignoring Dynamic Type / `sp` scaling | Accessibility failure, app store rejection risk | Test at largest accessibility text size |
+
+### Pre-flight checklist
+
+- [ ] Navigation uses platform-native pattern (tab bar iOS, bottom nav Android)
+- [ ] All gestures have accessible button alternatives
+- [ ] Deep links configured: AASA (iOS) + assetlinks.json (Android) validated
+- [ ] Korean in-app browser (KakaoTalk, Naver) fallback tested
+- [ ] 개인정보 수집·이용 동의 separate from 이용약관, 마케팅 opt-in separate
+- [ ] Screenshots prepared per locale with Korean text for KR store
+- [ ] App icon tested at 29px, 60px, 1024px; Android adaptive icon safe zone verified
+- [ ] Dynamic Type (iOS) / `sp` scaling (Android) tested at max accessibility size

package/skills/ima2-uiux/references/product-personalities.md

@@ -0,0 +1,118 @@
+## 1. Product Personality Database
+
+Last reviewed: 2026-07-02 — brand tokens are snapshots; verify against the live product (per search skill) before shipping.
+
+When the user references a product ("Notion 느낌", "Linear처럼"), map to these exact design parameters.
+
+### Notion
+**Essence:** Warm minimalism — paper-like, approachable, quietly structured.
+```yaml
+colors: { bg: "#ffffff", surface: "#f6f5f4", text: "#000", secondary: "#787774", accent: "#097fe8", border: "#dfdcd9" }
+typography: { font: "Inter (or custom NotionInter)", heading_weight: 600-700, body_weight: 400, optional_serif: "Lyon Text" }
+spacing: "4px scale (4, 8, 12, 16, 24, 32, 48, 64)"
+radius: "8px elements, 12px cards"
+shadows: "multi-layered soft — rgba(25,25,25,0.027)"
+signature: "off-white surface, serif option for content, hand-drawn illustrations, block-based composition"
+```
+
+### Linear
+**Essence:** Dark precision — engineering-grade, sharp, purple-accented.
+```yaml
+colors: { bg: "#000", text: "dark-gray-on-black", accent: "purple gradient" }
+typography: { font: "Inter", weight: "400-600" }
+spacing: "8px scale (8, 16, 32, 64)"
+radius: "6-8px"
+shadows: "minimal — relies on surface layering"
+signature: "pure black bg, extreme keyboard-first, command palette (Cmd+K), modular components, speed above all"
+```
+
+### Figma
+**Essence:** Bright playground — collaborative, vibrant, tool-as-canvas.
+```yaml
+colors: { chrome: "neutral gray", content: "colorful", schemes: "tonal vibrancy, electric pairings" }
+typography: { font: "custom grotesque sans-serif", styles: "sans, condensed, mono, hand" }
+radius: "8px"
+signature: "infinite canvas metaphor, real-time presence (cursors/avatars), dual-panel (layers left, properties right), abstract playful primitives"
+```
+
+### Arc Browser
+**Essence:** Gradient personality — organic, macOS-native, context-shifting.
+```yaml
+colors: { per_space_gradients: true, work: "linear-gradient(135deg, #667eea, #764ba2)", personal: "linear-gradient(135deg, #f093fb, #f5576c)" }
+typography: { font: "-apple-system, system-ui" }
+radius: "contextual (--radius-sm, --radius-lg)"
+shadows: "0 4px 24px rgba(0,0,0,0.2)"
+animation: "spring(response: 0.3, dampingFraction: 0.7)"
+signature: "per-Space gradient theming, sidebar replaces tab bar, CSS variables exposed for user theming"
+```
+
+### Vercel
+**Essence:** Monochrome precision — black, white, Geist, nothing else.
+```yaml
+colors: { bg: "#000", fg: "#fff", accent_blue: "#0070F3 (functional only)", grays: "10-step ramp #F7F7F7→#0A0A0A" }
+typography: { font: "Geist", mono: "Geist Mono", letter_spacing: "-0.04em headings, -0.01em body" }
+spacing: "4-8px base, 96-128px section padding"
+radius: "0-4px marketing, 6-8px UI"
+shadows: "minimal or none"
+signature: "almost entirely grayscale, aggressive whitespace, blueprint grid bg, no illustrations, CSS-preferred animations"
+```
+
+### Stripe
+**Essence:** Gradient elegance — illustrated, polished, technically confident.
+```yaml
+colors: { signature: "purple gradients", palette: ["blue", "yellow", "pink", "purple", "orange", "red"] }
+typography: { weight: 300, style: "sharp, clear, restrained" }
+effects: { hero: "WebGL animated gradient mesh", illustrations: "telling animations that communicate without copy" }
+signature: "weight-300 type elegance, complementary multi-color gradients, sharp minimal copy, restrained with no frills"
+```
+
+### Apple
+**Essence:** Frosted glass, system font, spacious — hardware-grade polish.
+```yaml
+colors: { bg: "#fff/#000 (light/dark)", surface: "rgba with context-adaptive opacity", accent: "system blue" }
+typography: { font: "-apple-system, SF Pro", weight: "200-800 variable" }
+effects: { liquid_glass: "backdrop-filter: blur(20px); background: rgba(255,255,255,0.3); border: 0.5px solid rgba(255,255,255,0.3)" }
+spacing: "40px+ padding on glass, very generous sections"
+radius: "12-20px"
+signature: "system font, Liquid Glass adapts contextually, specular highlights on motion, generous spacing = luxury"
+```
+Liquid Glass judgment (HIG, verified 2026-07-07): glass is a functional-layer
+material for floating controls/navigation only — never content-layer cards;
+`regular` variant for text-bearing chrome, `clear` only over rich media; the
+system adapts it to reduced-transparency/contrast settings. Vocabulary:
+`design-isms.md` §1.12; implementation: `dev-frontend/references/core/liquid-glass.md`.
+
+### Aside (2026 AI-product pastel)
+**Essence:** Apple-circular warmth for AI products — pill chips as content, pastel photography washes, glass feel without blur. (Tokens measured from the live site 2026-07-07; STYLE_SAMPLE.)
+```yaml
+colors: { hero: "sky-photo / soft pastel washes (pink/teal/green/blue) per card", surface: "near-opaque white rgba(255,255,255,0.92)", cta: "black pill, white text" }
+typography: { font: "Geist", headlines: "large sentence-case declaratives ending with a period ('...but it's a browser.')" }
+radius: { tiers: "8.4px / 11.2px / 16.8px + 9999px pill class", page: "22-34px rounded macOS-window container" }
+effects: { glass: "NONE — 0 backdrop-filter site-wide; translucent white pills over rich backgrounds carry the material feel" }
+chips: "prompt strings, scheduling options, bookmarks = pill chips WITH real brand icons; the chip is the primary content unit"
+composition: "full-bleed photo hero + centered copy + one pill CTA + one bordered pill eyebrow; 3-card pastel feature rows with real product screenshots + floating prompt pills"
+signature: "macOS-window page metaphor, chips-as-content, Apple-newsroom copy cadence, warmth without gradients-on-cards"
+```
+
+### OpenAI (2026 warm-sans organic)
+**Essence:** Precise but humane platform — warm geometric sans, huge whitespace, soft natural imagery, opaque capsule labels. (In-house Feb-2025 rebrand + ABC Dinamo type + Studio Dumbar motion; verified 2026-07-09; STYLE_SAMPLE.)
+```yaml
+colors: { base: "off-white / near-black, palette inspired by natural environments", imagery: "soft-focus landscape/still-life photography + film grain, some AI-generated texture", accent: "imagery carries color; UI stays neutral" }
+typography: { font: "OpenAI Sans (warm geometric, rounded-approachable) — Geist as open stand-in", headlines: "large but restrained, generous whitespace over scale" }
+radius: { capsule: "9999px opaque white pills for labels/CTAs", cards: "20-28px" }
+effects: { glass: "none — opaque capsules over expressive imagery; grain/texture on the background layer only" }
+composition: "centered stacked hero over full-width media; announcement card = organic photographic field + white capsule with model name"
+hero_grammar: "FE-HERO-LIGHT-CENTER-01 (light centered display over full-width media)"
+signature: "blossom mark, expressive/functional layer split, humanized-AI warmth without losing platform precision"
+```
+
+### Anthropic / Claude (serif bookish)
+**Essence:** Research institute as a thoughtful book — serif display at light weights on warm paper tones. (Identity by Geist: Styrene + Tiempos lineage, now custom Anthropic Serif/Sans/Mono; measured live 2026-07-09; STYLE_SAMPLE.)
+```yaml
+colors: { base: "warm off-white/cream page metaphor (#faf9f5-class) + near-black ink", accent: "muted terracotta/clay used sparingly" }
+typography: { display: "Anthropic Serif 56px/weight 330 (claude.ai), editorial H2 ~68px/400", ui: "Anthropic Sans 15-16px/500-550", accent: "Anthropic Mono for technical" }
+radius: { general: "8-12px, quiet" }
+effects: { none: "no glass, no gradients — paper flatness with generous margins" }
+composition: "editorial/institutional opener (text-led mission headline, no hero screenshot); long-form reading surfaces"
+signature: "bookish serif-led trust, three-role type system (serif display + sans UI + mono accent), safety-culture calm"
+```

package/skills/ima2-uiux/references/responsive-nav.md

@@ -0,0 +1,66 @@
+## 1. Responsive Strategy
+
+### Canonical Breakpoint Tiers
+
+See `dev-frontend/references/core/responsive-viewport.md` for the canonical T1–T5+ breakpoint table, page containment rules, container query patterns, and split-screen guidance. All responsive references share that single source of truth.
+
+### Mobile-First vs Desktop-First
+
+| Choose Mobile-First When | Choose Desktop-First When |
+|--------------------------|--------------------------|
+| Consumer / public-facing product | Internal tool / admin panel |
+| Content consumption primary use | Data-dense productivity tool |
+| New project (progressive enhancement) | Existing desktop app adding mobile |
+
+### Container Queries & Split-Screen
+
+See `dev-frontend/references/core/responsive-viewport.md` for canonical container query examples, `@container` vs `@media` decision guide, and split-screen/half-window rules. Nav-specific guidance below.
+
+For navigation components, prefer `@container` so the same nav adapts in a sidebar, modal, or full-width header without viewport-dependent media queries.
+
+### Responsive Navigation by Density Profile
+
+| Density | Desktop Navigation | Mobile Navigation |
+|---------|-------------------|-------------------|
+| D1–D3 (campaign/consumer) | Horizontal top nav | Hamburger menu |
+| D4–D6 (SaaS/productivity) | Collapsible sidebar (256px→64px) | Bottom tab bar (4–5 items) |
+| D7–D8 (ops/developer) | Fixed sidebar + top breadcrumb | Sidebar stays, no collapse |
+
+---
+
+## 2. Navigation & Information Architecture
+
+### Sidebar
+- Expanded: 256px fixed width. Collapsed: 64px (icons only).
+- Item height: 36px. Horizontal padding: 12px.
+- Active state: 8% primary color background + 3px left accent border.
+- Transition: 200ms ease-in-out.
+- Group sections with subtle separators and 10px uppercase section labels.
+
+### Tab Bar (Bottom Navigation — Mobile)
+- Maximum 5 items. Active item has filled icon + label. Inactive: outline icon only.
+- Safe area padding for notch/home-indicator devices.
+- Center the primary action if it has elevated importance (FAB pattern).
+
+### Command Palette (Cmd+K)
+- Centered modal at 20% from top, max-width 600px.
+- Instant search with fuzzy matching.
+- Category grouping (Actions, Pages, Settings).
+- Recent items shown on empty query.
+- Keyboard navigation: arrow keys + Enter.
+
+### Breadcrumbs
+- Use for hierarchical navigation deeper than 2 levels.
+- Show abbreviated path on mobile (... > Parent > Current).
+- Clickable segments except the current page.
+- Separator: `/` or `>` — pick one and be consistent.
+
+### By Product Surface
+
+| Surface | Primary Nav | Secondary Nav | Search |
+|---------|-------------|---------------|--------|
+| Landing/marketing | Horizontal top nav | Footer links | Not needed |
+| Consumer app | Bottom tab bar (mobile), sidebar (desktop) | In-context navigation | Optional |
+| SaaS/productivity | Collapsible sidebar | Breadcrumbs + tabs | Command palette |
+| Dashboard/ops | Fixed sidebar | Tab groups per section | Always visible search bar |
+| Developer tool | Sidebar + command palette | Breadcrumbs | Prominent Cmd+K |