Pages
Templates filled with real content, and their states: empty, loading, error and done. Pages are where the system is tested against the words and data it will actually hold.
Content
App
- Calendar
- A month grid built on a table, with today marked in words and an agenda list
- Chart
- Charts with filters, native tooltips, a crosshair and a table view
- Chat
- Customer support chat: conversation list, message log and composer
- Dashboard
- A back-office overview: key figures, a target, a chart and what needs attention
- Data table
- A data table with search, filter, sortable columns, row selection and pagination
- Kanban
- A kanban board with a keyboard-friendly Move to control instead of drag and drop
- Products
- A sidebar layout with a side sheet for editing and a modal dialog to confirm a delete
Flows
- Checkout
- A delivery form with an error summary, fieldsets and an order table
- Order detail
- One order: summary, items, an activity timeline, a notes field and an actions menu
- Password reset
- Forgot and reset password: the request, the check-your-email state, and choosing a new password
- Search
- Search results with a count, filters as checkboxes, sorting and highlighted matches
- Settings
- Settings with tabs, switches that apply at once, a logo upload and a danger zone
- Sign-up
- Create an account: few fields, passkey option, password rules shown as you type
- Wizard
- A multi-step setup: stepper, step count, one topic per step, Back and Continue
States
- Empty state
- A first-run empty list with one clear action, plus a no-results variant
- Error pages
- Error pages: 404, 500 and offline, each with plain words and a next step
- Loading state
- Loading: a busy region with words and a progress bar, and a button that shows it is saving
- Success
- A confirmation page: what happened, the reference, what happens next
Marketing
- Help centre
- A help centre home: search first, then popular topics and a way to contact a person
- Landing
- A product landing page: a plain promise, one call to action, a product view, features, steps and a closing call to action
- Pricing
- Pricing plans in a comparable table-backed layout with the price per month in words and numbers
Mobile
- Mobile article
- A reading page with a back link, comfortable measure and a feedback bar
- Mobile dashboard
- Phone dashboard: key figures, target, attention list and a small chart, with a bottom tab bar
- Mobile form
- A long form: stacked fields, the right keyboard for each input, an inline error and a sticky save bar
- Mobile list
- A grouped list with search, a segmented filter, 48px rows and Load more
- Mobile login
- Sign-in that meets WCAG 2.2 accessible authentication: paste allowed, password managers, show password
Showcase
- Classifieds home
- A dense classifieds homepage in the Normal UI style: left rail, three category columns, side lists, fictional brand
- Freight dashboard
- Freight analytics built with grid, flex and gap only, defensive CSS, and a switch to preview no data, 1, 2, typical, so many and broken data