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

# Modal · Design System

> Quiet dark surfaces, precise type, vivid signals of green

**Theme:** dark · **Industry:** ai · **Source:** https://modal.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._

Modal pairs a near-black canvas with restrained green highlights to present AI infrastructure as focused, technical, and production-ready. Alternating dark product sections and pale customer-story panels give a long homepage clear visual chapters.

## North star

Keep the interface quiet and near-black, then use precise typography, modular product evidence, and sparse lime accents to direct attention.

## Overview

The homepage is built on a near-black green-tinted canvas, with subdued charcoal surfaces distinguishing product demonstrations and section bands. Soft off-white carries the main headings and primary pill buttons; muted gray supports navigation and explanatory copy, while vivid lime is reserved for selected words, small labels, and tiny status cues. Typography is clean and understated: ABC Diatype handles nearly all interface and editorial text in regular weights, with a mono face used for code-like labels and mock-interface details. The hero centers a concise headline above two compact actions, then gives a large glowing particle-like green mark room to dominate. Below, repeated two-column feature stories and compact cards pair short copy with dark interface illustrations. A pale customer and updates region deliberately reverses the palette before a dark closing CTA and multi-column footer. Broad section spacing keeps the dense technical content from feeling crowded.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Graphite Moss | `#10120f` | `--color-graphite-moss` | surface | Dark card and button surface, footer base, and frequent hairline border tone. |
| Night Canopy | `#040804` | `--color-night-canopy` | brand | Primary page canvas and recurring dark section background. |
| Ash Signal | `#a8aba6` | `--color-ash-signal` | semantic | Muted navigation, secondary copy, and subdued footer text. |
| Soft Porcelain | `#e3e5e1` | `--color-soft-porcelain` | neutral | Main light text, headings, pale section surface, and primary CTA fill. |
| Carbon Panel | `#181818` | `--color-carbon-panel` | surface | Raised dark section and alternate background band. |
| Iron Lichen | `#1c1e1b` | `--color-iron-lichen` | surface | Fine outlines and restrained card or control edges. |
| Fogged Stone | `#daded7` | `--color-fogged-stone` | neutral | Pale inverse surface used for a small number of cards and light content areas. |
| Slate Trace | `#313330` | `--color-slate-trace` | semantic | Subtle line and interface-detail tone, not a defining brand field. |
| Coal Seam | `#2b2c2a` | `--color-coal-seam` | surface | Low-contrast detail in borders and navigation or interface elements. |
| Cool Chalk | `#eef2eb` | `--color-cool-chalk` | neutral | Occasional high-contrast text detail within the dark interface. |
| Live Lime | `#7fee64` | `--color-live-lime` | accent | Sparse emphasis in hero text, small labels, and status-like highlights. |
| Muted Graphite | `#4b4d4a` | `--color-muted-graphite` | semantic | Minor subdued text detail; keep secondary to the main gray copy. |

### Semantic aliases

`--color-canvas` → `#040804` (Night Canopy) · `--color-surface` → `#181818` (Carbon Panel) · `--color-surface-2` → `#10120f` (Graphite Moss) · `--color-surface-3` → `#e3e5e1` (Soft Porcelain) · `--color-surface-4` → `#daded7` (Fogged Stone) · `--color-text` → `#e3e5e1` (Soft Porcelain) · `--color-text-muted` → `#a8aba6` (Ash Signal) · `--color-text-subtle` → `#10120f` (Graphite Moss) · `--color-border` → `#10120f` (Graphite Moss) · `--color-accent` → `#7fee64` (Live Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e3e5e1` | `#040804` | 15.9:1 | AAA |
| `#e3e5e1` | `#181818` | 14:1 | AAA |
| `#e3e5e1` | `#10120f` | 14.85:1 | AAA |
| `#a8aba6` | `#040804` | 8.68:1 | AAA |
| `#a8aba6` | `#181818` | 7.64:1 | AAA |
| `#a8aba6` | `#10120f` | 8.11:1 | AAA |
| `#a8aba6` | `#e3e5e1` | 1.83:1 | fail |
| `#10120f` | `#040804` | 1.07:1 | fail |
| `#10120f` | `#181818` | 1.06:1 | fail |
| `#10120f` | `#e3e5e1` | 14.85:1 | AAA |

### Gradients

- `linear-gradient(to left in oklab, rgb(16, 18, 15) 0%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Diatype | `--font-body` | webfont | 400, 500 | Headings, body copy, navigation, links, and buttons | Inter |
| DM Mono | `--font-mono` | webfont | 400 | Code-like labels and technical product mockup details | IBM Plex Mono |

- **ABC Diatype:** Regular weights dominate; use restrained tracking and natural sentence case, with medium weight for selected links.
- **DM Mono:** Regular monospace with slightly open tracking; reserve for compact technical annotations.

### Type scale — Perfect Fifth (ratio ≈ 1.501, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 44px | 400 | 1.09 | 0 | — | ABC Diatype | Centered hero headline and closing CTA headline. |
| h2 | 37px | 400 | 1.19 | 0 | — | ABC Diatype | Major section headlines introducing platform capabilities. |
| h3 | 28px | 400 | 1.29 | 0 | — | ABC Diatype | Feature-card and supporting content headings. |
| body | 13px | 400 | 1.54 | 0.01em | — | ABC Diatype | Explanatory feature copy, testimonials, and article summaries. |
| caption | 10px | 400 | 1.6 | 0.01em | — | ABC Diatype | Compact labels, metadata, and supporting annotations. |
| button | 14px | 400 | 1.71 | 0 | — | ABC Diatype | Short pill-shaped primary and secondary actions. |
| nav | 14px | 400 | 1.71 | 0 | — | ABC Diatype | Header navigation and footer link labels. |
| link | 14px | 500 | 1.43 | 0 | — | ABC Diatype | Inline editorial and customer-story links. |
| code | 10px | 400 | 1.85 | 0.03em | — | DM Mono | Technical labels inside product mockups. |

OpenType features in use: `"cv11"`, `"ss02"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64 px.
- Section rhythm 144px · element gap 6px · card padding — · max content width 1312px.

Use a centered page frame with a measured maximum width of 1312px, while selected section bands and the capacity map run full bleed. The hero is centered; most capability sections switch to left-aligned headings and two-column copy-plus-visual layouts, followed by three- or four-column cards. Keep the measured spacious rhythm, including the large 144px section gap, and allow substantial breathing room around the hero artwork. The pale customer and updates sections form a deliberate contrast break before the final CTA and dense multi-column footer.

## Shape & elevation

- Radius: button `9999px` · card `7px` · nav `7px` · link `7px` · xs `2px` · sm `3px` · md `4px` · lg `7px` · xl `10px` · pill `9999px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 1px inset, 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`
- Shadow `inset-2` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset, 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`
- Shadow `lg` (button): `rgba(4, 8, 4, 0.5) 0px 1px 3px 0px, rgba(4, 8, 4, 0.6) 0px 2px 32px 0px`
- Shadow `lg-2` (card): `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, rgba(4, 8, 4, 0.4) 0px 1px 3px 0px, rgba(4, 8, 4, 0.5) 0px 2px 3`
- Shadow `inset-3` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset, 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`
- Shadow `sm` (other): `rgb(127, 238, 100) 0px 0px 8px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Surfaces are mostly flat and distinguished by subtle charcoal changes rather than heavy drop shadows. Product cards use restrained borders and low-contrast outlines; pill buttons may carry a soft dark shadow or inset edge. Layer mock interfaces and glow artwork selectively, keeping the rest of the page crisp and low-relief.

## Imagery

The hero's defining visual is a large, luminous green particle-form mark against near-black, with a softer halo rather than a conventional product photo. Product areas use dark interface mockups, small technical diagrams, maps, charts, and symbolic line illustrations. Customer branding appears in the pale section; editorial update cards use vivid green imagery. Keep imagery framed as evidence of real infrastructure, not decorative lifestyle photography.

## Components

### Announcement strip

A slim, bright green top band with centered update text, an underlined link, and a small directional arrow.

### Primary action

Soft Porcelain fill (#e3e5e1), dark Graphite Moss text (#10120f), compact label, and fully rounded pill silhouette.

### Secondary action

Dark filled pill with light text and a subtle inset edge; pair beside the primary CTA.

### Capability feature

Left-aligned explanatory text and action paired with a dark technical illustration or product mockup.

### Product card

Compact dark panel with a restrained outline and technical UI, chart, map, or line-diagram content.

### Customer panel

Pale inverse band featuring a testimonial and a tidy grid of customer marks.

### Update card

Editorial card with vivid image, concise headline, supporting summary, and small category label.

### Footer

Near-black closing area with grouped product and resource links, small social icons, and fine-print links.

### Measured component styles

- **Primary button** (“Get started”): background #e3e5e1 · text #10120f · radius 48px · padding 6px 16px · 500 14px ABC Diatype · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset, rgb
- **Secondary button** (“Contact us”): background #111511 · text #e3e5e1 · radius 48px · padding 6px 16px · 400 14px ABC Diatype · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inse
- **Link** (“TypeSafe AI scales Jev to trillions of t”): transparent background · text #e3e5e1 · radius 7px · padding 0px · 400 16px ABC Diatype
- **Card** (“modal Robotics Bio Audio Vision Qwen Dee”): background #10120f · text #e3e5e1 · border 1px solid #0c100c · radius 7px · padding 0px · 400 16px DM Mono
- **Navigation item** (“Download logo as .svg Download wordmark ”): transparent background · text #e3e5e1 · radius 0px · padding 0px · 400 16px ABC Diatype

## Do

- Use #040804 as the dominant canvas.
- Reserve #7fee64 for sparse emphasis and status cues.
- Set main text in #e3e5e1 and secondary copy in #a8aba6.
- Use ABC Diatype for interface and editorial text.
- Pair feature copy with concrete technical visuals.
- Use pale bands to create clear narrative breaks.

## Don't

- Do not turn the green accent into a large solid page background.
- Do not add strong gradients across ordinary content sections.
- Do not use bright borders around every card.
- Do not crowd the hero with extra copy or controls.
- Do not replace the technical mockups with lifestyle photography.
- Do not make every section use the same column layout.

## Agent prompt

Build a new Modal-style AI infrastructure page with a near-black #040804 canvas and quiet, carefully separated content bands. Use Graphite Moss #10120f for cards and controls, Soft Porcelain #e3e5e1 for primary text and pale CTA fills, and Ash Signal #a8aba6 for supporting copy. Apply Live Lime #7fee64 sparingly to selected words, labels, and status cues. Use an ABC Diatype-like sans-serif for headings, body, navigation, and buttons; reserve a DM Mono-like face for technical labels. Keep a centered hero with a concise headline, paired pill actions, and one distinctive technical visual. Structure the rest as spacious feature splits, compact product cards, and a contrasting pale customer or editorial band. Prefer thin subdued borders and flat surfaces over heavy shadows; preserve generous section breathing room and varied layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline, supporting copy, paired actions, and large artwork. | Primary and secondary CTA, Announcement link | Dark canvas, Green emphasis, Pill buttons, Glowing hero artwork |
| 2 | feature-split | Repeated two-column feature stories with copy beside product visuals. | Capability navigation, Learn-more actions, Progressive feature storytelling | Dark technical mockups, Compact feature lists, Small green labels |
| 3 | feature-grid | Introductory headline followed by three technical capability columns. | Learn-more action, Numbered capability cards | Charcoal band, Line diagrams, Low-contrast card dividers |
| 4 | feature-grid | Full-bleed capacity section with map visual and four supporting columns. | Regional capacity context, Capability summaries | Dark map field, Green location cue, Four-column copy row |
| 5 | product-showcase | Introductory heading and copy above three product dashboard panels. | Security proof points, Observability examples | Dark interface previews, Three-column cards, Subdued outlines |
| 6 | testimonials | Pale full-width band with featured testimonial and customer marks. | Customer proof, Carousel navigation cues | Inverse light surface, Large quote, Logo grid |
| 7 | content-feed | Pale editorial section with three image-led update cards. | Article links, Category labels | Three-column cards, Vivid image thumbnails, Compact summaries |
| 8 | cta | Simple left-aligned headline, paired actions, and a small free-compute note. | Get started action, Contact option, Offer detail | Dark canvas, Green text emphasis, Pill CTA |
| 9 | footer | Brand and social links alongside five grouped navigation columns. | Grouped navigation, Social links, Legal links | Near-black surface, Small muted labels, Dense link columns |

## Source CSS custom properties (selected)

```css
--semantic-background-ground: #181818;
--semantic-background-primary-hover: #ffffff0f;
--semantic-background-primary-active: #ffffff1a;
--semantic-background-primary-disabled: #ffffff08;
--semantic-background-primary-selected: #222d20;
--semantic-background-primary-focus: #ffffff0f;
--semantic-background-secondary: #2f2f2f;
--semantic-background-secondary-hover: #3b3b3b;
--semantic-background-secondary-active: #464646;
--semantic-background-secondary-bold: #747474;
--semantic-background-secondary-selected: #37582f;
--semantic-background-secondary-disabled: #272727;
--semantic-background-recessed: #1c1c1c;
--semantic-background-elevated: #232323;
--semantic-background-elevated-hover: #272727;
--semantic-background-elevated-active: #2f2f2f;
--semantic-background-elevated-disabled: #232323;
--semantic-background-elevated-selected: #273823;
--semantic-background-overlay: #1c1c1c;
--semantic-background-dialog: #232323;
--semantic-background-floating: #272727;
--semantic-background-accent: #1d231c;
--semantic-background-accent-hover: #222d20;
--semantic-background-accent-active: #273823;
--semantic-background-accent-bold: #7fee64;
--semantic-background-accent-selected: #7fee64;
--semantic-background-inverse: #fff;
--semantic-background-danger: #3a2525;
--semantic-background-danger-hover: #452a2a;
--semantic-background-danger-active: #723c3c;
--semantic-background-danger-bold: #b72121;
--semantic-background-success: #222d20;
--semantic-background-success-hover: #273823;
--semantic-background-success-active: #2d4327;
--semantic-background-success-bold: #37582f;
--semantic-background-warning: #3b2e23;
--semantic-background-warning-hover: #463526;
--semantic-background-warning-active: #745334;
--semantic-background-warning-bold: #a05909;
--semantic-background-running: #3b2a37;
```

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