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

# Monad · Design System

> Quiet editorial design for security data infrastructure.

**Theme:** light · **Industry:** saas · **Source:** https://www.monad.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._

Monad pairs understated editorial typography with a light, spacious canvas to make a technical security platform feel approachable. Fine outlines, restrained buttons, and soft multicolour glows add structure without competing with the product story.

## North star

Keep the warm, open canvas and editorial serif headlines dominant; use mono interface text, fine rules, and gradients only as restrained product accents.

## Overview

The page is built on a warm off-white canvas (#f6f3f1), with nearly every section retaining the same quiet background rather than switching between strong colour bands. Large, centered Untitled Serif headlines give the technical product an editorial voice; ABC Diatype Mono handles navigation, body copy, labels, and calls to action, often in uppercase for compact interface text. The first viewport stays spacious: a black announcement strip sits above a restrained navigation row, followed by a centered headline and subdued supporting copy. Rounded dark and blue CTA pills provide the clearest solid colour accents. Product diagrams, integration marks, and cards carry most of the visual detail. Soft blue, peach, yellow, and mint gradients appear as low-contrast glows around diagrams and in the closing CTA, not as broad brand backgrounds. Fine outlines and open page margins keep the long, multi-section page readable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#f6f3f1` | `--color-warm-canvas` | brand | Dominant page background across the hero, content sections, and footer. |
| Soft Graphite | `#4e4d4d` | `--color-soft-graphite` | neutral | Primary measured text colour, especially body copy and footer text. |
| Deep Charcoal | `#242424` | `--color-deep-charcoal` | neutral | Dark headings, navigation details, and card outlines; also used for a circular button. |
| Quiet Rule | `#e1dedc` | `--color-quiet-rule` | neutral | Subtle dividers and footer hairlines against the warm canvas. |
| Powder Blue | `#cfdaf5` | `--color-powder-blue` | surface | Pale blue section surface and soft supporting colour around integration visuals. |
| Card Edge | `#ccc9c8` | `--color-card-edge` | neutral | Light card borders that separate feature panels without adding heavy elevation. |
| Apricot Glow | `#f59f4f` | `--color-apricot-glow` | accent | Warm gradient accent around product imagery and the closing call-to-action panel. |
| Signal Black | `#000000` | `--color-signal-black` | semantic | Announcement-bar background and selected navigation, button, and heading text. |
| Soft Marigold | `#e2c161` | `--color-soft-marigold` | accent | Golden gradient highlight used in decorative product and CTA glows. |
| Slate Ink | `#46484e` | `--color-slate-ink` | neutral | Secondary text tone, appearing sparingly within the page. |
| Mist Blue | `#b1c1ec` | `--color-mist-blue` | accent | Cool gradient accent for decorative diagrams and product visuals. |
| Coral Haze | `#fda78c` | `--color-coral-haze` | accent | Peach-toned decorative gradient inside product imagery, not a dominant interface colour. |
| Periwinkle Glow | `#a0b5eb` | `--color-periwinkle-glow` | accent | Blue-violet gradient stop in decorative product graphics and soft lighting effects. |
| Mint Light | `#a7fccd` | `--color-mint-light` | accent | Mint gradient glow behind product diagrams; decorative rather than a solid UI surface. |
| Muted Ash | `#797777` | `--color-muted-ash` | neutral | Low-emphasis footer text and secondary supporting details. |
| Rose Tint | `#ecb0a7` | `--color-rose-tint` | accent | Soft pink gradient accent appearing within decorative product imagery. |

### Semantic aliases

`--color-canvas` → `#f6f3f1` (Warm Canvas) · `--color-surface` → `#cfdaf5` (Powder Blue) · `--color-text` → `#4e4d4d` (Soft Graphite) · `--color-text-muted` → `#000000` (Signal Black) · `--color-border` → `#e1dedc` (Quiet Rule) · `--color-accent` → `#f59f4f` (Apricot Glow) · `--color-accent-2` → `#e2c161` (Soft Marigold) · `--color-accent-3` → `#b1c1ec` (Mist Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#4e4d4d` | `#f6f3f1` | 7.63:1 | AAA |
| `#4e4d4d` | `#cfdaf5` | 6.02:1 | AA |
| `#000000` | `#f6f3f1` | 19.01:1 | AAA |
| `#000000` | `#cfdaf5` | 15:1 | AAA |
| `#f59f4f` | `#f6f3f1` | 1.91:1 | fail |
| `#f59f4f` | `#cfdaf5` | 1.51:1 | fail |

### Gradients

- `linear-gradient(rgba(167, 252, 205, 0), rgba(243, 122, 10, 0.7) 25%)`
- `linear-gradient(rgba(167, 252, 205, 0), rgb(226, 193, 97) 54.17%)`
- `linear-gradient(rgba(255, 148, 115, 0.8) 7%, rgba(160, 181, 235, 0.8) 83.82%)`
- `linear-gradient(270deg, rgba(160, 181, 235, 0.6) 16.18%, rgba(255, 148, 115, 0.6) 93%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Diatype Mono | `--font-mono` | webfont | 400, 500 | Navigation, body copy, labels, captions, and CTA text. | Space Mono |
| Untitled Serif | `--font-display` | webfont | 400 | Display and section headings, including the hero and CTA title. | DM Serif Display |
| Untitled Sans | `--font-untitled-sans` | webfont | 400 | Minor supporting sans-serif usage where the measured page uses a neutral sans. | Inter |

- **ABC Diatype Mono:** Regular weight dominates; interface labels often use uppercase, with tightly tracked text.
- **Untitled Serif:** Regular-weight editorial serif with tight tracking and generous line spacing.
- **Untitled Sans:** Regular weight; secondary to the serif display and monospace interface system.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1.2 | -0.02em | — | Untitled Serif | Oversized editorial hero and major statement headlines. |
| h1 | 48px | 400 | 1.2 | -0.02em | — | Untitled Serif | Primary page headline, centered in the hero. |
| h2 | 40px | 400 | 1.2 | -0.02em | — | Untitled Serif | Section titles such as process and FAQ headings. |
| h3 | 32px | 400 | 1.2 | -0.02em | — | Untitled Serif | Feature-card titles and subordinate section headings. |
| h4 | 24px | 400 | 1.2 | -0.02em | — | Untitled Serif | Smaller feature headings and FAQ prompts. |
| body | 16px | 400 | 1.35 | -0.025em | — | ABC Diatype Mono | Main explanatory copy and product descriptions. |
| caption | 14px | 400 | 1.35 | -0.02em | — | ABC Diatype Mono | Small supporting notes, labels, and compact metadata. |
| nav | 18px | 400 | normal | -0.022em | uppercase | ABC Diatype Mono | Uppercase primary navigation links. |
| eyebrow | 16px | 400 | 1.3 | 0.05em | uppercase | ABC Diatype Mono | Small uppercase section labels and trust indicators. |
| code | 16px | 400 | 1.35 | -0.025em | — | ABC Diatype Mono | Technical-looking inline labels and data-oriented interface copy. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 10, 12, 15, 16, 24, 32, 40, 50, 64, 100 px.
- Section rhythm 40px · element gap 16px · card padding 40px · max content width 1352px.

A broad centered content area organizes a long, comfortable-density page, with two-column arrangements for the hero, feature sections, and integration story. The hero headline and copy are centered; most later section headings and feature content align left. Content alternates between open text-and-visual compositions, outlined cards, a logo strip, and a single prominent blue-tinted integrations band. Section spacing feels generous and consistent, while the footer resolves into four columns. Preserve the measured max-width and spacing tokens when implementing rather than adding arbitrary values.

## Shape & elevation

- Radius: button `50%` · card `16px` · nav `9999px` · xs `16px` · sm `40px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.1) 0px 0px 10px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The design is mostly flat: cards rely on thin outlines and clear spacing instead of pronounced shadows. Rounded feature panels use measured card radii, while the CTA and navigation controls are pill-shaped. Gradient lighting provides the main sense of depth, especially behind diagrams and inside the closing CTA; use the measured subtle shadow only where appropriate.

## Imagery

The page uses product diagrams, workflow illustrations, integration logos, and abstract gradient glows rather than lifestyle photography. Diagrams are presented as light, precise interface-like graphics, with fine connector lines and small labels. Soft blue, mint, peach, and gold colour blooms sit behind elements to add depth while keeping the overall imagery low-contrast and subordinate to the copy. The hero’s pipeline visualization communicates data flow through labeled sources, a central Monad mark, and destinations.

## Components

### Announcement bar

Black full-width strip with compact monospace announcement copy, a small light blog link, and a close control.

### Primary navigation

Brand mark and uppercase monospace links on the warm canvas; login uses a dark pill and the demo action a blue pill.

### Hero

Centered serif headline, subdued monospace summary, paired CTA links, and a pipeline illustration showing sources flowing through Monad to destinations.

### Feature cards

Open, outlined feature panels with 16px measured corner radius, generous internal spacing, mono copy, and product diagrams or gradient accents.

### Integrations band

Prominent pale blue rounded panel pairing left-aligned serif copy and CTA with a vertically presented stream of security data sources.

### FAQ accordion

Single-column question list with serif prompts, plus-style expand controls, and fine horizontal separators.

### Closing CTA

Large outlined rounded panel with centered serif statement, short mono supporting copy, soft warm gradient glow, and paired pill actions.

### Footer

Four-column link groups for platform, solutions, resources, and about, with social links and subdued supporting text.

### Measured component styles

- **Primary button**: background #242424 · text #000000 · radius 50% · padding 5px · 400 20px ABC Diatype Mono
- **Link** (“START TRIAL START TRIAL”): transparent background · text #000000 · radius 0px · padding 0px · 400 20px ABC Diatype Mono · uppercase
- **Card** (“Cost Optimization at Every Step Stop pay”): transparent background · text #000000 · border 1px solid #242424 · radius 16px · padding 40px · 400 20px ABC Diatype Mono
- **Navigation item** (“Schema Drift Detection is now live in Mo”): transparent background · text #000000 · radius 0px · padding 0px · 400 20px ABC Diatype Mono

## Do

- Use the warm canvas as the default background.
- Set display headings in an editorial serif.
- Use monospace for navigation, body copy, and labels.
- Keep section layouts spacious and content-led.
- Reserve gradients for product visuals and CTA atmosphere.
- Use fine borders to define cards and separators.

## Don't

- Do not introduce saturated full-width colour bands.
- Do not make gradients compete with the headline.
- Do not use heavy shadows on feature cards.
- Do not turn the page into a dense dashboard.
- Do not replace serif display type with a generic sans.
- Do not treat illustration-only colours as core UI fills.

## Agent prompt

Build a new SaaS page in Monad’s calm editorial style. Use Warm Canvas (#f6f3f1) as the dominant background, with Soft Graphite (#4e4d4d) for readable copy and Signal Black (#000000) for a compact announcement bar or selected controls. Use Untitled Serif-style headings and ABC Diatype Mono-style interface text; keep navigation labels compact and often uppercase. Organize content in a spacious centered max-width layout, mixing two-column feature sections, fine outlined cards, and clear left-aligned content. Use Powder Blue (#cfdaf5) sparingly for a section surface. Keep Apricot Glow (#f59f4f), Soft Marigold (#e2c161), Mist Blue (#b1c1ec), and Mint Light (#a7fccd) as subtle decorative gradients around diagrams, never as dominant blocks. Prefer thin borders, pill actions, and minimal shadow.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Black announcement strip above a horizontal logo, navigation, login, and demo row. | announcement link, dropdown navigation, login and demo actions | black top bar, uppercase mono links, pill buttons |
| 2 | hero | Centered headline and copy above paired actions, with a two-sided pipeline diagram below. | start trial, view integrations, source-to-destination explanation | large serif headline, mono copy, soft diagram glow |
| 3 | logo-cloud | Small left-aligned trust label above a horizontal row of customer marks. | social proof | compact eyebrow, logo strip |
| 4 | how-it-works | Left-aligned section heading followed by a two-column feature composition with diagrams and copy. | explain workflow, show transformation stages | serif section heading, outlined cards, gradient-backed diagrams |
| 5 | integrations | Two-column content inside a wide pale blue panel, with text and CTA on the left and source names on the right. | explore integrations, scan supported sources | Powder Blue panel, rounded outer frame, source list |
| 6 | feature-grid | Left-aligned heading above a two-column grid of four outlined feature cards. | compare product benefits, scan feature summaries | thin card borders, small line icons, serif card headings |
| 7 | faq | Single-column question list beneath a left-aligned serif heading. | expand answers, scan common questions | plus controls, hairline dividers, serif prompts |
| 8 | cta | Centered content inside a broad rounded, outlined panel. | start trial, request demo | warm gradient glow, serif statement, paired pill actions |
| 9 | footer | Four-column link groups with social and location/time details. | navigate product areas, follow social channels | compact link columns, subdued text, fine separators |

## Source CSS custom properties (selected)

```css
--_color---off-white: #f8f3f1;
--_text-style---body-text--font-family: "ABC Diatype Mono",sans-serif;
--_text-style---body-text--font-size: 1.25rem;
--_text-style---body-text--line-height: 1.35;
--_text-style---body-text--font-weight: 400;
--_text-style---body-text--letter-spacing: -.02em;
--_text-style---heading-1--font-family: "Untitled Serif","Times New Roman",sans-serif;
--_text-style---heading-1--font-size: 5rem;
--_text-style---heading-1--line-height: 1.2;
--_text-style---heading-1--letter-spacing: -.02em;
--_text-style---heading-2--font-family: "Untitled Serif","Times New Roman",sans-serif;
--_text-style---heading-2--font-size: 4rem;
--_text-style---heading-2--line-height: 1.2;
--_text-style---heading-2--font-weight: 400;
--_text-style---heading-2--letter-spacing: -.02em;
--_text-style---heading-3--font-family: "Untitled Serif","Times New Roman",sans-serif;
--_text-style---heading-3--font-size: 3rem;
--_text-style---heading-3--line-height: 1.2;
--_text-style---heading-3--font-weight: 400;
--_text-style---heading-3--letter-spacing: -.02em;
--_text-style---heading-4--font-family: "Untitled Serif","Times New Roman",sans-serif;
--_text-style---heading-4--font-size: 2.5rem;
--_text-style---heading-4--line-height: 1.2;
--_text-style---heading-4--font-weight: 400;
--_text-style---heading-4--letter-spacing: -.02em;
--_text-style---heading-5--font-family: "Untitled Serif","Times New Roman",sans-serif;
--_text-style---heading-5--font-size: 2rem;
--_text-style---heading-5--line-height: 1.2;
--_text-style---heading-5--font-weight: 400;
--_text-style---heading-5--letter-spacing: -.02em;
--_text-style---heading-6--font-family: "Untitled Serif","Times New Roman",sans-serif;
--_text-style---heading-6--font-size: 1.5rem;
--_text-style---heading-6--line-height: 1.2;
--_text-style---heading-6--font-weight: 400;
--_text-style---heading-6--letter-spacing: -.02em;
--_color---off-black-80: #242424cc;
--_text-style---heading-1--font-weight: 400;
--_color---off-black: #242424;
--_text-style---eyebrow--font-family: "ABC Diatype Mono",sans-serif;
--_text-style---eyebrow--font-size: 1rem;
```

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