The library answers the same question many ways on purpose: a figure can live in nine metric cards, five chart families and fifteen table cells. This page shows each family whole, taken from the Untitled UI PRO file, and beside every variant the rule that picks it. Nothing here is chosen by taste.
Three ways to say how a figure moved, from the file’s _Change set. Green and red belong to the direction of movement, never to the value itself.
| Type | Anatomy | Use when |
|---|---|---|
| Arrow text | Straight arrow and a coloured figure | inline after a number, where the movement is secondary |
| Trend text | Wavy trend arrow, coloured figure, gray comparison | beside charts and in headline rows, where the period is named |
| Bordered pill | White pill, coloured arrow, neutral figure | on the baseline of a large figure; the quiet default for KPI cards |
The file’s Metric item set: Simple, four icon types, four chart types, each with an optional action footer. Every figure is IBM Plex Mono; the sparkline colour follows the movement.
| Type | What it carries | Use when |
|---|---|---|
| Simple | The figure and its movement, nothing else | KPI strips where several cards share a row and the row must stay quiet |
| Icon 01 | A circular subject mark above the label | a stat standing alone, where the subject needs naming at a glance |
| Icon 02 | Featured icon beside a bold label | the leading stat of a module page; one per surface |
| Icon 03 | Outlined icon tile, change right aligned | report summaries where the comparison matters as much as the figure |
| Icon 04 | The compact one, icon inline with the label | dense grids and side panels; the smallest honest stat card |
| Chart 01 | Figure left, sparkline right | headline rows in analytics; the shape of the period beside the total |
| Chart 02 | Soft layered area, no marker | ambient context; the area makes no axis claim and must not be read for values |
| Chart 03 | Full bleed area under the figure | the hero card; the trend is the story and takes the whole card |
| Chart 04 | Titled header with divider, full width line | a card that stands alone as a small report of its own |
Twelve shapes in the file, each with a green and a red twin. The shape in the library is placeholder; real data draws the line. The halo marks the latest point.
Five chart families exist in the file: line, stacked bar, activity gauge, donut and radar. The platform renders them through ECharts; what follows is their theme, drawn from the library with the ramp moved from purple to our blue. Horizontal gridlines only, no axis strokes, dot legends, and the dark tooltip with a cursor rule for every hover.
| The question | The chart | The rule |
|---|---|---|
| How did it move over time | Line chart | Up to three series in the blue ramp; the area fill belongs to the top series only |
| What is it made of, over time | Stacked bar | Dark blue settled at the base, lighter above, gray for the remainder; rounded tops |
| How far along, against a target | Activity gauge | Up to three rings, twelve o’clock start; the figure sits in the center |
| What share of the whole | Donut | One ramp, largest slice first from twelve o’clock, gray for the tail; never a rainbow |
| How does the profile compare | Radar | Two or three series at twenty percent fill; a specialist chart, used sparingly |
| Two measures, two scales | Two charts | Never a dual axis; index them or draw them side by side |
The register is the platform’s home surface, and the library’s table system covers it whole: header labels with sort and help states, fifteen cell types, three lead controls, two pagination styles and the assembled table card.
| The platform fact | The cell |
|---|---|
| A customer, an agent, a supplier | Avatar with text; this is the identity cell and the only two line cell |
| A booking status, a payment state | Dot badge; the dot carries disposition and fill |
| Money | Mono figure, right aligned; a trend pill only where the movement is the point |
| A document | File type cell with the format chip |
| A card on file | Payment method cell |
| People attached to the record | Avatar group with the numeric tail |
| Many labels | Up to three badges and a counted tail, never a wrapped row |
| Utilisation, completion | Progress bar with the mono percentage |
| A judgement | Star rating |
| Row actions | Two text buttons, or up to four icons, or the overflow menu; never two kinds together |
Card header with the count badge, toolbar with search and filters, sortable header row, identity cells, mono money, two action icons, pagination style A. This is the register grammar.
| Booking | Status | Value | Departure | Desk | ||
|---|---|---|---|---|---|---|
| AHAmira HaddadBKG-RYH39M4S | Issued | $12,480.00 | 22 Sep 2026 | Riyadh | ||
| JPJonas PetersenBKG-K2M11PQ0 | Holding | $3,215.50 | 04 Oct 2026 | London | ||
| MTMariam ToureBKG-Z8V47LC2 | Issued | $7,940.00 | 11 Oct 2026 | Paris | ||
| RSRavi ShankarBKG-Q5D93XN8 | Cancelled | $1,120.00 | 19 Oct 2026 | Dubai |
Pagination style B, for reading surfaces rather than working registers:
| Amira Haddad | $12,480.00 |
| Jonas Petersen | $3,215.50 |
| Mariam Toure | $7,940.00 |
| Amira Haddad | $12,480.00 |
| Jonas Petersen | $3,215.50 |
| Mariam Toure | $7,940.00 |
The file ships three empty table doctrines: a search empty says what was searched and clears in one click; a data empty explains what will fill the space; an error empty offers refresh before support. The search empty, assembled:
The short version of this page. A figure among peers lives in a table cell. A figure that stands alone takes a metric card: the quiet types in rows, the chart types where its history is the story. A history that needs an axis is a chart, picked by the question it answers. And when two families could serve, the quieter one wins.