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

# Mother Design · Design System

> Quiet canvas, bold type, work in motion

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

Mother Design pairs a restrained monochrome canvas with oversized typography and a horizontally moving portfolio strip. Open layouts, fine black rules, and vivid project imagery make the agency’s work—not decorative interface effects—the focus.

## North star

Keep the interface almost entirely black, white, and pale gray, using oversized Basis typography, open space, and project imagery as the visual punctuation.

## Overview

The page is built on a quiet white canvas, with a pale gray opening portfolio band and generous uninterrupted white sections. Black is the primary text and rule color; muted gray recedes for secondary copy, while the measured green accent appears sparingly and should not be mistaken for the site’s overall brand palette. Basis carries nearly all typography, shifting from compact navigation and small supporting copy to exceptionally large, tightly tracked headings and footer wordmarks. Basis Mono is reserved for uppercase, letter-spaced eyebrow labels. Layout alternates between expansive single-column statements, a ruled two-by-two principles grid, and asymmetric capability and contact arrangements. Portfolio thumbnails and a full-width project image supply most of the color and texture; their vivid hues belong to the work rather than the interface. Spacing feels deliberately open, while thin black borders and dividers provide structure without shadows, rounded cards, or ornamental chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary text, navigation labels, oversized display lettering, and thin structural borders. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Main canvas for the introductory statement, principles, capabilities, client marks, and contact area. |
| Gallery Mist | `#f4f4f4` | `--color-gallery-mist` | surface | Pale gray opening portfolio band behind the horizontally arranged project thumbnails. |
| Quiet Gray | `#808080` | `--color-quiet-gray` | neutral | Muted supporting copy, credits, and secondary interface text. |
| Project Green | `#306f09` | `--color-project-green` | accent | Measured green accent within a section; use sparingly, not as a site-wide CTA color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-surface` → `#f4f4f4` (Gallery Mist) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#808080` (Quiet Gray) · `--color-border` → `#000000` (Studio Ink) · `--color-accent` → `#306f09` (Project Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f4f4f4` | 19.09:1 | AAA |
| `#808080` | `#ffffff` | 3.95:1 | AA-large |
| `#808080` | `#f4f4f4` | 3.59:1 | AA-large |
| `#306f09` | `#ffffff` | 6.17:1 | AA |
| `#306f09` | `#f4f4f4` | 5.61:1 | AA |

### Gradients

- `linear-gradient(to top, rgb(244, 244, 244), rgb(244, 244, 244) 25%, rgba(255, 255, 255, 0))`
- `linear-gradient(rgb(128, 128, 128), rgb(128, 128, 128))`
- `linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0))`
- `linear-gradient(rgb(128, 128, 128), rgb(128, 128, 128)), linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Basis | `--font-body` | webfont | 400, 600 | Main display, headings, body copy, navigation, and controls. | Inter |
| Basis Mono | `--font-mono` | webfont | 400 | Uppercase eyebrow and code-like section labels. | Space Mono |

- **Basis:** Use regular and semibold; display and heading styles are tightly tracked, while navigation and body copy stay restrained.
- **Basis Mono:** Use regular weight with conspicuous positive tracking and uppercase treatment for compact labels.

### Type scale — Custom (ratio ≈ 2.006, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 226.5px | 600 | 1.2 | -0.04em | — | Basis | Oversized Mother Design wordmark and marquee-like display text. |
| h1 | 110px | 600 | 1 | -0.04em | — | Basis | Large primary section statements and standout principles. |
| h2 | 60px | 400 | 1 | -0.04em | — | Basis | Section-level headlines and prominent supporting statements. |
| h3 | 48px | 400 | 1.1 | -0.04em | — | Basis | Subsection titles and editorial content headings. |
| body | 14px | 400 | 1.2 | -0.01em | — | Basis | Project descriptions, explanatory copy, and contact details. |
| caption | 10px | 400 | 1.2 | 0 | — | Basis | Small project captions, credits, and supporting metadata. |
| button | 226.5px | 600 | 1.2 | -0.04em | — | Basis | Large typographic button treatment where present; avoid conventional filled buttons. |
| nav | 16px | 400 | 1.2 | -0.02em | — | Basis | Header navigation and inline links. |
| eyebrow | 14px | 400 | 1.2 | 0.06em | uppercase | Basis Mono | Small uppercase section labels. |
| code | 14px | 400 | 1.2 | 0.06em | uppercase | Basis Mono | Mono uppercase metadata or compact informational labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 8, 10, 12, 14, 16, 20, 60, 64, 200 px.
- Section rhythm 200px · element gap 20px · card padding — · max content width 1400px.

The page uses a spacious, responsive editorial composition within a measured maximum width of 1400px. The opening portfolio strip runs horizontally across a pale band, followed by a full-width statement. A two-column ruled principles grid contrasts with more asymmetric capability and client sections; the large project image spans the page. Contact information and newsletter content form a denser multi-column footer. Section spacing is deliberately generous, while local alignment shifts from left-aligned copy to centered grid labels.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is flat: measured shadows are absent, and components have no rounded corners. Thin black borders divide navigation items and the principles grid, with subtle hairlines structuring lower content. Use whitespace and alignment for hierarchy rather than cards, raised surfaces, or layered effects. Images sit directly in the page flow and retain their own colors.

## Imagery

Project thumbnails appear as a horizontal gallery in the opening section, each retaining its own crop and visual identity. A later full-width photograph of a collaborative design workspace adds a tactile, colorful counterpoint to the largely monochrome interface. Client marks are presented small and widely spaced. Treat project imagery as portfolio content, not as a source for interface colors; avoid decorative gradients or generic stock imagery.

## Components

### Segmented header navigation

A compact horizontal group of outlined cells at the upper left, with a black home cell and white icon; navigation labels use black text.

### Project thumbnail strip

A horizontally arranged row of varied portfolio images on the #f4f4f4 opening band, with concise project title and description near the lower edge.

### Editorial statement

A large left-aligned sentence on white, set as continuous text with tight leading and minimal surrounding interface decoration.

### Principles grid

Four oversized labels arranged in a two-by-two grid; fine black rules define the cells without card fills or shadows.

### Capabilities list

A large, simple list of design disciplines sits beside a compact section label and short introduction.

### Studio contact footer

Large brand wordmark above a divided multi-column area with office details, newsletter signup, social links, and small utility copy.

### Measured component styles

- **Primary button** (“Submit”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Basis
- **Link** (“See our work”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Basis
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 400 14px Basis
- **Card** (“Rigor”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 0px · 400 110px Basis
- **Navigation item** (“Work Information News Contact”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Basis

## Do

- Use #ffffff as the main page canvas.
- Keep #000000 typography and hairline rules crisp.
- Reserve #f4f4f4 for a restrained section band.
- Let portfolio images supply most of the visual color.
- Use oversized, tightly tracked Basis for key statements.
- Preserve generous whitespace between major sections.

## Don't

- Do not add shadows or rounded card treatments.
- Do not turn #306f09 into a dominant site-wide color.
- Do not fill every open area with content.
- Do not apply a uniform color treatment to project imagery.
- Do not use heavy dividers or decorative gradients.
- Do not style every text element at display scale.

## Agent prompt

Build a new agency page using Mother Design’s restrained editorial system. Use #ffffff Paper White as the main canvas, #000000 Studio Ink for typography and fine rules, #f4f4f4 Gallery Mist for occasional section bands, and #808080 Quiet Gray for supporting copy. Keep #306f09 Project Green rare and only where the content calls for an accent. Set most text in Basis or a close sans-serif substitute, with a Basis Mono-style uppercase eyebrow. Combine generous whitespace, oversized tightly tracked statements, simple grids, and asymmetrical content columns. Use project photography as the main source of color and texture. Keep controls and cards flat, square, and minimally decorated; organize information with alignment and hairlines, not shadows. Make the page responsive while preserving its editorial rhythm and image-led portfolio character.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Pale gray opening band with a horizontally arranged row of project thumbnails and a small caption near the lower edge. | Browse project work, Horizontal portfolio discovery | Pale gray band, Image-led thumbnails, Compact project caption |
| 2 | other | Single, wide, left-aligned editorial statement on a white background. | Introduce the studio, Editorial reading flow | Large black text, Open white canvas |
| 3 | feature-grid | Section label above a spacious two-by-two grid divided by fine black rules. | Scan four principles, Compare ideas at a glance | Oversized cell labels, Thin dividers, No card elevation |
| 4 | feature-split | Asymmetric editorial columns: compact introduction at left and long capability list at right. | Scan service offering, Follow inline work link | Black typography, Minimal link styling, Open columns |
| 5 | logo-cloud | Brief purpose statement above a widely spaced row of small client logos. | Recognize client partners | Small monochrome marks, Large surrounding whitespace |
| 6 | gallery | Single full-bleed, full-width project photograph. | View studio process, Visual pause | Edge-to-edge photography, Natural image color |
| 7 | footer | Oversized wordmark above a ruled, multi-column contact and newsletter area. | Find office details, Sign up for email updates, Open social profiles | Large black wordmark, Thin column dividers, Small utility text |

## Source CSS custom properties (selected)

```css
--vertical-spacing: clamp(16*1px,20*1vw/1440*100,20*1px);
--vertical-spacing-small: clamp(30*1px,60*1vw/1440*100,80*1px);
--vertical-spacing-large: clamp(80*1px,200*1vw/1440*100,250*1px);
--dark-color: #000;
--light-color: #fff;
--bg-color: #fff;
--text-color: #000;
--main-color: #000;
--light-text-color: #808080;
--hr-color: rgba(0,0,0,.15);
--main-font: "Basis",sans-serif;
--secondary-font: "Basis",sans-serif;
--mono-font: "Basis Mono",monospace;
--base-border-radius: 0px;
--button-border-radius: 0px;
```

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