Templates

The four shells that pages sit in, and ready-made screen blocks built with them.

What a template is

A template is the fixed structure around a page: the top bar, navigation, content area, footer and their layout at different screen widths. Patterns and components sit inside these shells. The shells provide the page title, the skip link, focus management and landmarks from one place.

Scope

Shell	For
AppShell	The main application layout for a signed-in user: navigation, top bar, content
AuthShell	Sign-in, one-time code and password screens
PrintShell	A4 layout for documents and receipts to be printed
PublicShell	Information and status pages that need no session

The AppShell, AuthShell and PrintShell pages are ready: AppShell, AuthShell, PrintShell.

Blocks

Blocks are ready-made screens where shells and patterns come together. Each block comes with a Storybook story and code you can copy; it works in both brands and both modes. Examples use fictional data only.

Block	Shell	What it shows
Sign-in	AuthShell	Credentials, field and form errors
One-time code	AuthShell	Code entry, expiry and resending
Dashboard	AppShell	Summary cards, charts and recent records
Empty dashboard	AppShell	First-use steps
Account overview	AppShell	Profile, usage limits and activity
List and filters	AppShell	Filters, table, pagination and bulk actions
Settings	AppShell	Settings in tabs, saving and delete confirmation
Receipt and statement	PrintShell	A printable document and a period statement
Detail drawer	AppShell	A record’s details in a side panel, picked from a list
Notification centre	AppShell	The bell in the top bar, an unread count and the notification panel
Account menu	AppShell	Profile, preferences and sign-out in the top bar
Status pages	No shell	Not found (404), server error (500) and maintenance pages
Onboarding checklist	AppShell	Setup steps, progress and a success state