# LottieFiles — Design System
> The world's largest platform for Lottie animations, offering tools to create, edit, and implement motion graphics.
- **Canonical:** https://uiuxskills.com/library/lottiefiles-2
- **Source:** https://lottiefiles.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:22.145Z

---

---
version: alpha
name: LottieFiles
description: >-
  The world's largest platform for Lottie animations, offering tools to create, edit, and implement
  motion graphics.
tone: >-
  Professional, innovative, and highly accessible. The tone is encouraging and focused on
  simplifying complex motion workflows.
color-scheme: light
colors:
  primary: "#008CFF"
  surface: "#FFFFFF"
  surface-dim: "#F9FAFB"
  on-surface: "#111827"
  on-surface-muted: "#6B7280"
  outline: "#E5E7EB"
  error: "#EF4444"
  success: "#10B981"
  on-primary: "#FFFFFF"
  focus-ring: "#93C5FD"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
    fontWeight: 700
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
    fontWeight: 700
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
    fontWeight: 600
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
    fontWeight: 600
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
    fontWeight: 400
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
    fontWeight: 400
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
    fontWeight: 500
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#0077D6"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#0077D6"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface-muted}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FEE2E2"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

LottieFiles maintains a clean, professional, and highly functional aesthetic that prioritizes clarity and ease of use for designers and developers. The visual language is modern and approachable, utilizing a neutral palette to allow the vibrant, motion-heavy content to take center stage.

## Colors

The color strategy relies on a high-contrast foundation to ensure readability, punctuated by a vibrant blue for primary interactions.

*   Primary (inferred) (#008CFF): The core brand color used for primary CTAs and active states.
*   Surface (inferred) (#FFFFFF): Main background color for the application interface.
*   Surface-dim (inferred) (#F9FAFB): Secondary background for section containers and cards.
*   On-surface (inferred) (#111827): Primary text color for high contrast against light backgrounds.
*   On-surface-muted (inferred) (#6B7280): Secondary text color for descriptions and metadata.
*   Outline (inferred) (#E5E7EB): Border color for inputs, cards, and dividers.
*   Focus-ring (inferred) (#93C5FD): Focus ring color for accessibility and keyboard navigation.
*   Error (inferred) (#EF4444): Semantic color for error states and destructive actions.
*   Success (inferred) (#10B981): Semantic color for success states and positive indicators.

## Typography

The typography system uses the Inter font family to maintain a clean, geometric, and highly readable interface across all screen sizes.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for section headers.
*   Headline-lg (inferred): Used for sub-headers.
*   Headline-md (inferred): Used for card titles.
*   Body-md (inferred): Standard body text.
*   Body-sm (inferred): Secondary body text.
*   Label-sm (inferred): Small labels and UI hints.

## Layout

The site utilizes a responsive grid system with a max-width container that centers content. Spacing is governed by a 4px base unit, ensuring a consistent rhythm across all views. The page structure follows a logical flow: navigation, hero, social proof, features, case studies, and footer. Hero sections are typically centered, featuring a bold headline and dual-action CTAs. On mobile, the layout shifts to a single-column stack, with navigation collapsing into a mobile-friendly menu.

## Elevation & Depth

Elevation is used sparingly to distinguish interactive cards and navigation elements from the background. The system employs subtle single-layer shadows across three levels:

*   elevation.sm: Subtle lift for small UI elements.
*   elevation.md: Standard lift for dropdowns, popovers, and interactive cards.
*   elevation.lg: Pronounced lift for modals, drawers, or active overlays.

## Shapes

The brand employs a rounded corner philosophy to create a friendly, modern feel. The scale is applied consistently based on component size and function.

Inputs and smaller UI elements use `{rounded.md}` (8px) to maintain a soft, approachable look. Cards utilize `{rounded.lg}` (12px) to define containers clearly, while buttons typically use `{rounded.full}` to achieve a pill-shaped aesthetic.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and `{rounded.full}` for a pill-shaped finish. Use primary buttons for the main conversion goal and secondary buttons (with `{colors.outline}`) for alternative actions.

### Card
Cards are defined by `{rounded.lg}` and a clean `{colors.surface}` background. Use them to group related content or feature highlights, ensuring they remain distinct from the `{colors.surface-dim}` background.

### Input Field
Inputs feature `{rounded.md}` and an `{colors.outline}` border. Always ensure the `{input-field-focus}` state is applied using `{colors.focus-ring}` to maintain accessibility standards.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Do not use `{colors.error}` for non-destructive actions. |
| Apply `{rounded.lg}` to all card containers for consistency. | Avoid mixing different border-radius values on the same component type. |
| Use `{typography.display-lg}` for main hero headlines only. | Do not use `{typography.display-lg}` for body copy. |
| Maintain `{spacing.md}` between form elements. | Avoid using excessive shadows on flat UI elements. |
| Use `{colors.on-surface-muted}` for secondary text to maintain hierarchy. | Do not use low-contrast text colors on `{colors.surface-dim}` backgrounds. |
| Ensure all interactive elements have a `{colors.focus-ring}` state. | Never use `{typography.body-sm}` for primary navigation labels. |
| Use `{rounded.md}` for all input fields. | Do not use square corners on buttons or cards. |
| Apply `{colors.outline}` for subtle card and input borders. | Avoid using high-saturation colors for background surfaces. |

## Content Style

CTA labels are action-oriented, utilizing imperative verbs in sentence case (e.g., "Get started for free"). The tone is designed to be encouraging and direct, focusing on the immediate value provided by the platform.

Headings are benefit-driven and concise, designed to communicate the value of motion design at a glance. They avoid jargon in favor of clear, professional language that speaks to both designers and developers.

Copy density is kept low to ensure scannability. Paragraphs are short, and the layout favors the use of bullet points and clear, descriptive headings to break up complex information.

## Imagery & Icons

The visual style incorporates a mix of high-quality Lottie animations, clean vector icons, and professional product screenshots. Icons are typically filled and rounded, reflecting the approachable nature of the brand. Photographic assets are used sparingly, focusing instead on dynamic motion graphics that demonstrate the platform's core capability. Logo lockups must maintain clear space and should not be modified or recolored.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for LottieFiles, a minimal, accessibility-focused motion platform. Match its clean, professional, and encouraging tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its YAML token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.lg}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only the component variants listed under `components:`. Buttons are `button-primary` or `button-secondary`; cards are `card` or `card-elevated`. Do not invent variants.
3. Follow the Shapes section literally: buttons use `{rounded.full}`, cards use `{rounded.lg}`, inputs use `{rounded.md}`. Never mix radius values within the same component type.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. All tokens marked "(inferred)" are visual approximations. If an authoritative token source exists (theme file, Storybook, metadata), it overrides these inferred values.

## Output contract

**Must:**
- Use token names for every color, type style, spacing step, radius, and shadow.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{colors.focus-ring}` as the visible focus indicator on all interactive elements.
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Render hero headlines in `{typography.display-lg}` only in hero contexts; use `{typography.headline-md}` for card titles.

**Must NOT:**
- Invent colors, font sizes, radii, or shadow values absent from the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md` as a literal string) when a named token exists.
- Add emoji, filler text, or unsolicited marketing copy.
- Reference any specific framework or toolchain.
- Rewrite existing page copy, button labels, or headings, or alter navigation structure as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; use `{colors.surface-dim}` for secondary containers.
- For unspecified breakpoints, follow the Layout section; if silent, default to mobile-first with one breakpoint at 768px.
- Inferred tokens are approximations — defer to any authoritative source if available.