Screen kit

28 complete ERP screens, across 7 modules, built from this framework and nothing else — no CSS of their own, not one line. Open one, read its markup, take what you need. They are the answer to "yes, but what does a real screen look like?". Not a component gallery — if you want one control and its settings, the component pages are that. This is whole screens, with realistic data, in the shape an ERP actually uses them.

Why these exist, and what that buys you

The suite is not a showcase — it is this project's gap-finding instrument. Every screen is built only from shipped CSS, and a build gate fails if any of them adds a single declaration of its own. When a screen cannot be built, that is a hole in the framework and it gets recorded and usually fixed. Twenty-one gaps have been found this way.

Which is the useful part for you: these screens are proof the framework covers them. They are rebuilt and re-audited on every commit — axe at 1440 and 390, no sideways scroll, every data table named, every internal link resolving. If a screen here looks right, the CSS behind it is the CSS you install.

Home

Home screens, what each one is for
Screen	Kind	What it is for	Markup
Home	home	a landing page — where a working day starts	copy

Order to cash

Order to cash screens, what each one is for
Screen	Kind	What it is for	Markup
INV-70318	document	one record, read and worked	copy
Customer invoices	report	read-only analysis	copy
SO-51204	document	one record, read and worked	copy
Sales orders	list	find and act on many records at once	copy

Procure to pay

Procure to pay screens, what each one is for
Screen	Kind	What it is for	Markup
Create purchase orders	worksheet	dense entry, computed as you type	copy
PO-88213	document	one record, read and worked	copy
Purchase orders	list	find and act on many records at once	copy
REQ-40118	document	one record, read and worked	copy
Requisitions	list	find and act on many records at once	copy
INV-55710	document	one record, read and worked	copy
Vendor invoices	list	find and act on many records at once	copy

CRM

CRM screens, what each one is for
Screen	Kind	What it is for	Markup
Halden Marine AS	document	one record, read and worked	copy
Accounts	list	find and act on many records at once	copy
Opportunities	list	find and act on many records at once	copy
OPP-2201	document	one record, read and worked	copy

Finance

Finance screens, what each one is for
Screen	Kind	What it is for	Markup
AR aging	report	read-only analysis	copy
Journal entry	document	one record, read and worked	copy
Period close	job	a process with steps and owners	copy
Trial balance	report	read-only analysis	copy

Inventory

Inventory screens, what each one is for
Screen	Kind	What it is for	Markup
Cycle count	worksheet	dense entry, computed as you type	copy
Lot trace	structure	a hierarchy, explored	copy
Stock movement	document	one record, read and worked	copy
Stock on hand	report	read-only analysis	copy

Production

Production screens, what each one is for
Screen	Kind	What it is for	Markup
BOM — PMP-4400	structure	a hierarchy, explored	copy
Capacity	report	read-only analysis	copy
PRO-3310	document	one record, read and worked	copy
Production orders	list	find and act on many records at once	copy

How to take one

Open the screen and use it. Sort, filter, select rows, open a drawer — it is a real page, not a picture of one.
Take the markup. The copy link beside each screen serves that screen's <main> as plain text — no shell, no document wrapper, nothing to unpick. It is cut from the unprefixed build, so the links in it are ordinary app paths rather than this site's.
Install the CSS — installation is one import — and paste. The classes resolve because they are the same ones this site ships.
Check your markup with npx bo-check-markup dist, the same gate the suite passes: it fails on a class or a data-* value the framework does not define. A typo becomes a build error rather than a silently dead rule.

Screens are kinds — home, document, report, list, worksheet, job, structure — and the kind is what a screen owes. A list owes a way to narrow the set and a way to act on several at once; a report owes a total and a way to take it away. That is enforced, not aspirational: which pattern should I use? walks the same decision from the other end.