# LottieFiles · Design system migration spec

> Source: https://lottiefiles.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of playful yet professional SaaS design that balances developer-focused content with accessible, friendly branding.

## 1. Identity DNA

LottieFiles is a motion design toolkit that democratizes animation for both developers and designers. The system is built on a foundation of playful lightness, mirroring the accessible and lightweight nature of the Lottie format itself. Its design language balances professional utility with an approachable, creative spirit.

**One-liner:** Create, manage and implement lightweight animations across websites, apps, presentations, social and more.
**Keywords:** motion · animation · lightweight · interactive · developer
**Analogy:** A playful motion design toolkit that makes animations accessible to developers and designers alike.

## 2. Color

The palette operates on a principle of high-contrast clarity. A clean canvas of white and near-white neutrals is punctuated by a single, vibrant teal accent, while playful multi-colored illustrations inject personality and whimsy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f6f7f5` | card background |
| `--ink` | `#1a1a2e` | body text |
| `--ink-soft` | `#4a4a6a` | secondary text |
| `--muted` | `#6b7280` | placeholder |
| `--muted-soft` | `#9ca3af` | weak hint |
| `--accent` | `#00b894` | single accent |
| `--line` | `rgba(235,238,235,0.5)` | divider |

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

The core rule is restraint: the teal provides all the necessary chromatic focus, allowing supporting illustrations to carry expressive color without creating visual competition.

## 3. Typography

The typographic voice is clear and humanist, using a sans-serif category for both display and body copy to maintain a consistent, approachable tone. This choice supports a friendly, confident feel that avoids the coldness of geometric fonts while remaining highly legible across scales.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** ui-monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 500 | -2.56px | Hero headline |
| h1 | 48px | 1.0 | 500 | -1.92px | Section headlines |
| h2 | 24px | 1.17 | 500 | -0.72px | Card titles |
| body | 16px | 1.5 | 400 | -0.2px | Body copy |
| small | 14px | 1.43 | 400 | -0.24px | Captions and labels |

## 4. Spacing

Generous whitespace establishes a deliberate, open rhythm, governed by a consistent 4px base grid that ensures proportional relationships between all elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace with consistent 4px base grid, creating breathing room between elements.

## 5. Surfaces

Depth is conveyed through subtle, layered elevation. Minimal shadows and delicate, semi-transparent borders define cards and surfaces, creating a sense of physical stacking without heavy visual weight.

- **Radius:** sm 6px · md 8px · lg 16px · pill 9999px
- **Shadows:**
  - 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)
- **Borders:** 1px solid rgba(235,238,235,0.5)

## 6. Layout

The layout skeleton is built around a standard centered container with ample horizontal padding, ensuring content remains comfortably readable. Full-width hero sections break this container, using asymmetric compositions with left-aligned text and right-aligned illustrations to create visual dynamism.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is treated as functional feedback rather than decoration. The philosophy prioritizes subtle, purposeful transitions—primarily transforms, opacity, and color shifts—that confirm user interaction and guide attention smoothly.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on hover states for interactive elements
  - Transform and opacity animations for UI feedback
  - Color and background transitions on buttons and links

- **Hover:** Color and background-color transitions at 150-300ms with subtle opacity changes
- **Click:** Transform and scale micro-interactions
- **Transition:** All properties transition with cubic-bezier(0.4, 0, 0.2, 1) easing
- **Keyboard:** Standard focus management with visual focus indicators

## 8. Voice & Don'ts

The editorial voice is friendly, confident, and approachable. Headlines are action-oriented, making bold, clear statements, while calls to action use direct verbs that feel like an invitation, not a demand.

- **Tone:** Friendly, confident, and approachable
- **Headline style:** Action-oriented, large, bold statements about motion and design
- **CTA style:** Direct action verbs like 'Get started for free', 'Get in touch'
- **Avoid:** Corporate jargon / Overly technical language without context / Aggressive sales language

### Don'ts
- ❌ don't use rigid, sharp-edged containers — screenshot shows rounded corners on cards and buttons
- ❌ don't use muted, desaturated accent colors — screenshot shows vibrant teal (#00b894) as primary accent
- ❌ don't flatten all illustrations to 2D — screenshot shows playful 3D character illustrations with depth
- ❌ don't use monochrome hero sections — screenshot shows white background with colorful character illustrations
- ❌ don't use dense, packed layouts — screenshot shows generous whitespace and breathing room
- ❌ don't use serif typography — screenshot shows clean humanist sans-serif throughout
- ❌ don't use dark mode as default — screenshot shows light mode hero with dark sections below

The system deliberately avoids corporate jargon, aggressive sales language, and overly technical phrasing without context, ensuring the platform remains welcoming to a broad creative audience.

## System Prompt (paste into AI tool)

```
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.
```
