Search animations⌘K

LottieFiles brand guidelines

Just like motion, we're always evolving. That's why we’ve put these guidelines together to keep all of LottieFiles' communications consistent.

We just ask that you follow a few simple rules before using our open-source logo to keep it looking its absolute best. If you're going to use our art for anything at all, it would be great if you could keep it tasteful and send it our way for approval first.

Primary logo

Our primary logo lockup always in full color. Includes both the brand “bezier curve” symbol along with our wordmark. This is the only format allowed; symbol to the left and wordmark on the right.

Our primary logo lockup always in full color. Includes both the brand “bezier curve” symbol along with our wordmark. This is the only format allowed; symbol to the left and wordmark on the right.

On light background

On dark background

Animated on light background

Animated on dark background

Secondary Logo

These Black and White monotone logo is created to cater diverse need of communication materials. Mono Black and White to be used when primary logo doesn't fit or feel right in a chosen context/background color.

These Black and White monotone logo is created to cater diverse need of communication materials. Mono Black and White to be used when primary logo doesn't fit or feel right in a chosen context/background color.

On light background

On dark background

Example of application

Wordmark

Our wordmark is a simplified version of our primary logo. It must only be shown as provided below, no kerning or element addition is allowed.

Our wordmark is a simplified version of our primary logo. It must only be shown as provided below, no kerning or element addition is allowed.

On light background

On dark background

Logomark

Our logomark is made up of the "bezier curve" inside our rounded square block. Both should always be shown together in the exact format below to ensure brand consistency.

Our logomark is made up of the "bezier curve" inside our rounded square block. Both should always be shown together in the exact format below to ensure brand consistency.

LottieFiles Logomark

Primary on light background

LottieFiles Logomark Black

Secondary on light background

LottieFiles LottieFiles on Dark

On dark background

Dos & Don’ts

Here are some examples of how to use the LottieFiles logo and what to avoid.

Here are some examples of how to use the LottieFiles logo and what to avoid.

Place the logo on any brand color, as long as it’s legible.

If the background is too dark to use the black wordmark, use the white one.

Don’t place the logo over an image.

Don’t stretch the wordmark under any circumstances.

Don’t have the logo in any color other than the original one.

Don’t place a drop shadow under the wordmark.

Don’t rotate the logo in any direction.

Don't tweak the corner of the symbol

Don’t move the placement of the symbol within the logo.

Product logos

LottieFiles Symbol Guideline

Lottie Creator

LottieFiles Symbol Guideline

Lottie Docs

LottieFiles Symbol Guideline

Lottie Editor

Partnership lockups and application

LottieFiles works with a diverse range of organizations, and to ensure our brand identity is consistently applied in these situations, we have established a set of principles. Remember to always judge the proportions shape and legibility to maintain optical balance.

In certain situation where LottieFiles logo is shown in other brand's collateral, please ensure to only use LottieFiles black or white logo to maintain its consistency. Changing LottieFiles logo color is strictly prohibited.

LottieFiles works with a diverse range of organizations, and to ensure our brand identity is consistently applied in these situations, we have established a set of principles. Remember to always judge the proportions shape and legibility to maintain optical balance.

In certain situation where LottieFiles logo is shown in other brand's collateral, please ensure to only use LottieFiles black or white logo to maintain its consistency. Changing LottieFiles logo color is strictly prohibited.

Partnership Lockup 1

Partnership Lockup 1

Only use black or white LottieFiles logo. Ensure it's highly legible against the background color

Don't change LottieFiles logo to any color other than the original color, black or white version of the logo

Don't use logo version which is not legible against the background color

Colors

Our brand's mint color makes up our primary color palette as a bold accent. White and black serve as our base colors, giving us the ability to share community work easily.

The secondary accent color palette covers a broad range of colors to complement an array of animation work while also establishing the look of our design elements.

Please note that we only use solid colors, and gradients are not allowed.

Our brand's mint color makes up our primary color palette as a bold accent. White and black serve as our base colors, giving us the ability to share community work easily.

The secondary accent color palette covers a broad range of colors to complement an array of animation work while also establishing the look of our design elements.

Please note that we only use solid colors, and gradients are not allowed.

Primary Color

Mint

#00DDB3

CMYK

100, 0, 19, 13

Neutrals

Accent Colors

Blue

#3A86FF

CMYK

77, 47, 0, 0

Blue

#3A86FF

CMYK

77, 47, 0, 0

Pink

#FF8EED

CMYK

0, 44, 7, 0

Pink

#FF8EED

CMYK

0, 44, 7, 0

Yellow

#FFBF00

CMYK

0, 25, 100, 0

Yellow

#FFBF00

CMYK

0, 25, 100, 0

Red

#FF5531

CMYK

0, 67, 81, 0

Red

#FF5531

CMYK

0, 67, 81, 0

Green

#06BD1B

CMYK

97, 0, 86, 26

Green

#06BD1B

CMYK

97, 0, 86, 26

Purple

#9962FE

CMYK

40, 61, 0, 0

Purple

#9962FE

CMYK

40, 61, 0, 0

Orange

#FF8000

CMYK

0, 50, 100, 0

Orange

#FF8000

CMYK

0, 50, 100, 0

Lime

#CAE100

CMYK

10, 0, 100, 12

Lime

#CAE100

CMYK

10, 0, 100, 12

Typography styles

LottieFiles brand font is DM Sans. A low-contrast geometric sans-serif, offers exceptional legibility across varying screen sizes and resolutions, a critical requirement for a platform centred on high-fidelity motion design.

LottieFiles brand font is DM Sans. A low-contrast geometric sans-serif, offers exceptional legibility across varying screen sizes and resolutions, a critical requirement for a platform centred on high-fidelity motion design.

The Headline

The Headline

The Headline

Heading

DM Sans, Medium

Line height 110%

Letter spacing -4%

What's a Lottie?

What's a Lottie?

Subheading

DM Sans, Medium

Line height 115%

Letter spacing -3%

A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.

A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.

Body

Body

DM Sans, Regular

DM Sans, Regular

Line height 140%

Line height 140%

Letter spacing -1%

Letter spacing -1%

Typography pairings

Bundled Packages

Bundled Packages

Bundled Packages

Heading

Include multiple animations and assets in a single dotLottie file, simplifying management and deployment.

Include multiple animations and assets in a single dotLottie file, simplifying management and deployment.

Include multiple animations and assets in a single dotLottie file, simplifying management and deployment.

Subheading

Motion creation, simplified

Motion creation, simplified

Motion creation, simplified

Heading

Save countless hours and streamline your motion workflow with Lottie Creator, or design right within your favorite tools and export it as a Lottie with our integrations. We make motion design easy.

Save countless hours and streamline your motion workflow with Lottie Creator, or design right within your favorite tools and export it as a Lottie with our integrations. We make motion design easy.

Body

Brand imagery

LottieFiles’ brand imagery consists of supporting graphic elements that showcase an overview of our products and offerings.

LottieFiles’ brand imagery consists of supporting graphic elements that showcase an overview of our products and offerings.

Brand graphics