Typography
scale ratio 1.348- DM Sans LFdisplay + body400 500 60095%
- Inter LFother400 500 6005%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | DM Sans LF | 96px | 500 | 1.04 | -0.05em |
| headline | DM Sans LF | 64px | 500 | 1.15 | -0.04em |
| title | DM Sans LF | 24px | 500 | 1.12 | -0.01em |
| body | DM Sans LF | 16px | 400 | 1.4 | 0.009em |
| body-sm | DM Sans LF | 14px | 400 | 1.18 | 0.01em |
Type scale
Aa14Aa16Aa20Aa24Aa32Aa48Aa64Aa96
- Body size
- 16px / 1.4
- Display size
- 96px
- Display tracking
- -0.05em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 19.89:1
- Muted on bg
- 4.83:1
- Accent on bg
- 3.37:1
- Dark mode
- none
Declared accent tokens
- --brand-secondary#00C1A2not on page
- --color-brand-secondary#00C1A2not on page
- --primary#019D91painted
- --color-primary#019D91painted
Space, shape & depth
Spacing scale (base 8px)
- 4
- 6
- 8
- 12
- 16
- 20
- 24
- 32
- 64
- 80
Corner radii
68121624pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 160px
Components
exact computed valuesbutton-primary
Start creating
- backgroundColor
- #F4F4F5
- textColor
- #18181B
- rounded
- 8px
- padding
- 0px 20px
- height
- 40px
- fontFamily
- Inter LF
- fontSize
- 16px
- fontWeight
- 500
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
button-secondary
Get started for free
- backgroundColor
- #019D91
- textColor
- #FAFAFA
- rounded
- 12px
- padding
- 0px 24px
- height
- 48px
- fontFamily
- Inter LF
- fontSize
- 16px
- fontWeight
- 500
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
card
- rounded
- 24px
- padding
- 0px
- backgroundColor
- #F4F4F5
Layout & motion
- Container
- 640px
- Grid columns
- 2
- Hero
- split
- Navigation
- none-detected
- Page height
- 12,588px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms
- Transitions
- 119
- Keyframes
- 3
- Stack
- tailwind, radix-ui, shadcn/ui, framer-motion, hubspot, google-tag-manager, cloudflare
Page sections (12)
section labels are heuristic
01hero
02feature detail?Great designs come alive with motion!
03logosLottie AI
04gallery?World’s largest customizable animation library
05features?A modern motion workflow built for teams and enterprises
06features?Digital Asset Management
07stats?Lottie, the industry standard for motion design
08logosImplement your animations in just a few clicks
09feature detail?Unlock your creative potential with AI
10feature detail?Design teams love LottieFiles
11logosCreate, collaborate and ship.
12footer
How LottieFiles compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 96px: larger than 89% of indexed sites (median 60px).
- Type scale
- 1.35×: steeper than 68% of indexed sites (median 1.28×).
- Container
- 640px: narrower than 97% of indexed sites (median 1242px).
- Text contrast
- 19.9:1: higher than 75% of indexed sites (median 17.6:1).
- Page length
- 12,588px: longer than 85% of indexed sites (median 8,217px).
- Corner radius
- Mostly 16px, shared by 11 of 274 indexed sites (4%).
- DM Sans LF
- The only site in the index that loads DM Sans LF.
- Inter LF
- The only site in the index that loads Inter LF.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does LottieFiles use?
LottieFiles uses DM Sans LF for headings and body text. Inter LF is used for other.
What are LottieFiles's brand colors?
LottieFiles's website uses a light scheme: background #FFFFFF, surface #F4F4F5, text #09090B, muted text #71717B and borders #E4E4E780.
How is LottieFiles's website laid out?
The most common corner radius is 16px, body text is 16px with 1.4 line height, and the page container is 640px wide.
