# Modern Treasury · Design system migration spec

> Source: https://www.moderntreasury.com  ·  Curated by OpenDesign  ·  en

> A prime example of clean, technical design language in modern fintech.

## 1. Identity DNA

Modern Treasury's design language reads like a clean architectural blueprint for money movement, where every structural decision serves the singular purpose of clarity. The system builds its identity on the foundational principles of fintech infrastructure, payments processing, and API integration, manifesting as a Payment orchestration API for developers.

**One-liner:** Payment orchestration API for developers.
**Keywords:** infrastructure · payments · API · fintech
**Analogy:** A clean architectural blueprint for money movement.

## 2. Color

The palette operates on a principle of high-contrast neutrals, where stark white and near-black create a disciplined canvas that directs all visual weight to the system's single trustworthy green accent.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F8F5F4` | card background |
| `--bg-quiet` | `#F0F8F9` | quiet area |
| `--ink` | `#151515` | body text |
| `--ink-soft` | `rgba(21, 21, 21, 0.8)` | secondary text |
| `--muted` | `rgba(0, 0, 0, 0.5)` | placeholder |
| `--muted-soft` | `rgba(21, 21, 21, 0.8)` | weak hint |
| `--accent` | `#29735C` | single accent |
| `--line` | `rgba(21, 21, 21, 0.8)` | divider |

**Color principle:** High-contrast neutrals with a single trustworthy green accent.

This restrained chromatic strategy ensures that color serves as a functional signal rather than a decorative element.

## 3. Typography

The typographic system is built exclusively on clean, modern sans-serif families, establishing a technical voice that prioritizes legibility and clear hierarchical distinction across hero headlines, section titles, body text, and UI labels.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 500 | -1px | Hero headlines |
| h2 | 32px | 1.2 | 400 | 0px | Section titles |
| body | 16px | 1.5 | 400 | 0px | Main text |
| caption | 14px | 1.5 | 400 | 0px | UI labels and small text |

## 4. Spacing

All spatial relationships are governed by a strict 4px grid, creating a consistent and predictable vertical rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px grid

## 5. Surfaces

Depth is communicated through minimal, purposeful means: subtle inset borders and restrained elevation shadows that define surfaces without creating visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 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)
- **Borders:** 1px solid rgba(21, 21, 21, 0.8)

## 6. Layout

The layout skeleton is anchored by centered content blocks with a maximum width of 680px for text, establishing a strong, readable core. This central column is set within a wider container, creating clear section breaks and a disciplined vertical flow.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is treated as a utilitarian feedback mechanism, not a decorative flourish. Transitions are confined to efficient, short-duration changes on interactive elements, using a consistent cubic-bezier curve to communicate state changes with clarity.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - color transitions
  - background-color transitions
  - border-color transitions
  - fill transitions

- **Hover:** Smooth color transitions
- **Click:** Immediate feedback
- **Transition:** 0.15s to 0.2s cubic-bezier(0.4, 0, 0.2, 1)
- **Keyboard:** Standard focus ring behavior

## 8. Voice & Don'ts

The editorial voice is professional, developer-centric, and efficient, matching the system's visual discipline. It favors short, action-oriented statements and direct calls to action, deliberately avoiding marketing jargon and vague promises.

- **Tone:** Professional, developer-centric, and efficient.
- **Headline style:** Short, action-oriented statements.
- **CTA style:** Direct and inviting.
- **Avoid:** Marketing jargon / Vague promises

### Don'ts
- ❌ 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

The system consciously rejects soft, rounded shapes, primary colors, decorative serifs, busy gradients, cartoonish illustrations, and excessive shadows to maintain its technical integrity.

## System Prompt (paste into AI tool)

```
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.
```