LottieFiles DESIGN.md

Animation platform and marketplace with a playful, creative aesthetic — vivid teal-green brand, white surfaces, and motion-first UI patterns.

1. Visual Theme & Atmosphere

LottieFiles celebrates animation and motion. The design is bright, friendly, and joyful — a teal-green brand color that evokes creativity and forward movement. Animation previews are the hero, surrounded by clean white space that lets motion take center stage. The UI is accessible to both developers and designers, balancing a clean consumer aesthetic with practical tooling for integrating Lottie animations.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-size-xs: 11px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-xl: 28px;
--font-size-2xl: 36px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.25;
--line-height-base: 1.5;

4. Component Stylings

css/* Primary Button */
.button-primary {
  background: #00C2A8;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.button-primary:hover { background: #00A08C; }

/* Animation Card */
.anim-card {
  background: #FFFFFF;
  border: 1px solid #E4E8F0;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.anim-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.anim-card__preview {
  background: #F0F4F8;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.anim-card__info {
  padding: 10px 12px;
}
.anim-card__title {
  font-size: 13px;
  font-weight: 600;
  color: #1A1A2E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anim-card__author {
  font-size: 11px;
  color: #9EA5B4;
  margin-top: 2px;
}

/* Favorite Button */
.btn-favorite {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: #9EA5B4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.12s, transform 0.12s;
}
.btn-favorite:hover { transform: scale(1.1); }
.btn-favorite--active { color: #EF4444; }

/* Download Button */
.btn-download {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #00C2A8;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-download:hover { background: #00A08C; }

/* Format Badge */
.format-badge {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.format-badge--lottie { background: #E0F9F6; color: #00A08C; }
.format-badge--dotlottie { background: #EDE9FE; color: #6C5CE7; }
.format-badge--gif { background: #FEF3C7; color: #D97706; }

5. Layout Principles

6. Depth & Elevation

css.shadow-card { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.shadow-hover { box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
.shadow-player { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

7. Do's and Don'ts

Do:

• Use square (1:1) animation preview areas — Lottie animations are often square
• Add a subtle lift (translateY -2px) on card hover to suggest interactivity
• Show format badges (Lottie, dotLottie, GIF) on every card
• Allow animation to play on card hover

Don't:

• Don't use dark preview backgrounds — light (#F0F4F8) lets animation colors show
• Don't crop animations — always use their natural aspect ratio
• Don't use busy backgrounds behind animation previews

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for LottieFiles — animation platform and marketplace.
Use a white background with teal-green (#00C2A8) as the primary brand accent.
Animation cards are square preview + metadata: title and author below.
Card previews use a light gray background (#F0F4F8) to frame animation content.
Format badges (Lottie/dotLottie/GIF) are small uppercase pill labels with color coding.
Cards lift slightly on hover with a subtle shadow.
Tone is playful, creative, motion-first, and approachable.