# Movingparts · Design system migration spec

> Source: https://movingparts.io  ·  Curated by OpenDesign  ·  en

> A great example of a clean, developer-focused landing page that balances professionalism with a playful, illustrative touch.

## 1. Identity DNA

Movingparts operates like a high-end toolkit for mobile app builders—a precision instrument where every component is machined for clarity and speed. The identity is defined by its purpose: to provide a world-class SwiftUI component library that lets developers ship faster, without sacrificing polish or confidence.

**One-liner:** A world-class SwiftUI component library for shipping mobile apps faster.
**Keywords:** SwiftUI · Mobile Components · Developer Tools · Library
**Analogy:** A high-end toolkit for mobile app builders

## 2. Color

The palette is a study in high contrast: a clean white field punctuated by black type and a single, vibrant blue accent. This restraint ensures functional clarity, with the blue reserved strictly for calls-to-action and interactive tags.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#999999` | secondary text |
| `--accent` | `#0000ff` | single accent |
| `--line` | `rgba(224, 224, 224, 1)` | divider |

**Color principle:** High contrast with a single vibrant blue accent for actions, maintaining a clean white background.

The governing principle is maximum contrast and a single, vibrant action color against a clean white background.

## 3. Typography

The typographic voice pairs a bold geometric sans-serif for headlines—set tight and impactful—with a medium-weight humanist sans-serif for body copy, ensuring readability. A monospace font is reserved for technical labels, creating a clear hierarchy between editorial and system content.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 700 | -2px | Main hero headline |
| body | 25px | 1.36 | 500 | 0px | Primary body text and navigation |

**Type rules:**
- Headlines use a bold geometric sans-serif with tight tracking.
- Body text uses a medium-weight humanist sans-serif for readability.
- Monospace font is used for technical labels and tags.

## 4. Spacing

The system establishes generous vertical rhythm, creating breathing room between sections and within text blocks to guide the eye and prevent visual crowding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between sections and within text blocks.

## 5. Surfaces

Depth is suggested through layered, opaque shadows rather than complex gradients, giving elements a floating, illustrative quality. Borders are minimal, appearing primarily in form elements and as subtle separators, with a notable exception in the mockup-style cards which use thick black outlines.

- **Radius:** sm 4px · md 24px · lg 32px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 7.5px 14.2px 21.7px 0px
  - rgba(0, 0, 0, 0.3) 15px 20px 30px 0px
- **Borders:** Minimal, used primarily in form elements and subtle separators.

## 6. Layout

The layout skeleton is centered, with generous margins framing the content to create a clear, focused hierarchy. This structure supports the illustrative floating UI elements without clutter, maintaining ample whitespace as a core design principle.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with generous margins and clear hierarchy.

## 7. Motion & Interaction

Motion is treated as a polish layer, not a decoration. All interactive elements utilize smooth, subtle transitions for background color, opacity, and transform, providing immediate but refined feedback to user actions.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions for background color, opacity, and transform on interaction.

- **Hover:** Subtle visual feedback, likely color shifts or subtle transforms.
- **Click:** Immediate response with smooth state transitions.
- **Transition:** All interactive elements utilize transitions for a polished feel.
- **Keyboard:** Standard focus management for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident and professional, with a slightly playful edge. Headlines are direct and impact-focused, often employing strong verbs, while calls to action are action-oriented and typically paired with a trailing arrow icon.

- **Tone:** Confident, professional, and slightly playful.
- **Headline style:** Direct and impactful, using strong verbs.
- **CTA style:** Action-oriented, often with a trailing arrow icon.
- **Avoid:** Jargon without context / Passive voice / Overly corporate tone

### Don'ts
- ❌ Don't use muted or pastel accent colors — screenshot shows a vibrant, high-chroma blue.
- ❌ Don't use decorative or serif fonts for headings — screenshot shows a bold geometric sans.
- ❌ Don't use thin, low-contrast borders or separators — screenshot shows thick, prominent black borders on mockups.
- ❌ Don't clutter the layout with excessive elements — screenshot maintains generous whitespace and a clear focal point.
- ❌ Don't use a dark mode or colored background for the main interface — screenshot shows a predominantly white background.
- ❌ Don't use complex, multi-colored gradients for the entire background — screenshot uses a clean, mostly solid color palette.

The system deliberately avoids jargon without context, passive voice, and an overly corporate tone, favoring clarity and directness.

## System Prompt (paste into AI tool)

```
Design a clean, confident SaaS interface for a developer tool. The primary background is white (#ffffff) with black (#000000) text for maximum contrast. Use a vibrant, pure blue (#0000ff) as the single high-chroma accent color for call-to-action buttons and tags. Typography should feature a bold geometric sans-serif for impactful headlines and a medium-weight humanist sans-serif for body text. Avoid decorative fonts, pastel accents, cluttered layouts, or dark mode interfaces. Ensure generous whitespace and clear visual hierarchy, with occasional floating mockup elements featuring thick black borders for a playful yet professional touch.
```
