Design Principle
Long docs need to show current position, section structure, and related next steps.
Principle
Long docs need to show current position, section structure, and related next steps.
Design action
Left nav owns the doc set, prose uses constrained width, right TOC tracks h2/h3, and the bottom offers previous/next or related links.
Examples
Positive example: Guides, standards, knowledge resource maps, API docs, and design system documentation. Counterexample: A long page has no anchors, table of contents, or return path.
Apply when
Guides, standards, knowledge resource maps, API docs, and design system documentation. Users need to judge state, scope, risk, or next action quickly.
Source notes
Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries. GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Carbon Patterns: https://carbondesignsystem.com/patterns/ Shopify Polaris: https://polaris-react.shopify.com/ Atlassian Design System: https://atlassian.design/ Design Systems Repo: https://designsystemsrepo.com/
Agent Directive
Left nav owns the doc set, prose uses constrained width, right TOC tracks h2/h3, and the bottom offers previous/next or related links.