Framer Marketing Motion

---
name: framer-marketing-motion
description: Apply the Framer Marketing Motion visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Framer Marketing Motion, mentions framer style, motion-rich landing page, framer template aesthetic, or describes spring-eased entrance animations, sticky scroll-driven reveals, dark canvas with vivid gradient accents — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Framer Marketing Motion Design System

The contemporary Framer-template look: a near-black canvas, vivid gradient accents, Inter set tight, bento-grid feature sections, and — above all — motion. Spring-eased reveals, sticky scroll sequences, staggered fade-ups, and hover micro-interactions make the page itself the product demo.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Framer Marketing Motion.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (framer style, motion-rich landing page, framer template aesthetic, dark bento marketing, scroll-animated landing), or describes its traits: spring-eased entrance animations; sticky scroll-driven reveals; dark canvas with vivid gradient accents; bento feature grids; tight Inter typography; staggered fade-up sequences; glowing gradient borders.

## Design tokens

### Color palette

- Near-black page canvas: `#05050a` (--color-bg)
- Bento cell and card fill: `#101018` (--color-surface)
- Hovered and elevated surfaces: `#181824` (--color-surface-raised)
- Primary text, soft white: `#f5f5f7` (--color-text)
- Secondary text and captions: `#9d9daa` (--color-text-muted)
- Primary accent, violet — buttons, links, key glows: `#8b7cf8` (--color-accent)
- Gradient companion stop, cyan: `#22d3ee` (--color-gradient-cyan)
- Gradient companion stop, pink: `#f472b6` (--color-gradient-pink)
- 8% white hairline on cards and dividers: `#ffffff14` (--color-border)
- Violet glow at 40% for halos behind heroes and CTAs: `#8b7cf866` (--color-glow)

### Typography

- Display / headings: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: Geist Mono (fallback: SF Mono, Menlo, monospace)
- Type scale: 1.333 ratio, base 16px — computed steps: 16px / 21px / 28px / 38px / 51px / 67px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.1, letter-spacing -0.03em
- Body: line-height 1.6, letter-spacing -0.01em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 40, 64, 96, 140 — Spacious vertical rhythm — 96–140px between sections so each scroll-triggered reveal gets its own beat; bento cells stay comfortably padded at 24–32px.
- Border radius: md 10px, lg 16px, xl 24px, pill 999px — 10–16px on cards and bento cells, 24px on hero panels, pills for badges and small CTAs.
- Border treatment: 1px solid #ffffff14 — Hairline 8% white defines every surface; featured cells upgrade to a 1px gradient border (violet→cyan→pink) via masked background.

### Shadows

- layered: `0 1px 1px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45)` — Default card elevation — tight contact shadow plus soft ambient
- layered-lg: `0 2px 4px rgba(0,0,0,0.4), 0 24px 64px rgba(0,0,0,0.55)` — Modals, hero mockups, hovered feature cells
- accent-glow: `0 0 48px rgba(139, 124, 248, 0.4)` — Halo behind primary CTA and hero gradient text

### Layout

- Max content width: 1200px
- Centered hero: badge pill, tight display headline with a gradient-filled phrase, subcopy, dual CTAs, floating product mockup below
- Bento grid features: mixed-span cells (2x2 hero cell among 1x1s) each holding one animated visual
- Sticky scroll sequences where a pinned visual updates as steps scroll past
- Logo marquee strip for social proof
- Tall section spacing so reveals never overlap

### Effects

- Radial gradient glow blobs (violet/cyan/pink) blurred 120px+ behind hero and CTAs
- Gradient text fill on one key headline phrase
- Masked gradient borders on featured bento cells
- Subtle grid or dot pattern at 3–4% white in hero background
- Slow-breathing glow animation (scale and opacity) on background blobs

### Motion

- Easing: cubic-bezier(0.34, 1.3, 0.64, 1); durations 200ms / 500ms / 900ms
- Viewport-entry reveals: fade + translateY(24px) with spring easing and 60–90ms stagger between siblings
- Sticky scroll sections pin a visual while text steps scroll and swap its state
- Hover on cards: 1.02 scale, border brightens, glow appears — 200ms
- Hero elements cascade on load: badge, headline, subcopy, CTAs, mockup in sequence
- Each element animates in once; no re-triggering on scroll-up

## CSS variables (drop-in)

```css
:root {
  --color-bg: #05050a;
  --color-surface: #101018;
  --color-surface-raised: #181824;
  --color-text: #f5f5f7;
  --color-text-muted: #9d9daa;
  --color-accent: #8b7cf8;
  --color-gradient-cyan: #22d3ee;
  --color-gradient-pink: #f472b6;
  --color-border: #ffffff14;
  --color-glow: #8b7cf866;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --shadow-layered: 0 1px 1px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45);
  --shadow-layered-lg: 0 2px 4px rgba(0,0,0,0.4), 0 24px 64px rgba(0,0,0,0.55);
  --shadow-accent-glow: 0 0 48px rgba(139, 124, 248, 0.4);
  --border-default: 1px solid #ffffff14;
  --font-display: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "SF Mono", Menlo, monospace;
  --text-base: 16px;
  --leading-heading: 1.1;
  --leading-body: 1.6;
  --tracking-heading: -0.03em;
  --tracking-body: -0.01em;
  --ease: cubic-bezier(0.34, 1.3, 0.64, 1);
  --duration-fast: 200ms;
  --duration-base: 500ms;
  --duration-slow: 900ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Floating pill or slim translucent bar with blur, hairline border, quiet links, and a small solid-accent CTA; gains background on scroll
- **Hero:** Centered stack — announcement pill, 64–88px Inter SemiBold headline (tracking -0.03em) with gradient phrase, muted subcopy, primary+ghost CTAs, glowing product mockup floating below
- **Card:** Bento cell: #101018 fill, 16px radius, hairline border, layered shadow, one animated visual or stat per cell; hover scales 1.02 and brightens border
- **Button (primary):** Solid accent violet fill, white text, 10px radius or pill, accent-glow on hover, scales 0.98 on press
- **Button (secondary):** Ghost: transparent fill, hairline border, soft-white text; background rises to 5% white on hover
- **Form fields:** Surface fill, 10px radius, hairline border, muted placeholder; focus ring in accent at 40% opacity with slight glow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Content that arrives: every section's elements fade up 20–30px with a soft spring and 60–90ms stagger as they enter the viewport, while a hero gradient glow breathes behind tight Inter display type. Spend boldness here; keep everything else quiet.

## Do

- Choreograph one entrance per element with spring easing and stagger — motion is the brand
- Keep the canvas near-black and let vivid gradients appear only as glows, borders, and one text fill
- Use bento grids to give every feature its own animated moment
- Track display type tight (-0.02 to -0.04em) and keep weights in the 500–700 range

## Don't

- Don't re-trigger entrance animations on every scroll pass — once per element
- Don't animate more than one property group per element; springy translate+opacity is enough
- No pure-white sections mid-page; the dark canvas is continuous
- Don't ship the motion without a reduced-motion path — this style collapses into unusability without one

## Accessibility notes

- prefers-reduced-motion must replace all translate/scale reveals with simple opacity fades or none — this is non-negotiable given the animation density
- Muted text #9d9daa on #05050a passes AA (~7:1), but never set muted text on raised surfaces lighter than #181824 without rechecking
- Gradient-filled headline phrases need sufficient contrast at every stop; keep gradient text large (32px+) and provide solid fallback color
- Sticky scroll sequences must remain keyboard-scrollable and never trap focus

## Reference sites

- Framer: https://www.framer.com
- Framer template marketplace: https://www.framer.com/marketplace
- Motion (Framer Motion): https://motion.dev
- Linear (motion-rich dark marketing): https://linear.app

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip framer-marketing-motion.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/framer-marketing-motion.json

Settings → Capabilities → Skills → Upload skill → framer-marketing-motion.zip