Institutional Finance Design System

Use for actions — submit, confirm, execute — never for navigation (that is a link). One primary button per view region; the hierarchy is the decision, not the decoration.

Do not use danger styling for emphasis — it is reserved for destructive or capital-committing actions, and those always pair with a confirm step. Avoid icon-only buttons for irreversible actions.

Loading state disables the control and sets aria-busy to prevent double-submit — in an order path, a double-click is a duplicate order. Focus ring is never removed, only restyled.

Destructive financial actions (close position, cancel all) require a typed or two-step confirm so the action leaves an auditable intent trail (SEC 17a-4 discipline).

Use for free-form single-line entry. Labels are always visible — placeholder-as-label fails the moment a user starts typing, and screen readers lose context.

Do not validate on submit only. Financial forms validate pre-flight, field by field, because a round-trip costs latency the user can feel (the FIX order-entry budget is 8–12ms).

Errors bind via aria-describedby and never rely on colour alone. Numeric fields use inputmode + tabular-nums so digits align in review.

Fields collecting personal data show why beside the field — in-context citation reduced KYC support tickets and lifted completion in the EDD studies.

Toggle is for instant-effect settings only — the state change IS the action. Checkbox is for declarations collected now, applied on submit.

Never use a toggle where a submit follows — the user cannot tell whether the change took effect. Never pre-tick consent checkboxes.

Both controls keep a 44px touch target regardless of visual size; state is announced via aria-checked, not colour.

Consent to data processing or marketing must be an explicit affirmative act — unticked by default, granular per purpose, with withdrawal on the same surface (GDPR / MiFID client-communication rules).

Labelling a state or a category that the reader needs to see without reading the row — order status, account tier, risk band.

Never as the only carrier of a state that changes what the reader may do: a badge is a summary, and a summary is not a permission. Never use one for a count that keeps moving, and never stack more than two on a row — past two, nothing is emphasised.

The badge text is the state, so it is announced without needing its colour; the colour is redundant. Where it labels a control, it is inside that control's accessible name rather than adjacent to it, because adjacency is a visual relationship only.

WCAG 2.2 SC 1.4.1 Use of Colour and SC 1.4.3 Contrast (Minimum). Badges fail contrast more often than any other component in this catalogue, because tinted backgrounds get chosen for the tint rather than for the ratio.

Grouping content that is read and acted on as one unit, where the grouping is meaningful rather than decorative.

Never as a container for a single sentence — a card around one line of text adds a boundary and no grouping. Never make the whole card clickable while also placing links inside it: the nested target is unreachable by keyboard and ambiguous by mouse.

Where the card is a link, the accessible name is the heading, not the whole content; where it holds several actions, it is a region with a heading and the actions are separately labelled. Hover elevation is never the only affordance — focus must be visible too.

The single-target rule is the register entry: one card, one primary destination. Everything that goes wrong with cards downstream is a violation of it.

Severity maps to consequence, not excitement: info (no action), warning (action may be needed), critical (action required now). The ladder is fixed system-wide so colour carries meaning.

Toasts auto-dismiss, so they never carry compliance-relevant or loss-relevant information — anything a user might need to prove they saw must persist until acknowledged.

Alerts announce via aria-live (polite for info, assertive for critical). Icons + colour dual-encode severity for colour-blind users.

Margin calls and trade rejections render as persistent banners with timestamps, never toasts — if it can end up in a dispute, it stays on screen and in the log.

The default register for financial data. Numbers right-align in tabular-nums; text left-aligns; headers are real th elements with scope.

Do not centre numeric columns or truncate identifiers (order IDs, ISINs) — truncation is how a wrong-instrument error survives review.

Sticky headers above 20 rows; sort state is visible and announced; density is a user setting, not a designer preference.

Columns that feed compliance review (timestamps, venue, status) are never hideable — configurability stops where the audit requirement starts.

Reporting the state of an operation the user is waiting on, where the total is known and the wait is long enough to need reassurance.

Never where the duration is unknown — that is a spinner or a status message, and a bar that fills to 90% and stops is worse than no bar. Never as a step tracker for a form; that is the step indicator, and conflating them hides which steps are complete.

The value, maximum and current unit are all programmatically exposed; the percentage is also stated in text. Updates are announced at meaningful thresholds, not on every increment.

WCAG 2.2 SC 4.1.2 Name, Role, Value for the progressbar role, and SC 2.2.1 where a determinate operation has a timeout attached to it.

Interrupt only when the user must decide before anything else can happen: irreversible actions, capital commitment, regulatory acknowledgement.

Do not use modals for repeat disclosures — the 18-month RG 268 study showed dismissal time decays from 18s to 0.6s as muscle memory forms. Repeat-exposure content belongs inline at the decision point.

Focus is trapped, Escape closes (unless legally gated), focus returns to the trigger on close. Exactly one primary action; the safe option is never visually dominant by accident.

When a modal carries a regulatory acknowledgement, the render event and dismissal are logged with timestamps — the audit trail is the deliverable, not the pixels.

A short clarification of something already visible — an abbreviation, a regulatory term, a column header that had to be shortened.

Never for content the reader needs in order to act: a tooltip is unreachable on touch, invisible in print, and gone the moment the pointer moves. Never put an interactive element inside one.

Reachable on keyboard focus as well as hover, dismissible with Escape without moving focus, and persistent enough to move the pointer into it — the three conditions of WCAG 1.4.13. The trigger keeps its own accessible name; the tooltip supplements it via aria-describedby.

WCAG 2.2 SC 1.4.13 Content on Hover or Focus: dismissable, hoverable, persistent. Most tooltip implementations fail all three, which is why the register entry is the criterion rather than a style note.

Identifying a person or an account where the face or initial is a recognition aid alongside the name.

Never as the only identifier — an avatar without a name is unreadable to a screen reader and ambiguous to everyone else. Never generate initials from a name without handling single-word and non-Latin names, which is where the pattern silently breaks.

Decorative when the name is adjacent (alt=""), named when it stands alone. Presence and status indicators are stated in words in the accessible name, not implied by a coloured dot on the corner.

The rule is that the avatar is redundant by design: it accelerates recognition for sighted readers and carries no information that is not also in text.

Loading states where the layout is known in advance and the wait is long enough for a blank area to read as an error.

Never for waits under about 300ms — the flash is more disruptive than the wait. Never where the eventual layout is unknown, because a skeleton that does not match what arrives causes a second, worse reflow. Never as a permanent state when the fetch fails; a skeleton that never resolves is a page that lies.

The region is marked busy so assistive technology does not read placeholder structure as content, and the loaded state is announced once. The shimmer respects prefers-reduced-motion and falls back to a static tint.

WCAG 2.2 SC 2.3.3 Animation from Interactions is the reduced-motion obligation; SC 4.1.3 Status Messages covers announcing completion without moving focus.

Disclosure is a render event, not a paragraph: jurisdiction-routed copy computed from client × product × licence, logged with a timestamp when it enters the viewport.

Never reuse one global disclosure string — the RG 268 engagement standard is jurisdiction-specific, and generic text fails it even when displayed correctly.

Contextual inline at the decision point beat modal and header-strip patterns across 18 months: 1.6s sustained read, 0.4% abandonment, and it survived two regulation revisions without redesign.

The backend event log is the deliverable — when the regulator asks 'was it shown, when, in what form', Legal answers from the log, not from a screenshot.

Granular, per-purpose consent collected at the moment the purpose becomes real — not a wall of checkboxes at signup for things that may never happen.

Pre-ticked boxes and bundled consent are design debt that becomes a finding. Decline is always as reachable as accept.

The consent record stores what was shown (copy version), when, and the affirmative act — versioned copy because the text at the time of consent is what was consented to.

Withdrawal lives on the same surface as the grant (GDPR Art. 7(3) symmetry) — burying revocation in support email is the anti-pattern this component exists to prevent.

Progressive disclosure, one question per screen — the 'dentist model': never show the whole instrument tray at once. Completion doubled (27% → 55%, GA4) when the wall became a corridor.

Do not front-load document upload — sequence identity → residency → income → source of funds so each ask is anchored by the trust built before it.

Save-and-resume via 30-day magic link, because UHNW clients need days to locate source-of-wealth documents. Abandonment is mostly a pause, not a refusal — unless you make resuming impossible.

Every intrusive question cites its regulation beside the field (FinCEN CDD 31 CFR § 1010.230, FATF Rec 10) — sophisticated clients respond to legal framing, not friendly copy.

Alongside the control that creates the exposure — the leverage selector, the size field, the confirm button — so the warning is read in the same glance as the decision.

Never as a page-level banner or a footer block: a warning that is not adjacent to the action is a warning the user has already scrolled past. Never as an interstitial the user dismisses once per session; the obligation attaches to the action, not to the session.

The warning is text in the flow, not a tooltip and not title=; it is inside the labelled group of the control it qualifies, so a screen reader reaches it before the input rather than after. It never animates in, and it is never the only thing distinguishing two states.

ESMA and ASIC both require the loss-percentage disclosure to be prominent and adjacent to the point of action for retail CFD clients — ESMA's 2018 product-intervention measures, carried into national regimes, and ASIC RG 227. “Prominent” is a layout requirement, which is why it is a component decision and not a copy decision.

The FINRA 2111 / Reg BI gate rendered as product UI: the questionnaire scores into a profile, and the profile gates product access — visibly, with reasons.

Suitability is not advisory copy beside a buy button. If the gate can be scrolled past, it is not a gate — it is decoration that a plaintiff's lawyer will screenshot.

A failed gate routes to education and a cooling-off path, never to a retry-until-pass loop — retake limits are part of the control.

Answers, score, and gate outcome are stored against the copy version shown — the suitability decision must be reconstructable years later.

Any authenticated surface where an idle session must end, and where the user may have unsaved work in progress — an order ticket, a partially completed onboarding form, an unfiled report.

Never as a hard logout with no warning and no state preservation. Never with a timeout the user cannot extend, and never on a read-only surface where the only thing at risk is the reading position.

WCAG 2.2.1 Timing Adjustable is the contract: warn the user before the limit expires and give them at least 20 seconds to extend it with a simple action, and preserve in-progress state across re-authentication. The countdown is announced politely rather than assertively, so it does not interrupt typing; the extend control is reachable by keyboard without leaving the field the user was in.

WCAG 2.2 SC 2.2.1 (Timing Adjustable, Level A). The exemption for “real-time exception” and for security-essential limits is narrow: it permits the timeout, not the loss of the user's work.

Long reference content where the reader wants one section at a time — disclosures, FAQs, layered policy text.

Never to hide something the reader is required to have been shown: collapsing a mandated disclosure behind a control is a design decision about whether it was disclosed. Never for content under about three lines, where the toggle costs more than the space it saves.

Headers are real buttons inside heading elements, with aria-expanded reflecting state; the panel is associated with its trigger. Collapsed content is genuinely removed from the accessibility tree rather than visually hidden while still being read.

Where the panel holds a regulatory disclosure, prominence requirements apply — ESMA and FCA both treat placement as part of whether a warning was given. That is why “never collapse a mandated warning” is in the register rather than in a style guide.

Parallel views of the same subject where only one is relevant at a time and the reader switches between them freely.

Never for sequential steps — that is a wizard, and tabs invite skipping. Never where the reader needs to compare two panels; that is a split view. Never hide a required form field in an inactive tab, which produces a validation error pointing at something invisible.

Roving tabindex with arrow-key navigation, aria-selected on the active tab, and the panel labelled by its tab. Activating a tab does not move focus into the panel unless the panel is the next logical stop.

WCAG 2.2 SC 2.4.3 Focus Order and SC 4.1.2. The ARIA Authoring Practices tab pattern is followed exactly, because a partially-implemented tablist is less usable than plain links.

Deep hierarchies where the reader arrived directly and needs to know where they are before they can decide where to go.

Never as a substitute for primary navigation, and never as a history trail — a breadcrumb describes structure, not the path the reader took. Never truncate the current page's ancestor to an ellipsis without making it reachable.

A navigation landmark with an accessible name, an ordered list inside, and the current page marked aria-current="page" rather than merely unlinked. Separators are decorative and hidden from assistive technology.

The distinction between structure and history is the register entry: a trail that reflects where the reader came from is a different component with different guarantees, and conflating them makes both unreliable.

Large record sets an operator works through and returns to, where the position has to be stable across a reload and shareable with a colleague.

Not for a feed someone scans continuously — that is infinite scroll. And never where the user must be able to say they saw everything: for completeness, give them a filtered, counted view rather than pages they can lose their place in.

A landmark with an accessible name; the current page carries aria-current="page"; the visible range is stated in words (“41–60 of 1,284”) and re-announced when it changes, because a page control that only redraws is silent to half its users.

The total is always shown. “How many are there” is the first question in any review, and a pager that hides the count quietly converts a review into a sample.

Separating groups within a surface where whitespace alone has not made the grouping read, or where a labelled divider names the group that follows.

Never between every item in a list — a rule between each row makes the list heavier and the grouping less visible. Never to substitute for a heading: if the section deserves a boundary, it usually deserves a name.

Decorative by default and hidden from assistive technology; a labelled divider is a heading and marked as one, not a rule with text sitting on it. Contrast is checked as a non-text element rather than left at whatever the border token happens to be.

WCAG 2.2 SC 1.4.11 Non-text Contrast where the divider carries meaning. A divider that fails it is invisible to some readers, which turns a deliberate grouping into an accidental one.

An action menu or a short selection list where the options are commands rather than form values.

Never for a form field with a fixed set of values — that is a select, and menus do not submit. Never with more than about ten items and no grouping, and never as the only path to a destructive action.

Menu semantics with arrow-key navigation, Escape to close returning focus to the trigger, and typeahead on first letter. The trigger states its expanded state; the menu is not reachable in the tab order while closed.

WCAG 2.2 SC 2.1.2 No Keyboard Trap and SC 2.4.3 Focus Order. The focus-return-on-close rule is the one most often skipped, and skipping it strands keyboard users at the top of the document.

Indeterminate waits where the duration cannot be known and the region affected is small.

Never for a wait longer than about ten seconds without a message explaining what is happening — an unexplained spinner past that point reads as a hang. Never as a page-level loader where a skeleton would preserve layout, and never more than one per region.

The spinner carries a status role with a text label such as “Loading positions”, announced once rather than continuously. It respects prefers-reduced-motion by slowing rather than stopping, since stopping removes the only signal.

WCAG 2.2 SC 4.1.3 Status Messages: the fact that something is loading has to reach assistive technology without stealing focus.

Page-level information that applies to everything below it — planned maintenance, a regulatory notice, a degraded service.

Never for feedback about an action the reader just took; that belongs next to the action. Never stack banners — the second one guarantees the first is not read. Never make a critical banner dismissible without a way back to it.

Severity is a word in the text, not only an icon and a tint. Critical banners use an alert role and are announced; informational ones do not interrupt. The dismiss control states what is being dismissed.

WCAG 2.2 SC 1.4.1 and SC 4.1.3. Where the banner carries a mandated notice, dismissibility becomes a compliance question rather than a UX one — which is why the register says so.

A surface with nothing in it yet, where the reader needs to know whether that is normal, an error, or something they can fix.

Never as a bare “no data” — that leaves the reader unable to distinguish an empty result from a broken query. Never show the same empty state for a first-run, a filtered-to-nothing and a failed fetch; they need three different next actions.

The state is announced when it replaces content, and the primary action is a real control rather than an illustration with a caption. The illustration is decorative.

The register entry is the three-way distinction: first-run, filtered-empty and error are different states, and a single empty component that cannot tell them apart is a defect rather than a simplification.

Detail or filter content that the reader needs alongside their current context, without losing their place in the underlying view.

Never for a decision that must be made before continuing — that is a modal, and a dismissible drawer makes a required choice optional. Never nest drawers; the second one has no coherent dismissal behaviour.

Focus moves into the drawer on open and returns to the trigger on close; Escape closes. When modal, the background is inert and the drawer is a dialog; when non-modal, the background stays operable and the drawer is a complementary region — the two are not interchangeable.

WCAG 2.2 SC 2.1.2, SC 2.4.3, and SC 2.4.11 Focus Not Obscured — the last one being the criterion a drawer overlapping a focused field in the page behind it fails.

Document collection where the file is evidence — identity documents, tax forms, compliance attachments — and rejection has to be explainable.

Never drag-and-drop only: it is unusable by keyboard and unreliable on touch, so the file input is the primary path and the drop zone is the enhancement. Never reject silently for size or type; state the limit and the accepted formats before the attempt, not after.

The drop zone is a labelled input; upload progress and completion are announced; each accepted file is listed with a remove control that names the file. Errors name the file and the reason.

Where documents are collected for identity verification, GDPR Art 5(1)(c) data minimisation applies: the interface should ask for the document the risk tier requires rather than a standard set, and the register records that as a design constraint.

Free text of more than one line — case notes, compliance remarks, narrative fields that will later be read by someone else.

Never with a character limit that is not stated before the reader starts typing. Never rely on placeholder text as the label, and never auto-grow without a maximum, which turns a long note into a page the reader cannot navigate out of.

A visible persistent label, the limit and remaining count exposed as a status rather than announced per keystroke, and validation on blur rather than on input. Resize is not disabled.

WCAG 2.2 SC 3.3.2 Labels or Instructions and SC 1.3.1. The placeholder-as-label failure is the most common one in this component and it fails both.

Multi-select where the active choices need to stay visible while the reader keeps working — filters, tags, categories.

Never for a single exclusive choice; that is a radio group. Never where the option list is long enough to wrap past two rows — at that point a combobox with tags carries the same meaning in less space.

Each chip is a button or a checkbox with its selected state programmatically exposed; removal is a distinct control with its own accessible name (“remove EUR filter”), never a bare ×. The selected count is announced on change.

The reason to choose chips over a dropdown is that every active criterion stays visible; any variant that collapses them into a count has given up the property the pattern was chosen for.

Chronology reconstructed across systems — applied, screened, approved, settled — on one axis, read to answer what happened, in what order.

Not a substitute for the Audit Trail where the record is evidence. A timeline renders history; it does not seal it. If the question is “can this be altered without anyone noticing”, the answer has to be the WORM-backed trail, not this.

Marked up as an ordered list so the sequence survives without the visual axis. Every event is a sentence with an absolute timestamp; relative phrasing (“2 days ago”) always carries the absolute value beside it, because relative time is unreadable in an exported record.

Each event names the system it came from. A merged chronology whose provenance is invisible cannot be reconciled against the source of record, which is the only reason anyone opens it.

A headline figure on a dashboard, read at a glance, usually with a comparison to a prior period.

Never without the period the figure covers and the basis of the comparison — “+12%” with no window is not a fact. Never colour the delta without also signing it, and never round to a precision the underlying data does not support.

The label, value, unit and comparison are one accessible name so the figure is read as a sentence rather than as four fragments. Trend arrows are decorative alongside the signed number.

The register entry is that a stat is a claim: the period, the basis and the precision are part of the component, not caption text that can be dropped when space is tight.

A fixed set of read-only attributes about one entity, scanned rather than compared — an account, a candidate, a transaction.

Not for comparing entities: two of these side by side is a table wearing the wrong clothes. Not for editable fields either, which need real labels, validation and an error path.

A real definition list, so a screen reader pairs each term with its value rather than reading two unrelated columns. Identifiers stay selectable and never truncate — a half-copied reference is worse than no reference.

Fields that feed the decision sit above the fold and the rest collapse. Recall order is a design decision here, not the order the API happened to return.

Navigation to another location — within the page, within the product, or out to a third party.

Never for an action that changes state; that is a button, and the distinction is what tells a keyboard user whether Enter or Space applies. Never use “click here” or a bare URL as the link text, and never open a new tab without saying so.

The accessible name describes the destination out of context, because screen reader users navigate by link list. External links carry a text or a labelled-icon indicator, and target changes are announced in the name rather than only by an icon.

WCAG 2.2 SC 2.4.4 Link Purpose (In Context), SC 3.2.5 Change on Request for the new-tab behaviour, and SC 1.4.1 where the link is distinguished from body text by colour alone — which fails unless the contrast between link and text is at least 3:1 or another visual cue is present.

A multi-step flow where the reader benefits from knowing how many steps remain and which are complete.

Never where steps can be completed out of order and the indicator implies they cannot, and never where the number of steps is not known in advance. Never use it as navigation unless the completed steps are genuinely revisitable.

Current step is stated as “step 3 of 6” in text as well as visually; completed, current and upcoming states are words in the accessible name rather than colour and fill. Where steps are links, the disabled future ones are not focusable.

WCAG 2.2 SC 1.3.1 Info and Relationships and SC 1.4.1. The failure this prevents is a flow whose progress is legible only as a row of filled circles.

The atomic unit of every trading surface. Tabular numerals, fixed decimal precision per instrument convention, tick direction encoded by colour AND glyph.

Never animate price changes with movement — a blinking or sliding price draws attention disproportionate to its information. Flash the background, not the position.

Colour-only tick direction fails colour-blind users on the highest-stakes signal on screen — the arrow glyph is non-negotiable.

A stale quote is a risk event: past the staleness threshold the price greys out and timestamps itself rather than silently showing the last print.

The highest-stakes form in the system. Validation is pre-flight and continuous — by the time SEND activates, rejection should be near-impossible.

No confirm modal on the hot path — it adds 300–500ms of human dismissal and trains click-through. Use reversible execution instead: one-click send, a visible 3-second cancel window on the blotter.

Keyboard-first: every field reachable without a mouse, shortcuts for size presets, Enter is never bound to SEND without explicit arming.

UI state is driven by the FIX ExecutionReport (35=8) state machine — what the venue says happened, not what the click intended. That distinction is the audit trail.

A held position where entry, current value, unrealised P&L and portfolio weight are read together — typically the blotter row a trader scans before deciding to add or close.

Never as the confirmation surface for an action: a card that both reports a position and closes it invites a click on stale data. Never show unrealised P&L without the price it was struck from and the time it was struck at.

Every figure carries its currency and its sign in text; the timestamp of the quote is present, because a P&L without a time is a claim about now that may be about ten minutes ago. Live updates are announced politely and throttled, never per tick.

The constraint is staleness, not layout: a position card is a snapshot of a moving number, so the design decision that matters is publishing the moment it was true rather than implying it is continuous.

The decision surface: instrument, size, direction, and consequence in one frame. Margin impact and worst-case loss render before submit, not after.

Do not collapse the ticket into a one-tap buy button for leveraged products — friction at the point of leverage is a regulatory feature, not a UX failure.

Size steppers respect lot conventions; switching direction re-runs validation; everything visible at 360px width because the mobile ticket is the real ticket.

Suitability gating (FINRA 2111 / ASIC RG 227): if the client profile fails the product gate, the ticket routes to education — it never just hides the button.

Any rendering of a gain or loss where the reader needs direction and magnitude at a glance.

Never with colour as the only carrier of direction — red/green is the single most common accessibility failure in trading interfaces, and it fails for roughly one in twelve men. Never with a locale-ambiguous number: 1,234.56 and 1.234,56 are different figures and the reader cannot tell which convention is in force from the digits alone.

Direction is a sign or a word in the text, with colour and the arrow as redundant encodings on top. Currency and, where relevant, the base of the percentage are stated. Values are announced on change only when the change is user-initiated; a tape that announces every tick is unusable with a screen reader.

WCAG 2.2 SC 1.4.1 Use of Colour: colour must not be the only visual means of conveying information. In a P&L this is not a styling preference — the sign is the content.

A dense list where the reader is scanning many instruments for movement, and each row must fit the same vertical rhythm.

Never as the surface a trade is placed from: a compact row cannot carry enough context to size an order, and putting the action there produces mistakes at exactly the moment the reader is scanning fastest. Never let the sparkline be the only indication of direction.

Each row is a link or a button with a single accessible name that includes the symbol and the change, so a screen reader user is not forced through four cells to identify a row. The sparkline is decorative and marked as such, with the change stated numerically alongside.

Row density is the design constraint that generates everything else here: at this height there is no room for a second line, so anything that cannot be said in the accessible name is not part of this component.

Inline trend indication inside a table row or a card, where the shape is a hint and a full chart would not fit.

Never where the exact value matters — a sparkline has no axis and no scale, so reading a level off it is guesswork. Never as the only representation of a series a decision depends on; pair it with the number or link to the real chart.

The sparkline is aria-hidden with the trend stated in adjacent text, because an unlabelled path element announces as nothing. Where it is interactive, it stops being decorative and needs a full accessible description.

The honest limit of the pattern is that it is unquantified by construction. Treating it as a chart is the misuse; treating it as a hint next to a number is the correct one.

Showing resting bid and ask volume by price level, where the reader is judging whether size can be worked without moving the market.

Never as a liquidity guarantee: displayed depth is not committed depth, and rendering it as a solid block implies a fill that may not exist. Never aggregate levels without saying so — a chart bucketed to the nearest tick and one showing raw levels tell different stories.

Levels are reachable as a table of price and size, not only as a rendered shape; the aggregation interval is stated. Bid and ask sides are labelled in words, not distinguished by colour alone.

The design constraint is the gap between displayed and executable liquidity. The component's job is to keep that gap visible rather than to make the book look deeper than it is.

Comparing one measure across many cells — sectors, correlations, country exposures — where the pattern matters more than any single value.

Never without the value available per cell: a heatmap is a summary, and a reader who needs the number and cannot get it will estimate it from the colour, badly. Never with a rainbow scale, which has no perceptual order and invents boundaries that are not in the data.

Each cell's accessible name carries its label and its value; the scale is stated with endpoints and with what the midpoint means. A sequential or diverging ramp is used according to whether the data has a meaningful zero, and the ramp is checked against the two most common forms of colour vision deficiency.

WCAG 2.2 SC 1.4.1 again, and SC 1.4.11 Non-text Contrast for the cell boundaries. A heatmap that fails these is not a chart with an accessibility issue — it is a chart that a substantial minority of readers reads a different pattern from.

Level-2 depth where bar length encodes size and colour intensity encodes proximity to touch — the book's shape is readable before any number is.

Do not smooth or animate book updates for elegance — a book that moves prettily misrepresents microstructure. Updates snap; only the aggression highlight pulses.

Aggressor prints flash on the tape side, not the resting side — direction of initiative is the signal traders actually read.

Time priority is honest to the feed's granularity: if the feed is conflated, the UI says so rather than implying microsecond precision it does not have.

The identity strip above a chart or an order panel, where the reader must be certain which instrument they are about to act on.

Never abbreviate to the ticker alone across asset classes — the same symbol resolves to different instruments on different venues, and the venue is the disambiguator. Never omit the currency; a price without its currency is not a price.

Symbol, venue, asset class and currency are all in the header's accessible name so a screen reader user is oriented in one read. Session status is a word, not a dot, and it states the venue's local time.

The requirement is unambiguous instrument identity — symbol plus venue plus currency — because everything below this strip is meaningless if the reader has the wrong instrument in mind.

Leverage selection renders the jurisdiction cap as a hard boundary — the selector physically cannot exceed the client's regulatory maximum.

Do not present leverage as a neutral slider to the max — the warning band begins at the threshold where margin-call probability inflects, not at the legal cap.

Each step shows the margin requirement consequence live; the control is a disclosure surface, not just an input.

Caps are config from the jurisdiction matrix (ASIC RG 227, ESMA intervention measures) — when a regulator moves the cap, the token updates, no rebuild.

Margin utilisation with three fixed thresholds (70 / 85 / 95%) that colour the entire panel context, plus projected utilisation on order hover — consequence before commitment.

Never hide the liquidation price behind a tap or tooltip — it is the single number a leveraged client must always see.

The panel is the same component on desktop dock and mobile sheet; thresholds and copy come from tokens, not per-platform forks.

Margin-call states persist with timestamps and are never auto-dismissed (dispute evidence). The 95% state pre-arms the deposit flow.

Maps FIX Tag 39 OrdStatus to user language: New, Partially Filled, Filled, Cancelled, Rejected — each with a distinct visual register.

Never collapse partial fills into a binary done/not-done — a PM managing a working order needs filled quantity, remaining, and average price at a glance.

Status transitions announce via aria-live; a rejection always carries the venue reason code translated into action language.

The status chip is the same component on the blotter, the ticket, and the position view — one source of truth for the same Tag 39 value everywhere.

Stop-loss / take-profit entry shows both the absolute price and the distance (% and currency) — traders think in both, and mismatch errors are expensive.

Never frame the stop as a percentage alone — loss is felt in currency. The projected loss at stop renders in account currency beside the field.

Values validate against tick size and minimum stop distance per instrument; invalid entries explain the constraint, not just reject.

Default SL/TP from the last trade was the single biggest abandonment fix in the order-flow study — defaults are a design decision with measurable money attached.

Showing today's volume against a stated historical baseline, so unusual activity is visible as unusual rather than merely large.

Never without naming the baseline: “above average” with no window is an assertion, not a measurement. Never highlight an outlier without letting the reader see the comparison figure.

The baseline window and the current figure are both in text; the highlight is redundant to a stated multiple rather than the only signal. Bars carry their date in the accessible name.

The whole informational content is the ratio to a baseline, so the baseline is part of the component rather than a footnote under the chart.

The execution tape, where the reader is watching aggressor side and size to judge order flow in real time.

Never with buyer- and seller-initiated distinguished by colour alone. Never auto-scroll without a pause control, and never announce each print to assistive technology — a live region on a tape makes the page unusable.

Aggressor side is a word or a symbol in the row text. The tape is a log region with announcements off by default and an explicit control to summarise instead; pausing is available by keyboard and the paused state is announced.

WCAG 2.2 SC 2.2.2 Pause, Stop, Hide governs auto-updating content: the reader must be able to pause it. On a tape this is not a courtesy — an unpausable feed cannot be read by anyone who reads slowly.

Scheduled economic events where the impact tier and the consensus-versus-previous comparison drive a pre-event risk decision.

Never present consensus as a forecast the venue endorses; it is a survey median and its dispersion matters. Never fire a connected risk warning without saying which event triggered it — an unattributed warning gets dismissed.

Impact tier is a word before it is a colour; times are stated in both the venue's timezone and the reader's, because an event calendar in one timezone is a source of expensive mistakes. The countdown is not the only rendering of the time.

The component's constraint is timezone correctness. Everything else here is presentation; a right number at the wrong hour is simply wrong.

Multi-venue session status for a reader holding positions across jurisdictions, where “is this market open” has a different answer per venue and per day.

Never derive status from a fixed schedule alone: half-days, holidays and daylight-saving transitions are where this component is actually tested. Never show only the reader's local time, and never show only the venue's.

Status is a word with the next transition stated as an absolute time; both timezones are labelled with their abbreviation and their offset. The clock does not announce on every tick.

The failure mode being designed against is a holiday calendar that was not loaded — so the component states the schedule source and the date it is valid for, rather than implying the status is derived live.

Portfolio composition across asset classes at small sizes, where the reader is comparing proportions rather than reading exact values.

Never as a pie chart at this density — angle is the hardest visual encoding to compare accurately, and it fails first at small sizes. Never omit the residual: a breakdown that does not sum to the whole hides the part nobody wanted to explain.

The breakdown has a table equivalent with the percentages and the base value; segments carry their label and share in the accessible name. The total is stated so the reader can see it reconciles.

The choice of bars over pies is the register entry: position along a common scale is the most accurately judged visual encoding, and at trading-UI density that difference is the difference between reading it and estimating it.

Showing the bid-ask spread with its cost expressed in the unit the reader trades in — pips, ticks, or cost per lot.

Never show the spread without its cost translation; a number of pips means nothing to the client's P&L until it is money. Never present a tight spread as an available price without the size it is good for.

The state (tight, widening) is a word alongside the figure, not a colour shift alone. The quote time is present, because a spread from a stale quote is the most misleading number on the screen.

FCA COBS 4.2.1R — communications to clients must be fair, clear and not misleading: a cost presented in a unit the client cannot convert is a disclosure that does not disclose.

Concentration and exposure as a matrix where colour intensity AND a glyph encode severity — dual encoding because risk review includes colour-blind reviewers.

A heat cell is never a dead end: every cell drills to the evidence behind it (positions, metrics, conditions). A naked number a reviewer cannot interrogate is a compliance liability.

Keyboard navigation walks cells in reading order with the cell's full context announced — the matrix is a table semantically, a heatmap visually.

Built for the SR 11-7 effective-challenge standard: the surface exists so a human can challenge the model's aggregation, not just admire it.

Configuring a price alert with an explicit condition, a delivery channel and an expiry, for someone managing many instruments at once.

Never create an alert with no expiry by default — an unbounded alert set becomes noise and then gets muted wholesale. Never let the notification channel be the only unstated part: an alert the reader thinks is going to their phone and is not is worse than no alert.

The condition is restated in plain language before saving (“notify when EURUSD trades above 1.0850, once, expiring 30 September”), because a form of dropdowns does not read back as a sentence. Channel and expiry are required fields, not optional ones.

The register entry is the readback: the component's job is to make the configured rule legible as a sentence, since that is the only form in which a person can check it is what they meant.

Reviewing closed positions at scale, where the reader is scanning for pattern across hundreds of rows rather than examining one.

Never present realised P&L without the costs that were netted into it; a gross figure next to a net figure with no labels is the most common misreading in a trade blotter. Never sort by P&L as the default — it hides the sequence, which is where the pattern is.

P&L direction is signed text with colour redundant; duration is an explicit interval rather than two timestamps the reader must subtract. The table has real headers, because this is read column-wise as often as row-wise.

The design constraint is that this is a scanning surface: anything requiring arithmetic by the reader breaks the scan, which is why duration and net are computed here rather than left implicit.

OHLC review where the reader needs the four values, not just the shape — tooltips, trade review panels, daily summary cards.

Never as the only rendering of the values: a candle body encodes open and close by position and direction, which is unreadable without sight and imprecise with it. Never colour by direction alone.

The four values are text in the side panel with their labels; the candle itself is decorative and marked as such. Direction is stated in words as well as by fill.

The register entry is that the candle is an index into the numbers rather than a substitute for them — which is why this component ships with the OHLC panel attached instead of as a standalone glyph.

Running several simultaneous scans where the reader needs every active criterion visible at once without a form dominating the viewport.

Never hide active filters behind a “filters (3)” summary: an invisible criterion produces a result set the reader misreads as the whole universe. Never apply a filter silently — the result count changing is the feedback.

Each chip is a button whose accessible name includes the criterion and the fact that activating it removes the filter; the result count is announced on change. Clearing all filters is distinct from clearing one, in both wording and placement.

The pattern exists to keep the active criteria visible, so any variant that collapses them defeats the reason it was chosen over dropdowns.

Perpetual swap funding where the reader needs to know the direction of payment, the size of it, and when the next one lands.

Never show the rate without stating who pays whom — the sign convention is not universal and readers arrive from venues with the opposite one. Never annualise without labelling it as annualised; the period rate and the annualised rate differ by orders of magnitude.

Direction of payment is a sentence (“longs pay shorts”), not a sign the reader must decode. The countdown is accompanied by an absolute time, and both the period and annualised figures are labelled.

The register entry is the sign convention: it is the one thing about this component that is genuinely ambiguous across venues, so it is stated in words rather than encoded.

Issuing a credential at the end of a counterparty onboarding, where the key is shown once and the environment must be unmistakable.

Never let a production credential look like a sandbox one — the environment badge is the safety feature, not decoration. Never re-display a secret after issuance, and never imply it can be recovered rather than rotated.

The environment is in the accessible name of the card, not only in a badge; reveal and copy both confirm in text, because a silent clipboard write is indistinguishable from failure. The expiry is an absolute date with the rotation path stated next to it.

SOC 2 CC6.1 logical access and NIST SP 800-63B on secret handling: the one-time reveal is the control, and an interface that softens it to a convenience removes it.

Comparing quotes across brokers or venues to evidence execution quality, where the comparison is the artefact somebody may have to defend.

Never present the tightest spread as the best execution outcome on its own — price is one factor among several, and a single-factor claim is precisely what the obligation is designed to prevent. Never compare quotes captured at different times without showing the timestamps.

The winning column is named in text, not indicated by highlight alone; each quote carries its capture time and its size. The comparison is a real table so it survives being exported into a review pack.

MiFID II Art 27 and RTS 27/28 best execution: the firm must take all sufficient steps to obtain the best possible result taking price, costs, speed, likelihood of execution and settlement, size and nature into account, and must be able to demonstrate it.

A corporate-action notice for a forward split (e.g. 4-for-1). Show share count up, price down, and total position value held constant — the split changes the denomination, not the wealth.

Do not render a split as a price crash on the chart. A split-adjusted history is required; an unadjusted line that shows −75% overnight is a data defect, not a price move. Use the Reverse Split component for consolidations.

Ratio, dates, and the value-unchanged fact are text, never colour alone; the before/after table reads as paired rows to a screen reader. Cost-basis-per-share adjustment is stated in words.

SEC Rule 10b-17 & FINRA UPC 11140 — timely issuer notice of the record date and ex-date; due-bill handling for trades between record and payable. Basis reallocated per IRS Pub 550 (a split is not a taxable event).

A reverse split (e.g. 1-for-10): shares down, price up, value held. Surface the reason honestly — often a minimum-bid-price cure — and disclose how fractional shares are handled.

Never present a reverse split as a 10× gain. The per-share price rises mechanically; wealth is unchanged. Do not hide the cash-in-lieu of fractional shares — it is a realised, taxable event for the holder.

The compliance reason and the fractional-share treatment are full sentences; the ratio badge is not the only signal. Cash-in-lieu amount is shown with its calculation basis.

SEC Rule 10b-17 record-date notice; listing cure under Nasdaq Rule 5550(a)(2) or NYSE §802.01C ($1 minimum bid). Fractional shares paid as cash-in-lieu; cost basis reallocated (IRS Pub 550).

An income event notice. The four dates are the whole product: who owns before the ex-date gets paid. Show DPS, annualised yield, and whether the dividend is qualified.

Do not conflate declaration with payment — a declared dividend is not cash in the account. Use the Dividend Payout component for the settled credit and withholding.

Each date carries an explicit label; the ex-date (the ownership cutoff) is emphasised in words, not colour alone. Qualified-vs-ordinary status is stated because it changes the holder's tax.

FINRA UPC 11140 / SEC Rule 10b-17 set and notice the ex-date and record date; under T+1 (effective May 2024) the ex-date aligns to the record date. Qualified-dividend character per IRC §1(h)(11).

The payment confirmation on payable date: shares held × DPS = gross, less any withholding = net credited. If reinvested, show the DRIP purchase price and resulting fractional shares.

Do not show gross as the amount received when withholding applies — the net is what settles. Use the Dividend Declaration component for the forward-looking event, not the payment.

Gross, withholding, and net are separate labelled rows; the net is the emphasised figure. Withholding rate and basis are stated so the deduction is never a silent surprise.

Reported on IRS Form 1099-DIV; backup withholding at 24% under IRC §3406 where a valid TIN is absent. Non-resident withholding per the applicable tax treaty. DRIP reinvestment price disclosed.

When the sequence and the current position in it matter more than any single date: to answer "have we passed the ex-date, and when does cash arrive." Each node is a real, named milestone.

Do not use a decorative progress bar with no dates — a timeline that can't say which day the ownership cutoff falls on is theatre. For a single event, use the Dividend Declaration card.

Rendered as an ordered list to assistive tech; the current stage is announced in words (aria-current), not by colour alone; each node carries its date. Reduced-motion shows the final state instantly.

FINRA UPC 11140 ex-dividend procedures; under T+1 settlement (SEC Rule 15c6-1, effective May 2024) the ex-date aligns with the record date, collapsing the legacy T+2 one-day gap.

When existing holders are offered new shares at a discount in proportion to their holding. Show the ratio, subscription price, the theoretical value of a right, and the hard deadline — rights expire.

Never present a rights issue as free upside. Unexercised rights lapse worthless (or are sold if transferable) and non-participation dilutes the holder. State both outcomes. For a mandatory event, use a different notice.

The deadline is a countable, labelled date with time zone; the lapse consequence is a full sentence. Oversubscription privilege and transferability are stated, not implied by an icon.

Registration and prospectus delivery under Securities Act §5 (or an available exemption) for the rights and underlying shares; subscription, oversubscription, and lapse terms disclosed. A voluntary election with a firm cut-off.

When a holder must choose between outcomes (optional stock dividend, merger consideration, tender). The default — what happens on no instruction — is shown as prominently as the choices, because silence has a consequence.

Do not pre-select the option that benefits the broker, and never hide the default. For a mandatory action with no choice, use a notice, not an election — offering a choice that doesn't exist is misleading.

Radio options are keyboard-navigable with visible focus; the selected state is text + control, not colour alone; the deadline and default are read in words. Election is confirmed and its irreversibility disclosed before submit.

DTC voluntary-offer election deadlines govern the cut-off; instructions and their timestamps retained per SEC Rule 17a-4(f). The no-election default outcome is disclosed, and the election is irrevocable after the deadline.

Choosing a duration and easing for a transition, from a named set rather than per instance.

Never animate a state change the reader is waiting on — motion added to a slow operation makes it slower. Never exceed about 300ms for a feedback transition, and never animate large areas of the viewport.

Every timing token has a reduced-motion fallback that is a state change rather than a shortened animation; nothing conveys information by motion alone; no animation flashes more than three times per second.

WCAG 2.2 SC 2.3.1 Three Flashes or Below Threshold and SC 2.3.3 Animation from Interactions. The reduced-motion fallback is a token-level obligation here, which is why it lives in the foundation rather than in each component.

Dashboard stats, impact numbers, fundraising totals — moments where the arrival of a number is part of the story.

Never on live trading or financial-decision data: an animating price is a misrepresentation of the feed. Numbers a user acts on render instantly, always.

Runs once on demand, uses font-variant-numeric: tabular-nums to prevent reflow, and stays out of the screen reader's way — AT gets the final value, not 60 intermediate ones.

WCAG 2.2.2 (short, user-initiated, replayable run); reduced-motion honoured by skipping straight to the final value.

Design-system education and motion-spec reviews: when an engineer asks 'which easing', point at the difference instead of describing it.

Don't ship bounce or heavy spring on serious product surfaces — overshoot reads as playful; institutional contexts use the ease-out family almost exclusively.

Buttons are real buttons; the stage is aria-hidden with the active easing named in visible text; reduced-motion jumps the ball to the end state.

WCAG 2.3.3 Animation from Interactions — motion is user-initiated, brief, and disabled by the OS preference.

Transient confirmations of completed actions: saved, sent, copied. The queue cap and eviction policy are the design decisions most toast libraries skip.

Never for compliance-relevant or loss-relevant content — auto-dismissing evidence is the anti-pattern; that register belongs to persistent banners (see Alert & Toast).

Hover pauses the timer; close buttons are focusable; critical toasts use aria-live=assertive, the rest polite so screen readers aren't interrupted by good news.

WCAG 4.1.3 Status Messages — announced without focus theft; 2.2.1 Timing Adjustable via pause-on-hover + manual dismiss.

Hero cards, feature highlights, award-page registers — one or two per view as a focal accent.

Not for dense grids or anything containing text the user must read while interacting — motion under the reading surface costs comprehension. Never on form containers.

Activates only on (hover:hover) and (pointer:fine); rotation capped at 7°; springs back to rest on leave; purely decorative and invisible to assistive tech.

WCAG 2.3.3 — interaction-triggered motion fully disabled under reduced-motion; no information is conveyed by the motion itself.

Primary CTAs on marketing and portfolio surfaces where a moment of delight is on-register.

Skip both in dense product UI — magnetism on a 24px-tall table action is noise. The ripple must never be the only press feedback (focus + active states stay).

Works identically by keyboard (ripple fires from center on Enter/Space); magnet caps at 6px so the hit target never escapes the pointer; reduced-motion disables both.

WCAG 2.5.2 Pointer Cancellation — action binds to the click, ripple on down is feedback only; 2.4.7 focus visible at all times.

Hero headlines and section moments on editorial/marketing surfaces — the typographic equivalent of a curtain rise.

Never on body copy, navigation, or anything read mid-task; once per page load is the ceiling — repeated stagger becomes a tic.

Split spans are aria-hidden with the full sentence kept in a visually-hidden element; replay is user-initiated; reduced-motion renders the line instantly.

WCAG 1.3.1 — the programmatic text is the real sentence, not 34 orphan characters; reduced-motion honoured.

Terminal, code, or editorial moments where the “being written now” feeling earns attention — once per view.

Never on navigation, body copy, or anything read mid-task; a slow type-out in front of content the user wants now reads as a delay, not delight.

The real sentence sits in a visually-hidden span; the typed copy is aria-hidden; replay is user-initiated and reduced-motion prints the line instantly.

WCAG 1.3.1 + 2.3.3 — programmatic text is the full string, not a stream of orphan characters; motion fully removed under reduced-motion.

Security, data, or AI surfaces where a “resolving” metaphor fits the content — a loading-to-truth moment.

Not for long strings or anything time-critical; the scramble adds perceived latency. Never on numbers a user must trust mid-update.

Full text kept in a visually-hidden span; cycling glyphs are aria-hidden; reduced-motion skips straight to the resolved string.

WCAG 2.2.2 — no essential meaning is conveyed only by the transient glyphs; the settled text is the source of truth.

Longer display headlines and section intros where character-level motion would feel busy — the editorial default.

Not for single words (use a simpler fade) or dense paragraphs; blur-in on body copy hurts reading speed.

Words are aria-hidden spans with the full sentence in a visually-hidden element; one play per load; reduced-motion renders sharp instantly.

WCAG 1.3.1 + 2.3.3 — the readable sentence is programmatic, not reconstructed from fragments; blur/motion removed under reduced-motion.

Logotype lockups and single-line statements where you want one clean gesture rather than a cascade.

Not for multi-line blocks (the wipe reads as a glitch across wraps); not where the text must appear immediately.

No DOM splitting — the element holds the real text, fully selectable and read normally; reduced-motion shows it un-clipped at once.

WCAG 1.3.1 — text is never fragmented; the wipe is purely presentational and disabled under reduced-motion.

Hero headlines on award or launch surfaces where a single, deliberate flourish sets the tone.

Never on body copy or repeated elements; 3D rotation per character is the most attention-expensive of the set — use sparingly.

Split spans are aria-hidden with the sentence in a visually-hidden element; replay is user-initiated; reduced-motion renders flat and upright instantly.

WCAG 1.3.1 + 2.3.3 — the real sentence is programmatic; rotation removed entirely under reduced-motion.

Token decisions, theme reviews, and the recurring 'is this gold readable on white' argument — settle it with the formula in front of both people.

A passing ratio doesn't end the audit: 1.4.1 colour-only signalling and state contrast still need review. The checker is one control, not the conformance story.

Inputs are native colour pickers with visible labels; results render as text chips (never colour alone); the live ratio is announced via a polite region on change.

WCAG 1.4.3 Contrast (Minimum, AA 4.5:1 / 3:1 large), 1.4.6 (AAA), 1.4.11 Non-text Contrast — computed per the WCAG 2.x relative-luminance definition.

Modals, drawers, command palettes — any layer that takes over the page must own focus for exactly as long as it exists.

Don't trap focus in non-modal UI (popovers should dismiss on tab-out), and never trap without a keyboard exit — that's the violation this pattern exists to prevent.

Open moves focus to the first control; Tab wraps both directions; Escape closes; focus restores to the trigger; the dialog carries role=dialog and aria-modal with a labelled heading.

WCAG 2.1.2 No Keyboard Trap, 2.4.3 Focus Order — the ARIA APG dialog pattern.

Async results: save confirmations, background sync, validation outcomes — anything that changes without a focus move.

Don't announce continuous noise (every keystroke, every price tick) and never use assertive for good news — interruption is a cost you spend on emergencies.

Regions exist in the DOM from load (late-inserted live regions are unreliable); messages are swapped, not appended forever; the visible log mirrors exactly what AT received.

WCAG 4.1.3 Status Messages — programmatically determinable without receiving focus; polite vs assertive chosen by consequence.

Any form longer than two fields — and mandatory on regulated flows (KYC, payments) where an abandoned form has a measurable cost.

Don't rely on inline messages alone for long forms (screen-reader users get no overview), and never use colour as the only error signal.

Summary receives focus on submit (tabindex=-1); links move focus to the field; messages bind via aria-describedby; errors announce once, not per keystroke.

WCAG 3.3.1 Error Identification, 3.3.2 Labels, 3.3.3 Error Suggestion, 2.4.3 Focus Order — the GOV.UK-validated error-summary pattern.

Every page with repeated navigation before the main content — which is every page. The cheapest AA fix on the entire checklist.

Don't hide it with display:none (unfocusable) or leave it permanently visible (clutter); reveal-on-focus is the contract.

First focusable element in the demo DOM; on activation moves focus to the main region (tabindex=-1); visible focus style when revealed.

WCAG 2.4.1 Bypass Blocks — the canonical technique.

Mobile-reachable UI review: table row actions, chip closers, player controls — anywhere small glyphs accumulate.

Don't inflate the visible control to fix the metric — grow the hit area (padding / pseudo-element) and keep the visual weight. Density and reachability are not enemies.

The overlay shows real interactive bounds; the small target demonstrates the failure, the padded target shows the fix at identical visual size; all controls stay keyboard-operable.

WCAG 2.5.8 Target Size Minimum (24px, AA in WCAG 2.2) and 2.5.5 (44px, AAA) — labelled honestly: this system targets 44px on primary touch surfaces.

Setting the baseline every component in this system is measured against, and the finance-specific additions on top of it.

Never treat the baseline as an audit performed at the end: the criteria in this system are contract terms per component, which is why they appear in each register's third cell rather than in a single conformance page. Never claim a conformance level the system does not test for.

WCAG 2.2 Level AA is the floor: contrast measured rather than assumed, keyboard operability for every function, focus visible and unobscured, no information by colour alone, and status messages that reach assistive technology without stealing focus.

WCAG 2.2 Level AA as the baseline, with the EU Accessibility Act (Directive (EU) 2019/882) as the reason the level is a floor rather than a target for financial services in the EU from June 2025, and Section 508 / EN 301 549 as the procurement equivalents.

Products that must serve a trading terminal and a client portal from the same component set, where the difference is spacing rather than structure.

Never let a density mode change what is on screen — density that hides information is a different design, not a setting. Never take the compact mode below the minimum target size, which is where the constraint actually binds.

Every mode meets the target-size floor and the text-spacing criterion independently; density is a token-level scale rather than per-component overrides; the current mode is a stated setting, not inferred from viewport.

WCAG 2.2 SC 2.5.8 Target Size (Minimum) at 24×24 CSS pixels and SC 1.4.12 Text Spacing. High density is where both are lost, so the register records them as the boundary the compact mode may not cross.

Designing the data lifecycle — loading, empty, partial, stale, error, recovered — as first-class states rather than as exceptions to a success case.

Never design only the populated state; every surface in this system is required to specify what it does with no data, slow data, stale data and failed data. Never collapse empty and error into one rendering.

Each state has an announced transition, a text explanation, and where recovery is possible, a control that performs it. Nothing depends on the reader inferring a state from an absence.

The register entry is the enumeration itself: six states, specified per surface. Most production defects in data-driven finance UI are an unspecified member of that list rather than a bug in the populated view.