---
name: LottieFiles
description: "Worth including as a prime example of playful yet professional SaaS design that balances developer-focused content with accessible, friendly branding."
version: alpha

colors:
  background: "#ffffff"
  primary: "#1a1a2e"
  secondary: "#4a4a6a"
  tertiary: "#00b894"
  neutral: "#6b7280"
  bg-soft: "#f6f7f5"
  muted-soft: "#9ca3af"
  line: "rgba(235,238,235,0.5)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2.56px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.92px"
  h2:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.17
    fontWeight: 500
    letterSpacing: "-0.72px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.2px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.43
    fontWeight: 400
    letterSpacing: "-0.24px"

rounded:
  sm: 6px
  md: 8px
  lg: 16px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

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

## Colors

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

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#1a1a2e`)** — uses `ink` token
- **Secondary text (`#4a4a6a`)** — uses `ink-soft` token
- **Accent (`#00b894`)** — uses `accent` token
- **Muted (`#6b7280`)** — uses `muted` token
- **Borders (`rgba(235,238,235,0.5)`)** — uses `line` token

## Typography

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

## Layout

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

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

## Elevation & Depth

- 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)

## Shapes

- `sm`: 6px
- `md`: 8px
- `lg`: 16px
- `pill`: 9999px

## Components

- **button:** Rounded (pill) CTA with teal background, secondary outlined button variant with border
- **card:** Dark background cards with 16px radius in dark sections, light bordered cards in white sections
- **chip:** Small rounded badges with icon and label, used for feature highlights
- **input:** Search input with search icon, subtle border, rounded corners
- **hero:** Full-width section with large typography left, playful 3D character illustration right

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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