DatoCMS logo was born as a combination of the D icon and the wordmark. They both went through some restyling, and now they look as beautiful as ever.

The D icon uses a gradient shade, - worry not, more details ahead - while the wordmark will always have the coral fill. In case of small copy or whenever the gradient wouldn’t be visible, we just make everything coral.

We created an alternative wordmark for both our horizontal and vertical mockup to go along the D icon. Why you say? Well, sometimes - in small copy - the word CMS is hardly readable; make it bigger, problem solved. This is the way to go in case the main logo would be smaller than 110px wide in digital, but please never make it smaller than 70px wide.

In the same fashion, these are the vertical lockups we designed. Note that the D icon gradient adapts to this new layout by changing its direction: from left to right to top to bottom. The main lockup is to be used at any time, although you may switch to the alternative wordmark when the logo would be smaller than 110px tall. Again, no need to squeeze it too much and make it smaller than 70px tall.

Colfax is our brand typeface. Quoting Process, an independent type foundry based in Minneapolis, Colfax is a ‘refined oval sans serif of 20th-century origins and 21st-century sensibilities’. This ‘nearly geometric’ typeface combines beautifully with Spectral, our serif typeface, and stands firmly on its own.

Curious about the design process? Head over to this blog post .

Coral is the lively and dynamic color that makes DatoCMS recognizable. And no, the choice was made way before Pantone announced Living Coral color of the year 2019! While DatoCMS coral sits on a more orange hue, it still embraces the values of our young, playful and energetic company.

Everybody loves gradients. Living in an ever-shifting environment, we need to adapt to changes and face new challenges every day quickly. A splash of energy makes our coral even cooler!

Sometimes we really need to express ourselves, and one color is not enough. We use this secondary palette to be more flexible and effective through our communication or whenever we need more accent colors in our CMS interface.

• Give enough white space to the logo in order to breathe. No hard rules here, but 50% of the height or width as padding would be optimal.
• Use the lockup you think fits best for whatever your purpose is.

• Alter shape or color of any of the elements. We worked hard to make them the way they are and we want our brand to be consistent and recognizable.
• Alter the logo paths or any other element, or create a different lockup than the ones provided