Components
Navigation
A persistent left sidebar replaces the older top-bar module switcher. The sidebar makes the full module list discoverable at a glance, supports grouping (e.g. Automation), and keeps account switching available without dominating the chrome.
Primary sidebar
Persistent left sidebar (256px expanded, 80px collapsed) with a 68px logo block matching the sub-bar height. Modules, Storage, Account and Support are grouped into light-grey trays. The active item is filled white with deep-teal text and a subtle ring; non-active rows have a soft white hover. A circular collapse toggle sits on the outer edge of the logo block.
Modules
Storage
Account
Support
Ryan Harris
Swift Super
Active route content area.
✓ Do
Group modules into Modules, Storage, Account and Support trays — each tray has its own light-grey background.
✓ Do
Match the logo block height (68px) to the sub-bar so the top edge reads as one continuous band.
✓ Do
Use the white-filled pill with deep-teal text and a subtle primary ring for the active item.
✕ Don't
Don't repeat module names in a top bar and the sidebar — pick one navigation surface.
✕ Don't
Don't hide the sidebar behind a hamburger on desktop. Use the collapse toggle to switch to icon-only mode instead.
✕ Don't
Don't move account switching out of the footer — it shouldn't dominate the chrome.
Sub-bar
Sits flush with the sidebar logo block (68px tall). Holds the module title, section tabs for the current module, and a stacked credits pill with an attached Purchase action. Section tabs use a solid filled pill for the active state so they read as more prominent than in-content tabs.
Events
1,008,979
SMS
49
✓ Do
Match the sub-bar height (68px) to the sidebar logo block so the top edge reads as one continuous band.
✓ Do
Use the solid filled pill for the active section tab — it must outweigh the underline tabs used inside content.
✕ Don't
Don't put module-level navigation in the sub-bar — that belongs in the sidebar.
✕ Don't
Don't separate the Purchase button from the credits pill — keep them as one connected unit.
In-content tabs
Lighter underline tabs used inside the page body to switch between views of the same dataset. Visually quieter than the sub-bar section tabs so the hierarchy stays clear.