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

# Motto® · Design System

> Oversized ideas, grounded in a quiet monochrome canvas.

**Theme:** light · **Industry:** agency · **Source:** https://wearemotto.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._

Motto’s homepage pairs monumental typographic statements with an understated grayscale canvas and generous breathing room. Case studies, editorial features, testimonials, and studio imagery build credibility through a measured, editorial rhythm.

## North star

Let oversized black typography and a pale, uninterrupted canvas carry the identity; reserve visual variety for the work itself.

## Overview

The visual identity is built on a restrained grayscale palette: #f2f2f2 carries nearly the entire page, while black typography and fine gray dividers create sharp, quiet contrast. White testimonial cards and the near-black footer mark the few substantial shifts in surface. Typography does the expressive work: very large uppercase display statements span the layout, balanced by compact, straightforward sans-serif copy and underlined text links. Sections use a wide, consistent content frame with varied one-, two-, and three-column arrangements; their alignment stays mostly flush left, with generous open space between major content blocks. Imagery is intentionally diverse because the page is a branding portfolio: client identities, abstract visuals, photographs, and video thumbnails supply color and texture within project media rather than changing the core palette. Cards stay flat and crisp, with subtle corners only where measured. Overall, the page feels spacious, confident, and editorial rather than decorative.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f2f2f2` | `--color-gallery-mist` | brand | Dominant page canvas and background across the hero, editorial sections, case studies, and studio content. |
| Pure Ink | `#000000` | `--color-pure-ink` | brand | Primary headings, display statements, body text, navigation, and underlined text links. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Navigation and testimonial card surfaces, plus reversed text on dark regions. |
| Quiet Silver | `#c8cacd` | `--color-quiet-silver` | semantic | Measured hairline and input border color; keep dividers understated. |
| Slate Copy | `#4d5153` | `--color-slate-copy` | neutral | Muted supporting text, including secondary copy and footer text. |
| Footer Charcoal | `#1b1b1c` | `--color-footer-charcoal` | surface | Contrasting footer background with sparse light text and controls. |
| Soft Concrete | `#d8d8d8` | `--color-soft-concrete` | surface | Occasional card or footer surface; not a defining page-wide color. |
| Footer Gray | `#848484` | `--color-footer-gray` | neutral | Low-emphasis footer text only. |
| Steel Gray | `#717476` | `--color-steel-gray` | neutral | Secondary text in measured instances; use sparingly against the light canvas. |

### Semantic aliases

`--color-canvas` → `#f2f2f2` (Gallery Mist) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#1b1b1c` (Footer Charcoal) · `--color-surface-3` → `#d8d8d8` (Soft Concrete) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#4d5153` (Slate Copy) · `--color-border` → `#c8cacd` (Quiet Silver)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#1b1b1c` | 1.22:1 | fail |
| `#000000` | `#d8d8d8` | 14.73:1 | AAA |
| `#4d5153` | `#f2f2f2` | 7.17:1 | AAA |
| `#4d5153` | `#ffffff` | 8.02:1 | AAA |
| `#4d5153` | `#1b1b1c` | 2.15:1 | fail |
| `#4d5153` | `#d8d8d8` | 5.63:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| sans | `--font-body` | webfont | 500 | Main interface type: headings, body copy, navigation, links, buttons, and captions. | Inter |
| disp | `--font-display` | webfont | 500 | Distinctive display font for select oversized statements and repeated method lettering. | Manrope |

- **sans:** Measured weight 500. Use uppercase for major headings; keep body and interface copy in sentence case with neutral tracking.
- **disp:** Measured weight 500 and uppercase display styling. Keep it assertive and clean; use selectively rather than for routine copy.

### Type scale — Perfect Fifth (ratio ≈ 1.503, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 153.5px | 500 | 1 | 0 | uppercase | disp | Oversized uppercase hero and campaign statements. |
| h1 | 139px | 500 | 1.1 | 0 | uppercase | sans | Primary page or section headline, set in uppercase. |
| h2 | 125px | 500 | 1 | 0 | uppercase | sans | Large uppercase section titles such as selected work. |
| h3 | 99px | 500 | 1 | 0 | uppercase | disp | Uppercase display headings and prominent repeated lettering. |
| h4 | 61.5px | 500 | 1 | 0 | uppercase | disp | Smaller uppercase display labels and section accents. |
| body | 20px | 500 | 1.38 | 0 | — | sans | Introductory paragraphs, editorial copy, and service descriptions. |
| caption | 15.5px | 500 | 1.38 | 0 | — | sans | Project labels, category markers, and compact supporting text. |
| button | 20px | 500 | 1.38 | 0 | — | sans | Text actions styled as understated links rather than filled buttons. |
| nav | 20px | 500 | 1.38 | 0 | — | sans | Header navigation and primary site links. |
| link | 20px | 500 | 1.38 | 0 | — | sans | Underlined inline and standalone text links. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 8, 15, 19, 21, 23, 24, 29, 38, 48, 58, 67, 77, 96, 158 px.
- Section rhythm 288px · element gap 23px · card padding 77px · max content width 1284px.

Use a broad content frame measured at 1284px maximum, with largely left-aligned content and a spacious, low-density composition. The page alternates between single-column headline moments and two- or three-column content layouts, with a denser multi-column footer. Major sections have pronounced vertical separation; smaller groups use more compact gaps. Keep grid edges clean and consistent, and let oversized type approach the frame edges where the design calls for impact rather than adding decorative containers.

## Shape & elevation

- Radius: button `9999px` · card `9px` · xs `9px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.7s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

The page is mostly flat: no measured shadows or gradients. Separate content through whitespace, thin subtle rules, and clear changes between the pale canvas, white cards, and charcoal footer. Testimonial cards use white surfaces with a small measured corner radius; most other blocks remain square-edged and unboxed.

## Imagery

Use portfolio media as the main source of color and visual texture: client identity artwork, atmospheric photographs, abstract visuals, and video stills. Keep images cleanly framed within the project grid and editorial cards. The screenshot’s green and purple tones belong to individual project artwork, not the core brand palette. Include occasional studio photography, with straightforward cropping and no heavy decorative treatment.

## Components

### Header navigation

Compact brand mark at left, centered text links, and a right-aligned contact action; keep the header visually light on the pale canvas.

### Display hero

Large uppercase black statement split across lines, with ample surrounding space and a restrained supporting intro below.

### Text link action

Use black, medium-weight sans text with a fine underline; actions remain unfilled and visually quiet.

### Case-study grid

Two-column project media with labels and category captions; artwork supplies project-specific colors while the surrounding page remains neutral.

### Editorial cards

Three-column article previews pairing image or graphic media with compact category labels and concise headlines.

### Testimonial cards

White quote cards on the pale canvas, with client identity and compact supporting text; measured card corners are subtly rounded.

### Footer

Near-black full-width closing area with grouped link lists, muted copy, and a simple email signup field.

### Measured component styles

- **Primary button** (“See our signature programs”): transparent background · text #000000 · radius 0px · padding 0px · 500 20.16px sans
- **Link** (“Explore our signature programs →”): transparent background · text #000000 · radius 0px · padding 0px · 500 20.16px sans
- **Input**: transparent background · text #ffffff · radius 0px · padding 24px 48px 24px 0px · 500 33.6px sans
- **Card** (“Bryan Harper Minnesota Vikings “Motto® s”): background #ffffff · text #000000 · radius 8.64px · padding 76.8px · 500 20.16px sans
- **Navigation item** (“Work Programs Services Method About Lear”): transparent background · text #ffffff · radius 0px · padding 0px · 500 20.16px sans

## Do

- Use #f2f2f2 as the dominant page canvas.
- Set major statements in very large uppercase black type.
- Preserve generous whitespace between major sections.
- Keep navigation and actions understated and text-led.
- Use grids for work, articles, and testimonials.
- Reserve white cards and the charcoal footer for clear surface contrast.

## Don't

- Do not introduce unmeasured brand colors to the interface.
- Do not treat project artwork colors as global brand colors.
- Do not add gradients or decorative shadows.
- Do not turn text links into prominent filled buttons.
- Do not crowd oversized headings with nearby content.
- Do not apply rounded card styling throughout the page.

## Agent prompt

Build a new page in Motto’s editorial branding-agency style. Use Gallery Mist (#f2f2f2) as the dominant canvas, Pure Ink (#000000) for expressive uppercase headlines and core text, and Quiet Silver (#c8cacd) only for understated rules or borders. Set a broad, consistent content frame and alternate oversized single-column statements with clean two- or three-column grids. Keep typography medium-weight and direct: display type should feel monumental, while body copy and navigation stay compact and readable. Make actions underlined text links, not filled buttons. Use project photography, graphics, and video as the intentional source of color, keeping that color contained within media. Keep cards flat, reserve Paper White (#ffffff) for select card surfaces, and finish with a distinct Footer Charcoal (#1b1b1c) band. Favor whitespace over ornament.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-height opening with a minimal header and oversized statement. | primary navigation, brand introduction | large uppercase type, hairline divider, open canvas |
| 2 | other | Single-column oversized headline across the content frame. | brand positioning | uppercase display headline, left alignment |
| 3 | feature-split | Two-column text arrangement with heading, body copy, and links. | service introduction, related navigation | asymmetric columns, underlined text links |
| 4 | logo-cloud | Compact horizontal row of client marks. | social proof | small eyebrow label, aligned logos |
| 5 | gallery | Section heading and action introduce the project gallery. | browse case studies | uppercase section title, text link |
| 6 | product-grid | Two-column grid of large media with compact labels. | open project, scan categories | large media tiles, small project captions |
| 7 | content-feed | Two-column intro and editorial navigation controls. | switch content category, view all articles | large category labels, underlined action |
| 8 | content-feed | Three-column row of article cards. | browse articles, open article | media thumbnails, category chips, compact headlines |
| 9 | testimonials | Large section heading with short supporting text and pagination cue. | review carousel context | oversized title, compact pagination |
| 10 | testimonials | Wide row of testimonial cards. | read client quotes, carousel browsing | white cards, client identifiers, quote copy |
| 11 | other | Repeated oversized method lettering spans a horizontal band. | section transition | marquee-like typography, decorative asterisk marks |
| 12 | feature-split | Text-led explanation paired with a tall media panel. | learn about methodology | split columns, text link, video or graphic panel |
| 13 | gallery | Large heading above a two-column image pair. | explore agency locations | large uppercase heading, studio photography, captions |
| 14 | feature-split | Single focused text block with a supporting link. | learn about the agency | large body statement, underlined text link |
| 15 | footer | Full-width dark footer with multiple link columns and signup area. | site navigation, email subscription | charcoal surface, grouped link lists, email input, arrow action |

## Source CSS custom properties (selected)

```css
--ease-in-sine: cubic-bezier(0.47,0,0.745,0.715);
--ease-out-sine: cubic-bezier(0.39,0.575,0.565,1);
--ease-in-out-sine: cubic-bezier(0.445,0.05,0.55,0.95);
--ease-in-quad: cubic-bezier(0.55,0.085,0.68,0.53);
--ease-out-quad: cubic-bezier(0.25,0.46,0.45,0.94);
--ease-in-out-quad: cubic-bezier(0.455,0.03,0.515,0.955);
--ease-in-cubic: cubic-bezier(0.55,0.055,0.675,0.19);
--ease-out-cubic: cubic-bezier(0.215,0.61,0.355,1);
--ease-in-out-cubic: cubic-bezier(0.645,0.045,0.355,1);
--ease-in-quart: cubic-bezier(0.895,0.03,0.685,0.22);
--ease-out-quart: cubic-bezier(0.165,0.84,0.44,1);
--ease-in-out-quart: cubic-bezier(0.77,0,0.175,1);
--ease-in-quint: cubic-bezier(0.755,0.05,0.855,0.06);
--ease-out-quint: cubic-bezier(0.23,1,0.32,1);
--ease-in-out-quint: cubic-bezier(0.86,0,0.07,1);
--ease-in-expo: cubic-bezier(0.95,0.05,0.795,0.035);
--ease-out-expo: cubic-bezier(0.19,1,0.22,1);
--ease-in-out-expo: cubic-bezier(1,0,0,1);
--ease-in-circ: cubic-bezier(0.6,0.04,0.98,0.335);
--ease-out-circ: cubic-bezier(0.075,0.82,0.165,1);
--ease-in-out-circ: cubic-bezier(0.785,0.135,0.15,0.86);
--ease-in-back: cubic-bezier(0.6,-0.28,0.735,0.045);
--ease-out-back: cubic-bezier(0.175,0.885,0.32,1.275);
--ease-in-out-back: cubic-bezier(0.68,-0.55,0.265,1.55);
--tw-bg-opacity: 1;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
```

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