# Design Reference - LottieFiles
> Playful Precision amidst Animation; a digital canvas vibrant with motion, grounded by clear, spacious layouts.

## Source
- Original site: https://lottiefiles.com
- Captured: 2026-04-11T16:12:48.372Z

## Tags
- animation
- motion graphics
- playful
- vibrant
- developer focused
- illustration-heavy
- clean UI
- accessible
- friendly
- creative tools

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Cloud White | `#ffffff` | neutral | Page background, primary surface color for cards and interactive elements. |
| Ash White | `#fafafa` | neutral | Slightly off-white background where subtle contrast is needed, input fields, subtle section dividers. |
| Slate Gray | `#e4e4e7` | neutral | Subtle borders, dividers, outlines for card elements. |
| Dark Graphite | `#f4f4f5` | neutral | Secondary background for sections, muted buttons. |
| Carbon Black | `#09090b` | neutral | Primary text, prominent headings, strong contrast elements. |
| Charcoal Black | `#18181b` | neutral | Hover states for dark text, occasionally as button background. |
| Steel Gray | `#71717b` | neutral | Secondary text, icons, muted brand elements. |
| Cadet Gray | `#9f9fa9` | neutral | Fainter text, placeholder text, disabled states. |
| Lottie Teal | `#019d91` | brand | Primary call to action buttons, active navigation indicators, key brand accents. This moderate teal provides a fresh, energetic touch without being overly aggressive. |
| Vivid Aqua | `#00ddb3` | brand | Used within illustrations and occasionally for very bold accent elements, appearing brighter than Lottie Teal. |
| Sunshine Yellow | `#f0b100` | accent | Highlighting specific elements in illustrations, secondary accent color for badges or notifications. |
| Electric Blue | `#3a86ff` | accent | Used for specific interactive elements in illustrations, providing a bright, modern accent. |
| Jolly Green | `#94d19f` | accent | A softer green, used primarily inside illustrations to add to the playful aesthetic. |
| Coral Pink | `#ff8eed` | accent | A vibrant pink used in illustrations for character elements and other playful accents. |

## Typography
- role: Display headlines and prominent marketing text. The tight letter spacing on larger sizes creates a modern, impactful feel, while maintaining readability at smaller headline sizes.; sizes: 14px, 16px, 18px, 20px, 24px, 32px, 48px, 64px, 96px; family: DM Sans; weight: 400, 500, 600; weights: 400, 500, 600; lineHeight: 1.04-1.56; substitute: DM Sans (Google Fonts); letterSpacing: -0.05em at 96px, progressing to 0.01em at 14px
- role: Body text, navigation, buttons, and most UI elements. Its neutrality and legibility ensure a consistent and approachable voice across the interface, supporting the more expressive DM Sans.; sizes: 10px, 12px, 14px, 16px, 18px, 24px, 32px; family: Inter; weight: 400, 500, 600; weights: 400, 500, 600; lineHeight: 1.10-1.71; substitute: Inter (Google Fonts); letterSpacing: -0.01em

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "16px",
      "forms": "8px",
      "buttons": "12px",
      "thumbnails": "24px"
    },
    "elementGap": "8-24px",
    "sectionGap": "40-80px",
    "cardPadding": "24-32px",
    "pageMaxWidth": "1200px"
  },
  "radius": {
    "cards": "16px",
    "forms": "8px",
    "buttons": "12px",
    "thumbnails": "24px"
  }
}
```

## Component Patterns
- name: Feature Highlight Badges
- name: Testimonial Card
- name: CTA Button Group with Search
- name: Primary Lottie Teal Button; role: Primary call to action
- name: Ghost Navigation Button (Active); role: Navigation links and secondary actions
- name: Ghost Navigation Button (Inactive); role: Inactive/secondary navigation links
- name: Outline White Button; role: Secondary actions requiring emphasis
- name: Feature Card; role: Showcasing product features or benefits
- name: Customer Showcase Card; role: Highlighting customer projects or testimonials
- name: Search Input Field; role: Site-wide search functionality
- name: Testimonial Card; role: Displaying customer feedback

## Do
- Prioritize DM Sans for headlines (sizes > 24px) with specific letter-spacing as defined in typography, using Carbon Black (#09090b) for high impact.
- Use Lottie Teal (#019d91) exclusively for primary calls to action, maintaining its distinctive brand presence.
- Apply rounded corners consistently: 12px for buttons, 16px for cards, and 24px for larger visual elements like image containers to reinforce approachability.
- Maintain generous spacing with elementGap at 8px, 16px, or 24px, and sectionGap between 40-80px to ensure visual comfort and focus.
- Employ the subtle shadow rgba(0, 0, 0, 0.05) 0px 1px 2px 0px for all elevated cards and interactive elements, adding minimal depth.
- Utilize Inter font at 14px or 16px for all body text, links, and UI labels, ensuring high readability with a default letter-spacing of -0.01em.
- Ensure adequate contrast: Carbon Black (#09090b) on Cloud White (#ffffff) or Ash White (#fafafa) for all primary text content.

## Don't
- Avoid applying excessive shadows; stick to the single, subtle shadow defined for elevation.
- Do not introduce new chromatic colors outside of the defined brand and accent palette; maintain the vibrant teal focus with select pops of yellow/blue.
- Refrain from using sharp corners or radii smaller than 8px for interactive elements; the visual style leans into softer, friendlier shapes.
- Do not use DM Sans for large blocks of body text; reserve it for headlines and short, impactful statements to preserve its distinctive role.
- Avoid dense, information-heavy sections without adequate white space; prioritize breathability and comfortable reading experiences.
- Do not deviate from the specified dark neutral colors for primary text and headings; maintain high contrast and legibility.
- Do not use Lottie Teal (#019d91) for body text or non-interactive elements; keep it reserved for key actions and brand accents.