---
version: alpha
name: Motion
description: A clean, confident AI productivity SaaS built on a white canvas with Albert Sans headlines, a single cobalt-blue CTA accent, and an 8px radius-dominated shape language that communicates precision without coldness.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#ffffff"
  surface-tint: "#eef5ff"       # light blue tint — hero badge, primary-container backgrounds

  # Ink / text
  ink: "#000000"                # primary headings and body — pure black with high contrast
  ink-secondary: "#495161"      # secondary text, nav links, captions (was rgb(73,81,97))
  ink-muted: "#848b97"          # muted labels, placeholder text (was rgb(132,139,151))

  # Brand accent — the single Motion blue
  primary: "#2c77e7"            # cobalt blue — primary CTA, interactive elements (was rgb(44,119,231))
  primary-hover: "#2565c4"      # deeper cobalt for hover/pressed (was rgb(37,101,196))
  on-primary: "#ffffff"         # white text on blue
  primary-container: "#eef5ff"  # light blue tint for badge / pill backgrounds

  # Secondary action — dark charcoal
  secondary: "#495161"          # charcoal secondary CTA, nav link weight
  on-secondary: "#ffffff"       # white text on charcoal

  # Borders
  border: "#f1f1f1"             # hairline border — 1px ring dividers (was rgb(241,241,241))
  border-input: "#e0e4ea"       # slightly stronger input outline /* estimated */

  # Shadow tints
  shadow-soft: "#3d62d0"        # blue-tinted card shadow (was rgba(61,98,208,0.06) — Google format requires hex)
  shadow-mid: "#000000"         # standard elevation shadow (was rgba(0,0,0,0.1-0.2) — Google format requires hex)

  # Semantic
  success: "#22c55e"            # success / positive green /* estimated */
  warning: "#f59e0b"            # warning amber /* estimated */
  error: "#ef4444"              # error red /* estimated */

typography:
  display-hero:
    fontFamily: "Albert Sans, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -2.2px
  display:
    fontFamily: "Albert Sans, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -1.92px
  heading-section:
    fontFamily: "Albert Sans, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.3px
  heading-sub:
    fontFamily: "Albert Sans, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.8px
  heading-card:
    fontFamily: "Albert Sans, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: -0.6px
  body-large:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  label-small:
    fontFamily: "Inter, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  # Primary cobalt CTA
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-focus:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    outline: 2px solid {colors.primary}
    outlineOffset: 2px

  # Secondary charcoal button
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"

  # Ghost / outline button
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    border: 1px solid {colors.border}
  button-ghost-hover:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.primary}"

  # Feature card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    border: 1px solid {colors.border}
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    boxShadow: 0px 2.34px 14.02px 0px {colors.shadow-soft}

  # Navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  # Badge / pill
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-small}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  # Form input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    border: 1px solid {colors.border-input}
  input-focus:
    border: 2px solid {colors.primary}
    backgroundColor: "{colors.surface}"
---

# Motion Design System

## Overview

Motion is a productivity SaaS that uses AI to schedule your day, manage projects, and merge your calendar with your task list. Its visual language reflects that ambition — clean enough to feel like a professional tool, approachable enough not to intimidate people who've never used scheduling software. The canvas is pure white (`{colors.background}`) lit by a single cobalt-blue accent (`{colors.primary}`), and the effect is focused: one color that means action, everything else in service of readability.

The typography tells the same story in two voices. Albert Sans — a geometric display face with assertive negative letter-spacing — takes all the headings. At 88px it's nearly compressed to a logotype. Inter handles the body and UI: familiar, precise, neutral. The pairing is deliberate. Albert Sans provides personality; Inter handles information density. The result is a SaaS that looks like it has opinions about design without making those opinions the loudest thing in the room.

What you notice most is the shape language. Motion leans heavily on 8px and 12px border-radius values — enough softness to feel modern, not enough to feel playful. Buttons, cards, inputs, and app preview panes all share that 8-12px grammar. Nothing is pill-shaped except status badges. Nothing is sharp. The system reads as confident and deliberate, a tool that has thought carefully about what it looks like to be productive.

**Key Characteristics:**
- Albert Sans at display sizes: 88px with -2.2px letter-spacing, 64px with -1.92px — aggressive compression at hero scale
- Two-font system: Albert Sans for display/headings, Inter for body and UI — personality and utility in clear lanes
- A single brand accent: cobalt blue (`{colors.primary}`) for all CTAs and interactive highlights, nothing else saturated in the chrome
- Primary button carries a subtle multi-layer box-shadow (rgba 0.2 + inset rgba 0.1 + inset rgba 0.2) — gives it tactile weight
- 8px radius workhorse: `{rounded.md}` used universally for buttons, inputs, app preview cards, and inline containers
- Restrained shadow system: the signature blue-tinted card shadow uses `rgba(61,98,208,0.06)` — nearly invisible, very precise
- 8px base spacing scale expanding to 96px for major section breathing room
- Breakpoints dense at small screen sizes (480-800px) suggesting a mobile-first responsive build
- Transition timing locked at 150ms `cubic-bezier(0.4, 0, 0.2, 1)` across nav, links, buttons, and cards — one consistent easing vocabulary
- Tailwind CSS with PrimeReact and Fluent UI components underneath the marketing surface

## Colors

### Primary
- **White** (`{colors.background}`): The entire canvas — page, cards, panels. No tinted surfaces except `{colors.surface-tint}` for badges.
- **Black** (`{colors.ink}`): Primary headings and body text. Pure #000000, not a warm near-black — this is a productivity tool, not a lifestyle brand.

### Brand Accent
- **Cobalt Blue** (`{colors.primary}`): The only saturated color in the core UI. Used exclusively for primary CTAs, focus rings, active states, and interactive element highlights. On hover, deepens to `{colors.primary-hover}`.

### Text Hierarchy
- **Charcoal** (`{colors.ink-secondary}`): Secondary text, navigation links, supporting labels. rgb(73,81,97) — a desaturated dark that reads closer to dark gray than blue-gray.
- **Mid Gray** (`{colors.ink-muted}`): Muted labels, placeholders, metadata. rgb(132,139,151) — enough contrast for non-critical information.

### Tint Surface
- **Blue Tint** (`{colors.surface-tint}`): Light blue surface for badge backgrounds and subtle highlight containers. The only departure from white in the base palette — still cool and quiet.
- **Blue Container** (`{colors.primary-container}`): Matches `{colors.surface-tint}` — used for pill badge fills, tinted behind blue text.

### Borders & Shadows
- **Hairline Border** (`{colors.border}`): 1px ring dividers on cards and containers. rgb(241,241,241) — barely there, present only to define edge.
- **Blue-tinted Shadow** (`{colors.shadow-soft}`): Signature card elevation tint — `rgba(61,98,208,0.06)` flattened to a reference hex for token use. Pairs with blur 14px spread for lifted card effect.
- **Standard Shadow** (`{colors.shadow-mid}`): Fallback neutral shadow base for higher elevation (modals, dialogs).

### Semantic
- **Success Green** (`{colors.success}`), **Warning Amber** (`{colors.warning}`), **Error Red** (`{colors.error}`): Estimated from standard SaaS practice — not extracted from the marketing site, marked as estimates.

## Typography

### Font Family
- **Display**: `Albert Sans`, with fallbacks: `-apple-system, Helvetica Neue, Helvetica, Arial, sans-serif`. Self-hosted woff2 — weights 500, 600, 700, 800.
- **Body / UI**: `Inter`, with fallbacks: `-apple-system, Helvetica Neue, Helvetica, Arial, sans-serif`. Self-hosted woff2 — weights 400, 500, 600, 700.
- **Variable fonts**: Not used — static instances only.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`) rather than hardcoding values.

| Token | Use |
|---|---|
| `display-hero` | Maximum hero headline — 88px Albert Sans 600, -2.2px tracking |
| `display` | Secondary hero, feature section titles — 64px Albert Sans 700, -1.92px tracking |
| `heading-section` | Section headlines — 48px Albert Sans 600 |
| `heading-sub` | Sub-section, card group headers — 32px Albert Sans 600 |
| `heading-card` | Feature card titles, inline headings — 24px Albert Sans 600 |
| `body-large` | Lead body copy, feature descriptions — 18px Inter 400 |
| `body` | Standard reading text — 16px Inter 400 |
| `body-medium` | Emphasized body, UI labels — 16px Inter 500 |
| `nav-link` | Navigation bar links — 16px Inter 500 |
| `button-ui` | Button labels — 16px Inter 600 |
| `caption` | Metadata, secondary labels — 14px Inter 400 |
| `label-small` | Badge labels, tags — 12px Inter 400 |

### Principles
- Albert Sans tightens progressively with scale: -2.2px at 88px, -1.92px at 64px, -0.3px at 48px, then easing into no tracking at 24px. The compression is architectural — it creates visual mass at hero scale.
- Inter for body and UI is deliberately neutral: no letter-spacing adjustments, no tracking at any weight. Its job is legibility, not personality.
- Weight assignments are clear: Inter 600 for buttons and strong labels, Inter 500 for navigation and medium emphasis, Inter 400 for all reading.
- No serif, no mono, no decorative type. Motion's typography is functionally bilingual: announcement and information.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit is 8px.

Motion uses a clean 8px base with multipliers for major section gaps. The 96px (`{spacing.4xl}`) top-level section spacing reflects a SaaS marketing page that needs to breathe, with product screenshots requiring significant vertical clearance.

### Grid & Container
- Max content width: approximately 1280px
- Hero: single-column centered with generous top padding
- Feature sections: 2-column grids for app preview + copy pairs
- App preview screenshots fill large card areas with 8-12px border-radius
- Breakpoints: 480px, 500px, 540px, 640px, 673px, 740px, 800px, 1200px, 1280px — fine-grained small-screen control

### Whitespace Philosophy
- **Generous vertical section spacing**: 64-96px between major content zones. Motion's marketing page is tall and breathable, not dense.
- **Tight card density**: Within cards, content is compact — 24px internal padding, 16-24px gaps between elements.
- **Product-forward**: Large app preview screenshots are the primary visual content. Spacing and typography are orchestrated around the product images, not competing with them.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Card outlines, container dividers |
| Card (Level 2) | `0px 2.34px 14.02px 0px rgba(61,98,208,0.06)` | Feature cards, app preview panels |
| Button (Level 3) | `0px 2px 5px rgba(0,0,0,0.2) + inset 0px 0px 0px 1px rgba(0,0,0,0.1) + inset 0px 2px 0px rgba(255,255,255,0.2)` | Primary CTA button — tactile press feel |
| Elevated (Level 4) | `0px 4px 6px rgba(0,0,0,0.1) + 0px 2px 4px rgba(0,0,0,0.1)` | Dropdowns, menus |
| Deep (Level 5) | `0px 20px 25px rgba(0,0,0,0.1) + 0px 8px 10px rgba(0,0,0,0.1)` | Modals, dialogs |
| Focus Ring | `2px solid {colors.primary}` outline | Keyboard focus on all interactive elements |

**Shadow Philosophy**: Motion's shadow system is asymmetric by intent. Cards use the blue-tinted `rgba(61,98,208,0.06)` shadow — nearly imperceptible on white, but it subtly ties the elevation to the brand accent. Buttons receive a more complex treatment: the multi-layer inset shadows give the primary CTA tactile depth, as if it could be physically pressed. This contrast between the barely-there card shadows and the weighted button shadow is deliberate — it directs attention to the action.

## Shapes

The complete radius scale lives in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, edge-to-edge image fills |
| `sm` | 4px | Minimal UI elements, small tags, fine details |
| `md` | 8px | Buttons, inputs, app preview containers, feature tiles — the workhorse |
| `lg` | 12px | Standard cards, nav side-panels, larger containers |
| `xl` | 16px | Large feature blocks, modal containers |
| `pill` | 9999px | Status badges, feature labels, pill indicators |

Motion's radius system has a clear center of gravity at 8px. Cards and major panels sit at 12px. Buttons and inputs at 8px. The system is internally consistent: you won't find 6px or 10px odd values in the design vocabulary. Pill-shaped elements are reserved strictly for badges and status chips, never for buttons.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button Variants
- **`button-primary`** — Cobalt blue solid CTA. The primary action in every view. Multi-layer box-shadow provides tactile depth. Hover: darkens to `{colors.primary-hover}`. Focus: 2px outline ring in `{colors.primary}`.
- **`button-secondary`** — Dark charcoal fill for secondary actions or alternative CTAs on light backgrounds.
- **`button-ghost`** — White background with hairline border. Tertiary actions, supporting links. Hover: tinted blue surface, text shifts to `{colors.primary}`.

### Cards
- **`card`** — Clean white card with `{rounded.lg}` radius and `{colors.border}` hairline outline. Used for feature tiles and content blocks.
- **`card-elevated`** — Same structure but with the signature blue-tinted shadow (`{colors.shadow-soft}`) for product preview panels and hero feature cards.

### Inputs
White surface, 1px `{colors.border-input}` border, 8px radius, 12px 16px padding. Focus brings a 2px solid `{colors.primary}` ring. Placeholder uses `{colors.ink-muted}`.

### Badges / Tags
- **`badge`** — `{colors.primary-container}` fill with `{colors.primary}` text. 9999px pill radius. Used for feature labels ("New", "AI"), status chips, and category tags.

### Navigation
Horizontal nav on white, sticky on scroll. Brand wordmark left-aligned. Nav links at `{typography.nav-link}`, charcoal `{colors.ink-secondary}`. Primary CTA button right-aligned. 150ms `cubic-bezier(0.4, 0, 0.2, 1)` transition on all interactive states.

## Do's and Don'ts

### Do
- Use Albert Sans for all display text — it's self-hosted at weights 500-800, designed to work at aggressive negative tracking
- Apply `{colors.primary}` to primary CTAs only — it's the sole saturated color in the palette; diluting it weakens the system's directional signal
- Keep button radius at `{rounded.md}` (8px) across all button types — consistency in shape signals consistency in function
- Use the blue-tinted shadow (`{colors.shadow-soft}`) on elevated cards — it's Motion's signature elevation; swapping to a neutral shadow loses the brand connection
- Apply the multi-layer box-shadow to `{components.button-primary}` — it gives the CTA physical presence that flat blue rectangles lack
- Track Albert Sans aggressively at large sizes: -2.2px at 88px, -1.92px at 64px — compression is the display personality
- Use `{colors.ink}` (pure black) for headings — Motion is a tool, not a lifestyle brand; warmth lives in the blue, not in the ink
- Pair large Albert Sans headlines with Inter body copy at 18px+ for readable feature descriptions

### Don't
- Don't introduce mid-range border-radius outside the declared scale (sm/md/lg/xl) — odd values like 6px or 10px break the consistent grammar
- Don't use Albert Sans for body copy — its tracking and weight were built for display scale; Inter is the reading voice
- Don't add a second accent color to the UI chrome — the cobalt blue `{colors.primary}` works precisely because it's alone
- Don't use warm-tinted grays — Motion's secondary text (`{colors.ink-secondary}`) is a cool charcoal, not warm brown. This is not a lifestyle product.
- Don't flatten the button shadow into a single-layer drop-shadow — the inset layers are what give the primary CTA its tactile quality
- Don't skip the negative letter-spacing on Albert Sans display text — `font-family` alone doesn't capture the display personality; the tracking is inseparable from the type's character
- Don't use pure black borders — `{colors.border}` at #f1f1f1 is the correct divider weight. Anything darker reads as aggressive in this system.
- Don't use transitions longer than 150ms for UI states — the 150ms `cubic-bezier(0.4, 0, 0.2, 1)` standard is fast and decisive; slow transitions undermine the "AI-powered efficiency" message

---

## Responsive Behavior

*(Preserved from original 9-section format — Google's parser keeps unknown sections.)*

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single column, full-bleed images, compressed nav |
| Mobile | 480–640px | Stacked layout, reduced heading sizes |
| Mobile Large | 640–740px | Two-column begins for smaller cards |
| Tablet Small | 740–800px | Side-by-side app preview + copy layout starts |
| Tablet | 800–1200px | Full two-column feature sections |
| Desktop | 1200–1280px | Standard full layout, max-width containers |
| Large Desktop | >1280px | Centered, generous side margins |

### Touch Targets
- Primary buttons use 12px vertical padding — adequate for touch
- Navigation links at 16px/500 weight with sufficient tap spacing
- Badge pills have 4px vertical padding — supplemented by surrounding whitespace for tap accuracy

### Collapsing Strategy
- Hero: 88px Albert Sans display collapses to 48px or smaller on mobile with proportional tracking adjustments
- Navigation: horizontal link bar collapses to hamburger menu below tablet breakpoint
- Feature sections: 2-column app-preview + copy collapses to single-column stacked (copy above, screenshot below)
- App screenshots: maintain border-radius treatment at all sizes; scale to full-width on mobile
- Section padding: 96px vertical → reduces to 48px on mobile, 24px on mobile small

### Image Behavior
- App preview screenshots maintain 8-12px border radius at all breakpoints
- Product images scale proportionally within max-width containers
- Hero background gradients and decorative elements may simplify or collapse on small screens

---

## Agent Prompt Guide

*(Preserved from original 9-section format — the copy-paste payload section.)*

### Quick Color Reference
- Background: `{colors.background}` (white)
- Primary text: `{colors.ink}` (black)
- Secondary text: `{colors.ink-secondary}` (charcoal)
- Muted text: `{colors.ink-muted}` (mid gray)
- Brand accent / CTA: `{colors.primary}` (cobalt blue)
- CTA hover: `{colors.primary-hover}`
- Border: `{colors.border}` (hairline)
- Badge background: `{colors.primary-container}`

### Example Component Prompts
- "Create a hero section on white (`{colors.background}`). Headline at 88px Albert Sans weight 600, line-height 1.10, letter-spacing -2.2px, color `{colors.ink}`. Subheadline at 64px Albert Sans weight 700, line-height 1.25, letter-spacing -1.92px. Lead body at 18px Inter weight 400, color `{colors.ink-secondary}`. Blue CTA button using `{colors.primary}` background, white text, 8px radius, 12px 20px padding, with multi-layer box-shadow: `rgba(0,0,0,0.2) 0px 2px 5px 0px, inset rgba(0,0,0,0.1) 0px 0px 0px 1px, inset rgba(255,255,255,0.2) 0px 2px 0px 0px`."
- "Design a feature card: white background, 1px solid `{colors.border}`, 12px radius, 24px padding. Card shadow: `0px 2.34px 14.02px 0px rgba(61,98,208,0.06)`. Card title at 24px Albert Sans weight 600, line-height 1.33, letter-spacing -0.6px. Body copy at 16px Inter weight 400, color `{colors.ink-secondary}`."
- "Build a pill badge: `{colors.primary-container}` background, `{colors.primary}` text, 9999px radius, 4px 10px padding, 12px Inter weight 400."
- "Create navigation: white header, horizontal layout. Logo left-aligned. Nav links at 16px Inter weight 500, color `{colors.ink-secondary}`. Right-aligned primary CTA button: cobalt `{colors.primary}` background, white text, 8px radius, 12px 20px padding, 150ms `cubic-bezier(0.4, 0, 0.2, 1)` transition on background-color, border-color, color."
- "Design an app preview card: white background, 12px border-radius, 1px solid `{colors.border}` outline, blue-tinted shadow `0px 2.34px 14.02px 0px rgba(61,98,208,0.06)`. Contains a product screenshot filling the card area with 12px top-radius, 24px padding around supplementary content below."
- "Build a ghost button: white background, 1px solid `{colors.border}`, 8px radius, 12px 20px padding, 16px Inter weight 600, color `{colors.ink-secondary}`. On hover: background `{colors.surface-tint}`, text color `{colors.primary}`, 150ms transition."

### Iteration Guide
1. Start with pure white (`{colors.background}`) — no surface tints, no gray backgrounds. Motion's canvas is stark and clean.
2. Apply cobalt blue (`{colors.primary}`) to one CTA per view. It's a stamp, not a fill color — scarcity is what makes it work.
3. Albert Sans for headings with proportional negative tracking: -2.2px at 88px, -1.92px at 64px, -0.3px at 48px. Omit tracking at 32px and below.
4. Inter at 16-18px for body — no tracking, no personality. Let the content speak.
5. Elevation: hairline borders on cards, blue-tinted shadow for elevated panels, multi-layer inset shadow on primary buttons.
6. Shape language: 8px for buttons and inputs, 12px for cards and panels, 9999px for badges only.
7. All transitions at 150ms `cubic-bezier(0.4, 0, 0.2, 1)` — consistent across nav, links, buttons, and cards.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Motion. Brand names and trademarks belong to their respective owners.