| name | motion-design |
| description | A premium visual-design system for motion graphics — how to build a palette, type scale, spacing, elevation, glassmorphism, depth, lighting, iconography, and motion-aware design so any screen, card, scene, or composition reads high-end (Apple / Awwwards / top Behance) instead of flat or templated. Palette-agnostic and style-agnostic — it tells you HOW to make it premium, not which brand to use. Use ALONGSIDE remotion-motion whenever designing or redesigning any on-screen UI, card, text layout, or composition. |
Motion Design — the premium-look system
Goal: every frame should look like a polished product-design shot, not a flat wireframe. This is the taste layer; pair it with remotion-motion for the build/timing. Tokens belong in src/lib/design.ts.
1. Color — build a palette, don’t pick swatches at random
- Always primary + accent + a neutral scale. Never pure black or pure white — tint neutrals slightly warm or cool.
- Derive a palette from the brand/mood: one primary (hero), one accent (used sparingly for emphasis/CTAs), 5–6 neutrals (bg → surface → hairline → muted → ink), plus semantic (success/warn).
- Depth comes from gradients, not flat fills: backgrounds get a soft radial/linear gradient; brand buttons a 2-stop gradient; heroes get faint colored glow blobs behind them.
- Dark themes: lift surfaces with subtle lighter gradients + glows. Light themes: tint shadows with the brand hue.
2. Type — hierarchy is everything
- One family, many weights. Strong size contrast between a title and its meta — never all-one-size.
- Scale (px @1080w): display 96–120 / title 60–76 / heading 44–52 / body 34–40 / label 26–30.
- Headlines: weight 800–900, letter-spacing −2 to −4 (tight). Body: 500. Labels: 600–700, UPPERCASE, letter-spacing +2–4, muted.
- Pairings by mood: clean/tech → a grotesk (Inter, Geist, Space Grotesk, Manrope); editorial/premium → a serif display (Fraunces, Newsreader, Playfair) for headlines + a grotesk for UI; playful → rounded (Plus Jakarta Sans). Load via
@remotion/google-fonts.
3. Spacing & radii — 8pt grid
- Pad/gap in multiples of 8 (16, 24, 32, 40…). Generous negative space beats cramming.
- Radii: cards 28–40, pills 999, thumbnails 24–28. Keep them consistent across a composition.
4. Elevation — layered soft shadows (the #1 premium tell)
- Never one harsh shadow. Stack a tight near shadow + a soft far shadow:
0 2px 8px rgba(15,18,25,.05), 0 30px 60px rgba(15,18,25,.13)
- Add a 1px hairline border (
1px solid rgba(…, .06)) on light cards for crispness, and an inner top highlight (inset 0 1px 0 rgba(255,255,255,.35)) on raised/glass surfaces to read as “lit”.
5. Glassmorphism — cards over photos/maps/video
background: rgba(255,255,255,.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.5). Use for price pills, tracking cards, overlays.
6. Depth & light
- Subtle inner highlight on buttons; soft vignette and glow blobs behind heroes.
- Photos / cut-outs get a soft drop-shadow so they sit in the scene, not pasted on. Thumbnails get a faint gradient backing, never flat grey.
7. Motion-aware design (design for time, not just a still)
- Respect easing/timing from
remotion-motion — eased entrances, consistent enter/exit directions, one focal element at a time.
- Don’t animate everything at once; stagger and let the eye land. Hold key frames long enough to read.
- Keep the layout stable under camera moves — design the composition to survive a push-in/parallax.
8. Iconography & micro-detail (reads as “designed”, not templated)
- Add small premium details: status dots, rating pills, badges (“Best”, “New”), dividers, a faint grid, a progress indicator. These tiny signals separate pro from generic.
Style adaptations — the system flexes
- Kinetic typography: huge type, maximal negative space, one or two colors, the type is the design.
- App-UI / product: realistic chrome (status bar, segmented controls), layered depth, restrained accent on CTAs.
- Data-viz / explainer: clear hierarchy, restrained color (one accent for the “hero” number/series), lots of whitespace, labels uppercase + muted.
- Cinematic / product ad: dramatic low-key lighting, strong contrast, letterbox bars, a single saturated accent, glow + lens-style sweeps.
- Playful / social: bolder color, bouncy springs, rounded type, sticker-like badges — but still layered shadows + consistent spacing.
“Make it premium” checklist (run before shipping a screen)
- Gradient (not flat) background? 2. Layered shadow + hairline on cards? 3. Clear type hierarchy (big title vs muted meta)? 4. Consistent radii + 8pt spacing? 5. One accent, used purposefully? 6. Glow / glass / depth somewhere? 7. A small detail (badge/dot/divider) that says “designed”? 8. Generous negative space? 9. Eased, staggered motion with one focal point?
Pairs with remotion-motion (the build/render mechanics).
