App shell context
The top bar and side navigation are inherited shell context. L3 guidance focuses on the task canvas below the shell.
L3
Task and Detail Pattern
Use L3 for one focused object or decision: create, edit, review, preview, or inspect. Keep the page scoped enough that the user knows exactly what can be completed here.
L3
Task Submission Card Layout
Use this layout for focused submission tasks where the user selects, edits, reviews, and submits a batch of child records from one parent request.
Breadcrumb
Use breadcrumb to show the parent list or request route, then the current task. It should support a clear return path.
Task heading
The H1 should name the task and object, such as “Request for 2026 Projects”. Supporting copy can show record count and selected count.
Page actions
Use page-level actions for adding data into the task, such as uploading Excel or creating a project. These are not row actions.
Task tabs
Tabs segment the child records by category. Keep counts plain and preserve the selected count when users move across tabs.
Selection controls
Selection is part of the task, so select-all and view switch controls should sit directly above the card or list surface.
Submission cards
Use cards when each project needs enough metadata to make a review decision. Each card can expose edit, delete, AI cue, and selected state.
Declaration and sticky footer
Put required declarations before the sticky action footer. Footer actions should complete the task: save, exit, or submit.
Usage
Use for AD (P&C) project submission, batch upload review, and any L3 task where the user selects multiple child records before final submission.
Detail Page
Use a clear hierarchy so users can understand the object before entering related tasks.
1
BreadcrumbReturn to the operational list or parent context.
2
Object headerOne H1, one primary lifecycle status, and actions.
3
Compact summaryMetrics or metadata only when they support scanning.
4
Task sectionsDetails, requirements, relationships, timeline, and related records.
Typography
- Metadata labels remain caption scale
- Values use body scale with moderate emphasis
- Long prose uses comfortable line length
Do not
- Use page-wide opacity for completed or locked states
- Turn ordinary row labels into card headings
- Duplicate the same status in multiple sections
Return to L2 with context
L3 pages should not strand the user. When a task is cancelled, saved, submitted, or closed, return to the originating L2 list with search, filters, tabs, pagination, and expanded row state preserved where relevant.
L3Review SubmissionApprove, reject, or return
L2Project RequestsSame tab and row contextOpen L2 rules