Home/Shells

Shells

A shell is the whole-page chrome — the frame within which features live. Each shell is mobile, tablet, and desktop in one. Shells are kit-scoped: dashboard shells are not portal shells, and portals never inherit dashboard chrome.

9 shells Responsive Mobile · tablet · desktop

Dashboard shells

For the operational product — verticals and shared modules. Anchored to the desktop because that's where ops staff work; reflows down for branch managers on phones.

SHL · 01

Dashboard shell

Fixed 252px sidebar with org switcher, primary action button, grouped nav and personal account footer. Top breadcrumb bar with search, notifications and the active user. Used by every vertical hub and shared module.

Desktop primary Tablet Mobile collapse

Live shell Anatomy →

SHL · 02

Settings shell

Two-rail nested layout for any settings-style surface: 240px section rail (Account, Billing, Members, Extensions) inside the dashboard chrome, with a 900px max-width content column on the right.

Desktop primary Mobile collapse

Live shell Anatomy →

SHL · 03

Data-table shell

Full-bleed table chrome — title, filter toolbar, primary action, sticky column headers, row selection and pagination. The workhorse layout for list-heavy verticals (Stock, Customers, Audit).

Desktop Tablet

Live shell Anatomy →

Portal shells

For audience-facing surfaces. Each portal has its own shell — chrome stripped to what its audience actually needs. Portals never inherit dashboard chrome.

SHL · 04

POS portal shell

Touch point-of-sale: phone shell with bottom tab bar (Sale · Items · Receipts · More), big keypad and category tiles. Tablet folds the tabs into a side rail. Desktop adds a customer pane on the right.

Mobile primary Tablet Desktop counter PWA

Portal hub Open sale screen →

SHL · 05

Parent portal shell

Mobile-first. Status bar, the fee-balance hero banner, simple list rows for children, a notice strip and a four-tab bottom bar (Home · Fees · Notices · Profile). Works on intermittent connectivity.

Mobile primary Tablet PWA

Portal hub Open dashboard →

SHL · 06

Student portal shell

Tablet-first. Left rail with the student's class and term anchor; main panel devotes itself to one anchor surface (Timetable, Results, Notices, Library). On phone, the rail collapses into a sheet.

Tablet primary Mobile

Portal hub Open timetable →

SHL · 07

Teacher portal shell

Tablet at the front of class, desktop for grading. Side nav anchored to the active class & term; primary surface is whichever workflow the teacher just opened — marks entry, attendance, lesson plan.

Tablet primary Desktop Mobile

Portal hub Open marks entry →

SHL · 08

Staff portal shell

Self-service shell for internal staff: payslips, leave, time-sheets, directory. Desktop-first but PWA-friendly. Same nav model as the dashboard, narrower and softer — staff aren't operators.

Desktop primary PWA

Portal hub

SHL · 09

Admin control plane shell

Cross-tenant operations for the platform team. Desktop-only, dark by default — pretends to be infrastructure. Subscriptions, health, support, audit. The one shell that breaks the canvas rule.

Desktop only Dark by default

Portal hub

When to use which shell

A simple cheat sheet.

Use case	Shell	Why
Branch manager dashboard	Dashboard	Sidebar + table-heavy work, desktop-first
Workspace settings	Settings	Section rail keeps subsections discoverable
Stock list, customer list, audit log	Data-table	Full-bleed table chrome, sticky headers
Cashier on a phone	POS portal	Stripped chrome; thumb-zone keypad
Parent checking fees	Parent portal	Mobile-first, low-bandwidth, hero banner
Student timetable lookup	Student portal	Tablet calendar grid is the centre of mass
Teacher entering marks	Teacher portal	Class-anchored side nav + grading grid
Staff payslip download	Staff portal	Same nav model as dashboard, softer surfaces
Platform operator	Admin control plane	Dark, dense, desktop-only — feels infrastructural