Styleguide
The building blocks for every screen: colour, type, status, and the components officers see. Every screen is assembled from what is on this page.
Theme
Pick a palette for the whole product — the choice is remembered on this device. Every palette follows the same rule: one canvas colour, one structure colour for type and navigation, one accent used sparingly. Severity and verified colours keep their meaning in all of them.
The compact toggle in the top-right corner is the same logic shipped for the product top bar and Settings — every screen reconstructs instantly because all components read tokens only.
Colour
Every palette keeps the same 60 / 30 / 10 split: one canvas colour, one structure colour for type and navigation, one accent used sparingly. The swatches below show whichever theme is selected above — the accent appears only on the one primary action of a view, badges, and critical alerts.
Type
Newsreader serif for landing headlines only. Geist Sans everywhere else. Sentence case for every label.
Landing headline — Newsreader 400, 56px
Compliance decisions you can prove.
Page title — 20px / 600
Alerts
Body — 14px / 22px
14 alerts need attention. 3 are due within 4 hours.
Label — 12px / 500, sentence case, in secondary text colour
Time left
Hash — Geist Mono 12px, shortened, click to copy
Table row
40px rows, six columns at most, no codes in the main column. The rule ID sits as secondary grey text.
Status
Status is a small dot plus a plain word — never a filled pill. Green means verified only; red means critical or altered only.
Severity
Record state
Everyday statuses
Top bar status
Records verifiedSignature components
Every derived number can be traced. Every action leaves a plain confirmation. AI output is marked until a person edits it.
Source link — hover to see where a number came from
Kofi Adjei-Boateng made of USD 9,800.00 and USD 9,400.00 within 34 hours, each just under the USD 10,000 reporting limit.
Saved confirmation — appears in place after an action
Saved to audit record · 14:05 · Entry 1285
AI-assisted marking — disappears once the officer edits the paragraph
Drafted by AI, review before filing
Two cash deposits were made within 34 hours, each below the USD 10,000 reporting limit. The pattern matches the structuring description in the AML Procedure.
Buttons
One solid accent action per view — the highest-impact step. Everything else uses the structure colour or plain text. Buttons say what the officer would say aloud.
Illustration and motion tokens
Artwork uses only the illustration palette below, with a 2px ink outline and a hard offset shadow. Motion uses the durations and easings below — quick in the product, expressive only on the landing page.
Illustration palette
Motion
Instant 90ms · Fast 160ms · Base 240ms · Slow 420ms · Scene 800ms
Easing: ease-out for entrances, ease-in-out for slides, spring only for seals and toggles.
Product transitions never exceed 240ms. Reduced motion turns transforms into 150ms fades.