Badges and labels - .n-badge: a short status or category in a pill. Colours: n-badge--red (rejected, failed), --amber (pending, needs attention), --green (settled, complete), --blue (information). Outlined forms: n-badge--outline, --outline-red, --outline-blue, --outline-green, --outline-grey. - .n-text-badge: a tiny uppercase label above or beside a value (CURRENT, DEPOSIT). - .n-dotted: a status with a coloured dot (n-dotted--green, --red, --amber, --blue), for table cells and lists. For a chart legend, set the dot colour with style="--dot-color: var(--color-vis-blue-2)".

Buttons: .n-button with one variant. One primary button per view at most. - (no variant): a quiet text button, for secondary actions and icon buttons. - n-button--primary: the main action (black in light mode, white in dark). - n-button--secondary: grey fill. n-button--outlined: a thin border. - n-button--red / --amber / --green: only for actions that carry that meaning. - n-button--pill: rounded ends, for chips and floating actions. Icon + text: the icon first, text in a <span>. Icon only: aria-label on the button. Apps are read-only, so buttons filter, sort, open details, refresh or export.

Card: the container for one topic. .n-card is the Nio card; .nio-card adds the dashboard's header rule, light 22px title and body padding. - n-card__actions: icon buttons on the right of the header (search, more, expand). - nio-card__toolbar: filters for the card's content (segmented control, search, select). - nio-card__body: padded content. Add nio-card__body--flush for lists and tables that run edge to edge. - nio-card__footer: a source note, a timestamp or a link.

Charts 1. Sparkline (.svg-line-graph, from the dashboard's FX rates card): a trend with no axes. Add svg-line-graph--down for a falling series (red); rising is green. Build the paths with the function below. Set the height with --svg-line-graph-height. 2. Share bars (.nio-bar): a value as a share of a whole, like "Combined cash balance by currency". Set --value as a percentage; the bar uses the selected colour (black in light mode) unless --bar-color is set. 3. Bigger charts: inline SVG. Style marks with CSS classes and var() so they follow the theme: categorical series in --color-vis-* order (blue-2, orange-3, purple-3, green-2, pink-2, blue-4), axes and grid lines in --color-border-primary, labels in --color-text-secondary at 12px. Legend: .n-dotted with --dot-color.

Dialog: details for one record (a payment, an account), opened from a row. Open with dialog.showModal(); buttons with a value close it through method="dialog". The body scrolls; keep the footer to one or two buttons.

Disclosure: secondary detail the reader can expand (methodology, raw fields).

Fields: .n-field holds a label and an .n-field__wrapper around the control. - n-field__text inside the wrapper: a prefix or suffix (an icon, a currency code). - Give a field room with an inline style, e.g. style="flex: 1; min-width: 220px". - Checkboxes, radios and switches: label.n-field with n-field--checkbox, n-field--radio or n-field--switch, the input first, then span.n-field__label. - n-fieldset groups related fields under a legend. n-field--pill rounds the wrapper.

Key figures: the few numbers the app is about, at the top of a card or the page. .n-amount is Nio's money format: the currency CODE (not a symbol) in n-amount__ccy, then the number. Inside .nio-stat the number is large and light. .nio-delta shows a change with an arrow icon and the figure, never colour alone.

Lists: .n-list draws a rule between items. 1. Label / value rows (.nio-row), like Payment tracking on the dashboard. Use button.nio-row when a row opens more detail, with a chevron-right icon. 2. Account rows: the dashboard's own account list. Wrap it in <account-list> (Nio styles the rows inside that element). Use <button class="account"> when a row opens the account, or <div class="account"> when it doesn't.

Notice: a message about the data, in RAG colours with a matching icon. Default is blue information; add nio-notice--success, --warning or --error. Use role="status" for good news and information, role="alert" for errors. Start the text with the outcome.

Page: the frame every app uses. A thin, large title (like "Welcome, Sarah" on the HSBCnet dashboard), then a 12-column grid of cards on the grey page background. nio-span-3 / 4 / 6 / 8 set a card's width on wide screens; cards are full width on phones. The body needs no class: Nio already sets the page background, font and text colour.

Segmented control: switch between 2–5 views or filters of the same content (All / Currency, Payments / Files, 1W / 1M / 3M). It's a radio group, so read the value with a change listener on the fieldset. Give each group its own name. Variants on the fieldset: n-segmented--boxed (outlined), n-segmented--ghost (no background), n-segmented--pilled (round), n-segmented--vertical. The legend is required; keep it sr-only unless a visible label helps.

States: what a card shows while data loads, when there's none, and when a call fails. n-icon--loader is Nio's spinner. Live apps show the loading state while nio.call is pending; replace it with the content, the empty state or the error notice.

Table: rows of records (transactions, payments, accounts). Put it in a card body with nio-card__body--flush and wrap it in .nio-table-wrap so it scrolls sideways on phones. - Numbers: td.nio-num (right-aligned, tabular). Money: currency code, then the number. - A second line of detail: span.nio-table__secondary. - Sorting: a button.nio-table__sort in the th, with aria-sort on the th that is sorted. - Status: an .n-badge or .n-dotted, never colour alone.

Tooltip: extra explanation behind an information icon (how a figure is calculated). The trigger and the tooltip share one anchor name, set as --tooltip-anchor on both, unique per tooltip. Click (popovertarget) or hover (interestfor) opens it.