MotionSites AI design system

---
version: alpha
name: MotionSites AI
description: "Dark monochrome interface measured from motionsites.ai: system-ui type, tonal surfaces and 28px corners."
colors:
  background: "#121212"
  surface: "#121212"
  on-surface: "#F5F5F5"
  on-background: "#F5F5F5"
  on-surface-variant: "#BDBDBD"
  on-surface-muted: "#ABABAB"
  on-surface-subtle: "#A0A0A0"
  surface-container-low: "#171717"
  surface-container: "#202020"
  outline: "#3B3B3B"
  outline-variant: "#2A2A2A"
  primary: "#F5F5F5"
  on-primary: "#000000"
typography:
  headline-display:
    fontFamily: system-ui
    fontSize: 56px
    fontWeight: 900
    lineHeight: 0.82
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: system-ui
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.25
  body-md:
    fontFamily: system-ui
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.25
  body-sm:
    fontFamily: system-ui
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
  label-md:
    fontFamily: system-ui
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-sm:
    fontFamily: system-ui
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
  headline-display-mobile:
    fontFamily: system-ui
    fontSize: 38px
    fontWeight: 900
    lineHeight: 0.89
    letterSpacing: -0.03em
  headline-lg-mobile:
    fontFamily: system-ui
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
rounded:
  sm: 16px
  md: 28px
  full: 9999px
spacing:
  xs: 2px
  sm: 6px
  md: 16px
  lg: 20px
  xl: 40px
  gutter: 8px
  section: 64px
  container: 1200px
components:
  button-primary:
    textColor: "#09090B"
    typography: "{typography.body-md}"
    padding: 8px 32px
    height: 56px
  button-outline:
    backgroundColor: "{colors.surface-container}"
    textColor: "#FFFFFF"
    typography: "{typography.label-sm}"
    padding: 6px 20px
    height: 34px
  button-ghost:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-sm}"
    padding: 8px 20px
    height: 38px
---

# MotionSites AI Design System

## Overview

MotionSites AI describes itself as: “Discover MotionSites website prompts, motion designs and ready-to-build AI inspiration.” The interface is dark, built on **Charcoal (#121212)** with **Snow (#F5F5F5)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **system-ui**. Headlines run large with tight negative tracking; body text is 18px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 28px.

Measured from [motionsites.ai](https://motionsites.ai/) on October 23, 2026 at 1440×900 and 390×844 from 357 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 11 roles, plus gradient stops #D0B2FF, #FFEED8, #E8400D, #CFDEF6.

- **Charcoal (#121212):** Page background, seen 1 time. Token `background`, CSS `--color-background`.
- **Snow (#F5F5F5):** Primary text and headings, seen 49 times. Token `on-surface`, CSS `--card-foreground`.
- **Silver (#BDBDBD):** Secondary text, seen 20 times. Token `on-surface-variant`.
- **Gray (#ABABAB):** Muted text and metadata, seen 54 times. Token `on-surface-muted`.
- **Gray (#A0A0A0):** Subtle text and placeholders, seen 9 times. Token `on-surface-subtle`.
- **Charcoal (#171717):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Charcoal (#202020):** Cards and panels, seen 4 times. Token `surface-container`, CSS `--restyle-selector-hover`.
- **Graphite (#3B3B3B):** Borders and dividers, seen 4 times. Token `outline`.
- **Graphite (#2A2A2A):** Secondary dividers, seen 4 times. Token `outline-variant`.
- **Snow (#F5F5F5):** Primary actions (the main text color; the palette is monochrome), seen 51 times. Token `primary`, CSS `--card-foreground`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.

## Typography

**system-ui** carries the whole interface. Fallback stack: `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto`.

- **headline-display:** system-ui 56px at weight 900, line height 0.82, tracking -0.03em, uppercase (38px on mobile). Page title (h1).
- **headline-lg:** system-ui 36px at weight 600, line height 1.25 (24px on mobile). Section headings (h2).
- **body-md:** system-ui 18px at weight 700, line height 1.25. Body text.
- **body-sm:** system-ui 12px at weight 400, line height 1.33. Secondary and small text.
- **label-md:** system-ui 16px at weight 400, line height 1.5. Buttons, navigation and labels.
- **label-sm:** system-ui 14px at weight 500, line height 1.43. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 56% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2px, sm 6px, md 16px, lg 20px, xl 40px.
- **Sections:** 64px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1200px.
- **Breakpoints:** 600px.

## Elevation & Depth

The design avoids drop shadows. Layers are separated by tonal surface steps (#171717 → #202020) and hairline rings:

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.15) -4px -4px 8px 0px inset, rgba(255, 255, 255, 0.15) 4px 4px 4px 0px inset`

## Shapes

Most elements use 28px corners. Measured radii, most used first:

- **md (28px):** 192 elements.
- **sm (16px):** 40 elements.
- **full (9999px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Go Unlimited →”):** transparent fill, #09090B text, 18px/600, 3.35544e+07px radius, padding 8px 32px, border 2px solid #FFFFFF.
- **button-outline (“Featured”):** #202020 fill, #FFFFFF text, 14px/500, 3.35544e+07px radius, padding 6px 20px, border 1px solid #3B3B3B.
- **button-ghost (“Pricing”):** #202020 fill, #FFFFFFB8 text, 14px/500, 3.35544e+07px radius, padding 8px 20px, border 1px solid #3B3B3B.

## Do's and Don'ts

- Do use #121212 for the page and lift surfaces in small steps: #171717, #202020.
- Do keep text in 4 levels: #F5F5F5, #BDBDBD, #ABABAB, #A0A0A0.
- Do let contrast carry emphasis; primary actions use #F5F5F5 on #121212.
- Do set headlines in system-ui with tight tracking (-0.03em).
- Do reuse the measured spacing steps (6px, 16px, 20px).
- Do use 28px corners on most elements; larger surfaces also use 16px.
- Don't add drop shadows for depth; use hairline rings and tonal surfaces.
- Don't introduce new font families beyond system-ui.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.15s, 0.3s. Longer ambient animations run 6s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease-out`, `ease-in-out`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/motionsites.ai/), the free DESIGN.md generator.