CURATED · OPEN · FREE

Movingparts

A world-class SwiftUI component library for shipping mobile apps faster.

Developer ToolsMobile UISaaSCleanTooling

Movingparts screenshot

↓ Download design system (17 MB)Open in OpenDesign

Visit: https://movingparts.io

📦 Browse pack contents →

01

Identity DNA

SwiftUIMobile ComponentsDeveloper ToolsLibrary

A high-end toolkit for mobile app builders

02

Color

#0000ffAccent

#000000Ink

#999999Ink soft

#ffffffBG

rgba(224, 224, 224, 1)Line

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

03

Typography

geometric-sans · humanist-sans · monospace

display80px · 700
body25px · 500

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.

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical spacing between sections and within text blocks.

05

Surfaces

sm · 4px

md · 24px

lg · 32px

pill · 999px

Minimal, used primarily in form elements and subtle separators.

rgba(0, 0, 0, 0.1) 7.5px 14.2px 21.7px 0px · rgba(0, 0, 0, 0.3) 15px 20px 30px 0px

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered content with generous margins and clear hierarchy.

07

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth transitions for background color, opacity, and transform on interaction.

Subtle visual feedback, likely color shifts or subtle transforms. · Immediate response with smooth state transitions.

08

Components

button Solid blue rectangular button with white text and rounded corners.
card Mockup-style cards with thick black borders and rounded corners, often floating.
chip Small rounded tags with colored backgrounds (blue, red) and white text.
input Minimalist form elements with clear selection states.
hero Large bold headline with a concise description and a single call-to-action button, accompanied by illustrative floating UI elements.

09

Voice & Don'ts

Tone Confident, professional, and slightly playful.
Headlines Direct and impactful, using strong verbs.
CTAs Action-oriented, often with a trailing arrow icon.

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.
Avoid: Jargon without context
Avoid: Passive voice
Avoid: Overly corporate tone

10

Inside the pack — real screenshots

Movingparts — 桌面首屏（hero） — 桌面首屏（hero）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Movingparts — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko