Crypto Blue

Crypto Blue mockup preview
Click to expand

Crypto Blue is a fintech-grade design system built for the digital asset era. It pairs a bold, trustworthy blue with dark and light neutrals to convey security and modernity. The aesthetic is minimal, data-rich, and engineered for clarity in financial interfaces where every pixel of information matters.

Primary#0052FF
Secondary#5B616E
Neutral#8A919E
Background#F9FAFB
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayDM Sans · 40px · Bold

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

H1DM Sans · 32px · Bold

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

H2DM Sans · 24px · Bold

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

H3DM Sans · 18px · Bold

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

BodyDM Sans · 16px · Regular

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

Body SmallDM Sans · 14px · Regular

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

CaptionDM Sans · 12px · Medium

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

Mono DataJetBrains Mono · 16px · Medium

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

Mono SmallJetBrains Mono · 13px · Regular

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
20px
24px
32px
40px
48px
64px
80px

Crypto Blue is a fintech-grade design system built for the digital asset era. It pairs a bold, trustworthy blue with dark and light neutrals to convey security and modernity. The aesthetic is minimal, data-rich, and engineered for clarity in financial interfaces where every pixel of information matters.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

positivenegativeneutral

List

header

Checkbox

default

checked

Tooltip

default

Navigation

default

active

Search

default

focus

Elevation & Depth

Level 1
Level 2
Level 3

Do's & Don'ts

Do

Use JetBrains Mono for all financial data, prices, and amounts
Use green (#05B169) for positive values and red (#DF2935) for negative values consistently
Keep price data right-aligned with tabular numerals for scanning
Maintain at least 44px touch targets for trade actions on mobile
Provide skeleton loading states for price data that updates in real-time

Don't

Use decorative shadows in data tables; prefer 1px borders for clean alignment
Mix DM Sans and JetBrains Mono within the same text block
Use the blue (#0052FF) for data visualization; reserve it for interactive elements
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 5.3 KB
Downloads 192
Copies 47

Use with MCP

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

Don't have the MCP? Install it here