ui-context-and-scopelisted

# UI Context and Scope Users need to know three things at all times: 1. **Where am I?** — current location in the product hierarchy 2. **What context am I in?** — which section, record, or workspace is active 3. **What will my actions affect?** — scope of changes before committing them When these are unclear, users make mistakes, feel lost, and lose trust in the product. ## Communicating Hierarchy with Visual Structure ### Lines and Dividers Horizontal rules and borders signal the boundary between sections. Use them to separate content areas that belong to different contexts — not just for decoration. - A line between a header and content says "the content below belongs to this header" - A sidebar border says "this is a different region with a different purpose" - Avoid overusing dividers — proximity and whitespace should do most of the work; dividers reinforce where space alone is insufficient ### Colour Regions and Background Fills Background colour is one of the strongest signals for "you are now in a different area." - Use a distinct background shade for sidebars, panels, or contextual drawers - Active or selected regions benefit from a subtle fill to confirm "this is the current context" - When a user's changes are scoped to a specific section, that section should be visually bounded — border, fill, or both — so the scope is self-evident before the user commits ### Section Labels and Context Headers Every major region should be able to answer "what am I?" without