---
name: Movingparts
description: "A great example of a clean, developer-focused landing page that balances professionalism with a playful, illustrative touch."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  secondary: "#999999"
  tertiary: "#0000ff"
  line: "rgba(224, 224, 224, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  body:
    fontFamily: humanist-sans
    fontSize: 25px
    lineHeight: 1.36
    fontWeight: 500
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 24px
  lg: 32px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A high-end toolkit for mobile app builders*

## Colors

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

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#999999`)** — uses `ink-soft` token
- **Accent (`#0000ff`)** — uses `accent` token
- **Borders (`rgba(224, 224, 224, 1)`)** — uses `line` token

## Typography

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

- 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.

## Layout

Centered content with generous margins and clear hierarchy.

*Rhythm:* Generous vertical spacing between sections and within text blocks.

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 24px
- `lg`: 32px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```