@hegemonart/get-design-done 1.42.0 → 1.44.0

package/reference/iconography.md

@@ -1,4 +1,4 @@
-# Iconography — Reference Guide
+# Iconography - Reference Guide
 
 Icons are a precise visual language. Every sizing, weight, metaphor, and accessibility decision either reinforces or undermines the system's communicative intent. This reference establishes canonical rules for icon usage across the get-design-done framework.
 
@@ -6,21 +6,21 @@ Icons are a precise visual language. Every sizing, weight, metaphor, and accessi
 
 ## 1. Optical Sizing & Stroke Weight
 
-Icons are not scalable art objects that merely get bigger — they are optical instruments tuned to specific viewing contexts. A 16px icon rendered with the same stroke weight as a 32px icon will look fragile and thin at small sizes, because the eye perceives stroke weight relative to the overall icon bounding box.
+Icons are not scalable art objects that merely get bigger - they are optical instruments tuned to specific viewing contexts. A 16px icon rendered with the same stroke weight as a 32px icon will look fragile and thin at small sizes, because the eye perceives stroke weight relative to the overall icon bounding box.
 
 **Canonical stroke weights by icon size:**
 
 | Icon size | Recommended stroke | Why |
 |-----------|-------------------|-----|
 | 16px | 1.5px | At 16px, a 1px stroke disappears on most non-retina displays; 1.5px gives enough mass without filling the internal counter spaces |
-| 20px | 1.5–2px | Transition size — match the body text weight; if using medium-weight body copy, lean toward 2px |
+| 20px | 1.5–2px | Transition size - match the body text weight; if using medium-weight body copy, lean toward 2px |
 | 24px | 2px | The most common "default" icon grid. 2px is the industry convention (Lucide, Heroicons, Feather all default here) |
 | 32px | 2–2.5px | Larger icons need more weight to avoid looking drawn with a fine pen against the heavier surrounding UI |
 | 48px+ | 2.5–3px | Display-size icons (app icons, hero illustrations) should be optically balanced to read boldly at distance |
 
 **Pixel alignment rules:** Icons on an even grid (16px, 24px, 32px) align their strokes to whole pixels. Icons on an odd grid (20px, 28px) should have strokes centered on 0.5px boundaries to avoid sub-pixel blur on non-retina displays. For SVG exports, always set `shape-rendering: crispEdges` on icon wrappers, and center the viewBox exactly on the pixel grid (e.g., `viewBox="0 0 24 24"`, not `"0.5 0.5 23 23"`). A stroke centered on the path boundary will anti-alias; a stroke offset by 0.5px will render sharply.
 
-**See:** [`./composition.md`](./composition.md) §Optical vs. Mathematical Centering for why icon glyphs (chevrons, play triangles, asymmetric arrows) need a small (−1 to −2px) nudge from mathematical center — the visual-weight asymmetry of the glyph shifts perceived center away from the geometric centroid.
+**See:** [`./composition.md`](./composition.md) §Optical vs. Mathematical Centering for why icon glyphs (chevrons, play triangles, asymmetric arrows) need a small (−1 to −2px) nudge from mathematical center - the visual-weight asymmetry of the glyph shifts perceived center away from the geometric centroid.
 
 ---
 
@@ -28,7 +28,7 @@ Icons are not scalable art objects that merely get bigger — they are optical i
 
 Never mix stroke weights within the same UI surface. Mixing a 1.5px outline icon next to a 2px icon in the same toolbar creates a visual discord that users register as "something feels off" even if they cannot articulate why. The eye calibrates to a baseline weight, and deviations feel like errors.
 
-**The typography matching principle:** Icon weight should correspond to the surrounding text weight. A regular-weight body paragraph (400) pairs with a regular or medium icon (1.5–2px stroke). A bold heading (700) pairs with a bold or filled icon variant. This alignment creates a perception of visual kinship — the icon "belongs" to the text alongside it rather than floating in from a different design register.
+**The typography matching principle:** Icon weight should correspond to the surrounding text weight. A regular-weight body paragraph (400) pairs with a regular or medium icon (1.5–2px stroke). A bold heading (700) pairs with a bold or filled icon variant. This alignment creates a perception of visual kinship - the icon "belongs" to the text alongside it rather than floating in from a different design register.
 
 **Practical rule:** Choose one icon library per product surface and use it exclusively. If a specific icon is unavailable in your chosen library, draw it using the same stroke grammar rather than importing a single icon from a different library. The visual inconsistency of mixing libraries is nearly always worse than an imperfect icon from the right library.
 
@@ -36,31 +36,31 @@ Never mix stroke weights within the same UI surface. Mixing a 1.5px outline icon
 
 ## 3. Metaphor Taxonomy
 
-Icons communicate meaning through shared cultural metaphors. Understanding the four functional categories prevents category errors — using a navigation metaphor for an action, or a status metaphor for wayfinding.
+Icons communicate meaning through shared cultural metaphors. Understanding the four functional categories prevents category errors - using a navigation metaphor for an action, or a status metaphor for wayfinding.
 
 ### Functional (Action) Icons
 
-Functional icons represent user-initiated operations: save, delete, copy, filter, sort, upload, download. They answer the question "what can I do here?" Their metaphors must be action-verifiable — a user looking at the icon should be able to predict the outcome of clicking it. The floppy disk for "save" is a dead metaphor that persists by convention, not visual logic; prefer more literal representations (cloud-upload for cloud save, checkmark-circle for "mark complete") where the action is unambiguous without cultural baggage.
+Functional icons represent user-initiated operations: save, delete, copy, filter, sort, upload, download. They answer the question "what can I do here?" Their metaphors must be action-verifiable - a user looking at the icon should be able to predict the outcome of clicking it. The floppy disk for "save" is a dead metaphor that persists by convention, not visual logic; prefer more literal representations (cloud-upload for cloud save, checkmark-circle for "mark complete") where the action is unambiguous without cultural baggage.
 
 **Recognition test:** Cover the label. Can a first-time user accurately predict what clicking this icon will do? If fewer than 80% of testers answer correctly in usability studies, pair the icon with a text label.
 
 ### Status Icons
 
-Status icons communicate system state: success, warning, error, loading, offline, syncing. They answer "what is the system telling me?" Their metaphors are highly convention-bound: green circle-check for success, yellow triangle-exclamation for warning, red circle-X for error. Deviating from these conventions introduces cognitive load — users must re-learn your system's visual language rather than drawing on years of software experience.
+Status icons communicate system state: success, warning, error, loading, offline, syncing. They answer "what is the system telling me?" Their metaphors are highly convention-bound: green circle-check for success, yellow triangle-exclamation for warning, red circle-X for error. Deviating from these conventions introduces cognitive load - users must re-learn your system's visual language rather than drawing on years of software experience.
 
-**When to use:** Status icons appear adjacent to data fields, system messages, toast notifications, and form validation. They must never be used as the sole indicator of status for users with color vision deficiency — always pair with a distinct shape and a text description.
+**When to use:** Status icons appear adjacent to data fields, system messages, toast notifications, and form validation. They must never be used as the sole indicator of status for users with color vision deficiency - always pair with a distinct shape and a text description.
 
 ### Navigation (Wayfinding) Icons
 
-Navigation icons orient users within an information space: home, back, forward, menu, close, external-link, settings. They answer "where am I and how do I move?" Their metaphors are cartographic and gestural — arrows indicate direction of travel, the house represents the origin point, the hamburger menu represents a collapsed list.
+Navigation icons orient users within an information space: home, back, forward, menu, close, external-link, settings. They answer "where am I and how do I move?" Their metaphors are cartographic and gestural - arrows indicate direction of travel, the house represents the origin point, the hamburger menu represents a collapsed list.
 
 **When to use:** Navigation icons appear in navbars, breadcrumbs, sidebars, and dialog controls. Because wayfinding is critical to task completion, navigation icons should almost always be paired with visible labels until the product has established enough user familiarity to support icon-only navigation (typically after repeated-use screens with power users).
 
 ### Brand Icons
 
-Brand icons represent identity: logos, product wordmarks, social platform logos, and payment method marks. They follow the brand owner's guidelines, not the product's icon system. Never apply your system's stroke weight or color palette to third-party brand marks — use the official SVG assets. Brand icons communicate "who or what" rather than action, status, or direction.
+Brand icons represent identity: logos, product wordmarks, social platform logos, and payment method marks. They follow the brand owner's guidelines, not the product's icon system. Never apply your system's stroke weight or color palette to third-party brand marks - use the official SVG assets. Brand icons communicate "who or what" rather than action, status, or direction.
 
-**Source: nextlevelbuilder/ui-ux-pro-max-skill (MIT) — data/icons.csv**
+**Source: nextlevelbuilder/ui-ux-pro-max-skill (MIT) - data/icons.csv**
 
 ---
 
@@ -90,7 +90,7 @@ A common mistake is inverting an icon library's default black strokes to `#FFFFF
 
 ## 5. Icon Animation Guidelines
 
-Animated icons communicate state transitions — they are not decorative flourishes. Every animation should signal a specific semantic event: a state change the user caused, a process completing, or feedback confirming an action.
+Animated icons communicate state transitions - they are not decorative flourishes. Every animation should signal a specific semantic event: a state change the user caused, a process completing, or feedback confirming an action.
 
 **Morphing between states (cross-fade pattern):**
 
@@ -117,11 +117,11 @@ When transitioning between two icons (e.g., play → pause, bookmark-outline →
 }
 ```
 
-This pattern (scale 0.25→1, opacity 0→1, blur 4→0) creates a "materialization" feel that communicates emergence — the new state is coming into existence rather than simply swapping. Duration should be 150–200ms; shorter feels mechanical, longer feels sluggish.
+This pattern (scale 0.25→1, opacity 0→1, blur 4→0) creates a "materialization" feel that communicates emergence - the new state is coming into existence rather than simply swapping. Duration should be 150–200ms; shorter feels mechanical, longer feels sluggish.
 
-**Rotation for loading states:** A continuous 360° rotation at 700–900ms per revolution communicates "waiting for external process." Use `animation-timing-function: linear` — easing causes visual pulsing that reads as multiple distinct events rather than a continuous state. The rotation axis must be the center of the icon's bounding box.
+**Rotation for loading states:** A continuous 360° rotation at 700–900ms per revolution communicates "waiting for external process." Use `animation-timing-function: linear` - easing causes visual pulsing that reads as multiple distinct events rather than a continuous state. The rotation axis must be the center of the icon's bounding box.
 
-**Entrance for success states:** A success icon (checkmark, circle-check) should entrance with a brief overshoot — scale from 0 to 1.1 then settle to 1.0 — over 250–300ms using a spring-like timing function (`cubic-bezier(0.175, 0.885, 0.32, 1.275)`). This micro-bounce communicates "confirmed" rather than merely "appeared."
+**Entrance for success states:** A success icon (checkmark, circle-check) should entrance with a brief overshoot - scale from 0 to 1.1 then settle to 1.0 - over 250–300ms using a spring-like timing function (`cubic-bezier(0.175, 0.885, 0.32, 1.275)`). This micro-bounce communicates "confirmed" rather than merely "appeared."
 
 **Respect prefers-reduced-motion:** All icon animations must be disabled or reduced to an instant opacity transition when `@media (prefers-reduced-motion: reduce)` is active.
 
@@ -140,7 +140,7 @@ The single most common accessibility error in icon implementation is failing to
 </button>
 ```
 
-The `aria-label` on the button describes the action. The SVG itself receives `aria-hidden="true"` to prevent screen readers from announcing "svg" or the icon's internal text elements. Never rely on `title` elements within SVG for accessible names in interactive contexts — browser support is inconsistent.
+The `aria-label` on the button describes the action. The SVG itself receives `aria-hidden="true"` to prevent screen readers from announcing "svg" or the icon's internal text elements. Never rely on `title` elements within SVG for accessible names in interactive contexts - browser support is inconsistent.
 
 **Decorative icons require `aria-hidden="true"`:**
 
@@ -160,7 +160,7 @@ When visible text already conveys the full meaning, the icon is decorative. Hidi
 
 ## 7. Touch Target Pairing
 
-Visual icon size and interactive touch target size are different concerns. A 16px icon is visually appropriate for compact UI contexts, but an interactive area of 16×16px fails accessibility and usability standards — fingers are much larger than icons.
+Visual icon size and interactive touch target size are different concerns. A 16px icon is visually appropriate for compact UI contexts, but an interactive area of 16×16px fails accessibility and usability standards - fingers are much larger than icons.
 
 **Minimum interactive touch targets:**
 
@@ -199,19 +199,19 @@ The visual icon remains 20px; the interactive zone expands to 40px. On touch dev
 
 ## 8. Public Icon Library Catalog
 
-Choosing an icon library is an architectural decision — all icons in a product surface should come from a single library to ensure stroke weight and visual grammar consistency. These are the major open-source libraries with their key characteristics.
+Choosing an icon library is an architectural decision - all icons in a product surface should come from a single library to ensure stroke weight and visual grammar consistency. These are the major open-source libraries with their key characteristics.
 
 ### Lucide Icons
-Over 1,000 icons under the MIT license. Stroke-based with a consistent 2px stroke weight on a 24px grid. This is the default icon library for shadcn/ui components and has become the de facto standard for React-based design systems. Strong community maintenance with frequent additions. Import individual icons by name to enable tree-shaking: `import { ChevronRight } from 'lucide-react'`. Never import the entire library — the barrel export will bloat bundles.
+Over 1,000 icons under the MIT license. Stroke-based with a consistent 2px stroke weight on a 24px grid. This is the default icon library for shadcn/ui components and has become the de facto standard for React-based design systems. Strong community maintenance with frequent additions. Import individual icons by name to enable tree-shaking: `import { ChevronRight } from 'lucide-react'`. Never import the entire library - the barrel export will bloat bundles.
 
 ### Phosphor Icons
-Available in six weights — thin, light, regular, bold, fill, and duotone — making it one of the most expressive icon systems available. MIT licensed. Ideal for products where visual hierarchy needs to be communicated through icon weight variation (e.g., active nav item uses bold, inactive uses regular). The duotone variant provides a two-tone fill that works well in marketing and onboarding contexts.
+Available in six weights - thin, light, regular, bold, fill, and duotone - making it one of the most expressive icon systems available. MIT licensed. Ideal for products where visual hierarchy needs to be communicated through icon weight variation (e.g., active nav item uses bold, inactive uses regular). The duotone variant provides a two-tone fill that works well in marketing and onboarding contexts.
 
 ### Heroicons
-Produced by the Tailwind CSS team. Available in outline and solid variants on a 24px grid. MIT licensed. The outline variant is a 1.5px stroke, which is slightly lighter than Lucide's 2px — choose based on whether your typography leans toward light or regular weight. First-class Tailwind integration and React/Vue packages available.
+Produced by the Tailwind CSS team. Available in outline and solid variants on a 24px grid. MIT licensed. The outline variant is a 1.5px stroke, which is slightly lighter than Lucide's 2px - choose based on whether your typography leans toward light or regular weight. First-class Tailwind integration and React/Vue packages available.
 
 ### Radix Icons
-Designed specifically for the 15px grid rather than the standard 24px grid, making Radix Icons uniquely suited for dense, compact UI contexts — form fields, inline badges, data table actions. They pair directly with Radix UI primitives and share the same design philosophy: functional, unobtrusive, and predictable. MIT licensed.
+Designed specifically for the 15px grid rather than the standard 24px grid, making Radix Icons uniquely suited for dense, compact UI contexts - form fields, inline badges, data table actions. They pair directly with Radix UI primitives and share the same design philosophy: functional, unobtrusive, and predictable. MIT licensed.
 
 ### Tabler Icons
 Over 3,000 icons with a consistent 2px stroke on a 24px grid. The largest coherent stroke-based icon set available. MIT licensed. Excellent for applications requiring coverage of unusual domains (medical, scientific, geographic) that other libraries do not address. Actively maintained with SVG optimization.
@@ -223,7 +223,7 @@ Clean, minimal line icons on a 24px grid. MIT licensed. Characterized by a sligh
 Open-source with filled and line variants in each icon, organized into semantic categories (system, business, media, communication, etc.). The parallel line/filled pairing makes it straightforward to communicate active vs. inactive states without switching libraries.
 
 ### SF Symbols
-Apple's system-native icon library, available exclusively on Apple platforms (iOS, macOS, watchOS, visionOS). Variable weights that match the San Francisco typeface — when the user adjusts text size or boldness in system settings, SF Symbols adjust proportionally. Not available for web or Android; use only in native Swift/SwiftUI or UIKit contexts. Access via `Image(systemName:)` in SwiftUI.
+Apple's system-native icon library, available exclusively on Apple platforms (iOS, macOS, watchOS, visionOS). Variable weights that match the San Francisco typeface - when the user adjusts text size or boldness in system settings, SF Symbols adjust proportionally. Not available for web or Android; use only in native Swift/SwiftUI or UIKit contexts. Access via `Image(systemName:)` in SwiftUI.
 
 ### Feather
 A minimal, classic icon set with 287 icons on a 24px grid at a 2px stroke. MIT licensed. Feather is older than many alternatives on this list and receives fewer updates, but its visual grammar is exceptionally clean and it remains a reliable choice for products that prioritize restraint. The limited catalog means it works best for simple, focused applications rather than complex dashboards.

package/reference/image-optimization.md

@@ -18,14 +18,14 @@ Practical reference for responsive images, modern formats, loading strategies, a
 | **JPEG XL** | Limited (Chrome 91–109 behind flag; Safari 17+) | 20–60% smaller | Medium | Yes | No | Future-proofing; not yet viable as primary format |
 | **PNG** | Universal (100%) | Lossless only | Fast | Yes | No | Logos, UI icons needing lossless or transparency |
 | **SVG** | Universal (100%) | Vector = tiny | N/A | Yes | Yes | Icons, logos, illustrations with clean paths |
-| **GIF** | Universal (100%) | Poor | Fast | 1-bit | Yes | Avoid — use WebP or video instead |
+| **GIF** | Universal (100%) | Poor | Fast | 1-bit | Yes | Avoid - use WebP or video instead |
 
 ### Decision Rules
 
 - **Default for photos**: serve AVIF with WebP fallback, JPEG last resort.
 - **Default for UI assets with transparency**: WebP with PNG fallback.
 - **Icons/logos**: SVG always; PNG fallback only for email.
-- **Animated content**: WebP animated or `<video autoplay muted loop>` — never GIF.
+- **Animated content**: WebP animated or `<video autoplay muted loop>` - never GIF.
 - **JPEG XL**: Do not use as primary format until Safari + Chrome stable support lands.
 
 ```html
@@ -90,12 +90,12 @@ Example: image renders at 480px on mobile at 2x DPR → need a 960px source →
 ```
 
 Breakpoint widths to always generate sources for:
-- `480w` — small mobile
-- `768w` — large mobile / portrait tablet
-- `960w` — landscape tablet / small desktop
-- `1280w` — standard desktop
-- `1920w` — full HD desktop
-- `2560w` — retina desktop / 2x of 1280
+- `480w` - small mobile
+- `768w` - large mobile / portrait tablet
+- `960w` - landscape tablet / small desktop
+- `1280w` - standard desktop
+- `1920w` - full HD desktop
+- `2560w` - retina desktop / 2x of 1280
 
 ### Density Descriptors (x descriptors)
 
@@ -118,7 +118,7 @@ Use `x` descriptors only when the image always renders at a fixed CSS size (e.g.
 
 ## 3. Responsive Art Direction
 
-Art direction changes the image content (crop, composition, subject) at different viewport sizes — not just resolution. Use `<picture>` with `media` attributes.
+Art direction changes the image content (crop, composition, subject) at different viewport sizes - not just resolution. Use `<picture>` with `media` attributes.
 
 ### `<picture>` + `<source>` Pattern
 
@@ -164,7 +164,7 @@ Art direction changes the image content (crop, composition, subject) at differen
 
 1. `<source>` elements are evaluated top-to-bottom; first match wins.
 2. Place mobile/narrow sources first when using `max-width` media queries.
-3. Always end with a plain `<img>` — it is the fallback AND the element browsers use for accessibility attributes.
+3. Always end with a plain `<img>` - it is the fallback AND the element browsers use for accessibility attributes.
 4. The `type` attribute on `<source>` enables format negotiation without JS.
 
 ### Combining Art Direction + Format Negotiation
@@ -294,7 +294,7 @@ Native browser lazy loading. Defers fetching images outside the viewport.
 <img src="photo.jpg" alt="Gallery item" loading="lazy" width="800" height="600">
 ```
 
-**Critical rule**: Never apply `loading="lazy"` to the LCP (Largest Contentful Paint) image. The LCP image must be fetched immediately. Identify it as the largest above-the-fold image — hero, product shot, or article lead image.
+**Critical rule**: Never apply `loading="lazy"` to the LCP (Largest Contentful Paint) image. The LCP image must be fetched immediately. Identify it as the largest above-the-fold image - hero, product shot, or article lead image.
 
 ### Intersection Observer Pattern
 
@@ -336,7 +336,7 @@ lazyImages.forEach(img => observer.observe(img));
 ### Lazy Loading Rules Summary
 
 - `loading="lazy"` on all below-the-fold images.
-- Never on LCP image — use `fetchpriority="high"` instead.
+- Never on LCP image - use `fetchpriority="high"` instead.
 - Set explicit `width` and `height` on every `<img>` to prevent layout shift (CLS).
 - `rootMargin: '200px'` is a safe default for IntersectionObserver to preload slightly early.
 
@@ -355,7 +355,7 @@ lazyImages.forEach(img => observer.observe(img));
 ### When to Apply
 
 - Apply to all large images that are not LCP-critical.
-- **Do not** apply to the LCP image — synchronous decoding ensures the image renders as soon as it loads, which improves LCP score.
+- **Do not** apply to the LCP image - synchronous decoding ensures the image renders as soon as it loads, which improves LCP score.
 - Combine with `loading="lazy"` on below-the-fold images.
 
 ```html
@@ -402,7 +402,7 @@ lazyImages.forEach(img => observer.observe(img));
 
 ### Rules
 
-- Apply to **exactly one** image per page — the LCP candidate.
+- Apply to **exactly one** image per page - the LCP candidate.
 - Do not use on multiple images; it degrades priority scheduling.
 - Use `fetchpriority="low"` on decorative or off-screen images you know will not be needed soon.
 - Works on `<img>`, `<link rel="preload">`, and `fetch()` calls.

package/reference/information-architecture.md

@@ -1,6 +1,6 @@
 # Information Architecture
 
-Information architecture (IA) is the structural design of shared information environments. In practice, it answers three questions for every user at every moment: Where am I? Where can I go? What will I find there? Poor IA is invisible to designers because they already know the answers — it becomes visible only when users get lost, give up, or call support. The sections below cover navigation patterns, depth rules, research methods, wayfinding signals, and the IA decisions embedded in URLs and search.
+Information architecture (IA) is the structural design of shared information environments. In practice, it answers three questions for every user at every moment: Where am I? Where can I go? What will I find there? Poor IA is invisible to designers because they already know the answers - it becomes visible only when users get lost, give up, or call support. The sections below cover navigation patterns, depth rules, research methods, wayfinding signals, and the IA decisions embedded in URLs and search.
 
 ---
 
@@ -10,73 +10,73 @@ No single navigation pattern fits all products. The right choice depends on cont
 
 ### Hub-and-Spoke
 
-**Definition:** A central home or dashboard acts as the hub; users travel outward to destination screens and return to the hub to begin the next task. There is no direct path between spokes — every journey passes through the center.
+**Definition:** A central home or dashboard acts as the hub; users travel outward to destination screens and return to the hub to begin the next task. There is no direct path between spokes - every journey passes through the center.
 
-**When to use:** Hub-and-spoke is correct for mobile applications where tasks are discrete and sequential — banking apps, food delivery, ride-hailing, onboarding flows, and multi-step transaction flows all fit this model. It is also appropriate when users complete one task at a time and context from one task does not carry over to another.
+**When to use:** Hub-and-spoke is correct for mobile applications where tasks are discrete and sequential - banking apps, food delivery, ride-hailing, onboarding flows, and multi-step transaction flows all fit this model. It is also appropriate when users complete one task at a time and context from one task does not carry over to another.
 
-**When NOT to use:** Do not use hub-and-spoke when users need to cross-reference content across destinations, move fluidly between sections, or maintain spatial awareness of a larger content body. A CMS, a design tool, or an analytics dashboard all require users to hold multiple contexts simultaneously — forcing every transition through a hub creates unnecessary friction.
+**When NOT to use:** Do not use hub-and-spoke when users need to cross-reference content across destinations, move fluidly between sections, or maintain spatial awareness of a larger content body. A CMS, a design tool, or an analytics dashboard all require users to hold multiple contexts simultaneously - forcing every transition through a hub creates unnecessary friction.
 
-**Common mistakes:** Adding too many spokes to the hub turns the dashboard into an unnavigable index. More than seven to nine top-level destinations on the hub signals that the IA needs a different model, not more spokes. A second mistake is designing spokes that are so isolated they cannot share context — users who need to compare information from two spokes are forced into a hub-and-spoke-and-hub-and-spoke sequence that creates unnecessary cognitive overhead.
+**Common mistakes:** Adding too many spokes to the hub turns the dashboard into an unnavigable index. More than seven to nine top-level destinations on the hub signals that the IA needs a different model, not more spokes. A second mistake is designing spokes that are so isolated they cannot share context - users who need to compare information from two spokes are forced into a hub-and-spoke-and-hub-and-spoke sequence that creates unnecessary cognitive overhead.
 
 ---
 
 ### Nested (Hierarchical)
 
-**Definition:** Content is organized as a tree: parent categories contain child categories, which contain grandchild items. Navigation moves explicitly from broader to narrower — drilling down to reach specific content.
+**Definition:** Content is organized as a tree: parent categories contain child categories, which contain grandchild items. Navigation moves explicitly from broader to narrower - drilling down to reach specific content.
 
-**When to use:** Nested navigation suits content that is genuinely taxonomic — file explorers, e-commerce category trees, documentation sites with chapters and sub-chapters, and administrative settings panels. The model works when the hierarchy reflects real-world mental models that users arrive with. A user who already knows they want "Electronics → Laptops → 15-inch" will find nested navigation fast and satisfying.
+**When to use:** Nested navigation suits content that is genuinely taxonomic - file explorers, e-commerce category trees, documentation sites with chapters and sub-chapters, and administrative settings panels. The model works when the hierarchy reflects real-world mental models that users arrive with. A user who already knows they want "Electronics → Laptops → 15-inch" will find nested navigation fast and satisfying.
 
-**When NOT to use:** Do not use nested navigation when items belong to more than one parent category, when users lack a pre-formed mental model of the hierarchy, or when the tree depth exceeds four levels. Nested navigation also breaks down when the category labels are ambiguous — users cannot commit to a branch when they are uncertain which branch contains their target.
+**When NOT to use:** Do not use nested navigation when items belong to more than one parent category, when users lack a pre-formed mental model of the hierarchy, or when the tree depth exceeds four levels. Nested navigation also breaks down when the category labels are ambiguous - users cannot commit to a branch when they are uncertain which branch contains their target.
 
-**Common mistakes:** The most damaging mistake is designing a hierarchy that reflects the organization's internal structure rather than the user's mental model. An insurance company's product hierarchy follows business lines; a customer's mental model follows life events ("I'm buying a car," "I'm having a baby"). These rarely align without deliberate IA research. A second mistake is creating leaf nodes that are too shallow — a category containing only two or three items signals that the hierarchy was over-specified and should be collapsed upward.
+**Common mistakes:** The most damaging mistake is designing a hierarchy that reflects the organization's internal structure rather than the user's mental model. An insurance company's product hierarchy follows business lines; a customer's mental model follows life events ("I'm buying a car," "I'm having a baby"). These rarely align without deliberate IA research. A second mistake is creating leaf nodes that are too shallow - a category containing only two or three items signals that the hierarchy was over-specified and should be collapsed upward.
 
 ---
 
 ### Faceted
 
-**Definition:** Content is filtered through multiple parallel, independent attributes simultaneously. Users narrow a result set by selecting values across dimensions — price range, color, brand, rating — without committing to a single hierarchical path.
+**Definition:** Content is filtered through multiple parallel, independent attributes simultaneously. Users narrow a result set by selecting values across dimensions - price range, color, brand, rating - without committing to a single hierarchical path.
 
-**When to use:** Faceted navigation is correct for large, multi-attribute content sets where users approach from different starting points. Product catalogs, job boards, property listings, academic literature search, and any context where users have heterogeneous filtering priorities all benefit from faceted navigation. It respects the fact that different users weight attributes differently — one shopper leads with price, another with brand, another with availability.
+**When to use:** Faceted navigation is correct for large, multi-attribute content sets where users approach from different starting points. Product catalogs, job boards, property listings, academic literature search, and any context where users have heterogeneous filtering priorities all benefit from faceted navigation. It respects the fact that different users weight attributes differently - one shopper leads with price, another with brand, another with availability.
 
-**When NOT to use:** Do not apply faceted navigation to small content sets (fewer than ~50 items), to content where attributes are not independent of each other, or to contexts where discovery is the primary goal. A curated editorial experience should not be faceted — it should be sequenced. Faceted navigation also fails when the attribute vocabulary is opaque to users: if users do not understand what a facet means, they cannot use it to filter.
+**When NOT to use:** Do not apply faceted navigation to small content sets (fewer than ~50 items), to content where attributes are not independent of each other, or to contexts where discovery is the primary goal. A curated editorial experience should not be faceted - it should be sequenced. Faceted navigation also fails when the attribute vocabulary is opaque to users: if users do not understand what a facet means, they cannot use it to filter.
 
-**Common mistakes:** Showing too many facets at once overwhelms users and buries the most useful filters beneath low-value ones. The correct approach is to surface the three to five highest-signal facets and hide the rest behind progressive disclosure. A second mistake is allowing facet combinations that produce zero results without feedback — a user who selects three facets and sees an empty state has been failed by the system, which should prevent impossible combinations or warn before they occur.
+**Common mistakes:** Showing too many facets at once overwhelms users and buries the most useful filters beneath low-value ones. The correct approach is to surface the three to five highest-signal facets and hide the rest behind progressive disclosure. A second mistake is allowing facet combinations that produce zero results without feedback - a user who selects three facets and sees an empty state has been failed by the system, which should prevent impossible combinations or warn before they occur.
 
 ---
 
 ### Flat (Same-Level)
 
-**Definition:** All content lives at a single depth. There are no parent-child relationships — every item is a peer. Navigation means moving laterally across a collection rather than drilling down into it.
+**Definition:** All content lives at a single depth. There are no parent-child relationships - every item is a peer. Navigation means moving laterally across a collection rather than drilling down into it.
 
-**When to use:** Flat navigation is correct for streams, feeds, and timelines — social media feeds, notification inboxes, activity logs, and news aggregators. It is also appropriate for small, finite content sets where every item is equally accessible and no meaningful taxonomy exists. A settings panel with twelve options can be flat; a settings panel with sixty options cannot.
+**When to use:** Flat navigation is correct for streams, feeds, and timelines - social media feeds, notification inboxes, activity logs, and news aggregators. It is also appropriate for small, finite content sets where every item is equally accessible and no meaningful taxonomy exists. A settings panel with twelve options can be flat; a settings panel with sixty options cannot.
 
-**When NOT to use:** Do not use flat navigation for large content sets. A flat structure with more than thirty to forty items becomes a scroll-based search problem, not a navigation problem. Flat navigation also fails when items have meaningful relationships that should be surfaced — if items cluster into natural groups, those groups should be represented in the structure.
+**When NOT to use:** Do not use flat navigation for large content sets. A flat structure with more than thirty to forty items becomes a scroll-based search problem, not a navigation problem. Flat navigation also fails when items have meaningful relationships that should be surfaced - if items cluster into natural groups, those groups should be represented in the structure.
 
-**Common mistakes:** Treating flat navigation as the absence of IA rather than a deliberate structural choice. Flat does not mean unorganized — items in a flat structure still need to be sequenced, grouped visually, or sorted in a way that supports the user's task. A flat feed with no sorting or grouping is a list of equal noise.
+**Common mistakes:** Treating flat navigation as the absence of IA rather than a deliberate structural choice. Flat does not mean unorganized - items in a flat structure still need to be sequenced, grouped visually, or sorted in a way that supports the user's task. A flat feed with no sorting or grouping is a list of equal noise.
 
 ---
 
 ### Mega-Menu
 
-**Definition:** A persistent top navigation bar expands on hover or click to reveal a large, structured panel — often with multiple columns, category headers, images, and links — without navigating away from the current page.
+**Definition:** A persistent top navigation bar expands on hover or click to reveal a large, structured panel - often with multiple columns, category headers, images, and links - without navigating away from the current page.
 
 **When to use:** Mega-menus are correct for large e-commerce sites, enterprise software with many feature areas, and any product where users need to move between dozens of top-level destinations without losing their current context. They are effective when the content taxonomy is stable, well-understood by users, and dense enough that a standard dropdown would require three or more levels of nesting.
 
-**When NOT to use:** Do not use a mega-menu for products with fewer than eight to ten top-level destinations — a standard nav bar or sidebar handles this more cleanly. Mega-menus are also wrong for mobile-first products, where the interaction model (hover) does not translate to touch and the screen real estate does not accommodate wide panels.
+**When NOT to use:** Do not use a mega-menu for products with fewer than eight to ten top-level destinations - a standard nav bar or sidebar handles this more cleanly. Mega-menus are also wrong for mobile-first products, where the interaction model (hover) does not translate to touch and the screen real estate does not accommodate wide panels.
 
-**Common mistakes:** Hover-triggered mega-menus introduce a Fitts's Law problem — users must move the pointer from the trigger to the panel without accidentally leaving the hover zone, which closes the menu. The fix is a diagonal tolerance zone (mouse movement toward the panel keeps the menu open) or switching to click-triggered behavior. A second mistake is including too many items without meaningful grouping — a mega-menu with sixty links in a single undifferentiated column is not better than a standard dropdown; it is worse.
+**Common mistakes:** Hover-triggered mega-menus introduce a Fitts's Law problem - users must move the pointer from the trigger to the panel without accidentally leaving the hover zone, which closes the menu. The fix is a diagonal tolerance zone (mouse movement toward the panel keeps the menu open) or switching to click-triggered behavior. A second mistake is including too many items without meaningful grouping - a mega-menu with sixty links in a single undifferentiated column is not better than a standard dropdown; it is worse.
 
 ---
 
 ### Command Palette (Cmd+K)
 
-**Definition:** A modal search-and-command interface, triggered by a keyboard shortcut, that allows users to navigate to any destination, trigger any action, or run any command by typing a query — without using the visible navigation at all.
+**Definition:** A modal search-and-command interface, triggered by a keyboard shortcut, that allows users to navigate to any destination, trigger any action, or run any command by typing a query - without using the visible navigation at all.
 
-**When to use:** Command palettes are correct for developer tools, design applications, text editors, and any product where a significant portion of users are power users who build muscle memory for frequent actions. They are additive, not primary — they exist alongside conventional navigation and accelerate users who have internalized the product's vocabulary.
+**When to use:** Command palettes are correct for developer tools, design applications, text editors, and any product where a significant portion of users are power users who build muscle memory for frequent actions. They are additive, not primary - they exist alongside conventional navigation and accelerate users who have internalized the product's vocabulary.
 
-**When NOT to use:** Do not treat a command palette as a substitute for coherent navigation. A command palette cannot help a user who does not know what to ask for — it is a speed tool for users who already know the destination, not a discovery tool for users who do not. It is also inappropriate as a primary navigation mechanism in consumer products where most users are occasional visitors.
+**When NOT to use:** Do not treat a command palette as a substitute for coherent navigation. A command palette cannot help a user who does not know what to ask for - it is a speed tool for users who already know the destination, not a discovery tool for users who do not. It is also inappropriate as a primary navigation mechanism in consumer products where most users are occasional visitors.
 
-**Common mistakes:** Omitting fuzzy matching forces users to type exact command names, which punishes imperfect recall. The palette should match partial strings and surface close alternatives. A second mistake is limiting the palette to navigation links and excluding commands — the value of a command palette compounds when it surfaces actions (create new file, assign to user, publish draft) that would otherwise require three or four clicks through modal interfaces.
+**Common mistakes:** Omitting fuzzy matching forces users to type exact command names, which punishes imperfect recall. The palette should match partial strings and surface close alternatives. A second mistake is limiting the palette to navigation links and excluding commands - the value of a command palette compounds when it surfaces actions (create new file, assign to user, publish draft) that would otherwise require three or four clicks through modal interfaces.
 
 ---
 
@@ -84,7 +84,7 @@ No single navigation pattern fits all products. The right choice depends on cont
 
 ### The 3-Click Rule Debunked
 
-The "3-click rule" — the folk wisdom that users should reach any content within three clicks or they will abandon the site — has been tested empirically and found to be false. Research by Joshua Porter (2003) showed no significant increase in task abandonment at three clicks compared to twelve clicks, provided that each click felt like progress. Users tolerate many clicks when they trust that each click is moving them toward their goal. They abandon quickly when a single click feels uncertain or misdirected. The implication is that click count is the wrong metric; navigational confidence is the right one.
+The "3-click rule" - the folk wisdom that users should reach any content within three clicks or they will abandon the site - has been tested empirically and found to be false. Research by Joshua Porter (2003) showed no significant increase in task abandonment at three clicks compared to twelve clicks, provided that each click felt like progress. Users tolerate many clicks when they trust that each click is moving them toward their goal. They abandon quickly when a single click feels uncertain or misdirected. The implication is that click count is the wrong metric; navigational confidence is the right one.
 
 ### Scent-of-Information
 
@@ -103,7 +103,7 @@ Research on spatial disorientation in hierarchical navigation consistently finds
 
 ### Wide vs. Deep
 
-When the content volume forces a choice between a wide structure (many items per level, fewer levels) and a deep structure (fewer items per level, more levels), prefer wide. Seven options across two levels gives the user a manageable decision at each step — they scan seven options, make a choice, scan seven options again. Three options across four levels forces four sequential decisions with three options each, compounding uncertainty at every step. The combinatorial clarity of a wide structure is almost always easier to navigate than the sequential uncertainty of a deep one.
+When the content volume forces a choice between a wide structure (many items per level, fewer levels) and a deep structure (fewer items per level, more levels), prefer wide. Seven options across two levels gives the user a manageable decision at each step - they scan seven options, make a choice, scan seven options again. Three options across four levels forces four sequential decisions with three options each, compounding uncertainty at every step. The combinatorial clarity of a wide structure is almost always easier to navigate than the sequential uncertainty of a deep one.
 
 ---
 
@@ -113,7 +113,7 @@ Card sorting is a generative research method that reveals users' mental models f
 
 ### Open Card Sort
 
-In an open card sort, participants are given cards labeled with content items and asked to group the cards however makes sense to them, then name each group. The designer provides no predefined categories. The output is a collection of emergent groupings and participant-generated labels. Analysis identifies clusters — items that multiple participants placed together — and the vocabulary participants used to name those clusters. Open card sorts are the right method when the IA is being designed from scratch or when there is genuine uncertainty about how users conceptualize the content domain.
+In an open card sort, participants are given cards labeled with content items and asked to group the cards however makes sense to them, then name each group. The designer provides no predefined categories. The output is a collection of emergent groupings and participant-generated labels. Analysis identifies clusters - items that multiple participants placed together - and the vocabulary participants used to name those clusters. Open card sorts are the right method when the IA is being designed from scratch or when there is genuine uncertainty about how users conceptualize the content domain.
 
 ### Closed Card Sort
 
@@ -121,17 +121,17 @@ In a closed card sort, participants sort cards into predefined categories chosen
 
 ### Hybrid Card Sort
 
-In a hybrid card sort, participants sort into predefined categories but may also create new categories when existing ones do not fit. This balances validation (closed) with discovery (open). Hybrid sorts are best for early-stage IA validation when the designer has a candidate structure but wants to discover blind spots — items that users persistently refuse to place in the predefined categories signal that the taxonomy is missing a meaningful grouping.
+In a hybrid card sort, participants sort into predefined categories but may also create new categories when existing ones do not fit. This balances validation (closed) with discovery (open). Hybrid sorts are best for early-stage IA validation when the designer has a candidate structure but wants to discover blind spots - items that users persistently refuse to place in the predefined categories signal that the taxonomy is missing a meaningful grouping.
 
 ### Reading a Dendrogram
 
-Card sort analysis tools generate a dendrogram — a tree diagram showing how often items were placed together across participants. Items that cluster at the top of the dendrogram (joined early, with high similarity scores) belong together in the navigation; items that cluster late (joined only because everything must eventually merge) are weakly associated. Items that appear in multiple clusters across different participants are IA ambiguities: users genuinely disagree about where they belong, which signals that the item's label or scope is unclear. Ambiguous items require either better labeling, placement in multiple locations, or redesign of the item's concept before the IA can be finalized.
+Card sort analysis tools generate a dendrogram - a tree diagram showing how often items were placed together across participants. Items that cluster at the top of the dendrogram (joined early, with high similarity scores) belong together in the navigation; items that cluster late (joined only because everything must eventually merge) are weakly associated. Items that appear in multiple clusters across different participants are IA ambiguities: users genuinely disagree about where they belong, which signals that the item's label or scope is unclear. Ambiguous items require either better labeling, placement in multiple locations, or redesign of the item's concept before the IA can be finalized.
 
 ---
 
 ## 4. Tree Testing
 
-Tree testing validates an IA structure by presenting users with the navigation tree — text only, no visual design — and asking them to find specific items. Because there is no visual design to influence behavior, tree testing isolates the IA's structural clarity from its visual presentation.
+Tree testing validates an IA structure by presenting users with the navigation tree - text only, no visual design - and asking them to find specific items. Because there is no visual design to influence behavior, tree testing isolates the IA's structural clarity from its visual presentation.
 
 ### Success Rate
 
@@ -143,37 +143,37 @@ Success rate measures the percentage of participants who found the correct item.
 | 60–75% | Acceptable; improve labeling before launch |
 | <60% | Structural problem; restructure required |
 
-A success rate below 60% is not a labeling problem — it is a structure problem. Improving labels on a fundamentally wrong structure will raise the score modestly but will not fix the underlying mismatch between the IA and users' mental models.
+A success rate below 60% is not a labeling problem - it is a structure problem. Improving labels on a fundamentally wrong structure will raise the score modestly but will not fix the underlying mismatch between the IA and users' mental models.
 
 ### Directness
 
-Directness measures what percentage of users navigated directly to the correct branch without backtracking. A high success rate with low directness reveals a specific failure mode: users eventually found the item, but only after exploring wrong branches first. This pattern indicates that labels are misleading even when the structure is correct — users are being drawn to the wrong branch by a label that implies the target content, then redirected. Low directness is a reliable signal that high-scent labels on incorrect branches are competing with the correct destination.
+Directness measures what percentage of users navigated directly to the correct branch without backtracking. A high success rate with low directness reveals a specific failure mode: users eventually found the item, but only after exploring wrong branches first. This pattern indicates that labels are misleading even when the structure is correct - users are being drawn to the wrong branch by a label that implies the target content, then redirected. Low directness is a reliable signal that high-scent labels on incorrect branches are competing with the correct destination.
 
 ### Time-on-Task
 
-Time-on-task compares user navigation time against an expert baseline. An expert who knows the structure performs the task to establish a reference time. Users who take more than twice the expert time are experiencing significant navigational friction — they are backtracking, hesitating at ambiguous labels, or exploring dead ends before finding the correct path. Time-on-task above 2× the expert baseline should trigger qualitative follow-up to understand where users are stalling.
+Time-on-task compares user navigation time against an expert baseline. An expert who knows the structure performs the task to establish a reference time. Users who take more than twice the expert time are experiencing significant navigational friction - they are backtracking, hesitating at ambiguous labels, or exploring dead ends before finding the correct path. Time-on-task above 2× the expert baseline should trigger qualitative follow-up to understand where users are stalling.
 
 ---
 
 ## 5. Wayfinding
 
-Wayfinding is the set of signals that answer the user's question "where am I?" at every point in the product. Users need orientation cues at every level of the hierarchy — without them, the product feels like a maze even when the structure is correct.
+Wayfinding is the set of signals that answer the user's question "where am I?" at every point in the product. Users need orientation cues at every level of the hierarchy - without them, the product feels like a maze even when the structure is correct.
 
 ### Breadcrumbs
 
-Breadcrumbs are mandatory at navigation depth three and above. They provide both a location signal (you are here) and an escape route (return to a higher level without using the back button). Implementation requires two accessibility attributes: `aria-label="Breadcrumb"` on the containing `<nav>` element, and `aria-current="page"` on the final item in the trail. Breadcrumbs should reflect the IA hierarchy, not the user's click history — they are a map, not a path trace. Do not use breadcrumbs at depth one or two; they add visual noise without navigational value at shallow depths.
+Breadcrumbs are mandatory at navigation depth three and above. They provide both a location signal (you are here) and an escape route (return to a higher level without using the back button). Implementation requires two accessibility attributes: `aria-label="Breadcrumb"` on the containing `<nav>` element, and `aria-current="page"` on the final item in the trail. Breadcrumbs should reflect the IA hierarchy, not the user's click history - they are a map, not a path trace. Do not use breadcrumbs at depth one or two; they add visual noise without navigational value at shallow depths.
 
 ### Progress Indicators
 
-Progress indicators serve wayfinding in multi-step flows by answering "how far along am I and how much remains?" They should communicate the total number of steps upfront — users make commitment decisions based on total cost, and hiding the endpoint is a dark pattern that erodes trust when the true length is revealed. Never add steps to a flow mid-sequence after the user has begun; if the flow must branch, show the branch as a conditional path rather than as a surprise extension. The visual treatment should distinguish completed steps, the current step, and remaining steps — active state alone is insufficient.
+Progress indicators serve wayfinding in multi-step flows by answering "how far along am I and how much remains?" They should communicate the total number of steps upfront - users make commitment decisions based on total cost, and hiding the endpoint is a dark pattern that erodes trust when the true length is revealed. Never add steps to a flow mid-sequence after the user has begun; if the flow must branch, show the branch as a conditional path rather than as a surprise extension. The visual treatment should distinguish completed steps, the current step, and remaining steps - active state alone is insufficient.
 
 ### Orientation Cues
 
-Every screen needs at least three orientation signals: the active state in the navigation (which section is selected), the page title (what this page is called), and section headings within the content (how this page is organized). These signals work together to maintain the user's spatial model of the product. When any of the three is missing, users compensate by re-reading navigation labels or scrolling back to the top — both are friction that well-designed orientation cues eliminate.
+Every screen needs at least three orientation signals: the active state in the navigation (which section is selected), the page title (what this page is called), and section headings within the content (how this page is organized). These signals work together to maintain the user's spatial model of the product. When any of the three is missing, users compensate by re-reading navigation labels or scrolling back to the top - both are friction that well-designed orientation cues eliminate.
 
 ### Back-Button Contract
 
-The browser back button carries a strong user expectation: pressing it returns to the previous logical state. This contract is violated whenever back navigates to an unexpected location, triggers a data loss warning, or causes a full page reload that discards scroll position or filled form data. Single-page applications must manage browser history explicitly to honor this contract — pushState for new views, replaceState for filter changes that should not create new history entries. A back-button that shows a "you will lose your changes" modal is almost always a sign that the state management design is wrong, not that users should save more often.
+The browser back button carries a strong user expectation: pressing it returns to the previous logical state. This contract is violated whenever back navigates to an unexpected location, triggers a data loss warning, or causes a full page reload that discards scroll position or filled form data. Single-page applications must manage browser history explicitly to honor this contract - pushState for new views, replaceState for filter changes that should not create new history entries. A back-button that shows a "you will lose your changes" modal is almost always a sign that the state management design is wrong, not that users should save more often.
 
 ---
 
@@ -181,15 +181,15 @@ The browser back button carries a strong user expectation: pressing it returns t
 
 ### URL Structure Reflects IA
 
-The URL is the IA made visible. A well-structured URL encodes the user's location in the hierarchy and gives users a mental model of the content space before the page loads. `/products/electronics/laptops/macbook-pro` communicates four levels of IA at a glance; a user who reads that URL understands where they are, what the parent categories are, and can predict what they will find by truncating the path. URLs should be designed in parallel with the IA structure, not retrofitted afterward — mismatches between the URL structure and the navigation structure create disorientation.
+The URL is the IA made visible. A well-structured URL encodes the user's location in the hierarchy and gives users a mental model of the content space before the page loads. `/products/electronics/laptops/macbook-pro` communicates four levels of IA at a glance; a user who reads that URL understands where they are, what the parent categories are, and can predict what they will find by truncating the path. URLs should be designed in parallel with the IA structure, not retrofitted afterward - mismatches between the URL structure and the navigation structure create disorientation.
 
 ### Canonical URLs
 
-Every content page should have exactly one canonical URL. Parameter proliferation — multiple URL forms that all resolve to the same content — fragments link equity, confuses users who share URLs, and makes it impossible to use the URL as an orientation tool. Filter and sort parameters in primary navigation (category pages, search results) should use clean path segments or a minimal, consistent parameter scheme. Session tokens, tracking parameters, and internal state identifiers should not appear in canonical URLs. The `<link rel="canonical">` tag is a fallback for URL normalization, not a substitute for URL discipline.
+Every content page should have exactly one canonical URL. Parameter proliferation - multiple URL forms that all resolve to the same content - fragments link equity, confuses users who share URLs, and makes it impossible to use the URL as an orientation tool. Filter and sort parameters in primary navigation (category pages, search results) should use clean path segments or a minimal, consistent parameter scheme. Session tokens, tracking parameters, and internal state identifiers should not appear in canonical URLs. The `<link rel="canonical">` tag is a fallback for URL normalization, not a substitute for URL discipline.
 
 ### Semantic Slugs
 
-Content URLs should use human-readable slugs derived from the content title, not opaque numeric identifiers. `/articles/how-to-center-a-div` tells a user — and a search engine — what the page contains before they visit it. `/articles/1234` communicates nothing. Semantic slugs serve three IA purposes: they reinforce content identity, they aid orientation in the URL bar, and they build trust by making the destination legible before the page loads. When titles change, retain the original slug and redirect to the new one rather than changing the canonical URL — URL stability is a form of user trust.
+Content URLs should use human-readable slugs derived from the content title, not opaque numeric identifiers. `/articles/how-to-center-a-div` tells a user - and a search engine - what the page contains before they visit it. `/articles/1234` communicates nothing. Semantic slugs serve three IA purposes: they reinforce content identity, they aid orientation in the URL bar, and they build trust by making the destination legible before the page loads. When titles change, retain the original slug and redirect to the new one rather than changing the canonical URL - URL stability is a form of user trust.
 
 ---
 
@@ -199,11 +199,11 @@ Search and browse are complementary navigation strategies, not competing ones. T
 
 ### When Search Wins
 
-Search is the fastest path for users who know what they want and can express it in words. A user who wants "MacBook Pro 14-inch M3" will find it faster by typing than by navigating five levels of product hierarchy. Search also scales to large content sets where browse becomes impractical — a catalog of one million products cannot be browsed; it must be searched. The failure mode for search is vocabulary mismatch: users who do not know the product's terminology cannot formulate a successful query. A user who wants "noise-canceling headphones" may not know a specific brand name or model identifier, and a search engine that requires precise vocabulary will return nothing useful.
+Search is the fastest path for users who know what they want and can express it in words. A user who wants "MacBook Pro 14-inch M3" will find it faster by typing than by navigating five levels of product hierarchy. Search also scales to large content sets where browse becomes impractical - a catalog of one million products cannot be browsed; it must be searched. The failure mode for search is vocabulary mismatch: users who do not know the product's terminology cannot formulate a successful query. A user who wants "noise-canceling headphones" may not know a specific brand name or model identifier, and a search engine that requires precise vocabulary will return nothing useful.
 
 ### When Browse Wins
 
-Browse is necessary for discovery — users who are exploring rather than seeking a specific target, users who are learning the product's content space, and users who do not yet know the vocabulary of the domain. A first-time visitor to an e-commerce site discovers product categories by browsing; they cannot search for a category they did not know existed. Browse also serves users who make decisions through comparison — seeing all options in a category simultaneously is a different cognitive task than searching for options one at a time.
+Browse is necessary for discovery - users who are exploring rather than seeking a specific target, users who are learning the product's content space, and users who do not yet know the vocabulary of the domain. A first-time visitor to an e-commerce site discovers product categories by browsing; they cannot search for a category they did not know existed. Browse also serves users who make decisions through comparison - seeing all options in a category simultaneously is a different cognitive task than searching for options one at a time.
 
 ### Providing Both
 
@@ -211,7 +211,7 @@ The rule is to provide both search and browse, and to ensure that neither is the
 
 ### Autocomplete
 
-Autocomplete reduces the vocabulary mismatch problem by surfacing valid query terms as users type. It must handle synonyms (headphones / earphones / earbuds should all surface the same category), common misspellings (a typo-tolerant matching algorithm, not exact string matching), and partial matches (the query "mac" should surface MacBook before the user has finished typing). Autocomplete that returns zero results for a near-miss query fails silently — the user sees nothing and concludes that the content does not exist. The system should always return something, even if it is a suggestion to browse a related category.
+Autocomplete reduces the vocabulary mismatch problem by surfacing valid query terms as users type. It must handle synonyms (headphones / earphones / earbuds should all surface the same category), common misspellings (a typo-tolerant matching algorithm, not exact string matching), and partial matches (the query "mac" should surface MacBook before the user has finished typing). Autocomplete that returns zero results for a near-miss query fails silently - the user sees nothing and concludes that the content does not exist. The system should always return something, even if it is a suggestion to browse a related category.
 
 ---
 
@@ -221,11 +221,11 @@ Faceted navigation is a specific navigation pattern that deserves its own detail
 
 ### Attribute Facets
 
-Attribute facets are non-hierarchical, independent dimensions — color, size, price range, rating, availability. Users may select multiple values within a single facet (red or blue) and across multiple facets (red, size M, under $50) simultaneously. Each selection narrows the result set by the intersection of all active filters. Attribute facets should be multi-select by default within a single facet — requiring users to choose only one value per facet (single-select) is a common implementation mistake that forces sequential filtering rather than parallel narrowing.
+Attribute facets are non-hierarchical, independent dimensions - color, size, price range, rating, availability. Users may select multiple values within a single facet (red or blue) and across multiple facets (red, size M, under $50) simultaneously. Each selection narrows the result set by the intersection of all active filters. Attribute facets should be multi-select by default within a single facet - requiring users to choose only one value per facet (single-select) is a common implementation mistake that forces sequential filtering rather than parallel narrowing.
 
 ### Hierarchical Facets
 
-Hierarchical facets have parent-child relationships: selecting a parent value constrains the available child values. A "Category" facet that shows Electronics → Laptops → Gaming Laptops is hierarchical — selecting "Laptops" hides subcategories from other categories and reveals laptop-specific subcategories. Hierarchical facets are appropriate when the attribute space is genuinely taxonomic and when child values are meaningless without their parent context. They are inappropriate when users need to select values from multiple branches of the hierarchy simultaneously.
+Hierarchical facets have parent-child relationships: selecting a parent value constrains the available child values. A "Category" facet that shows Electronics → Laptops → Gaming Laptops is hierarchical - selecting "Laptops" hides subcategories from other categories and reveals laptop-specific subcategories. Hierarchical facets are appropriate when the attribute space is genuinely taxonomic and when child values are meaningless without their parent context. They are inappropriate when users need to select values from multiple branches of the hierarchy simultaneously.
 
 ### Progressive Disclosure of Facets
 
@@ -233,7 +233,7 @@ Showing all available facets simultaneously creates a filtering interface that r
 
 ### Facet Count Display
 
-Showing the item count beside each facet value communicates two things: the density of information behind that filter value, and whether a given combination is possible. A facet value showing "(0)" tells users that selecting it in combination with existing filters will produce an empty result — this information should be surfaced before the user clicks, not after. Count display also helps users calibrate their filtering strategy: a facet value with 847 items and one with 3 items communicate different search territory. Hiding counts forces users to click and discover, which creates unnecessary round-trips between the filter controls and the result set.
+Showing the item count beside each facet value communicates two things: the density of information behind that filter value, and whether a given combination is possible. A facet value showing "(0)" tells users that selecting it in combination with existing filters will produce an empty result - this information should be surfaced before the user clicks, not after. Count display also helps users calibrate their filtering strategy: a facet value with 847 items and one with 3 items communicate different search territory. Hiding counts forces users to click and discover, which creates unnecessary round-trips between the filter controls and the result set.
 
 ---
 

package/reference/intel-schema.md

@@ -1,7 +1,7 @@
 # Intel Store Schema
 
 Version: 1.0.0
-Path: `.design/intel/` (gitignored — runtime data only)
+Path: `.design/intel/` (gitignored - runtime data only)
 
 ## Overview