LottieFiles

Overview

LottieFiles is a motion-first design platform that democratizes lightweight animation creation and deployment across web, mobile, and design applications. It serves designers, developers, and product teams who need production-ready animations without the file-size burden. The aesthetic is "Playful Precision"—a fusion of vibrant, approachable character design (evident in the hero's animated mascots) with clean, minimal interface surfaces. The emotional response is one of creative empowerment: users feel that motion design is accessible, fun, and technically sound, not gatekept or intimidating.

The brand voice is conversational yet authoritative, balancing technical credibility with warmth. Vocabulary leans toward action verbs (create, manage, implement, ship) and motion-centric language (lightweight, animate, bring alive). The tone avoids corporate jargon; instead, it speaks directly to makers. Example sentence in brand voice: "Ship animations that weigh less than a coffee break—and look infinitely better."

Colors

LottieFiles employs a vibrant, high-contrast palette anchored by a teal primary (#019d91, oklch(0.626 0.11 185.333)) that signals interactivity and forward motion. This primary is reserved exclusively for CTAs, active states, and brand-critical UI elements—it appears on the "Sign up" button, focus rings, and primary navigation highlights. The secondary accent, a warm golden-yellow (#ffbf00), provides energetic contrast for highlights, badges, and supporting calls-to-action; it reinforces the playful, creative energy without competing for attention. A vibrant magenta tertiary (#ff8eed) is used sparingly for tertiary actions, alerts, and decorative accents that need to pop against the neutral backdrop.

The surface stack is anchored in pure white (#ffffff) for the main canvas, with a careful

Typography

The type system pairs DM Sans (500 weight, 96px, -0.02em letter-spacing) for display-scale headlines with Inter for body and label text, creating a hierarchy that balances personality with legibility. DM Sans's geometric, slightly rounded letterforms echo the playful character design in the hero illustration, while Inter's neutral, highly-readable structure ensures that dense information (product descriptions, navigation, form labels) remains scannable at any size. Display text (96px, 104px line-height) commands attention without aggression; headline-lg (48px) anchors section introductions; body-md (16px, 24px line-height) is the workhorse for prose and UI copy. All labels use 500–600 weight to ensure clickability and visual hierarchy. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on sm

Layout

The page uses a 12-column grid with a 1440px max-width container, centered with symmetric gutters of 24px on desktop (reducing to 16px on tablet, 12px on mobile). The hero section spans full-width with asymmetric content: the headline and copy occupy the left 50% (6 columns), while the animated illustration floats on the right, creating visual balance without rigid symmetry. Section spacing follows the lg token (40px) between major content blocks, with md (24px) used for intra-section grouping (e.g., between a headline and its supporting paragraph). The cookie consent banner and header use gutter (24px) for horizontal padding, maintaining consistency with the grid. White-space is generous—never cramped—to allow the vibrant accent colors and playful illustrations to breathe. Container max-w

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows, instead using subtle elevation tokens to create layering without visual weight. Level 1 (Base): flat white surface with no shadow, establishing the clean, minimal foundation. Level 2 (Cards, inputs): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), a hairline shadow that suggests the element sits slightly above the surface without creating visual separation. Level 3 (Modals, popovers, hover states): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), a soft, diffuse shadow that creates clear depth. Interactive elements (but

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, avoiding the overly-rounded aesthetic of consumer apps while remaining friendlier than austere, sharp-cornered enterprise software. Buttons use lg (1rem / 16px) border-radius, creating a subtle roundness that feels modern and approachable without sacrificing professional credibility. Cards and containers use xl (1.5rem / 24px) for a slightly more generous curve that echoes the playful character design. Input fields and smaller UI elements use DEFAULT (0.5rem / 8px), a conservative radius that keeps them visual

Components

Action Elements Buttons are the primary interaction currency. The primary button (48px height, 12px 24px padding, 1rem radius, label-md typography) uses the teal primary (#019d91) background with white text, creating maximum contrast and visual prominence. On hover, the background shifts to primary-fixed-dim (#019d91 darkened), with a 200ms transition to signal responsiveness. Secondary buttons (40px height, 8px 16px padding, 0.75rem radius) use surface-container background with a 1px outline-variant border; on hover, they shift to surface-container-high with outline color deepening. All buttons include a 3px focus ring at rgba(1, 157, 145, 0.1) for keyboard navigation accessibility.

Containers & Surfaces Cards are the primary content container, using 1.5rem border-radius, 24px pa

Do's and Don'ts

**Do**

• Do use the teal primary (#019d91) exclusively for CTAs, focus states, and brand-critical interactive elements—never for passive backgrounds or decorative text.
• Do apply the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition to all interactive state changes (hover, focus, active) to reinforce the motion-forward brand identity.
• Do maintain at least 24px (lg spacing) between major content sections to allow the vibrant accent colors and illustrations to breathe.
• Do use DM Sans (500 weight) for display and headline text to echo the playful character design; reserve Inter for body and label text to ensure legibility at small sizes.

**Don't**

• Don't use the secondary (#ffbf00) or tertiary (#ff8eed) accents as primary CTAs—they are supporting colors and will dilute the brand's visual hierarchy.
• Don't apply heavy drop-shadows (> 0.12 opacity) or multiple layered shadows; the brand uses restrained, single-layer elevation to maintain clarity and sophistication.
• Don't exceed 1440px container max-width on ultra-large displays; wider layouts will make text uncomfortably long and dilute the carefully-calibrated visual rhythm.
• Don't use system fonts or generic sans-serif fallbacks; always specify DM Sans LF or Inter LF with proper font-display: swap to ensure the brand typography loads correctly and degrades gracefully.