Lab 23 / the shell
Everything that stays when the page changes, drawn as it stands: the marks the platform is written in, the switcher that names whose books and which application, the rail and its three states, the world clock, the group block, the notification centre, the period selector and the attention rail. The content area is empty throughout, because the shell owns everything around a page and nothing inside it.
01 / the icon family
Every mark is drawn to the system's own hand: 1.75 stroke, square caps, mitred joins, 24px grid, no rounding anywhere, and each one is descriptive rather than generic. The family covers every navigation row in all six modules, the instruments, the nineteen item types a booking is made of, and the structural geometry the interface itself needs, so nothing anywhere on the platform is drawn by a borrowed hand.
CRM
Accounting & Finance
HR & Payroll
Workstation
Content Management and Consolidated Reporting
The instruments
The trade, what a booking is made of
Inline paths in a single component. A mark is corrected in one place, a new mark is drawn rather than imported, and a mark is chosen by name at the point of use so no binding can shadow it.
02 / the shell
The merged switcher, closed
Three facts in the order a person needs them: the entity, the books it keeps, the application in hand.
Open, one panel and two sections
The rail's three states, corrected
The world clock
Five by default at the foot of the rail, seven at most. The add control states the room left and disables itself at seven rather than failing on the click.
The group block, and the height law
TAI, the bell and the mark are three cells behind hairlines in one frame, identity anchoring the right end. The command field is the same 32px height on the same baseline: nothing in the bar sits at its own size. The user mark returns to initials only, as labs 02, 05, 06 and 10 always drew it; the name and email live in the account menu's header, and notifications also take a rail row under a You group.
01 / the notification centre
The platform can legitimately raise notifications from eight sources, and the variety in that list is what the design carries: some notifications are a person doing something, some are a clock running out, some are money moving, and some are the outside world changing its mind. They do not deserve the same row.
The sweep · what can raise a notification today
The panel · five leads, three rows each, the rest one click away
How the row is built
A headline plus its figure on one line is what sets the width: at 460px "Last free cancellation step reached" and its 50% to 100% chip share a line without either being squeezed. Narrower and the headline wraps, which costs a third line on every row.
The edge is hueless as everywhere else: solid ink is broken, hatched is about to break, information carries nothing. The header count stays the platform law, what is BROKEN rather than what is unread, so an unread release note does not put a red number on the bell. Unread rows carry the faintest paper tint, and and with five three-row leads the whole panel is roughly 520px tall, which still clears any laptop without scrolling.
02 / the world clock
The add control sits at the right end of the clock's own header, in line with the times below it, so the column of controls and the column of figures share an edge. Behind the plus is a proper interface: the active clocks with their handles and a remove control, a search that answers to city names and ISO codes, and the weather, which the platform already has an API for and which is the second thing anyone wants to know about a place.
In the rail · weather beside the time
City, then the weather as a mark and a temperature, then the time. Three columns, one baseline, and the day marker only when the date differs.
The manager · active clocks, search, weather
Search answers to the city, the country and the ISO code, so "SG", "Singapore" and "Sing" all land. Each result previews its offset and current weather before it is added, and the header states the room left rather than failing at seven.
03 / the switcher panel
An entity keeps one line with its books pushed to the right in mono, and the six modules become a two column grid. Ten rows become four rows and three, and the whole panel fits under the card without covering the navigation.
The panel, open
The books move to a mono tail: "US · USD" says what the long sentence said. Modules take their marks and short names, two to a row. The full names stay on the card and in the crumb, so nothing is lost.
04 / the period selector
A list that names every period a person might want is wrong for somebody. Two modes. Simple is the four periods anyone asks for by name. Advanced holds the quarters and a range you draw yourself, with the year switcher beside it and the day count stated as you pick, so the range is understood before it is applied.
Simple
Advanced · quarters and a drawn range
A range picked by eye is easy to get wrong by a day at either end. Stating "15 days" as the second date lands turns the picture into a fact, and it is the number a person compares periods with anyway.
06 / the attention rail, redrawn
The rail carries up to ten and scrolls, so the type sits at full size and the cell has a proper structure.
The rail · lead, eight alert cells, the door
The four cell states, at size
Incident inverts to ink behind a red edge, and only a genuinely crossed gate earns it. Danger carries the solid red edge, attention the orange hatch, and the door sits on paper with no edge at all, because it is a way out rather than an alarm.
Anatomy of a cell
Names no longer truncate ("Overdue receiva…" and "Unissued depart…" are gone), the figures return to full size, and the destination is a legible line rather than a whisper. The cell is 232px against the old 143px floor, and the rail scrolls to reach the tenth.
The lead, alone