Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Lottiefiles
Design ToolsLottieFils embodies creative precision through its signature teal accent against vast white space and oversized typography. The brand exudes confident minimalism with a focus on creative empowerment, using DM Sans at 96px for dramatic headlines that command attention while maintaining approachable sophistication.
Design Identity
Signature Color
LottieFiles Teal
#20C997
creative energy and digital innovation - vibrant yet professional
Visual Identity
Dramatic scale contrasts - massive 96px headlines paired with generous white space and a single vibrant teal accent that appears sparingly but memorably.
Component Style
Clean geometric buttons with moderate 8px radius, no shadows or heavy borders. The teal primary button has confident rounded corners while maintaining crispness. Everything feels weightless and uncluttered.
Spacing Philosophy
Luxurious white space dominance with massive gaps between sections. The layout breathes extensively, creating a gallery-like presentation that lets each element command its own territory.
Design Principles
- Typography scales dramatically: 96px headlines vs 16px body creating strong hierarchy
- Color usage is surgical: single teal accent against pure white and dark grays
- Border radius stays consistent at 8px across interactive elements
- Line heights are generous: 99.84px for headlines, 24px for body text
Target Audience
Creative professionals and motion designers who value sophisticated tools and premium user experiences over feature complexity
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | 24px | |
| h1 | 96px | 500 | 99.84px | |
| h2 | 18px | 600 | 27px | |
| h3 | 20px | 500 | 22.8px | |
| h4 | 14px | 500 | 20px | |
| p | 14px | 400 | 20px | |
| a | 16px | 400 | 24px | |
| button | 14px | 500 | 20px | |
| input | 16px | 400 | 24px | |
| nav | 16px | 400 | 24px |
Color Palette
#30363c#ffffff#2c2f31#5e6266#000000#eaeff2#d4dae0#f0f4f7#667481#d5dee2#e9eff4#dee4e9
