Fintech & AI Interface System
Defined interface patterns for regulated fintech and AI-driven products — covering risk states, compliance disclosures, and explainability under real production constraints.
12
banking partners live
40+
interface patterns defined
100%
compliance audit pass rate
3×
faster regulated feature delivery
Financial and AI interfaces share a problem generic design systems don't solve: consequence. A poorly labelled risk state isn't a UX issue — it's a liability. An AI recommendation without appropriate confidence framing isn't a copy problem — it's a trust failure waiting to happen. Off-the-shelf component libraries weren't built for these edge cases. We had to define them from scratch.
Why Generic Systems Fall Short
Most design systems are built for consumer products — where the worst outcome of a confusing interaction is abandonment. In fintech, the worst outcome is a mistaken transfer, a missed disclosure, or a user acting on AI-generated advice they didn't understand.
The interface patterns required for these contexts are absent from Tailwind, Material, or Radix. There's no 'irreversible action' component. No 'AI confidence' indicator. No 'regulatory disclosure' template. These had to be invented, tested, and documented as first-class primitives.
In high-stakes interfaces, the design system's job isn't to speed up development — it's to prevent the class of errors that only manifest in production at scale. Patterns for risk, confidence, and compliance need to be boring and consistent by design.
Risk State Framework
The system defines four risk tiers — informational, caution, high-risk, and critical-irreversible — each with consistent visual language, required copy patterns, and mandated interaction constraints. A critical-irreversible action must include a confirmation step with explicit consequence statement. This isn't a guideline — it's enforced at the component level.
The tier system emerged from working with compliance and legal teams on what constitutes adequate disclosure. Design translated regulatory requirement into interaction constraint, and the constraint became a component prop.
Designing for AI Explainability
AI-surfaced recommendations in financial contexts carry a specific design burden: users need to be able to trust them, question them, and override them — all without feeling like they're fighting the product.
The system defines three explainability patterns. Summary-first: lead with the recommendation, expand to reasoning on demand. Confidence framing: surface uncertainty explicitly for high-stakes decisions, suppress it for routine ones. Override affordance: every AI recommendation must have a clear, non-stigmatising path to user override.
AI features in regulated contexts aren't done when they work correctly — they're done when a compliance officer can look at the interface and confirm that the disclosure is adequate and the override path is present.
Compliance Integration
Regulatory requirements vary by market and product type. Rather than building per-market component variants, the system uses a disclosure slot — a standardised space in every high-stakes flow where compliance copy renders based on jurisdiction configuration. Design owns the template; legal owns the copy; the component ensures neither can be omitted.
The slot pattern reduced time-to-compliance-sign-off from three weeks to under five days by eliminating the back-and-forth on where copy would appear and how it would be formatted.
Risk Tier Interface States
Low-stakes context. Provides additional information without requiring action.
Moderate consequence. Prompts user to confirm intent before proceeding.
Significant financial impact. Requires explicit acknowledgement of consequence.
Cannot be undone. Mandates typed confirmation and consequence disclosure.
Information Hierarchy Scale
Display
2rem / 700
Transfer Confirmed
Heading
1.25rem / 600
Account Summary
Body
1rem / 400
Your balance as of today
Caption
0.8125rem / 400
Updated 2 minutes ago
Disclaimer
0.6875rem / 400
Subject to regulatory approval
System Components
RiskGate
Wraps any action with risk-tier-aware confirmation logic. Tier prop drives copy templates, required acknowledgements, and confirmation step requirements.
AIRecommendation
Renders an AI-generated suggestion with configurable confidence framing, expandable reasoning panel, and accessible override affordance.
DisclosureSlot
Jurisdiction-aware disclosure container. Renders compliance copy from configuration; errors in missing copy rather than silently omitting it.
ConfidenceIndicator
Communicates model certainty using a tiered visual language — suppressed for routine tasks, explicit for high-stakes decisions.
Key Takeaways
Risk states require component-level enforcement, not just design guidelines
AI explainability patterns must be designed for the stakes of the task, not the capability of the model
A disclosure slot pattern separates design ownership from legal copy ownership while guaranteeing neither can be omitted
Compliance sign-off speed is a design metric in regulated product contexts