CURATED · OPEN · FREE

Modern Treasury

Payment orchestration API for developers.

fintechsaas

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://www.moderntreasury.com

📦 Browse pack contents →

Identity DNA

infrastructurepaymentsAPIfintech

A clean architectural blueprint for money movement.

Color

#29735CAccent

#151515Ink

rgba(21, 21, 21, 0.8)Ink soft

#FFFFFFBG

#F8F5F4BG soft

#F0F8F9BG quiet

rgba(0, 0, 0, 0.5)Muted

High-contrast neutrals with a single trustworthy green accent.

Typography

grotesque-sans · humanist-sans · monospace

display48px · 500
h232px · 400
body16px · 400
caption14px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

4px grid

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(21, 21, 21, 0.8)

inset 0 0 0 1px rgb(21, 21, 21) · 0 20px 25px -5px lab(0 0 0 / 0.04) · 0 4px 6px -1px rgba(0, 0, 0, 0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered content with a maximum width of 680px for text blocks.

Motion & Interaction

150msmicro

200mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

color transitions · background-color transitions · border-color transitions · fill transitions

Smooth color transitions · Immediate feedback

Components

button Rectangular with small radius, using solid dark backgrounds with light text or bordered outlines.
card Solid color blocks with subtle padding and rounded corners.
chip Small rectangular labels with monospace text and light backgrounds.
input Clean rectangular fields with subtle borders.
hero Centered large-scale typography with a clear call to action.

Voice & Don'ts

Tone Professional, developer-centric, and efficient.
Headlines Short, action-oriented statements.
CTAs Direct and inviting.

don't use soft, rounded 'friendly' shapes — screenshot shows sharp, rectangular UI components
don't use primary colors like bright red or blue — screenshot shows a restrained palette of black, white, and green
don't use decorative serif fonts — screenshot shows clean, modern sans-serif typography
don't use busy, multi-colored gradients — screenshot shows solid color blocks and simple grid backgrounds
don't use playful or cartoonish illustrations — screenshot shows technical diagrams and clean data visualizations
don't use excessive drop shadows — screenshot shows flat surfaces with minimal depth
Avoid: Marketing jargon
Avoid: Vague promises

Inside the pack — real screenshots

Modern Treasury — 桌面首屏（hero） — 桌面首屏（hero）

Modern Treasury — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Modern Treasury is a premium Fintech SaaS platform for developers, featuring a clean, professional interface. The design uses a stark palette of white and near-black, anchored by a specific brand green (#29735C). Typography is strictly sans-serif, prioritizing legibility and hierarchy. Critical constraints: Avoid playful shapes, avoid primary colors, avoid decorative serifs, avoid busy gradients, avoid cartoonish illustrations, avoid excessive shadows. Focus on technical clarity and efficiency.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko