This handbook is written from the library outward. Untitled UI PRO is the base: its foundations, its components, its compositions. The platform laws bind it to Tripbooks. Where the old design system conflicted with the library, the library won and the old rule is gone; where a ruling carried an old rule forward, it is restated here in the library’s vocabulary. If a page and this handbook disagree, the handbook is wrong or the page is, and one of them gets fixed the same day.
Untitled UI PRO, the full file: foundations, 25 base component families, 29 application component families, and the example pages read as recipes. We inventoried all of it, page by page; nothing in this system is approximated from memory.
Tripbooks is an operator platform that moves money and issues travel. The bindings are the laws below: what figures wear, what status means, what a register must never do. They constrain which library variants a surface may pick; they never redraw a component.
Untitled sets figures in Inter. We set every figure in IBM Plex Mono, at every size, on every surface, ruled with the handbook’s first version. It is the single place we depart from stock, and it is deliberate: money columns must align and a price must read as an account.
Specs holds the tokens. Components holds the 51 base groups. Blocks holds the compositions and the adoption ledger. Data holds metrics, charts and tables with their selection rules. Icons holds the marks and their four styles. Review records the rulings. Labs is history, kept, not law.
The gray scale is Untitled’s, 25 through 950. The brand ramp is Untitled’s blue, 25 through 950, with 600 as the working brand in light and 500 in dark; the library’s purple exists nowhere on this platform. Success, warning and error keep the library values. Dark is not an inversion: it is the same tokens redefined once, and every component reads only tokens.
Type is Inter for language and IBM Plex Mono for every figure. The scale is the library’s: display sizes for heroes, 30px semibold for the metric figure, 14px as the working size of forms and tables, 12px semibold for column labels. Paragraph measure tops out at 720px.
| Scale | Values, exactly as the file states them |
|---|---|
| Spacing | 0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160 |
| Radius | 0, 2, 4, 6, 8, 10, 12, 16, 20, 24 and full; cards sit at 12, controls at 8 |
| Shadows | xs to 3xl, seven steps; cards wear xs, dropdowns lg, modals xl; exact values live in Specs |
| Focus | A 2px gap then a 4px ring, brand for actions, error red for destructive |
| Containers | Max width 1280, content 1216; 12 columns, 32px gutters desktop, 16px margins mobile |
Buttons with loading as a first class state, a destructive family and a utility size. Badges in twelve colours and three shapes, with dot, flag and avatar slots. Inputs in fourteen types. Avatars, checkboxes and radios, selectable cards, dropdowns, selects, tags, toggles, sliders, progress, button groups, tooltips, modals. All drawn on the Components page.
Navigation in five sidebar and four header types, the account card, filters bars, tabs in six types, pagination in nine bars, progress steps, breadcrumbs, tree views, alerts, toasts, empty states, activity feeds, file upload, calendars, command menus, slideouts, banners. Drawn on Blocks; metrics, charts and tables have their own page.
The example pages are not decoration; they are the compositions the library intends. We read seventeen recipes out of them, from the metric row to the label left settings form, and every platform surface assembles from those recipes. A layout outside the recipe table goes to a lab before it ships.
Every library component varies along the same axes, and the platform picks by rule, never by taste:
| Axis | The rule |
|---|---|
| Size | md is the default everywhere; sm inside dense composites; utility only inside table rows; xl only on customer surfaces |
| Hierarchy | One primary per surface. Secondary is the bordered white button. Tertiary is a link. Destructive is its own family, never a red primary |
| State | Every control ships all its states, loading included. A control that cannot act is disabled with its reason beside it, in words |
| Breakpoint | Desktop and mobile are drawn variants, not accidents: a long tab row becomes a select, pagination collapses to arrows and a count, tables scroll sideways rather than reflow |
The ruled shell, B, the cockpit, is the library’s own pair: Dual tier open at 280 and Slim collapsed at 68. The account card at the sidebar’s foot is the user pill, photograph, name and email, and its menu carries the entity and module switch so no switcher ever spans a long list. The version bar is the library’s slim banner, closable. The three icons, TAI, theme, notifications, sit in the header with the world clock. The TAI mark is a placeholder until the real icon arrives.
A figure has nine homes in the metric family, five chart families and fifteen table cells, and the Data page carries the whole vocabulary with a selection rule beside every variant. The short form: a figure among peers is a table cell; a figure standing alone is a metric card, quiet types in rows, chart types where the history is the story; a history needing an axis is a chart, picked by the question it answers; never a dual axis, never a rainbow.
Charts render through ECharts, as ruled in Lab 22; the library drawings define the theme: a mono blue ramp with gray for remainders, horizontal gridlines only, no axis strokes, dot legends, and the dark tooltip with its cursor rule on every hover.
At every size, in every surface, including customer documents. Inter carries the words; IBM Plex Mono carries the numbers.
Zero means measured as nothing; a dash means no answer exists; a structurally empty cell is blank. Three glyphs, three facts, and they sort as three facts.
A negative is signed, never bracketed on screen, never red merely for being negative. Red belongs to movement against you.
Any sort or filter removes the column rather than letting it lie, and it returns when the view does.
A converted figure and an exact one never look the same, and a foreign currency never converts silently.
The badge system speaks twelve colours so a status never has to borrow error red, but disposition still has five words: settled, open, dormant, attention, against you. The dot on a status pill carries the disposition; green and red belong to movement and consequence, never to decoration. Charts keep the file’s treatments for the same job: solid lines for the settled series, dotted for projections, the pinstripe band for what is still open.
Hue leaves that job only for money moving against you and the destructive button.
The library pill with the leading dot is the status form everywhere; the dot carries disposition and fill, so the system survives a grayscale print and a colour blind reader.
Every platform surface is one of a short list, and each maps to recipes on the Blocks page: the register is the table card with the filters bar and pagination style A; the record is a page header with underline tabs over stacked blocks, the identity cell law in force; the dashboard is the metric row, chart card and register stack, content pending its ruling; settings is the 22 flat tabs, Profile first, over label left forms; analytics takes the period toolbar and the flush band; the board grows and is never zeroed. Empty states speak three centerpieces: search, first data, error, each with its next step.
Permanently, in words, naming every outstanding condition rather than the first.
A plain fact is drawn as a locked value, never a switch. Ruled with the settings whole design.
No wrap, no overlap, no reflow at every supported width. The identity cell may carry exactly one muted second line inside a fixed 60px row; every other cell stays one line, and a second fact goes to a tooltip, a counter, or the record.
Invoices, quotations and their kin open as pages. Profile shaped records keep their sheets. Slideouts serve filters, notifications and panels, never a document.
Quotation items come from the marketplace or the library; manual is manual once.
Plain words, the customer’s words: Invoices, Bills, Reminders, never dunning, never provision. No em dashes anywhere, in any surface, checked mechanically. No explanatory captions: when a number is wrong the deliverable is the corrected number, and a line earns its place only by carrying a fact the reader cannot get elsewhere on screen. The GATE stays visible: issued never exceeds paid without a dual signed release, and the meter that shows it is a platform drawing, kept, in the library’s grammar.
Everything above, in one place, so a reviewer can walk the list. Mono figures. Zero, dash, blank. Signed negatives. The running balance rule. Books stated. Five dispositions. Status pills with the dot. One line per cell, amended. The reason beside the control. Wired or not drawn. No drawers on document records. Search first items. No captions, no dashes. The gate visible. Accessibility is not a law but a gate: AA contrast measured, not asserted; focus visible; reduced motion honoured; every icon beside its word or above a tooltip.
| From the old system | Verdict | Why |
|---|---|---|
| The measure, the old type scale | Deleted | The library’s scale replaced it whole; only the mono figure rule crossed over, by ruling |
| The hand drawn mark set | Deleted | Icons come from the official packages, four styles, path for path, never redrawn |
| The old chrome, bars and frames | Deleted | The shell is the library’s Dual tier and Slim pair, ruled as Shell B |
| Hatched fills as the open state | Narrowed | The pill’s dot and the chart treatments carry the job; hatching survives only inside charts |
| Two faces, two jobs | Kept | Operator and customer surfaces stay separate worlds; a platform truth, not a style |
| The coverage meter, the gate visible | Kept | A platform invariant; drawn now in library grammar |
| The laws register | Kept | Laws bind behaviour, not pixels; each is restated above in library vocabulary |
| Full width only, blocks stack | Amended | Ruled 26 Aug 2026: the three library split recipes, the side panel, the split list and detail card, and the flush analytics band, are lawful; every other layout still stacks full width |
Components are the base library, 51 groups. Blocks are the compositions with the adoption ledger, 47 rows of what we took and what we left. Data is the figure vocabulary. A new surface starts from a brief, picks recipes by rule, and anything the recipes cannot express goes to a lab first.
The migration plan starts from here: run the disposition validator against the new palette, migrate the law register, ship the ECharts theme as code, audit component parity surface by surface, and convert register first routes before record ones. Each step lands as a brief with its options stated, as ruled.