Patterns

A pattern is not a component: it is the arrangement several components take when a screen has a job to do. Six are written, each to the component page’s shape one level up — what it is for, the components it is made of, and the rules that hold between them.

Shell and navigationThe product shell — the floating rail, the top bar level with it, the content column between — that every MAFO, iRTB and MobuppsX screen opens with.

A dashboardHeadline numbers first, then cards with a chart in the slot — the screen a product opens on.

Filters and a tableThe list page: a card with the page's title and actions, tabs for its views, a filter row, the table, and the pager with its range.

Forms and overlaysWhich control a value takes, how fields stack, and when a task is a dialog, a sheet or a page.

Empty, loading and errorWhat a data container shows before its data, while it comes, and when it fails — the trio every data container must have.

Chat — Echo AIThe thread, the turn, the bubble, the composer — a conversation with the product's AI, and the mark that says a machine wrote it.

What a pattern page carries

	What it is
The arrangement, rendered	the workshop’s own story where one holds the pattern (the shell, the states, the chat); a fragment composed from the components’ markup where none does (the dashboard, the list page, the dialog)
What it is for	when to use the arrangement and when not to
The components it is made of	each part’s job in the arrangement, and when that part is the one to use
The rules that hold between them	which action is primary, what the empty state says, where loading goes

The pieces, by themselves

The registry’s Shells and patterns group is five items; four of them are on the pages above and the Footer is the site’s own, with no product pattern — it is on Footer.

Component	Use when	Where
Empty / loading / error states	any table, list, card or panel that loads data — every data container carries all three	workshop · 1 set
Footer	the bottom of every site page — 128 above it, 24 below, the blob behind its right edge on the pages that have one	workshop · 1 set
Nav item	composing Sidebar; a link in any dark rail	workshop · 1 set
Sidebar	a product screen — MAFO and the Cabinet open with it, and iRTB and MobuppsX as designed	workshop · 2 sets
Topbar	a product screen — under the page’s top inset, beside the Sidebar	workshop · 1 set

Where the patterns go next

The Figma product kit is built from these six — nine screens for MAFO and iRTB, each assembled from library components only. The pages here are what they are built from.