# Motion · Design system migration spec

> Source: https://www.usemotion.com  ·  Curated by OpenDesign  ·  en

> Well-balanced design that combines modern SaaS aesthetics with clear information hierarchy and strong conversion focus.

## 1. Identity DNA

Motion is conceived as a sleek, efficient digital workspace, a unified hub where calendar, notes, and tasks are orchestrated by AI. Its design DNA is one of focused clarity, built to remove friction and double the user's output.

**One-liner:** AI-driven productivity platform that automates scheduling and task management to double your output.
**Keywords:** productivity · AI · efficiency · automation · workflow
**Analogy:** A sleek, efficient digital workspace that combines calendar, notes, and tasks into one AI-powered hub.

## 2. Color

The color system is built on a clean white foundation, using subtle gray accents for structure and a vibrant blue for primary actions. This creates a professional hierarchy where the interface recedes, and the work—marked by the blue accent—comes forward.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f0f4f8` | card background |
| `--bg-quiet` | `#f7f8fb` | quiet area |
| `--ink` | `#101828` | body text |
| `--ink-soft` | `#475467` | secondary text |
| `--muted` | `#787f86` | placeholder |
| `--muted-soft` | `#98a2b3` | weak hint |
| `--accent` | `#2c77e7` | single accent |
| `--line` | `rgba(71, 84, 103, 0.1)` | divider |

**Color principle:** Clean white backgrounds with subtle gray accents and a vibrant blue primary action color.

The guiding principle is restraint: color is used to direct action, not to decorate.

## 3. Typography

The typographic voice pairs the humanist, functional clarity of Inter for body text and UI with the geometric presence of Albert Sans for display headlines. This creates a system that is simultaneously professional in its details and assertive in its key statements.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.05 | 700 | -1.9px | Hero headline |
| headline | 40px | 1.2 | 700 | -0.6px | Section headlines |
| body | 16px | 1.5 | 400 | 0 | Body text |
| small | 14px | 1.4 | 400 | 0 | Captions and metadata |
| label | 12px | 1.3 | 600 | 0.2px | UI labels and tags |

**Type rules:**
- Use Inter for body text and UI elements
- Use Albert Sans for larger display headlines
- Maintain tight letter spacing for display text
- Use semibold weight for emphasis and labels

## 4. Spacing

A consistent 4px grid establishes the spatial rhythm, with generous whitespace acting as a structural element to enhance readability and focus.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 40 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid system with generous whitespace for readability

## 5. Surfaces

Surface definition relies on depth through soft, multi-layered shadows and the lightest of borders. These elements lift cards and inputs from the white background, creating a clean, tactile hierarchy without visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0 4px 6px -1px rgba(0, 0, 0, 0.05)
  - 0 2px 4px -2px rgba(0, 0, 0, 0.05)
  - 0 4px 6px -1px rgba(0, 0, 0, 0.1)
  - 0 2px 4px -2px rgba(0, 0, 0, 0.1)
  - 0 20px 25px -5px rgba(0, 0, 0, 0.1)
  - 0 8px 10px -6px rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid rgba(71, 84, 103, 0.1)

## 6. Layout

The structural skeleton begins with a focused, centered single-column hero to command attention. It then opens into a multi-column grid for feature sections, establishing a clear and scalable information architecture.

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

**Skeleton:** Centered single-column layout for hero, transitioning to multi-column feature sections

## 7. Motion & Interaction

Motion is treated as functional feedback, with all interactive elements sharing a consistent 150ms transition timing. Animations are subtle and purposeful, providing smooth state changes and reinforcing the system's overall sense of polished efficiency.

- **Durations:** micro 150ms · small 150ms · medium 150ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on all interactive elements (150ms)
  - Color transitions for hover states
  - Transform transitions for scale and movement
  - Box shadow transitions for depth effects

- **Hover:** Subtle color darkening and shadow enhancement
- **Click:** Slight scale reduction (0.98) for buttons
- **Transition:** All properties transition smoothly over 150ms with cubic-bezier easing
- **Keyboard:** Focus indicators with blue outlines for accessibility

## 8. Voice & Don'ts

The editorial voice is confident, professional, and results-oriented, using bold, direct headlines to communicate clear advantages. It favors specific benefits over vague promises and avoids technical jargon in favor of accessible, action-oriented language.

- **Tone:** Confident, professional, and results-oriented
- **Headline style:** Bold, direct statements emphasizing benefits and advantages
- **CTA style:** Action-oriented with clear value proposition (e.g., 'Try Motion for free')
- **Avoid:** Overly technical jargon / Passive voice / Vague promises without specifics / Excessive exclamation marks

### Don'ts
- ❌ Don't use bright gradients everywhere — screenshot shows subtle gradients only on specific text highlights
- ❌ Don't clutter with multiple CTAs — screenshot shows one primary 'Try Motion for free' button per section
- ❌ Don't use heavy borders — screenshot shows very subtle 1px borders with low opacity
- ❌ Don't overload with colors — screenshot shows predominantly blue accent with neutral grays
- ❌ Don't use decorative fonts — screenshot shows clean, readable sans-serif fonts
- ❌ Don't make text too small — screenshot maintains minimum 14px for readable body text

The system deliberately avoids visual noise: no heavy borders, no cluttered CTAs, no decorative fonts, and no text below a readable 14px size.

## System Prompt (paste into AI tool)

```
This is a premium SaaS productivity platform called Motion, positioned as an AI-powered workspace that doubles productivity. Key design elements include a clean white background (#ffffff) with subtle gray accents (#f0f4f8, #787f86) and a vibrant blue primary color (#2c77e7). Typography uses humanist sans-serif fonts (Inter and Albert Sans) with large, bold headlines (64px at 700 weight) and clean body text (16px at 400 weight). Critical design constraints: avoid using heavy shadows or borders, maintain generous whitespace, keep CTAs prominent but not overwhelming, and ensure all text maintains strong contrast ratios. The design emphasizes clarity and professionalism while using gradient text effects sparingly for emphasis on key benefit statements.
```