Components are the atoms; these are the assemblies the platform is actually made of. Every block here exists in the Untitled UI PRO file as a published component with real variants, and every one is drawn below in our tokens with our data. The last section states plainly what we adopted, what we left, and why.
Five types ship in the library. Two of them are the shells we had already ruled by hand, which is the clearest sign the language was the right pick: Dual-tier is the cockpit, Slim is the collapsed icon rail. Desktop open is 280, slim collapsed is 68, and both have real mobile states.
Our ruled shell is Dual-tier with a Slim primary strip: modules always visible, one tap each, boards beside them.
Four types, for the surfaces that would rather spend their width on content than on a rail.
The library’s own user pill, and it matches the brief exactly: photograph, name, email, selector. Its menu carries keyboard hints and a switch-account list, which is where our entity switch belongs.
Thirteen card types sit at the foot of the rail in the library. Five of them do real work here; the upgrade, trial and referral cards belong to a different kind of product.
202 of 366 items issued. The rest sit behind the gate or a supplier.
DismissOpen the queueDeparting within thirty days.
RYRiyadh roadshowMIMilan fashion weekKYKyoto incentiveThree steps left before you can invoice.
Add your entitySet your numberingConnect a payment methodTicketing limits move at 18:00 GST. Anything held past that reprices.
DismissRead moreThe desk answers inside four business hours.
Contact supportTwo shapes cover the platform: a register header that counts what it holds, and a record header that names the thing, its state and its tabs.
Three of the nine metric card types from the file’s Metric item set: the quiet Simple card, the sparkline card, and the full bleed hero. The complete family of nine, with the rule that picks each, lives on the Data page.
Assets no team should redraw: taken from the library itself, not approximated.
Eight bar types exist in the file. The register uses one: view tabs on the left, search and dated controls on the right, and a Filters control that counts what it holds. The dropdown carries checkbox rows and closes with clear words.
The connected stepper: done is a filled check, current wears the halo ring, and what comes later stays quiet. Horizontal on desktop, vertical on the phone.
Five types in the file. We take two: the slim floating line for version updates, closable as ruled with the shell, and the full width banner with an icon chip when the message needs actions.
Eight centerpieces exist; we speak three. The file’s own doctrine matches ours: say why the space is empty, give the next step, and make a search empty clear itself in one click.
Avatar, name, action with the object as a link, and the dotted connector holding the column together. A quoted card carries a comment; the unread dot sits at the right edge.
The dropzone speaks its formats; each file becomes a row with its type icon, its size, and a live bar. Errors keep the row and say what failed.
What the example pages actually teach: the same designs assembled on either shell, from a small set of repeating recipes. These are the compositions the platform builds from; anything outside them goes to a lab first.
| Recipe | What it is | Where it lands |
|---|---|---|
| The shell pair | Every example ships the same page on the sidebar shell and the header shell; content sits flush or in the 1216 container | Ours is ruled: Shell B, the cockpit, with the slim rail collapsed |
| Page header row | Title and support left, at most one primary action right, breadcrumbs above when deep | Every register and record |
| Period toolbar | Segmented 12 months, 30 days, 7 days left; Select dates and Filters right | Analytics and dashboard heads |
| Metric row | Three or four metric cards sharing one type | Dashboard and analytics openers |
| Chart card | Header row, divider, bare chart, optional tabbed footer | Sales Analytics, the board |
| Flush analytics band | No cards; hairline rules, a two thirds and one third split, inline metric switcher | Dense report pages |
| Register card | Count badge header, filter toolbar, checkbox and identity table, pagination | Every register on the platform |
| Metrics, chart, table | The canonical dashboard stack, in that order | The dashboard second step, pending the content ruling |
| Main and side panel | A 392 to 400px right panel beside the main column | TAI, and record context panels |
| Settings, tabs then form | A flat tab rail over a sectioned form | The 22 flat tabs, Profile first, as ruled |
| Label left form | A third for the label and hint, two thirds for the control, divider rows, Cancel and Save right | Settings and record edit pages |
| Cover profile | Full bleed cover, overlapping avatar, key value rail | The profile rebuild, when its brief is approved |
| Plan and billing kit | Current plan and payment pair over an invoice table | Subscriber billing, Tripbooks itself |
| Integration grid | Logo and toggle cards with a category rail | The Item Library connections and supplier feeds |
| Split list and detail | One card, a vertical rule, each side with its own tabs | The Service desk and messaging |
| Calendar card | Toolbar header over the month grid of event chips | The Event Calendar with its collision check |
| Activity band | The avatar timeline column | Record logs, drawn as the feed above |
The honest ledger of the examination. Everything in the first column exists in the library; the verdict column says whether it is now ours.
| From the library | What it holds | Verdict | Why, for us |
|---|---|---|---|
| Sidebar navigation · 5 types | Simple, Dual-tier, Slim, Sections dividers, Sections subheadings | Adopted | Dual-tier and Slim are the shell we ruled by hand; we now inherit their geometry, 280 open and 68 collapsed. |
| Header navigation · 4 types | Simple, Dual-tier, Tabs, Centered | Adopted | Dual-tier is the two-level bar we drew for the horizontal alternative. |
| Nav account card | Simple and Card, open and closed, with its menu | Adopted | The user pill, exactly as briefed: photograph, name, email, selector. Its menu carries our entity switch. |
| Nav featured card · 13 types | Progress, projects, onboarding, message, support, referral, QR | Five adopted | Progress, current projects, onboarding steps, message and support. The upgrade and trial CTAs are for a different kind of product. |
| Badge · 12 colours, 3 shapes | Dot, x-close, icon, avatar, country flag | Adopted | Six colours beyond the semantic five, so a status never has to borrow error red. The country and avatar slots each replace a column. |
| Input field · 14 types | Date, leading and trailing dropdown, tags, counter, payment, OTP, upload | Adopted | The date type retires the raw browser control; the leading dropdown carries currency and dial code. |
| Button · sizes, loading, destructive, utility | xs to xl, 5 hierarchies, loading as a state | Adopted | Loading is first class, which every issue and post on this platform needs. Utility is the size a dense row can hold. |
| Modal · 53 types | Plus header and action-row primitives | Anatomy adopted | We take the two primitives and the dozen shapes we use; the rest are for other products. |
| Featured icon · 5 treatments | Light, modern, dark, gradient, modern neue | Adopted | The empty-state ruling gave these a job the same day the counter-review landed. |
| Country flag icons | 261 countries, circle, square and rectangle | Adopted | Destinations, nationalities, dial codes and books, all from one set. |
| Payment method icons | 56 methods including SEPA, Wise and UPI | Adopted | The accounting payments tab stops being a stopgap. |
| File type icons · 59 types | PDF, DOCX, XLSX, CSV, ZIP and the rest | Adopted | Document lists on bookings, invoices and suppliers. |
| Help icon and tooltip | 7 arrow placements, with supporting text | Adopted | How a column explains itself without a caption. |
| Background overlay | Default, transparent, gradient, with blur | Adopted | The scrim behind a dialog. The decorative patterns stay out of the operator interface. |
| Content item and rich text | Heading, paragraph, quote, divider scales | Adopted for long form | Terms, policies and itinerary prose on customer surfaces. |
| Screen mockups and browser toolbar | Light and dark chrome | Adopted for the changelog | Framing release screenshots, nothing more. |
| Hand-drawn arrows, emoji, cursors | Marketing and documentation decoration | Not adopted | A ledger does not need a hand-drawn arrow. |
| Metric item · 9 types | Simple, four icon types, four chart types, action footers | Adopted | The whole family, each type with its rule, on the Data page. |
| Charts · 5 families | Line, stacked bar, activity gauge, donut, radar, and the marker | Adopted as the ECharts theme | The library drawings define how ECharts renders, ramp moved to blue. |
| Tables · 15 cell types | Header labels, lead controls, two paginations, the assembled card | Adopted | The register grammar, whole. The identity cell matches the amended one line law. |
| Alerts and toasts | Six colours, the two ring icon, the progress toast | Adopted | The platform speaks four of the six colours. |
| Empty states · 8 centerpieces | Featured icon, illustrations, radar, folder, logo grid | Three adopted | Search, first data, and error. The 3D clouds stay out of the operator surfaces. |
| Activity feeds | Connector column, quoted cards, unread dots | Adopted | Record logs and the notification center. |
| File upload | Dropzone, typed file rows, live bars, error rows | Adopted | Passports, rate sheets and vouchers all arrive this way. |
| Calendars | Month, week and day, event chips, the time marker | Adopted | The Event Calendar; the mini month feeds date pickers. |
| Filters bar · 8 types | Tabs, dated controls, counted filter dropdowns, the slideout | One adopted | The register bar. The advanced builder waits for the query model it must compile to. |
| Tabs · 6 types | Underline, three buttons, segmented, vertical line | Adopted | Underline on records, segmented for view switches, vertical for tall settings. |
| Pagination · 9 bar types | Page numbers, card buttons, dots, mobile collapse | Two adopted | Style A for working registers, style B for reading surfaces. |
| Progress steps | Checks, halo current, connected lines | Adopted | The lifecycle strip: enquiry to issued. |
| Breadcrumbs | Chevron and slash, the current pill | Adopted | Records deeper than two levels. |
| Tree views | Guide lines, indeterminate parents, avatars | Adopted | Document trees on records. |
| Avatars | Six sizes, status, verified, stacks, the add control | Adopted | Identity everywhere; the stack is a desk. |
| Selectable cards | Icon, payment and avatar cards as radio groups | Adopted | Plan pickers, payment methods, cover selection. |
| Dropdown menus | Headers, shortcuts, checkbox rows, nested, footers | Adopted | The account menu and every kebab. |
| Select and multi select | Five triggers, counted checkbox menu, reset and select all | Adopted | Desk pickers and every form. |
| Tags | Dot, flag, avatar, count, close, checkbox | Adopted | Interests, labels and picker tokens. |
| Toggles and sliders | Default and slim; the dual handle range | Adopted | Preferences that act at once; rate floors and ceilings. |
| Button groups | Segmented shell, pressed current, dot and icon segments | Adopted | Period switches and view toggles. |
| Text editor | Toolbar grammar, two sizes, the counter | Toolbar adopted | Terms, policies and itinerary prose. |
| Banners · 5 types | Text field, single, dual, slim, countdown | Two adopted | The slim version bar as ruled, and the full width with actions. |
| Log in and sign up families | Simple, card, split, progress step variants | Adopted | The platform door, with our Access code flow inside it. |
| Email templates | Ten bodies, six headers, six footers | Adopted | Customer mail: quotations, vouchers, reminders. |
| 404 and maintenance pages | Simple, split, illustration, mockup | One adopted | The simple type, in our voice. |
| Command menus · advanced | Split pane users and integrations, chord shortcuts | Base adopted | The palette ships; the split panes wait for a surface that needs them. |
| Slideout panels · 24 contents | Filters, notifications, orders, plans, AI, share, teams | Anatomy adopted | The shell and header; contents drawn per surface as briefed. |
| Color picker | Full picker, swatches, gradient and image tabs | Not adopted | No operator surface chooses colours; parked for label styling. |
| Video players | Three sizes with full transport | Not adopted | Parked until the guide modal returns as ruled. |
| Company and press logos | 90 fictional brands | Not adopted | We have real customers. |