Foundations & Tokens
The locked token layer for the whole FinCheqIQ build. Every later phase references these by name — colour, type, space, radius, elevation, motion and the named breakpoint scale. Nothing outside this file introduces a new value.
Base palette
A cool, desaturated slate canvas so the status palette is the only saturated thing on screen during an eight-hour shift. One brand colour — Deep Harbour — reserved for primary actions, active navigation and focus rings. It never signals a cheque state.
Status palette — the signature system
Seven families carry every validation, confidence, risk and integration state in the product. Colour is never the only carrier: each family also owns a distinct glyph shape and a left state-cap, so a cheque's state survives a colour-blind reviewer, a monochrome print-out and a glance from across the processing floor.
| Family | Shape | Token group | Carries |
|---|---|---|---|
| Valid | Solid disc | --st-valid-* | VALID · APPROVED · ACKNOWLEDGED · HIGH CONFIDENCE MATCH · within limit |
| Review | Triangle | --st-review-* | REVIEW_REQUIRED · MEDIUM CONFIDENCE — REVIEW · limit breach · date exception · potential duplicate |
| Invalid | Square | --st-invalid-* | INVALID · REJECTED · LOW CONFIDENCE MATCH · INTEGRATION_FAILED · exact duplicate |
| Processing | Spinning ring | --st-processing-* | PROCESSING · extracting · submitting · RETRY_PENDING |
| Pending | Hollow disc | --st-pending-* | PENDING · received · queued · not started · archived |
| Hold | Diamond | --st-hold-* | PENDING_EXTERNAL_SYSTEM · pending integration queue · escalated · PROCESSING_ERROR |
| Unusable | Hatched bar | --st-unusable-* | NO USABLE SIGNATURE · SIGNATURE REGION NOT DETECTED · MICR unreadable · NOT_EXTRACTED |
Typography
IBM Plex Sans Condensed for headings and dense table furniture — it holds column headers at 11px without crowding. IBM Plex Sans for UI prose. IBM Plex Mono, tabular, for every amount, ID, score, count and timestamp so numeric columns align on the decimal.
Manual Review Workbench
30px / 1.16 / 600 / -0.014em · --fs-3xl
Processing Queue
24px · --fs-2xl · page titles
Signature comparison
20px · --fs-xl · section titles
Customer master record
17px · --fs-lg · card titles
Cheque routed to review: the extracted amount in words does not reconcile with the numeric amount.
15px / 1.5 · --fs-md · body
Dense table cell and helper text sit at 13.5px.
13.5px · --fs-sm
| CHQ-2026-0041827 | OMR 12,450.000 |
| CHQ-2026-0041828 | OMR 3,900.500 |
| CHQ-2026-0041829 | OMR 147.250 |
Space, shape & elevation
A 4px base grid, a radius scale that tops out at 12px so the product reads precise rather than playful, and four elevation steps that pair a border with a shadow — the eye parses a drawer over a table without needing colour to change.
Spacing · 4px base
Radius
Elevation
Motion
Four durations and three easings. Motion confirms a state change or a spatial relationship — it never delays a reviewer from finishing a cheque, and it never bounces.
| Token | Value | Applies to | Try it |
|---|---|---|---|
| --motion-micro | 130ms · ease-out | Hover, focus, checkbox, colour change, inline field error settling in | |
| --motion-standard | 220ms · ease-in-out | Tab switch, sidebar rail collapse, meter fill, skeleton → content | |
| --motion-emphasis | 320ms · ease-entry | Drawer and modal entrance; exits run at --dur-exit 180ms | See overlays |
| --dur-status | 900ms · single pulse | A badge changing state. One pulse, never repeated, never a bounce. |
Responsive breakpoint scale
Named once here, referenced by name in every later phase. Full responsiveness is a hard requirement of the build, not a finishing pass — every table, grid and editor documents its narrow-width behaviour against this scale.
| Token | Width | Shell behaviour | Data-table behaviour |
|---|---|---|---|
| mobile | 360–599 | Sidebar → off-canvas drawer (hamburger). Search collapses to an icon. Bank instance ID hides, environment dot stays. | Card-per-row transform, or horizontal scroll with a sticky first column |
| mobile-lg | 600–767 | Off-canvas drawer. Search still icon-triggered. KPI cards go two-up. | Card-per-row transform |
| tablet | 768–1023 | Off-canvas drawer. Search bar returns inline. Two-column grids. | Horizontal scroll, sticky first column, sticky header |
| tablet-lg | 1024–1279 | Sidebar docks as a 64px icon rail with hover tooltips. Three-column grids. | Full table, non-critical columns may drop |
| desktop | 1280–1535 | Full 264px sidebar, collapsible to rail and remembered. | Full table |
| desktop-lg | 1536+ | Full sidebar, content capped at 1440px so line length stays readable on ops-center displays. | Full table with detail drawer opening beside it |
Shell at mobile — tap the hamburger
At mobile and mobile-lg the sidebar leaves the layout entirely and returns as an off-canvas drawer using the same --motion-emphasis entrance as every other drawer in the product — one motion vocabulary, not two.
The topbar condenses in a fixed order: the bank instance ID drops first, then the user's name and role, then the search field folds into an icon that expands across the bar on tap. The environment dot and the unread count never drop — they are the two things a reviewer must not lose.
The queue table becomes one card per cheque. Cheque ID, amount and state stay; sortable columns become a filter sheet. This is the transform every later phase reuses at mobile.
Roles used across the prototype
Every role the UI can display traces to a requirement that names it. No persona is invented because it seems plausible for a bank — where the documents leave the bank's operating model open, that is stated rather than filled in.
| Role | Named in | Sees in FinCheqIQ |
|---|---|---|
| Branch Staff | Cheque intake and first-line triage | |
| Processing Center Operator | Batch intake, processing queue, exception triage | |
| Reviewer (Maker) | Manual Review Workbench; submits exception decisions | |
| Approver (Checker) | Checker Approval; cannot approve their own maker action | |
| System Administrator | Users, roles, masters, thresholds, integration configuration | |
| Auditor | Read-only tamper-evident audit trail | |
| Integration Administrator | Integration queue, retry policy, reconciliation | |
| Operations Manager | Operational and management reporting | |
| Fraud & Risk Management | Risk indicator configuration and thresholds |