Panels

Design a panel system for a workspace or dashboard where multiple content areas sit side by side or stack vertically. Each panel should have a clear job: one may hold navigation, another live data, another editable settings or detail content. The design should make it obvious which panel is active and how the user moves between them.

Show the full set of panel states: default, expanded, collapsed, and hidden if needed. Include the controls that trigger each state, and make the affordances visible without stealing space from the content. If panels can be resized, show the handle and the constraint behavior so the layout does not break when space gets tight.

Plan for responsive behavior. On wide screens, panels can split or dock; on narrow screens, they should stack, slide over, or convert into tabs. Keep the active panel readable, keep secondary panels reachable, and make sure users can recover context after collapsing or moving a panel.

Leverage contrast and shadows to visually differentiate panels and give a sense of depth or priority.