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

# Monotype — Variable Fonts · Design System

> A quiet canvas for type-led discovery.

**Theme:** light · **Industry:** design · **Source:** https://www.monotype.com/resources/variable-fonts · **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._

A spacious resource archive that pairs a restrained corporate interface with a three-column editorial content feed. Monotype’s dark ink typography, white canvas, fine dividers, and blue calls to action keep attention on the varied article imagery.

## North star

Keep the interface neutral and spacious so typography-led content imagery, not decoration, carries the page.

## Overview

The page uses a predominantly white canvas, with dark charcoal reserved for headings, article titles, and the narrow announcement strip at the top. Muted slate gray handles navigation and secondary information, while clear blue is reserved for high-salience actions such as “Speak to sales” and “Load More.” Thin pale-gray rules separate navigation and content areas without turning the page into a boxed UI. Typography is clean, sans-serif, and notably type-led: a large, lightweight page title establishes the subject, while medium-weight article titles stay readable beneath thumbnails. The main resource feed is an airy three-column grid with generous gaps and consistent image framing; the asset variety supplies color and texture rather than the interface. Breadcrumbs and a horizontal category list orient users above the feed. A restrained footer groups brand marks, social links, newsletter signup, and company links into columns.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, navigation background, and white text on inverse or blue elements. |
| Monotype Ink | `#1e242c` | `--color-monotype-ink` | brand | Primary headings and article links; also the dark announcement band and footer text. |
| Signal Blue | `#1a73e8` | `--color-signal-blue` | accent | Primary action fill, including the sales CTA and resource-list Load More button. |
| Slate Mist | `#576579` | `--color-slate-mist` | semantic | Secondary navigation, supporting copy, and muted interface text. |
| Soft Divider | `#e7eaee` | `--color-soft-divider` | neutral | Fine navigation and section hairlines on the otherwise white page. |
| Cloud Rule | `#dbdfe5` | `--color-cloud-rule` | neutral | Additional faint rules detected in the interface; use sparingly for secondary separation. |
| Footer Rule | `#cfd5dd` | `--color-footer-rule` | neutral | Subtle footer border detail, not a prominent surface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1e242c` (Monotype Ink) · `--color-text` → `#1e242c` (Monotype Ink) · `--color-text-muted` → `#576579` (Slate Mist) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e7eaee` (Soft Divider) · `--color-accent` → `#1a73e8` (Signal Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e242c` | `#ffffff` | 15.63:1 | AAA |
| `#576579` | `#ffffff` | 5.93:1 | AA |
| `#576579` | `#1e242c` | 2.64:1 | fail |
| `#ffffff` | `#1e242c` | 15.63:1 | AAA |
| `#1a73e8` | `#ffffff` | 4.51:1 | AA |
| `#1a73e8` | `#1e242c` | 3.47:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| HelveticaNowMTTextMedium | `--font-body` | webfont | 400 | Main text font for resource links and prominent article titles. | Inter |
| HelveticaNowMTTextRegular | `--font-helveticanowmttextregular` | webfont | 400 | Navigation, captions, labels, buttons, and supporting copy. | Inter |
| HelveticaNowMTTextBold | `--font-helveticanowmttextbold` | webfont | 400 | Bold text emphasis where present in the measured font set. | Inter |
| HelveticaNowMTMicroRegular | `--font-helveticanowmtmicroregular` | webfont | 400 | Micro-sized interface or supporting text. | Inter |

- **HelveticaNowMTTextMedium:** Medium sans-serif with neutral character; sentence case and no measured tracking.
- **HelveticaNowMTTextRegular:** Regular sans-serif for utility text; maintain clear hierarchy through size and color.
- **HelveticaNowMTTextBold:** Use selectively for emphasis; the page’s overall typography remains restrained.
- **HelveticaNowMTMicroRegular:** Compact regular sans-serif; reserve for minor utility details.

### Type scale — Custom (ratio ≈ 1.732, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 57px | 400 | 1.12 | 0 | — | HelveticaNowMTDisplayMedium | Large page-level display text and prominent headings. |
| h1 | 26px | 400 | 1.2 | 0 | — | TypecaseVar | Variable fonts page heading. |
| body | 19px | 400 | 1.26 | 0 | — | HelveticaNowMTTextMedium | Article descriptions and primary reading text. |
| caption | 13px | 400 | 1.85 | 0 | — | HelveticaNowMTTextRegular | Small metadata, breadcrumbs, and supporting labels. |
| button | 16px | 400 | 1.5 | 0 | — | HelveticaNowMTTextRegular | Load More and other button labels. |
| nav | 13px | 400 | 1.85 | 0 | — | HelveticaNowMTTextRegular | Primary navigation and category navigation. |
| link | 19px | 400 | 1.26 | 0 | — | HelveticaNowMTTextMedium | Article titles and prominent text links. |

## Spacing & layout

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

The desktop page uses a centered content area with a measured maximum width of 1240px and left-aligned content. A stacked header leads into breadcrumbs, a large page title, and a horizontal resource-category row; a hairline separates this introduction from the feed. The content feed uses three columns, with image-led cards and generous whitespace between rows. The page feels spacious rather than dense, using a measured 104px section rhythm and 16px element gap as system cues. Footer content resolves into three broad columns.

## Shape & elevation

- Radius: button `8px` · media `16px` · nav `8px` · xs `8px` · sm `16px`
- Shadow `md` (nav): `rgba(0, 0, 0, 0.05) 0px 11px 15px 0px`
- Motion: standard transition `0.5s ease` on interactive elements.

The interface is mostly flat. Pale hairlines divide header and content bands, and cards rely on whitespace rather than visible outlines or shadows. A soft measured shadow appears around navigation, adding slight separation from the page without creating a raised-card system. Rounded media and navigation elements provide the main edge treatment.

## Imagery

The feed is built from varied editorial thumbnails: campaign photography, type specimens, brand graphics, and webinar or event imagery. Images sit in consistent card frames with rounded media corners, while the artwork retains its own color and contrast. The first card includes a pale placeholder-style illustration, but this is content imagery rather than a defining brand motif. Keep imagery secondary to the clean page shell.

## Components

### Announcement strip

A narrow dark band above the main navigation, with centered white message text.

### Global navigation

White multi-row header with logo, search field, utility links, primary navigation, and a blue sales CTA.

### Resource heading

Breadcrumbs above a large, left-aligned “Variable fonts” heading and a horizontal category navigation row.

### Article feed

Three-column editorial grid with image thumbnails and dark article titles; media uses the measured 16px radius.

### Load More button

Centered blue action with white text, rounded corners, and a compact label.

### Footer

Three-column closing area for brand family, social and newsletter links, and corporate navigation.

### Measured component styles

- **Primary button** (“Speak to sales”): background #1a73e8 · text #ffffff · radius 0px · padding 16px 48px · 400 13px HelveticaNowMTTextMedium
- **Link** (“2026 Font Format Guide: TTF, OTF, WOFF, ”): transparent background · text #1e242c · radius 0px · padding 0px · 400 19px HelveticaNowMTTextMedium
- **Input**: transparent background · text #576579 · radius 0px · padding 20px 24px 20px 48px · 400 16px HelveticaNowMTTextRegular
- **Navigation item** (“Mini Menu Support EN Login Find a Font F”): transparent background · text #576579 · radius 0px · padding 0px · 400 14px HelveticaNowMTTextRegular

## Do

- Use white as the dominant page canvas.
- Keep headings and article links in Monotype Ink.
- Reserve Signal Blue for primary actions.
- Use muted slate for secondary navigation and labels.
- Organize editorial content in a spacious three-column grid.
- Use thin rules instead of boxed section containers.

## Don't

- Do not introduce gradients or decorative background treatments.
- Do not make every card look elevated.
- Do not use accent blue as a large page background.
- Do not crowd the title, category links, or article cards.
- Do not treat thumbnail colors as part of the core brand palette.
- Do not replace the restrained typography hierarchy with display effects.

## Agent prompt

Build a new editorial resource page in Monotype’s visual style. Use Gallery White (#ffffff) as the canvas, Monotype Ink (#1e242c) for headings and content links, Slate Mist (#576579) for secondary navigation, and Signal Blue (#1a73e8) only for primary actions. Use a quiet sans-serif hierarchy, a compact utility header, breadcrumbs, a prominent page title, and a horizontal category row. Arrange content in a spacious three-column feed with consistently framed editorial images and readable titles. Use Soft Divider (#e7eaee) for subtle hairlines; avoid card borders, heavy shadows, gradients, and decorative color blocks. Keep the footer informational and multi-column, with whitespace doing most of the structural work.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Announcement band above a multi-row header with logo, search, utility links, navigation, and sales CTA. | Global wayfinding, Search entry, Language and login links | Dark announcement strip, White header, Blue primary CTA, Thin divider |
| 2 | category-nav | Left-aligned breadcrumbs, page title, and horizontal resource-category links. | Breadcrumb trail, Category navigation | Large heading, Underlined breadcrumbs, Horizontal text links, Bottom hairline |
| 3 | footer | Three-column footer for brand family, social and newsletter content, and company links. | Social discovery, Newsletter signup, Corporate navigation | White background, Small labels, Brand marks, Blue signup button |

## Source CSS custom properties (selected)

```css
--mt-dark-bg-outline: #104892;
--mt-light-bg-outline: #88B6F3;
--cta-bg-color: #d52377;
--cta-txt-color: #ffffff;
--cta-border-color: #d52377;
```

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