--- version: alpha name: "Motion" description: "Motion's marketing surface is an AI-calendar workspace dressed in a green-and-purple voltage duet. The canvas is pure white `#ffffff` — Motion commits to clarity over cream — and the type is Inter at modest mid-weights set in generous whitespace. Brand voltage comes from a two-part palette: `#16a34a` calendar-green for productivity and time-block moments, and `#7c3aed` AI-purple for scheduler-intelligence moments. The two often appear together as a left-to-right gradient stop on hero bands and AI-feature cards — green flowing into purple to signal \"your calendar, scheduled by AI.\" Demo cards carry real product UI fragments (a week-grid calendar, a task-priority list, an AI auto-schedule confirmation). Section rhythm: white hero → green-purple gradient AI band → white feature grid → dark mid-page band → light pricing → cream pre-footer → footer. Headlines never bold beyond 500; the system trusts size and the green-purple voltage to carry emphasis." colors: bg: "#ffffff" bg-soft: "#f8faf9" bg-elev: "#ffffff" bg-strong: "#eef2ee" bg-dark: "#0d1117" bg-dark-elev: "#161b22" surface: "#f8faf9" text: "#0d1117" text-body: "#1f2937" text-muted: "#56636e" text-faint: "#8d97a3" brand: "#16a34a" brand-hover: "#138a3f" brand-active: "#0f6e34" brand-soft: "#dcf2e3" brand-deep: "#0f6e34" ai-purple: "#7c3aed" ai-purple-hover: "#6d28d9" ai-purple-active: "#5b21b6" ai-soft: "#ede9fe" on-brand: "#ffffff" on-dark: "#f8faf9" link: "#1d4ed8" link-hover: "#1e40af" gradient-stop-1: "#16a34a" gradient-stop-2: "#7c3aed" pastel-mint: "#dcf2e3" pastel-lavender: "#ede9fe" pastel-sky: "#dbeafe" pastel-peach: "#fde6d3" pastel-butter: "#fef3c7" border: "#e2e8e5" border-strong: "#c1cdc6" border-soft: "#eef2ee" shadow-tint: "rgba(13, 17, 23, 0.06)" shadow-deep: "rgba(13, 17, 23, 0.16)" info: "#1d4ed8" success: "#16a34a" warning: "#d97706" warning-soft: "#fef3c7" danger: "#dc2626" danger-soft: "#fee2e2" selection: "rgba(22, 163, 74, 0.18)" ring-brand: "rgba(22, 163, 74, 0.45)" ring-ai: "rgba(124, 58, 237, 0.45)" typography: display: fontFamily: "Inter Display" fontSize: "80px" lineHeight: 1.55 letterSpacing: "-0.024em" body: fontFamily: "Inter" fontSize: "16px" lineHeight: 1.55 mono: fontFamily: "JetBrains Mono" rounded: button: "10px" card: "14px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "32px" xl: "48px" --- ## Overview ## Overview Motion's marketing surface is an AI-calendar workspace dressed as a clean, productivity-focused product page. The canvas is pure white `#ffffff` — Motion commits to clarity over warmth — with type set in Inter at mid-weights (500–600) and generous whitespace. The atmosphere is bright, optimistic, and time-aware: every demo card frames a real calendar grid or scheduler interaction, and every feature anchors back to the question "when does this happen?". Brand voltage comes from a **two-part palette**: `#16a34a` calendar-green for productivity and time-block moments, and `#7c3aed` AI-purple for scheduler-intelligence moments. The two often appear together as a left-to-right gradient stop on hero bands and AI-feature cards — green flowing into purple to signal "your calendar, scheduled by AI." Used apart, the green carries primary CTAs and time-block status; the purple carries AI-scheduler CTAs and AI badges. Demo cards carry real product UI fragments — a week-grid calendar, a task-priority list, an AI auto-schedule confirmation animation, a meetings availability strip. Pastel surfaces (mint, lavender, sky, peach, butter) signal which feature family ships in that card. The mint surface is reserved for time-block / calendar moments; lavender for AI scheduler; sky for meetings; peach for task priority; butter for milestones. Section rhythm: white hero → green-purple gradient AI band → white feature grid → dark mid-page band → light pricing → cream pre-footer → footer. Headlines never bold beyond 600; the system trusts size and the green-purple voltage to carry emphasis. The result is a productivity tool that looks confidently AI-native without falling into the gradient-purple-everywhere trap of contemporary AI marketing. **Key Characteristics:** - Canvas is **pure white** `#ffffff` — Motion's commitment to clarity. Off-white reads as "wellness app," not "calendar tool." - Two-color brand voltage: `#16a34a` calendar-green + `#7c3aed` AI-purple, often paired as a gradient. - Display weight is **600** — slightly bolder than Linear/Notion, signaling decisiveness. - Pastel surface cards carry product UI demos with the green/purple semantic split. - One `card-gradient-hero` band per page — the green-purple gradient is rare and reserved. - Section padding is **96px** — universal vertical rhythm constant. - Hairlines are subtly green-tinted (`#e2e8e5`) — not pure neutral. - Cards round at 20px (xl) for pastel surfaces, 14px for primary CTAs, 10px for content cards. ## Colors ### Primary - **Bg / Canvas** (`#ffffff`): Pure white. Motion's clarity commitment. - **Text / Ink** (`#0d1117`): Display, body emphasis, primary button text-on-light surfaces. - **Brand / Calendar Green** (`#16a34a`): Primary CTA, productivity moments, time-block status, success states. ### Brand & Dark - **Brand Hover** (`#138a3f`): Press state. - **Brand Active** (`#0f6e34`): Focused / active. - **Brand Soft** (`#dcf2e3`): Tonal pastel mint surface. - **Brand Deep** (`#0f6e34`): Used inside green-on-green compositions for layered depth. - **AI Purple** (`#7c3aed`): AI scheduler CTAs, AI badges, AI moments. The second-tier brand voltage. - **AI Purple Hover** (`#6d28d9`) / **Active** (`#5b21b6`): Press / focused. - **AI Soft** (`#ede9fe`): Tonal lavender surface for AI moments. - **Bg Dark** (`#0d1117`): Mid-page dark CTA — slightly green-tinted near-black. - **Bg Dark Elev** (`#161b22`): Dark popover surface (rare). - **On-Dark** (`#f8faf9`): Green-tinted white over dark. ### Accent — Pastel Card Surfaces - **Pastel Mint** (`#dcf2e3`): Calendar / time-block demo card. - **Pastel Lavender** (`#ede9fe`): AI scheduler demo card. - **Pastel Sky** (`#dbeafe`): Meetings / availability demo card. - **Pastel Peach** (`#fde6d3`): Task priority demo card. - **Pastel Butter** (`#fef3c7`): Milestone / project demo card. ### Gradient - **Gradient Hero**: `linear-gradient(105deg, #16a34a 0%, #4f46e5 50%, #7c3aed 100%)`. The signature green→indigo→purple voltage. Used on hero AI band and rare gradient-CTA buttons. The 105deg angle reads as a left-to-right time-flow metaphor. ### Interactive - **Link** (`#1d4ed8`): Inline body links — distinct from both brand and AI. No underline by default. - **Link Hover** (`#1e40af`): Pressed state. - **Selection** (`rgba(22, 163, 74, 0.18)`): Text selection background — brand at 18% alpha. ### Neutral Scale - **Ink** (`#0d1117`): Display + emphasis. - **Text Body** (`#1f2937`): Default running-text. - **Text Muted** (`#56636e`): Captions, footer links. - **Text Faint** (`#8d97a3`): Placeholder, disabled. - **Bg Strong** (`#eef2ee`): Mint-tinted pre-footer. - **Bg Soft** (`#f8faf9`): Green-tinted soft surface (calendar bias). ### Surface & Borders - **Bg** (`#ffffff`): Canvas. - **Bg Soft** (`#f8faf9`): Default soft card. - **Border** (`#e2e8e5`): Default 1px hairline — subtly green-tinted. - **Border Strong** (`#c1cdc6`): Stronger card / input border. - **Border Soft** (`#eef2ee`): Softest divider. ### Shadow Colors All shadows use slate-tinted ink `rgba(13, 17, 23, …)` — neutral with a faint green-blue cast. Focus rings split: brand-green for productivity actions, AI-purple for AI actions. Two semantic focus colors — Motion's only place where the dual-voltage system is honored at the input layer. ### Semantic - **Info** (`#1d4ed8`): Inline info badges, focused links. - **Success** (`#16a34a`) on `#dcf2e3` mint: confirmation states (same hex as brand). - **Warning** (`#d97706`) on `#fef3c7` butter: caution states. - **Danger** (`#dc2626`) on `#fee2e2` blush: destructive actions. ## Typography ### Font Family - **Primary**: `"Inter Display"` for display sizes (≥ 28px); `"Inter"` for everything else. - **Mono**: `"JetBrains Mono"` (with `SF Mono` fallback) for code snippets and time-format displays inside calendar UI. - **Fallback chain**: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`. - **OpenType features**: `ss01` (single-storey g), `cv11` (alternate digit shapes), `tnum` inside calendar grids and time displays for tabular alignment. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | display-hero | Inter Display | 80 | 600 | 1.02 | -0.024em | ss01, cv11 | Mega hero — green-purple gradient text | | display-xl | Inter Display | 60 | 600 | 1.05 | -0.022em | ss01 | Homepage hero h1 | | display-lg | Inter Display | 48 | 600 | 1.08 | -0.02em | ss01 | Feature section h2 | | display-md | Inter Display | 36 | 600 | 1.14 | -0.014em | ss01 | Pricing section heads | | title-lg | Inter Display | 28 | 600 | 1.20 | -0.008em | — | Section titles | | title-md | Inter Display | 22 | 500 | 1.30 | -0.004em | — | Card titles | | title-sm | Inter | 18 | 600 | 1.35 | 0 | — | Small card titles | | label-md | Inter | 16 | 600 | 1.40 | 0 | — | List labels | | button | Inter | 15 | 600 | 1.20 | 0 | — | CTA labels | | body-lg | Inter | 18 | 400 | 1.55 | 0 | — | Hero subhead | | body-md | Inter | 16 | 400 | 1.55 | 0 | — | Default running-text | | body-sm | Inter | 14 | 400 | 1.50 | 0 | — | Caption support | | caption | Inter | 13 | 600 | 1.40 | 0.04em | — | Uppercase eyebrow with green/purple accent | | caption-tabular | Inter | 13 | 500 | 1.30 | 0 | tnum | Time / metric chips inside calendar | | legal | Inter | 12 | 400 | 1.40 | 0.01em | — | Footer legal | | code-md | JetBrains Mono | 14 | 400 | 1.50 | 0 | — | Code snippets | | code-micro | JetBrains Mono | 12 | 400 | 1.40 | 0 | — | Inline IDs, time formats | ### Principles - **Display sits at 600 — not 700.** Motion is decisive without going aggressive. 600 reads as confident-pragmatic; 700 reads as marketing-template. - **Negative tracking scales with size.** -0.024em at 80px tightens to 0 at 16px — Inter Display's metric-aware discipline. - **Tabular figures inside calendar.** All time displays (9:00 AM, 14:30) use `tnum` for vertical alignment in week-grid demos. - **Eyebrow is uppercase with 0.04em tracking.** Slightly tighter than Stripe's 0.08em — Motion's eyebrows whisper, they don't shout. - **Mono only for code and time displays.** Don't reach for JetBrains Mono as a display accent — Inter handles all numeric display via `tnum`. - **One sub-system, no font swaps.** Inter Display + Inter carries every page including pricing. ## Layout ### Spacing System Base unit **4px**. Scale: `4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 128`. Section padding **96px** between bands. Card padding 32px (default), 48px (pastel), 64px (gradient hero / dark hero). ### Grid & Container - **Max content width**: 1200px centered. - **Pastel-card grid**: 2-up at desktop with mint-and-lavender pairing as the canonical AI+calendar duet. 1-up on mobile. - **Pricing tier grid**: 3-up at desktop, 1-up at mobile. - **Calendar week-grid demos** (inside pastel-mint cards) use 7-column subgrids with `tnum` time labels. ### Whitespace Philosophy Whitespace is the dominant atmosphere. Hero sits in 96px+ of pure white; the green-purple gradient hero card is the one place where the canvas inverts to color. Between pastel grids, the white canvas resets — two adjacent pastel cards of the same color are forbidden. ### Section Cadence White hero → gradient hero card (or pastel pair) → white feature grid → dark mid-page band → white pricing → mint pre-footer → footer. The canvas resets between every voltage band. | Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column body; nav collapses to hamburger; pastel grid 1-up; hero h1 scales to 36px / 600; gradient hero card becomes shorter (32px padding); section padding 64px | | Tablet | 640–1024px | 2-up pastel grid; nav stays horizontal but tightens; hero at 48px | | Desktop | 1024–1200px | 2-up or 3-up pastel grid; full nav; hero at 60–80px | | Wide | > 1200px | Same as desktop with more outer breathing room; max content width caps at 1200px | ### Touch Targets - `button-primary` / `button-ai` render at 44 × 44px minimum. - `button-icon` is 36 × 36px (under WCAG 44 — used only inside dense desktop UI clusters). - `text-input` height is 44px throughout. ### Collapsing Strategy - Nav collapses to hamburger at < 640px; full-screen sheet menu. - Pastel grids reduce columns rather than scaling cards. - Pricing comparison table converts to horizontally-scrollable swipe at < 1024px. - Calendar week-grid demos collapse to 3-column day view at < 640px. ### Image Behavior - Calendar UI screenshots crop to fit container. - Gradient hero card scales padding rather than text. - Customer logo strip wraps to 2 rows at tablet, 3 at mobile. ### Container Queries Pricing tier cards use `@container (min-width: 360px)` to switch from stacked-vertical to inline-row pricing. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow | Canvas, top nav background, footer band | | 1 — Hairline | 1px `#e2e8e5` border | Default cards, inputs, secondary buttons | | 2 — Ambient | `0 1px 2px rgba(13,17,23,0.04)` | Resting cards | | 3 — Standard | `0 6px 20px rgba(13,17,23,0.08)` | Card hover, sticky nav at scroll, pricing tiers | | 4 — Elevated | `0 14px 40px rgba(13,17,23,0.10), 0 2px 6px rgba(13,17,23,0.04)` | Elevated cards, popovers | | 5 — Deep | `0 28px 60px rgba(13,17,23,0.18), 0 6px 12px rgba(13,17,23,0.08)` | Modals, command palette | ### Shadow Philosophy Slate-tinted ink shadows (faint green-blue cast) sit naturally against the white canvas. Pastel cards stay flat — they carry depth through color. The gradient hero card uses no shadow; the gradient itself is the depth signal. Modals stack two shadows for compound depth. ## Shapes | Tier | Token | Value | Use | |---|---|---|---| | Micro | micro | 2px | Cookie / legal CTAs | | Standard | sm | 6px | Inputs, small chips | | Comfortable | md | 10px | Default content cards, table cells | | Relaxed | lg | 14px | Primary / AI CTAs, secondary buttons, default cards | | Featured | xl | 20px | Pastel surface cards, gradient hero, dark hero, modals | | Pill | pill | 9999px | Badges, AI tag, status pills | | Full | full | 9999px / 50% | Avatars, icon buttons | No compound radii. Calendar grid cells (inside pastel-mint demos) use 6px sub-radius for time-block events. ## Components ### Buttons (6 variants) **`button-primary`** — The signature CTA. Background `#16a34a` calendar-green, text white, type 15px / 600 Inter, padding 12 × 22px, radius 14px. "Start free trial" / "Get Motion" — one per viewport. Hover lightens via 4% white overlay; active darkens to `#138a3f`. Focus shows a 3px brand-green ring at 45% alpha. **`button-ai`** — The AI-scheduler CTA. Background `#7c3aed` AI-purple, otherwise identical shape and padding to primary. "Try AI Scheduler" / "Schedule with AI" — pairs with `button-primary` only when both productivity and AI features are equally weighted. **`button-secondary`** — Background `#ffffff`, text `#0d1117`, 1px border `#c1cdc6`. The "Watch demo" / "Talk to sales" pair next to primary or AI button. **`button-on-dark`** — Background `#ffffff`, text `#0d1117`, used over the dark mid-page band. Never inverts to translucent. **`button-gradient`** — Background `linear-gradient(105deg, #16a34a, #4f46e5, #7c3aed)`, white text. Reserved for the single hero CTA when the page wants to lead with the dual-voltage signature. **One per page maximum.** **`button-icon`** — 36 × 36px circular. White, 1px hairline border, ink icon. Carousel arrows, share, copy-link. ### Cards **`card-default`** — White surface, 14px radius, 32px padding, 1px `#e2e8e5` border, ambient shadow. **`card-elevated`** — White, 14px radius, 32px padding, 1px `#eef2ee` border, standard shadow. Pricing tier, integration card. **`card-pastel-mint`** — Calendar / time-block demo. Background `#dcf2e3`, 20px radius, 48px padding. Frames a week-grid calendar mock with green time-block overlays. **`card-pastel-lavender`** — AI scheduler demo. Background `#ede9fe`, same shape. Frames the AI auto-schedule confirmation animation — an event sliding into the calendar with a purple "AI scheduled" badge. **`card-pastel-sky`** — Meetings / availability demo. Background `#dbeafe`, same shape. Frames a meeting availability strip with sky-blue accent. **`card-pastel-peach`** — Task priority demo. Background `#fde6d3`, same shape. Frames a priority-ranked task list. **`card-pastel-butter`** — Milestone demo. Background `#fef3c7`, same shape. Frames a project milestone view. **`card-gradient-hero`** — Full-bleed green→indigo→purple gradient hero band. Rounded 20px (or full-bleed at desktop), padding 64px. Carries an h1 in display-hero, white type, single white-on-gradient CTA. **One per page.** **`hero-card-dark`** — Mid-page dark CTA. `#0d1117` background, cream-tinted white text, 20px radius, 64px padding. Section reset. ### Badges & Pills - **`badge-ai`** — Background `#ede9fe` AI-soft, text `#5b21b6` AI-purple-active, rounded pill, 4 × 10px, 12px font. "AI" label next to AI features. - **`badge-tag`** — Default category pill. Bg-soft surface, muted text. - **`badge-status-success`** — "Auto-scheduled" / "Confirmed" pill. Brand-soft mint background, brand-active green text. ### Inputs / Forms **`text-input`** — White, 10px radius, 10 × 14px padding, 44px height, 1px `#c1cdc6` border. Inter 16px / 400. **`text-input-focus`** — Border recolors to `#16a34a` brand-green; 3px brand-green ring at 20% alpha appears outside the border. **AI-mode inputs** (Copilot prompt, AI scheduler) use the AI-purple ring instead — the dual-voltage rule extended to focus. **`text-input-error`** — Border `#dc2626`, helper text `#dc2626`. ### Navigation **`top-nav`** — 64px-tall sticky bar, `rgba(255,255,255,0.85)` backdrop with 16px blur. Motion wordmark left in green ink (`#16a34a` accent on the M); horizontal menu (Product, Use Cases, Pricing, Customers, Resources) center; right cluster carries "Talk to sales" text link, "Sign in" text link, "Start free trial" `button-primary`. Stays white-tinted on every page. **`footer`** — Mint-tinted bg-strong band, 96px padding, multi-column link grid. Motion wordmark in legal section. ### Toasts & Modals **`toast`** — `#0d1117` background, cream-tinted white text, 10px radius, deep shadow. "Event scheduled" / "AI rescheduled 3 events". Auto-dismiss 3s. **Modal** — White, 20px radius, 48px padding, deep shadow, 70% alpha backdrop overlay. ### Easing Curves - **Standard** `cubic-bezier(0.4, 0, 0.2, 1)` — color, opacity, simple transforms. - **Emphasized** `cubic-bezier(0.16, 1, 0.3, 1)` — pastel reveals, dark hero entrance. - **Spring** `cubic-bezier(0.32, 0.72, 0, 1)` — AI auto-schedule animation, calendar event drop-in. ### Duration Buckets - **Instant (80ms)**: Color hover, cursor changes. - **Fast (140ms)**: Button hover, focus ring, input border recolor. - **Standard (220ms)**: Card hover, dropdown, tab switch. - **Slow (360ms)**: Pastel card scroll reveal, AI auto-schedule animation, modal entrance. - **Page (480ms)**: Inter-page transition. ### Per-Component Micro-States - **Button hover (primary / AI)**: 4% white overlay; no transform; 140ms. - **Card hover (pastel)**: 4px translate-y lift + standard shadow; 220ms emphasized. - **AI auto-schedule animation**: Calendar event card slides from right edge into a time-block slot over 360ms spring; "AI scheduled" badge fades in at 80ms after settle. - **Gradient hero text**: Subtle 60s loop where the gradient stops shift 5deg back-and-forth — an ambient breathing motion, not aggressive. - **Input focus (productivity)**: Border recolors `#c1cdc6` → `#16a34a`; 3px green ring at 20% alpha; 140ms. - **Input focus (AI)**: Border recolors to `#7c3aed`; 3px purple ring at 20% alpha. The dual-voltage rule extended to focus. ### Page Transitions Default fade. Inter-page route is 480ms emphasized fade-in with 12px translate-y. Section-on-scroll reveals are 360ms with 16px offset. Pastel cards stagger 80ms increments inside a row. ### Reduced Motion `prefers-reduced-motion: reduce` honored: all transforms removed, transitions reduced to 100ms opacity-only, AI auto-schedule animation skips to final state, gradient hero animates only opacity (no breathing motion), pastel reveals fade in without offset. ### Contrast Pairs - **Text on bg**: `#0d1117` on `#ffffff` = **17.8** — AAA. - **Body on bg**: `#1f2937` on `#ffffff` = **13.4** — AAA. - **Muted on bg**: `#56636e` on `#ffffff` = **5.8** — AA. - **On-brand**: `#ffffff` on `#16a34a` = **4.6** — AA at body sizes; AAA at display. - **On-AI**: `#ffffff` on `#7c3aed` = **5.7** — AA at body sizes. - **On-dark**: `#f8faf9` on `#0d1117` = **16.4** — AAA. - **Link on bg**: `#1d4ed8` on `#ffffff` = **8.6** — AAA. - **Gradient hero text**: White on the gradient — measured against the green stop (worst case at left edge) gives 4.6, AA-compliant. Display sizes pull this to AAA. ### Focus Indicators Two-color focus system: 3px brand-green at 45% alpha for productivity actions (calendar inputs, primary CTAs); 3px AI-purple at 45% alpha for AI actions (Copilot prompt, AI scheduler). 2px offset on both. ### ARIA Patterns - **Calendar grid**: `role="grid"` with `role="gridcell"` for each time-block; `aria-label` carries the time range and event title. - **AI scheduler dialog**: `role="dialog"` with `aria-modal="true"`, focus trap, Escape closes. - **Tabs (feature cards)**: `role="tablist"` + `role="tab"` with `aria-selected`. - **Combobox (AI prompt)**: `role="combobox"` with `aria-expanded`, owned `role="listbox"`. - **Live region (auto-schedule)**: `aria-live="polite"` announces "3 events rescheduled by AI" once animation completes. - **Navigation**: `