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

# Moffitt.Moffitt. · Design System

> Quiet typography, bold imagery, and a confident editorial grid.

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

Moffitt.Moffitt. pairs a restrained black-and-white interface with vivid campaign imagery and a spacious portfolio layout. A split, full-bleed hero gives way to concise studio copy, a compact feed, and an extensive project gallery.

## North star

Keep interface chrome monochrome and quiet so oversized, expressive campaign imagery leads every section.

## Overview

The interface stays mostly monochrome: a #f5f5f5 canvas and white content bands support black text, with muted gray reserved for secondary copy and restrained hairlines. Saturated colors belong primarily to campaign photography and project artwork, rather than to interface accents; let the assets provide the color. Suisse carries the clear, modern interface voice across navigation, headings, body copy, and project labels. Lyon appears sparingly in light, small caption and pill treatments. The first viewport is an intentionally dramatic split hero: full-bleed campaign photography on one side and a solid black or image-led counterpart on the other, with compact overlaid metadata and controls. Below, the introduction sits in a single column before feed cards and a varied portfolio grid. Generous vertical pauses keep the dense project catalogue feeling editorial, while flat surfaces and minimal borders avoid competing with imagery.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Primary text, navigation, links, black hero panels, and the filled black service CTA. |
| Soft Graphite | `#888888` | `--color-soft-graphite` | neutral | Muted supporting copy and secondary link text, including project descriptions. |
| Gallery Mist | `#f5f5f5` | `--color-gallery-mist` | surface | Page canvas, quiet card areas, and the pale background used for the Filter control. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Main content bands, text on black controls, and light areas within the hero and project imagery. |
| Silver Rule | `#d8d8da` | `--color-silver-rule` | semantic | Fine dividers and subtle borders separating content or outlining quiet interface elements. |
| Mist Badge | `#ebecec` | `--color-mist-badge` | neutral | Subtle badge border and label treatment; not a broad page background. |

### Semantic aliases

`--color-canvas` → `#f5f5f5` (Gallery Mist) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#000000` (Studio Ink) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#888888` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-border` → `#d8d8da` (Silver Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#888888` | `#f5f5f5` | 3.25:1 | AA-large |
| `#888888` | `#ffffff` | 3.54:1 | AA-large |
| `#888888` | `#000000` | 5.92:1 | AA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse | `--font-body` | webfont | 400, 500, 600 | Navigation, headlines, body copy, project names, links, and general interface text. | Inter |
| Lyon | `--font-lyon` | webfont | 100 | Small, light captions and rounded category or status pills, including compact CTA labels. | Cormorant Garamond |

- **Suisse:** Mostly regular and medium weights; headlines are strong but unembellished, with sentence case and neutral tracking.
- **Lyon:** Very light caption styling contrasts with Suisse; keep labels small, understated, and title or sentence case.

### Type scale — Golden Ratio (ratio ≈ 1.581, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 600 | 1 | 0 | — | Suisse | Prominent page or campaign heading where present; hero lettering may be part of the artwork. |
| h2 | 24px | 500 | 1.17 | 0 | — | Suisse | Section headings such as Feed and portfolio section titles. |
| body | 16px | 400 | 1.39 | 0 | — | Suisse | Studio introduction, project summaries, and descriptive content. |
| caption | 13px | 100 | 1 | 0 | — | Lyon | Small project metadata and category or status labels. |
| link | 24px | 500 | 1.17 | 0 | — | Suisse | Prominent project names and larger editorial navigation links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 10, 11, 20, 40, 50, 140 px.
- Section rhythm 140px · element gap 40px · card padding 20px · max content width —.

The first section fills the viewport with an asymmetrical, two-part hero, using full-bleed imagery and a contrasting panel. Subsequent content sits on broad white bands: a single-column studio statement, a compact horizontal feed, then a long, varied project grid. The portfolio mixes two-up cards with occasional full-width features rather than enforcing a uniform tile rhythm. Measured spacing is spacious, with a pronounced section gap and generous card padding; no measured maximum content width is available. Keep text aligned to the start and let media establish the grid.

## Shape & elevation

- Radius: button `9999px` · media `5px` · badge `9999px` · xs `5px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease` on interactive elements.

The page is visually flat: measured data contains no shadows, and the content relies on white and pale-gray surfaces rather than raised cards. Use subtle hairlines where separation is needed, with small-radius media frames and pill-shaped badges or buttons. Preserve the feeling of images sitting directly within the editorial grid rather than floating above it.

## Imagery

Campaign photography and branded project artwork dominate the page, mixing fashion portraits, architecture, identity graphics, and motion-led work. The hero uses a large cropped photograph beside an intensely colored campaign panel; subsequent portfolio images vary between paired tiles and wide, full-bleed features. Treat imagery as the main source of color and personality. Use clean crops and minimally styled frames; do not add illustration or effects that compete with the supplied work.

## Components

### Split campaign hero

A full-bleed two-column opening with oversized campaign artwork, small overlaid labels, and minimal navigation controls; campaign colors are image-led.

### Studio statement

A single-column paragraph on a white band, followed by compact black pill CTAs for studio-related destinations.

### Feed cards

A horizontally arranged set of project updates with thumbnail imagery, small badges, concise names, and muted supporting text.

### Project gallery

A spacious portfolio grid that alternates paired cards with occasional wide image features; titles and gray descriptions sit below media.

### Category badge

Small rounded status or category label with a thin outline and light Lyon styling; keep it visually secondary to the project image.

### Filter control

A quiet pale-gray filter button with black Suisse text, placed as a compact utility beside the portfolio heading.

### Measured component styles

- **Primary button** (“Our Services”): background #000000 · text #ffffff · border 1px solid #000000 · radius 50px · padding 0px 11px · 100 13px Lyon
- **Secondary button** (“Filter”): background #f5f5f5 · text #000000 · radius 5px · padding 7px 14px · 400 12px Suisse
- **Link** (“Sustainability Uturn Uturn. A new direct”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Suisse
- **Card** (“Projects Profile Services Talk Call. +61”): background #000000 · text #ffffff · radius 0px · padding 20px · 400 16px Suisse
- **Badge** (“Coming Soon”): transparent background · text #000000 · border 1px solid #000000 · radius 50px · padding 0px 11px · 100 13px Lyon
- **Navigation item**: transparent background · text #000000 · radius 0px · padding 0px · 400 16px Suisse

## Do

- Keep interface surfaces in the measured monochrome palette.
- Let campaign assets provide the vivid color.
- Use an asymmetric, image-led hero.
- Give the portfolio generous vertical breathing room.
- Use Suisse for clear, neutral interface typography.
- Keep captions and badges small and understated.

## Don't

- Do not introduce unmeasured accent colors into interface chrome.
- Do not add decorative gradients or shadows.
- Do not force every portfolio image into identical proportions.
- Do not crowd the page with persistent interface elements.
- Do not make category badges more prominent than their imagery.
- Do not treat colors inside project artwork as brand UI colors.

## Agent prompt

Build a new Moffitt.Moffitt.-style agency page with quiet monochrome interface chrome and expressive project imagery. Use Gallery Mist (#f5f5f5) and Paper White (#ffffff) for broad surfaces, Studio Ink (#000000) for navigation, headings, links, and primary controls, and Soft Graphite (#888888) for supporting copy. Reserve Silver Rule (#d8d8da) and Mist Badge (#ebecec) for subtle borders and labels. Set interface copy in Suisse or a close sans-serif substitute, with Lyon-like light captions used sparingly. Start with an asymmetric, full-bleed campaign hero; follow with a compact studio statement, editorial feed, and varied portfolio grid. Use generous section pauses, restrained outlines, pill controls, and no shadows. Let provided photography and artwork supply saturated color; do not reinterpret those asset colors as interface tokens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport asymmetric split with full-bleed campaign imagery and a contrasting panel. | campaign carousel, menu toggle, next-slide control | full-bleed media, overlaid category pills, large campaign wordmark |
| 2 | other | Single-column studio statement on a broad white band, with compact service links below. | read studio introduction, navigate to studio services | editorial paragraph, black pill CTAs |
| 3 | content-feed | Feed heading above a compact multi-column card area, leading into a varied portfolio grid. | browse updates, open project, filter projects | thumbnail cards, status badges, muted summaries, variable-width project tiles |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--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;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

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