Launch narrative
The revised introduction begins with the task and shows the finished app before describing how it was built.
THE PATTERN LIBRARY / 01A sense
A sense
of direction.
Six ways to move through an app. Try the interactions, see what each pattern makes possible, and choose the structure that suits the work.
Live specimens · Sample content01
Workspace sidebar
For apps with several work areas and a growing collection of destinations.
Acme workspace
WORKSPACE
Ready for a decision.
Work waiting for your review.
- The October launchArtifact
A product story and its supporting notes
- Follow up with the research teamEmail
A draft for the selected recipients
Collapse the groups or change destinations. Try drawer opens the compact version, with keyboard focus contained and Escape to close.
02
Top navigation
For a focused app with a small set of equally important sections.
WorkspaceMC
Everything in motion.
An overview of the work being prepared for your team.
- October launchIn review
Decisions ready for review
- Customer researchDraft
The first synthesis is ready
The current section has a quiet underline. Each destination opens different content, while the app keeps its place.
03
Local tabs
For related views of the same thing: an overview, its sources, and its history.
October launch briefDraft
Lead with the useful part.
The opening should show a real task moving from a conversation to a working app. Keep the product example close to the story.
The brief is ready for a closer review.- Product walkthroughWalkthrough
The app, its inputs and the final review
- Customer interviewInterview
Why the team needed this workflow
- Draft updatedDraft
The product example now opens the story
- Source addedSource
Customer interview included in the brief
Arrow keys, Home, and End move focus; Enter or Space selects. The active view is in the URL, so refresh and browser history preserve your place.
04
Breadcrumbs
For a hierarchy where people need to see where they are and move back up.
DOCUMENT
Launch narrative
A concise story of how the product turns an intention into something useful. Begin with the task, then show the result.
Use the trail above to return to the project or workspace.Go up to the workspace, then open the project and either document. Breadcrumbs show location; they do not replace the main navigation.
05
Queue & detail
For reviewing a sequence of items while keeping the surrounding work in view.
Review queue3 items
Select an item or move with the previous and next controls. On a narrow screen, the detail opens on its own with a clear way back.
06
Mobile bottom bar
For a few frequently used destinations in an app designed around the phone.
Your workspace Example
GOOD MORNING
A little to review.
- October launchDraft
The narrative is ready
- Monday reviewMeeting
An agenda to check
WITHIN REACH
Three destinations.
One clear current location.
Keep words alongside icons and preserve enough room for touch. Reserve the bar for destinations; actions belong with their content.
Use one primary navigation pattern. Add local navigation only where it makes the work easier to understand.