---
name: Motion
description: "Well-balanced design that combines modern SaaS aesthetics with clear information hierarchy and strong conversion focus."
version: alpha

colors:
  background: "#ffffff"
  primary: "#101828"
  secondary: "#475467"
  tertiary: "#2c77e7"
  neutral: "#787f86"
  bg-soft: "#f0f4f8"
  bg-quiet: "#f7f8fb"
  muted-soft: "#98a2b3"
  line: "rgba(71, 84, 103, 0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.05
    fontWeight: 700
    letterSpacing: "-1.9px"
  headline:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.6px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"
  label:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 600
    letterSpacing: "0.2px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

AI-driven productivity platform that automates scheduling and task management to double your output.

*A sleek, efficient digital workspace that combines calendar, notes, and tasks into one AI-powered hub.*

## Colors

Clean white backgrounds with subtle gray accents and a vibrant blue primary action color.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#101828`)** — uses `ink` token
- **Secondary text (`#475467`)** — uses `ink-soft` token
- **Accent (`#2c77e7`)** — uses `accent` token
- **Muted (`#787f86`)** — uses `muted` token
- **Borders (`rgba(71, 84, 103, 0.1)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Consistent 4px grid system with generous whitespace for readability

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Solid blue (44, 119, 231) with white text, rounded corners (8px), subtle shadow, and hover state transitions
- **card:** White background with subtle border, rounded corners (8-12px), and soft shadow
- **chip:** Small rounded labels with light background and subtle border
- **input:** White input with subtle border, rounded corners (8px), and placeholder text
- **hero:** Large centered headline with gradient text emphasis, supporting subtext, and prominent CTA button

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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