MotionKit Design System

MotionKit Design System mockup preview
Click to expand

A dynamic, cutting-edge design system for motion designers and video producers. Utilizes a dark canvas with vivid gradients, glassmorphism, and colored glows to create a cinematic interface. Component design emphasizes kinetic energy through rounded corners, translucent panels, and smooth transitions.

Color Primary#8B5CF6
Color Secondary#22D3EE
Color Tertiary#F472B6
Surface Base#0A0A0F
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Headline FontSora · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body FontWork Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Mono FontSpace Mono · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-heroSora · 72px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-h1Sora · 48px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-h2Sora · 32px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-h3Sora · 22px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-body-lgWork Sans · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-bodyWork Sans · 16px · Light

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-captionWork Sans · 13px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

text-monoSpace Mono · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

A dynamic, cutting-edge design system for motion designers and video producers. Utilizes a dark canvas with vivid gradients, glassmorphism, and colored glows to create a cinematic interface. Component design emphasizes kinetic energy through rounded corners, translucent panels, and smooth transitions.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

Filter Chip DefaultStatus Chip Rendering

Elevation & Depth

shadow-glass
shadow-md
shadow-lg
glow-primary
glow-secondary
glow-tertiary
shadow-focus

Do's & Don'ts

Do

Use gradient accents (violet-to-cyan, violet-to-pink) to inject energy into key CTAs and hero elements
Design video-first layouts where reel thumbnails, looping previews, and embedded players are the dominant content
Keep the dark canvas (#0A0A0F) as the foundation -- it functions as the theater screen for visual content
Use colored glows sparingly to draw attention to primary actions and featured work
Implement smooth transitions (200-400ms, ease-out) for component state changes to reinforce the motion-design identity
Provide prefers-reduced-motion fallbacks that disable animated glows and transition effects for accessibility

Don't

Use flat, static layouts that feel inert. Every section should imply motion through staggered reveals and smooth transitions
Place light backgrounds behind video content. Dark surrounds maximize perceived contrast and vibrancy
Overuse glassmorphism -- limit translucent panels to navigation overlays and feature callouts, not every card
Use abrupt state changes or zero-duration transitions. Instant snaps feel out of character
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.7 KB
Downloads 0
bold creative dark media portfolio

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/motionkit-design-system and implement it in my code

Don't have the MCP? Install it here