Styleguide
Get to know the Netlify brand with these guidelines and resources.
Logo
Netlify’s logo has evolved gradually over time, but the basic shape and wordmark have been around for all of Netlify’s history.
Wordmark
Use this version whenever possible, especially on non-Netlify sources (any external, public facing medium).
Use the monotone version only if you’re trying to achieve a specific style and/or there’s not enough contrast between our teal color and the background.
Do
- Use at least 50% of the width/height as padding.
Don't
- Change colors or distort in any way.
Gem
Only use the gem in isolation when it’s obvious or implied that it refers to Netlify, the brand. Avoid using the gem as an icon.
Do
- Use at least 50% of the width/height as padding.
Don't
- Use as an icon.
- Change colors or distort in any way.
Colors
Our app uses color very sporadically, and when it does, it carries some weight to it. Our marketing site tries to bring balance to the Force, and is very colorful with bright hero gradients.
Base color
At the core of it all, our palette comes down to a very simple family of colors. The base color is used throughout the Netlify for text. The lighter shades are used as background color to create depth.
- #0E1E25
- #2D3B41
- #7D8589
- #A3A9AC
- #E9EBEB
- #F7F8F8
- #FFFFFF
Accent color
Teal is the primary accent color. Red is used exclusively for error messages and danger actions. Gold is used sporadically for upgrade call to actions or when a second accent color is needed.
- #00AD9F
- #00C7B7
- #FA3946
- #FB6D77
- #DBA800
- #F6BC00
Typography
For our logotype, marketing website, and all of our marketing assets, we use Roboto as the official typeface. The Netlify app uses a system fonts stack, so what you see depends on the device you are viewing from.