Trust Blue Pay

Trust Blue Pay mockup preview
Click to expand

Trust Blue Pay is a financial-grade design system built on deep blues and clean whites to convey security, reliability, and professionalism. Inspired by global payment platforms, it prioritizes clarity and trust through a blue-dominant palette, generous whitespace, and accessible typography. Every element communicates safety and ease of use.

Primary#003087
Secondary#009CDE
Neutral#687173
Background#F5F7FA
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayInter · 40px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H1Inter · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H2Inter · 24px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H3Inter · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyInter · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SmallInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionInter · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Amount LargeInter · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Amount SmallInter · 18px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px
4px
8px
12px
16px
24px
32px
40px
48px
64px
80px
96px

Trust Blue Pay is a financial-grade design system built on deep blues and clean whites to convey security, reliability, and professionalism. Inspired by global payment platforms, it prioritizes clarity and trust through a blue-dominant palette, generous whitespace, and accessible typography. Every element communicates safety and ease of use.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

DefaultSuccessPendingFailed

List

Transaction Row

Default

Checked

Focus

Default

Navigation Bar

Default

Search

Default

Focus

Elevation & Depth

Level 1
Level 2
Level 3

Do's & Don'ts

Do

use the dark navy (#003087) as the dominant brand color for trust
use tabular numerals for all financial amounts and data
provide clear status indicators with color-coded chips (green/gold/red)
maintain generous padding in cards to give financial data room to breathe
ensure all text meets WCAG AA contrast ratios, especially on blue backgrounds
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 5.2 KB
Downloads 89
Copies 14

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/trust-blue-pay and implement it in my code

Don't have the MCP? Install it here