CURATED · OPEN · FREE

LottieFiles

Create, manage and implement lightweight animations across websites, apps, presentations, social and more.

designmotion
LottieFiles screenshot
↓ Download design system (13 MB)Open in OpenDesign

Visit: https://lottiefiles.com

📦 Browse pack contents →

01

Identity DNA

motionanimationlightweightinteractivedeveloper

A playful motion design toolkit that makes animations accessible to developers and designers alike.

02

Color

#00b894Accent
#1a1a2eInk
#4a4a6aInk soft
#ffffffBG
#f6f7f5BG soft
#6b7280Muted
rgba(235,238,235,0.5)Line

Clean, high-contrast palette with a single vibrant teal accent against neutral whites and darks, using playful multi-colored illustrations for personality.

03

Typography

humanist-sans · ui-monospace

04

Spacing

4px
8px
12px
16px
24px
32px
48px
64px
96px

Generous whitespace with consistent 4px base grid, creating breathing room between elements.

05

Surfaces

sm · 6px
md · 8px
lg · 16px
pill · 9999px

1px solid rgba(235,238,235,0.5)

0 1px 2px 0 rgba(0,0,0,0.05) · 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Standard centered container with generous horizontal padding, full-width hero sections with left-aligned content.

07

Motion & Interaction

150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions on hover states for interactive elements · Transform and opacity animations for UI feedback · Color and background transitions on buttons and links

Color and background-color transitions at 150-300ms with subtle opacity changes · Transform and scale micro-interactions

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

LottieFiles — 桌面首屏（hero）
桌面首屏（hero）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
LottieFiles — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

LottieFiles is a motion design platform for developers and designers. Position: Playful SaaS tool for lightweight animations. Key hex colors: #ffffff (background), #1a1a2e (text), #00b894 (teal accent), #f6f7f5 (soft background). Font categories: humanist-sans for display and body, ui-monospace for code. Critical donts: 1) Don't use rigid sharp corners—use rounded/pill shapes. 2) Don't flatten illustrations—maintain playful 3D character style. 3) Don't use monochrome—keep vibrant multi-colored accents in illustrations while maintaining clean teal as primary. 4) Don't create dense layouts—maintain generous whitespace. 5) Don't use serif fonts—stick to clean sans-serif. 6) Don't use aggressive CTAs—keep friendly, action-oriented copy.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko