№ moderntreasury-com--learn

Part of Moderntreasury - 4 pages captured →

Moderntreasury

Cool, clinical grids—crisp sans-serifs float on vast, softly-lit white space.

Map / Diagramminimalism swiss monochrome fintech saaslight

The page uses a clean, grid-based layout to visually represent the interconnectedness of different payment solutions. Typography is straightforward and functional, prioritizing clarity over ornamentation. The overall mood is precise and informative. · payment solutions diagram, fintech ecosystem, payment gateway network, financial technology map, payment infrastructure, modern treasury, payment integrations

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: monochrome · muted · cool

SwatchHexOKLCHSuggested roleCopy

Hex#c83636
OKLCHoklch(55.6% 0.183 25)
RoleDominant
find sites →
Hex#681c1c
OKLCHoklch(35.1% 0.108 25)
RoleSurface
find sites →
Hex#fcf4f4
OKLCHoklch(97.3% 0.009 17)
RoleInk
find sites →
Hex#689c8c
OKLCHoklch(65.1% 0.061 173)
RoleAccent
find sites →
Hex#acccc3
OKLCHoklch(81.9% 0.036 176)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	mt-neue-display	71px	450	1.1	Aa Bb Cc
h2	mt-neue-display	47px	450	1.25	Aa Bb Cc
h3	mt-neue-text	32px	400	1.25	Aa Bb Cc
body	mt-sans	16px	400	1.5	Aa Bb Cc
button	mt-sans	14px	500	1.5	Aa Bb Cc

Spacing scale

12px

20px

48px

60px

90px

Radius scale

0px

2px

4px

8px

16px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #c83636;
  --color-surface: #681c1c;
  --color-ink: #fcf4f4;
  --color-accent: #689c8c;
  --color-detail: #acccc3;
}

/* CSS variables exposed by source */
:root {
  --color-brown-900: #533d3b;
  --color-button-secondary-text: #151515;
  --text-body-sm: 14px;
  --color-brown-700: #7b5953;
  --text-eyebrow--font-weight: 400;
  --color-form-input-disabled-text: #7c7c7c;
  --text-heading-sm--font-weight: 400;
  --text-eyebrow-sm--font-weight: 400;
  --text-eyebrow--letter-spacing: 0;
  --color-alpha-white-600: #fff9;
  --text-body-md: 16px;
  --text-heading-lg: 32px;
  --color-blue-700: #2b5f73;
  --color-alpha-black-100: #15151521;
  --color-text-dim: #15151599;
  --color-button-primary-border: #151515;
  --text-eyebrow-sm--line-height: 100%;
  --text-post-paragraph--line-height: 150%;
  --color-error-red-light: #ff6b6b;
  --color-mt-logo: #29735c;
  --color-alpha-white-400: #fff6;
  --text-heading-sm--line-height: 130%;
  --text-heading-lg--letter-spacing: 0;
  --spacing-12: 48px;
  --color-green-100: #dbf0e5;
  --text-eyebrow--line-height: 120%;
  --text-body-xs--font-weight: 330;
  --color-blue-300: #93c2cd;
  --text-body-lg: 18px;
  --color-gray-300: #bdbdbd;
  --font-mono: "mt-mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --text-body-sm--line-height: 150%;
  --color-violet-900: #543b4e;
  --spacing-8: 32px;
  --color-gray-500: #7c7c7c;
  --text-body-xs--letter-spacing: 0;
  --text-heading-sm: 21px;
  --color-gray-50: #f8f8f8;
  --color-button-secondary-border: #151515;
  --color-alpha-black-900: #151515e5;
  --color-white: #fff;
  --color-gray-400: #989898;
  --color-blue-400: #60a0af;
  --radius-sm: 4px;
  --spacing-3: 12px;
  --color-alpha-black-50: #1515150d;
  --text-heading-xl--letter-spacing: 0;
  --font-sans: "mt-sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-weight-bold: 700;
  --text-heading-xs: 20px;
  --color-gray-100: #f3f3f3;
  --text-heading-xl--line-height: 110%;
  --color-text-default: #151515cc;
  --text-eyebrow-xs--font-weight: 400;
  --color-brown-800: #654a47;
  --color-alpha-black-700: #151515b2;
  --color-violet-800: #694961;
  --color-alpha-white-700: #ffffffb2;
  --color-alpha-black-600: #15151599;
  --spacing-5: 20px;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Moderntreasury.
Reference design system (extracted from the live site):
- Palette: #c83636, #681c1c, #fcf4f4, #689c8c, #acccc3
- Typefaces: mt-neue-display, mt-sans
- Macrostructure: Map / Diagram
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/moderntreasury-com--learn

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

mt-neue-display

71px

450

1.1

Aa Bb Cc

mt-neue-display

47px

450

1.25

Aa Bb Cc

mt-neue-text

32px

400

1.25

Aa Bb Cc

body

mt-sans

16px

400

1.5

Aa Bb Cc

button

mt-sans

14px

500

1.5

Aa Bb Cc

:root { --color-dominant: #c83636; --color-surface: #681c1c; --color-ink: #fcf4f4; --color-accent: #689c8c; --color-detail: #acccc3; } /* CSS variables exposed by source */ :root { --color-brown-900: #533d3b; --color-button-secondary-text: #151515; --text-body-sm: 14px; --color-brown-700: #7b5953; --text-eyebrow--font-weight: 400; --color-form-input-disabled-text: #7c7c7c; --text-heading-sm--font-weight: 400; --text-eyebrow-sm--font-weight: 400; --text-eyebrow--letter-spacing: 0; --color-alpha-white-600: #fff9; --text-body-md: 16px; --text-heading-lg: 32px; --color-blue-700: #2b5f73; --color-alpha-black-100: #15151521; --color-text-dim: #15151599; --color-button-primary-border: #151515; --text-eyebrow-sm--line-height: 100%; --text-post-paragraph--line-height: 150%; --color-error-red-light: #ff6b6b; --color-mt-logo: #29735c; --color-alpha-white-400: #fff6; --text-heading-sm--line-height: 130%; --text-heading-lg--letter-spacing: 0; --spacing-12: 48px; --color-green-100: #dbf0e5; --text-eyebrow--line-height: 120%; --text-body-xs--font-weight: 330; --color-blue-300: #93c2cd; --text-body-lg: 18px; --color-gray-300: #bdbdbd; --font-mono: "mt-mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --text-body-sm--line-height: 150%; --color-violet-900: #543b4e; --spacing-8: 32px; --color-gray-500: #7c7c7c; --text-body-xs--letter-spacing: 0; --text-heading-sm: 21px; --color-gray-50: #f8f8f8; --color-button-secondary-border: #151515; --color-alpha-black-900: #151515e5; --color-white: #fff; --color-gray-400: #989898; --color-blue-400: #60a0af; --radius-sm: 4px; --spacing-3: 12px; --color-alpha-black-50: #1515150d; --text-heading-xl--letter-spacing: 0; --font-sans: "mt-sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-weight-bold: 700; --text-heading-xs: 20px; --color-gray-100: #f3f3f3; --text-heading-xl--line-height: 110%; --color-text-default: #151515cc; --text-eyebrow-xs--font-weight: 400; --color-brown-800: #654a47; --color-alpha-black-700: #151515b2; --color-violet-800: #694961; --color-alpha-white-700: #ffffffb2; --color-alpha-black-600: #15151599; --spacing-5: 20px; }

Build a landing page in the visual style of Moderntreasury. Reference design system (extracted from the live site): - Palette: #c83636, #681c1c, #fcf4f4, #689c8c, #acccc3 - Typefaces: mt-neue-display, mt-sans - Macrostructure: Map / Diagram Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/moderntreasury-com--learn