A product shell that survives the third navigation rewrite, because it was drawn to expect one.
Most application shells are designed once, around the feature set of that quarter, and then quietly deform as sections are added. The sidebar grows a second level, then a third, and the command bar arrives to paper over the result.
This shell starts from the assumption that the sections will change and the frame will not.
Navigation depth is capped by the design rather than by discipline: there is no third level to add. Anything that would need one becomes a page-level tab, which is cheaper to change and impossible to hide things in.
Reference landscape
- Linear — Right about density and speed
- Notion — Right about nesting, at the cost of findability
“Cap the depth and the navigation stops rotting.”
Sidebars decay because nothing stops a team adding one more level. A shell with no third level forces the question — is this a section or a view? — at the moment it is cheap to answer, rather than two years later when the answer is a migration.
Stage by stage
01
Information architecture
Sections, views and settings separated into three fixed planes, each with its own rule for what may live there.
02
Design system
Twenty-two components, of which six carry the shell itself; the rest are page furniture that can be swapped without touching the frame.
What was difficult
Collapsed sidebars usually lose the labels and become a row of guesses.
Collapsing keeps the active section's label and drops the rest, so orientation survives even when the affordance doesn't.
Exactly what you get
- Figma source
- 9 screens
- Light + dark
- React + Tailwind
- Version
- 1.0.0
- Formats
- Figma, React, Tailwind
- Screens
- 9
- Components
- 22
- Dark mode
- Yes
- Prototype
- Yes
- Accessibility
- AA
Dependencies
- Inter — SIL Open Font Licence — included
Commercial fonts are never redistributed — they are named and linked, with a free equivalent substituted in the delivered files.
A frame that took three days to adopt and has outlived two feature rewrites.