---
title: "Modern Treasury design system"
variant: extended
source: https://www.moderntreasury.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/moderntreasury-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Modern Treasury · Design System

> A precise, calm canvas for moving money

**Theme:** light · **Industry:** fintech · **Source:** https://www.moderntreasury.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Modern Treasury presents a money-movement platform through spacious editorial typography, restrained green accents, and structured product diagrams. The homepage balances a clear enterprise sales journey with concise API, payments, and platform details.

## North star

Keep the page bright, precise, and spacious; use dark ink for structure and green only to identify money movement and action.

## Overview

The page builds its identity from a white canvas, near-black text, and quiet green accents rather than from large colour fields. A pale warm surface separates product cards and form areas from the surrounding white; a deep green footer provides the strongest full-width contrast. Large, light display headlines establish an editorial tone, while compact sans-serif navigation, body copy, and buttons keep the interface practical. Monospaced labels lend technical character to payment rails and code examples. The layout is centered and spacious, alternating broad headline-led sections with two- and three-column product modules, metric bands, and a linear API workflow. Product visuals are mostly diagrams, interface mockups, and code panels rather than photography. Thin dividers and restrained card treatment preserve clarity, with nearly all visual emphasis coming from typography, alignment, and content hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas, header, cards, and form controls; the dominant background throughout the page. |
| Warm Porcelain | `#f8f7f5` | `--color-warm-porcelain` | surface | Soft neutral surface for product modules and input areas against the white canvas. |
| Soft Graphite | `#434242` | `--color-soft-graphite` | neutral | Muted body copy and secondary explanatory text on light sections. |
| Treasury Green | `#29735c` | `--color-treasury-green` | brand | Brand accent for logo, links, and the compact BUSINESS badge; a restrained interface signal. |
| Carbon Ink | `#151515` | `--color-carbon-ink` | neutral | Headlines, primary text, navigation, links, and filled primary CTA buttons. |
| Ledger Green | `#215b4b` | `--color-ledger-green` | accent | Secondary green for payment-rail labels and pale-green badges, primarily within product diagrams. |
| Muted Sage | `#9ea7a5` | `--color-muted-sage` | semantic | Low-emphasis footer text and supporting copy on the dark footer. |
| Divider Gray | `#dcdcdc` | `--color-divider-gray` | neutral | Fine borders, separators, and understated component outlines. |
| Forest Night | `#0c221d` | `--color-forest-night` | brand | Full-width footer background, creating a deep, quiet contrast with the light page. |
| Neutral Gray | `#8a8a8a` | `--color-neutral-gray` | semantic | Occasional secondary text; subordinate to the main muted copy color. |
| Slate Teal | `#2a5060` | `--color-slate-teal` | semantic | Sparse text-level color, not a defining page surface or primary brand accent. |
| Card Line | `#d0d0d0` | `--color-card-line` | neutral | Subtle outlines within cards and interface-like product mockups. |
| Soft Rule | `#e1e1e1` | `--color-soft-rule` | neutral | Light borders and separators around card-like content and UI details. |
| Stone Gray | `#737373` | `--color-stone-gray` | semantic | Secondary text and occasional button detail where emphasis should remain low. |
| Deep Sage | `#3d4e4a` | `--color-deep-sage` | semantic | Muted border or detail within the dark footer, not a prominent brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f7f5` (Warm Porcelain) · `--color-surface-2` → `#0c221d` (Forest Night) · `--color-text` → `#151515` (Carbon Ink) · `--color-text-muted` → `#434242` (Soft Graphite) · `--color-text-subtle` → `#9ea7a5` (Muted Sage) · `--color-border` → `#dcdcdc` (Divider Gray) · `--color-accent` → `#215b4b` (Ledger Green) · `--color-accent-2` → `#29735c` (Treasury Green) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#151515` | `#ffffff` | 18.26:1 | AAA |
| `#151515` | `#f8f7f5` | 17.06:1 | AAA |
| `#151515` | `#0c221d` | 1.1:1 | fail |
| `#434242` | `#ffffff` | 10.02:1 | AAA |
| `#434242` | `#f8f7f5` | 9.36:1 | AAA |
| `#434242` | `#0c221d` | 1.66:1 | fail |
| `#9ea7a5` | `#ffffff` | 2.46:1 | fail |
| `#9ea7a5` | `#f8f7f5` | 2.3:1 | fail |
| `#9ea7a5` | `#0c221d` | 6.75:1 | AA |
| `#215b4b` | `#ffffff` | 7.89:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| mt-sans | `--font-body` | webfont | 360, 330, 600, 500, 400 | Body copy, navigation, links, buttons, and captions | Inter |
| mt-mono | `--font-mono` | webfont | 400, 500 | Code samples, payment-rail labels, and technical microcopy | Roboto Mono |
| mt-neue-display | `--font-display` | webfont | 450 | Large display headline and primary page heading | DM Sans |
| mt-neue-text | `--font-mt-neue-text` | webfont | 400 | Section headings and smaller editorial headings | DM Sans |

- **mt-sans:** Neutral sans-serif with compact interface text; medium-to-semibold for navigation and actions, lighter weights for body copy.
- **mt-mono:** Use monospace selectively for technical labels and code; keep case and spacing matter-of-fact.
- **mt-neue-display:** Light display treatment with generous scale and natural casing; keep tracking neutral.
- **mt-neue-text:** Regular-weight heading style with clean, unembellished casing and comfortable line spacing.

### Type scale — Augmented Fourth (ratio ≈ 1.451, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 71px | 450 | 1.1 | 0 | — | mt-neue-display | Oversized hero headline introducing the money-movement platform. |
| h1 | 47px | 450 | 1.25 | 0 | — | mt-neue-display | Primary page-level heading when the hero uses a smaller heading scale. |
| h2 | 32px | 400 | 1.25 | 0 | — | mt-neue-text | Centered section headings for platform, workflow, and contact blocks. |
| h3 | 21px | 400 | 1.3 | 0 | — | mt-neue-text | Product-card and supporting subsection headings. |
| body | 16px | 360 | 1.5 | 0 | — | mt-sans | Descriptions, explanatory copy, and customer or platform context. |
| caption | 14px | 330 | 1.5 | 0 | — | mt-sans | Supporting labels, field notes, and low-priority details. |
| button | 14px | 600 | 1.5 | 0 | — | mt-sans | Strong, compact CTA labels, typically in sentence case. |
| nav | 14px | 600 | 1.5 | 0 | — | mt-sans | Header navigation and prominent footer navigation labels. |
| link | 14px | 600 | 1.5 | 0 | — | mt-sans | Text links and secondary actions, often paired with an arrow. |
| code | 13px | 400 | 1.69 | 0 | — | mt-mono | API requests, responses, and technical labels in monospaced panels. |

OpenType features in use: `"cv10", "ss07", "ss08"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 12, 14, 16, 20, 22, 24, 32, 40, 48, 60 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width 1200px.

Use a centered content frame with a measured maximum width of 1200px and broad outer whitespace. The header is a single horizontal navigation row; the hero centers its headline and supporting copy above a two-action CTA and a rail diagram. Follow with a logo strip, centered introduction, two-column product cards, a three-part metric band, and a horizontally structured API lifecycle. Continue with compact benefit cards, a testimonial, and a two-column contact form. Maintain a comfortable section rhythm, clear alignment, and low-to-moderate information density.

## Shape & elevation

- Radius: button `2px` · input `2px` · card `8px` · badge `2px` · nav `2px` · link `2px` · xs `2px` · sm `4px` · md `8px`
- Shadow `inset` (button, nav, link): `rgb(21, 21, 21) 0px 0px 0px 1px inset`
- Shadow `lg` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, lab(0 0 0 / 0.04) 0px 20px 25px -5px, lab(0 0 0 / 0.04) 0px 8px `
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: white canvas, soft neutral modules, and fine gray dividers define hierarchy. Cards use restrained rounding rather than pronounced shadows. Primary buttons are near-black with a subtle inset outline. Reserve stronger layering for the header navigation treatment, not content panels.

## Imagery

Avoid relying on lifestyle photography. The hero uses a clean payment-rail diagram with a central mark, fine connector lines, and pale-green monospace labels. Product cards show restrained interface and transaction mockups, while the API section uses code-like panels and process graphics. Keep illustrations pale, low-contrast, and contained within the modular layout so headlines and calls to action remain dominant.

## Components

### Header navigation

White horizontal header with green wordmark, compact sans-serif navigation, and outlined or filled account and sales actions.

### Announcement strip

Narrow pale band below navigation with centered news copy and an underlined press-release link.

### Hero CTA pair

Centered headline and supporting copy above a filled Carbon Ink #151515 Talk to us button and outlined Start building action.

### Payment rail diagram

Central brand mark connected by fine lines to pale-green, monospaced labels for payment rails.

### Product cards

Two-column modules on pale warm surfaces, combining concise headings, links, and contained platform mockups.

### Metric band

Three evenly distributed proof points with large dark figures and small muted labels, separated by fine rules.

### Lead form

Two-column contact area with light inputs, fine borders, concise labels, select controls, and a dark submit button.

### Footer

Forest Night #0c221d full-width footer with newsletter signup, grouped links, and muted sage legal details.

### Measured component styles

- **Primary button** (“BUSINESS”): background #29735c · text #ffffff · border 1px solid #29735c · radius 2px · padding 0px 8px · 400 11px mt-mono
- **Secondary button** (“Talk to us”): background #151515 · text #ffffff · radius 2px · padding 6px 12px · 600 14px mt-sans · shadow rgb(21, 21, 21) 0px 0px 0px 1px inset
- **Link** (“Read the Press Release →”): transparent background · text #151515 · radius 0px · padding 0px · 600 14px mt-sans
- **Input** (“Select an option 1-9 10-199 200-2,499 2,”): background #ffffff · text #000000 · border 1px solid #f9f9f7 · radius 2px · padding 9px 12px · 500 16px mt-sans
- **Card** (“Platform Pay-Ins and Payouts Collect mon”): background #f8f5f4 · text #000000 · radius 8px · padding 0px · 400 16px mt-sans
- **Badge** (“"business"”): background #bae0cf · text #215b4b · radius 2px · padding 0px · 400 13px mt-mono
- **Navigation item** (“Products Solutions Resources Docs Custom”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px mt-sans

## Do

- Use white as the dominant canvas.
- Keep headlines large, centered, and lightly weighted.
- Use green sparingly for brand and payment signals.
- Separate content with whitespace and fine rules.
- Present product capabilities through diagrams and UI mockups.
- Keep calls to action dark, compact, and clearly labeled.

## Don't

- Do not introduce saturated gradients or large coloured hero backgrounds.
- Do not add decorative photography that competes with product diagrams.
- Do not use heavy shadows to separate ordinary cards.
- Do not crowd the centered sections with dense copy.
- Do not turn every link or label green.
- Do not make the technical details look like an unstructured dashboard.

## Agent prompt

Build a new Modern Treasury-style fintech page with a bright, editorial interface and clear enterprise information hierarchy. Use Gallery White #ffffff as the main canvas, Warm Porcelain #f8f7f5 for quiet modules, Carbon Ink #151515 for text and primary actions, and Treasury Green #29735c only for brand and key links. Set large, light display headings above concise sans-serif copy; use monospaced type only for code and technical labels. Center content in a measured 1200px maximum frame, alternating spacious headline sections with modular cards, metrics, workflows, and a practical form. Prefer payment diagrams and restrained interface mockups over photography. Keep borders fine, cards flat, buttons compact, and finish with a Forest Night #0c221d footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy above paired CTAs; payment-rail visual anchors the lower area. | Primary and secondary CTA, Payment-rail illustration | Large display headline, Centered copy, Fine-line diagram |
| 2 | logo-cloud | Single horizontal row of customer marks between subtle dividers. | Customer social proof | Monochrome logo strip, Thin rules |
| 3 | feature-grid | Centered section heading above a two-column, two-row product-card grid. | Feature discovery links | Warm neutral cards, Contained product mockups |
| 4 | stats | Three metrics aligned horizontally with fine separators and compact captions. | Trust and scale proof | Large figures, Muted labels, Thin rules |
| 5 | how-it-works | Centered heading and copy above a four-stage horizontal lifecycle and code panel. | Sequential process overview, API example | Linear workflow, Monospaced code, Fine borders |
| 6 | feature-grid | Centered section heading above three equal-width benefit cards. | Benefit comparison | Pale blue-tinted surfaces, Compact text blocks |
| 7 | testimonials | Quote-led testimonial module with customer identity and supporting brand marks. | Customer endorsement, Story link | Muted quote panel, Compact attribution |
| 8 | contact | Centered heading above a two-column form with stacked full-width fields and one CTA. | Lead capture, Company-size selects | Light input surfaces, Fine borders, Dark submit button |
| 9 | footer | Full-width deep-green footer with newsletter row and grouped multi-column navigation. | Newsletter signup, Grouped site navigation | Forest-dark background, Muted text, Compact legal row |

## Source CSS custom properties (selected)

```css
--color-accent: #29735c;
--color-border-default: #15151566;
--color-border-dim: #15151533;
--color-button-link-text: #151515;
--color-button-primary-background: #151515;
--color-button-primary-border: #151515;
--color-button-primary-disabled-background: #bdbdbd;
--color-button-primary-disabled-border: #bdbdbd;
--color-button-primary-disabled-text: #fff;
--color-button-primary-text: #fff;
--color-button-secondary-border: #151515;
--color-button-secondary-text: #151515;
--color-form-input-default-background: #fff;
--color-form-input-default-border: #dcdcdc;
--color-form-input-default-text: #151515;
--color-form-input-disabled-text: #7c7c7c;
--color-icon: #151515;
--color-link: #29735c;
--color-module-background: #fff;
--color-mt-logo: #29735c;
--color-text-default: #151515cc;
--color-text-dim: #15151599;
--color-text-strong: #151515;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/moderntreasury-com