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

# Moving Parts · Design System

> Native components, presented with bold editorial clarity

**Theme:** light · **Industry:** devtools · **Source:** https://movingparts.io/ · **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._

Moving Parts pairs an editorial, high-contrast identity with vivid blue accents and large native-app previews. Spacious section breaks and precise component callouts make the product itself the visual argument.

## North star

Let vivid blue identify actions and component annotations while oversized, real interface previews do the explaining.

## Overview

The page uses white as its main canvas, switching decisively into black, pale lavender, and saturated blue section bands. Electric blue is reserved for the primary demo action, annotated component labels, and the testimonial field, so it reads as a functional signal rather than a decorative wash. Typography mixes an oversized, heavy Unica77 display with restrained mono labels and softer serif moments in product mockups. The composition alternates centered introductory content with large, cropped interface showcases and left-aligned feature copy. Generous vertical pauses separate dense demonstrations from concise explanations. App screens, device frames, and product imagery carry most of the visual detail; they sit against simple section grounds and occasional faint grids. Rounded mobile previews contrast with mostly crisp page geometry, while dark cards and fine outlines provide structure without turning the page into a conventional dashboard.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas, white card interiors, and contrast space around app previews. |
| Hard Ink | `#000000` | `--color-hard-ink` | neutral | Main text, strong outlines, and the full-width dark feature section. |
| Signal Blue | `#0000ff` | `--color-signal-blue` | brand | Primary demo button and vivid blue surfaces within interface previews. |
| Soft Periwinkle | `#9292ff` | `--color-soft-periwinkle` | accent | Secondary link and accent text; use sparingly against darker or contrasting grounds. |
| Lavender Field | `#dadbf3` | `--color-lavender-field` | surface | Broad pale-lavender section behind the composable component showcase. |
| Mist Grid | `#f0f0ff` | `--color-mist-grid` | surface | Pale tint in the measured repeating grid treatment, not a dominant flat brand surface. |
| Testimonial Blue | `#2525ff` | `--color-testimonial-blue` | brand | Saturated blue testimonial and supporter section background. |
| Near-Black | `#121212` | `--color-near-black` | neutral | Supporting dark text and navigation details where pure black is softened. |
| Lemon Mockup | `#fffc52` | `--color-lemon-mockup` | semantic | Bright yellow seen within product packaging mockups; illustration color, not a core page surface. |
| Periwinkle Control | `#6767ff` | `--color-periwinkle-control` | accent | Secondary small control in measured UI; not a primary site-wide action color. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Muted copy and subdued interface labels. |
| Slate Detail | `#484d53` | `--color-slate-detail` | neutral | Dark gray detail inside card and product-interface content. |
| Coral Mockup | `#ff979e` | `--color-coral-mockup` | semantic | Pink-coral product packaging mockup color; confined to showcase imagery. |
| Soft Black | `#171717` | `--color-soft-black` | surface | Near-black backing or card surface within dark product sections. |
| Warm Stone | `#c4c0bd` | `--color-warm-stone` | surface | Small warm neutral surface/detail, not a defining section background. |
| Berry Detail | `#dd4a68` | `--color-berry-detail` | semantic | Minor colored text detail; not a dominant brand accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Hard Ink) · `--color-surface-2` → `#dadbf3` (Lavender Field) · `--color-surface-3` → `#171717` (Soft Black) · `--color-surface-4` → `#c4c0bd` (Warm Stone) · `--color-text` → `#000000` (Hard Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#121212` (Near-Black) · `--color-border` → `#000000` (Hard Ink) · `--color-accent` → `#0000ff` (Signal Blue) · `--color-accent-2` → `#9292ff` (Soft Periwinkle) · `--color-accent-3` → `#2525ff` (Testimonial Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#dadbf3` | 15.41:1 | AAA |
| `#000000` | `#171717` | 1.17:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#dadbf3` | 1.36:1 | fail |
| `#ffffff` | `#171717` | 17.93:1 | AAA |
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#121212` | `#000000` | 1.12:1 | fail |
| `#121212` | `#dadbf3` | 13.75:1 | AAA |
| `#121212` | `#171717` | 1.04:1 | fail |

### Gradients

- `repeating-linear-gradient(0deg, rgb(255, 255, 255), rgb(255, 255, 255) 2px, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 48.3333px), repeating-linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255) 2px, rgba(0, 0, 0, 0)`
- `repeating-linear-gradient(0deg, rgb(240, 240, 255), rgb(240, 240, 255) 2px, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 48.3333px), repeating-linear-gradient(90deg, rgb(240, 240, 255), rgb(240, 240, 255) 2px, rgba(0, 0, 0, 0)`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 65%, rgb(0, 0, 0) 90%, rgb(0, 0, 0))`
- `conic-gradient(rgb(87, 192, 241) 0%, rgb(74, 166, 232) 13%, rgb(134, 57, 162) 26%, rgb(239, 137, 159) 42%, rgb(234, 57, 42) 55%, rgb(239, 115, 53) 62%, rgb(245, 192, 68) 73%, rgb(245, 255, 84) 84%, rgb(160, 218, 83) 95%,`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Whyte Semi-Mono | `--font-mono` | webfont | 500, 400, 600 | Monospaced body copy, uppercase links, labels, and code-like interface text. | IBM Plex Mono |
| Unica77 | `--font-display` | webfont | 400, 700, 500, 600 | Oversized display headline, section headings, navigation, and prominent interface titles. | DM Sans |
| Fraunces 72pt Soft | `--font-fraunces-72pt-soft` | webfont | 200, 100 | Occasional softer serif heading or editorial text within the page and mockups. | Fraunces |
| PP Neue Montreal | `--font-pp-neue-montreal` | webfont | 500, 400 | Supporting sans-serif text and secondary interface copy. | Inter |
| Fraunces 72pt SuperSoft | `--font-fraunces-72pt-supersoft` | webfont | 200 | Lightweight serif display treatment, measured for the h1 role. | Fraunces |
| ui-monospace | `--font-ui-monospace` | system | 400 | System fallback for small code or technical text. | IBM Plex Mono |

- **Whyte Semi-Mono:** Measured weights 400–600; use mono texture for utility copy and uppercase link treatments.
- **Unica77:** Measured weights 400–700; display is heavy, tightly tracked, and compact in line height.
- **Fraunces 72pt Soft:** Measured at very light weights; keep contrast with the otherwise modern sans and mono system.
- **PP Neue Montreal:** Measured weights 400 and 500; use for unobtrusive supporting text.
- **Fraunces 72pt SuperSoft:** Use sparingly as a delicate contrast; the visible homepage hero headline is bold sans.
- **ui-monospace:** Fallback only; keep technical snippets monospaced and visually subordinate.

### Type scale — Augmented Fourth (ratio ≈ 1.409, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 700 | 0.93 | -0.04em | — | Unica77 | Large bold hero display and high-impact page headline. |
| h1 | 45.5px | 200 | 1.06 | -0.01em | — | Fraunces 72pt SuperSoft | Measured lightweight serif heading treatment. |
| h2 | 40px | 400 | 1.27 | -0.005em | — | Unica77 | Primary section headings, including feature and showcase introductions. |
| h3 | 36px | 200 | 1.35 | 0 | — | Fraunces 72pt Soft | Secondary editorial headings and feature titles. |
| h4 | 34px | 500 | 1.18 | 0.01em | — | Whyte Semi-Mono | Mono-style subheadings and utility section labels. |
| body | 18px | 500 | 1.89 | 0 | — | Whyte Semi-Mono | Explanatory product copy and supporting paragraphs. |
| button | 28px | 600 | 0.95 | 0 | — | Unica77 | Prominent demo-action label. |
| nav | 40px | 400 | 1.27 | -0.005em | — | Unica77 | Main navigation links and brand navigation text. |
| link | 21px | 400 | 1.36 | 0 | uppercase | Whyte Semi-Mono | Uppercase editorial and external-link labels. |
| code | 25px | 500 | 1.36 | 0 | — | Whyte Semi-Mono | Code snippets and technical component examples. |

OpenType features in use: `"ss01"`, `"salt", "ss01", "ss02", "ss03", "ss04", "ss05", "ss07", "ss08", "ss09"`.

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 5, 7, 11, 13, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 27, 30 px.
- Section rhythm 148px · element gap 97px · card padding 22px · max content width 1200px.

The measured content max-width is 1200px, with sections often spanning the viewport and carrying distinct background bands. The page alternates a centered hero with left-aligned feature introductions, multi-column benefit copy, and large device-led showcases. Vertical pacing is spacious: section and element gaps are notably generous in the measurements, while the interface examples themselves are dense. Use broad margins around headlines and media, then compact groupings inside device screens. The desktop composition is editorial rather than a uniform dashboard grid.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `24px` · xs `14px` · sm `16px` · md `24px` · lg `35px` · xl `90px` · 2xl `106px` · pill `9999px`
- Shadow `md` (media): `rgba(0, 0, 0, 0.1) 7.5px 14.1667px 21.6667px 0px`
- Shadow `hairline` (other): `rgb(0, 0, 0) 0px 0px 0px 3.75px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.15) 15.8333px 20.8333px 21.6667px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.3) 15px 20px 30px 0px`
- Motion: standard transition `0.3s ease-in-out` on interactive elements.

Most page surfaces are flat, separated by strong color bands rather than layered card shadows. Device frames and mockup cards create depth through thick dark outlines, rounded silhouettes, and occasional measured soft shadows on media. Keep page borders restrained; the measured black hairline treatment is a structural accent, not a pervasive card grid.

## Imagery

Large mobile-device frames and interface mockups dominate the visual storytelling. Screens show commerce, payment, localization, and product-detail patterns, with product photography contained inside the mock device UI. Showcase illustrations may use yellow, coral, gradients, or a faint grid, but these are examples within the product imagery, not the overall brand canvas. Crop oversized screens at section edges to create scale and movement.

## Components

### Demo CTA

Bright blue rectangular button with white Unica77 label; repeat as the main conversion action across feature sections.

### Device showcase

Large mobile-screen preview in a rounded, dark-outlined frame, with realistic UI content and selective cropping.

### Feature band

Full-width black or pale-lavender section containing a prominent heading, explanatory copy, and component imagery.

### Component callouts

Small blue labels and leader lines point directly to named elements in the mobile UI showcase.

### Benefit columns

Compact multi-column feature descriptions sit beneath the primary product preview, with bold short headings.

### Testimonial panel

Saturated blue section with a two-column arrangement of white quotes, small portraits, names, and supporter marks.

### Measured component styles

- **Primary button** (“Book a demo”): background #0000ff · text #ffffff · radius 0px · padding 25px 30px · 600 28px Unica77
- **Secondary button**: background #6767ff · text #000000 · radius 18px · padding 0px · 400 13.3333px Arial
- **Link** (“OBJC.IO”): transparent background · text #ffffff · radius 0px · padding 0px · 400 21px Whyte Semi-Mono · uppercase
- **Card** (“Jane Doe”): background #ffffff · text #000000 · radius 16px · padding 22px · 400 28px Unica77
- **Navigation item** (“Pow Articles”): transparent background · text #000000 · radius 0px · padding 0px · 400 26.6667px Unica77

## Do

- Use white as the default page canvas.
- Reserve vivid blue for demo actions and explicit component signals.
- Build section rhythm with bold black and pale-lavender bands.
- Make real interface previews large and visually central.
- Pair oversized sans headlines with restrained mono utility text.
- Keep explanatory copy concise beside detailed product imagery.

## Don't

- Do not turn the page into a dense dashboard grid.
- Do not use every mockup color as a site-wide brand color.
- Do not replace the product interface previews with generic stock imagery.
- Do not make blue a continuous background for ordinary content.
- Do not add pervasive shadows or ornamental borders.
- Do not compress the generous space between major sections.

## Agent prompt

Build a new Moving Parts-style page with a white Gallery White (#ffffff) canvas, Hard Ink (#000000) typography, and Signal Blue (#0000ff) reserved for the primary action and component callouts. Create broad full-width section bands in black and Lavender Field (#dadbf3), with a saturated blue testimonial area using Testimonial Blue (#2525ff). Use oversized, tightly composed sans-serif headlines, supported by mono labels and restrained body copy. Organize content as an editorial sequence: concise introduction, large device-led interface showcase, feature explanations, then social proof. Make the interface preview detailed and credible, framed as a rounded mobile screen with strong dark edges. Maintain generous section spacing and use the measured max-width of 1200px where content is constrained. Keep mockup-only colors inside the preview.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Navigation at the top, centered headline and supporting copy, CTA above oversized cropped app previews. | primary demo action, product value proposition, navigation links | white canvas, oversized black headline, blue CTA, device mockups |
| 2 | product-showcase | Tall, media-led showcase with overlapping mobile screens and examples extending across the page. | browse interface examples, inspect product patterns | cropped device frames, faint grid, commerce UI, layered mockups |
| 3 | feature-grid | Black band with a feature introduction, CTA, large code-and-form visual, and supporting feature columns. | feature explanation, demo conversion | black background, white headings, blue CTA, code and form preview |
| 4 | product-showcase | Pale lavender band with an introductory block, central annotated mobile screen, and supporting copy columns. | component inspection, demo conversion | lavender background, blue leader labels, mobile preview, feature columns |
| 5 | product-showcase | Dark grid-backed showcase with product mockups arranged around a central message and CTA. | explore customization, demo conversion | black grid, bright mockup artwork, device cards, centered message |
| 6 | testimonials | Full-width blue field with a two-column quote layout and supporter logos near the bottom. | customer proof, supporter credibility | saturated blue background, white quotes, portrait thumbnails, logo row |
| 7 | cta | Short white closing band with a conversion heading and demo action. | final conversion prompt | white background, dark headline, blue action |

## Source CSS custom properties (selected)

```css
--barcelona-bg: color(display-p3 calc(255 / 255) calc(252 / 255) calc(113 / 255));
--lisbon-bg: color(display-p3 calc(255 / 255) calc(157 / 255) calc(160 / 255));
--composable-bg: color(display-p3 calc(218 / 255) calc(219 / 255) calc(241 / 255));
```

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