Branding

How to use our logo

Name

ESLint must be written with a capital E, S and L when used, as “ES” stands for ECMAScript and “L” being the start of the word “Lint”.

Logo

The ESLint logo can be placed on various backgrounds, provided it has enough vertical and horizontal padding.

Double the size of the inner hexagon created by the gap to get an idea how much space the logo should have between the logo and wordmark, as well as around the logo itself.

Our logo is versatile - you can use it on various brand colours, making use of opacity on non-white backgrounds to emulate the lighter colour. The ESLint logomark can also be used in isolation, without the ESLint wordmark though where possible, using both is preferred.

Color Palette

ESLint’s colour palette can speak to our brand in ways that are every bit as powerful as copy and logos. They not only affect how our design looks, but can go as far as to elicit emotion and reflect the personality of the ESLint brand.

The primary "brand" color is used across all interactive elements such as buttons, links, inputs, etc. It is derived from our logo. We use the two existing colors to create a unique primary tonal range.

  • Primary 25 #FBFBFF
  • Primary 50 #F6F6FE
  • Primary 100 #ECECFD
  • Primary 200 #DEDEFF
  • Primary 300 #CCCCFA
  • Primary 400 #B7B7FF
  • Primary 500 #A0A0F5
  • Primary 600 #8080F2
  • Primary 700 #6358D4
  • Primary 800 #4B32C3
  • Primary 900 #341BAB
  • White #FFFFFF
  • Neutral 25 #FCFCFD
  • Neutral 50 #F9FAFB
  • Neutral 100 #F2F4F7
  • Neutral 200 #E4E7EC
  • Neutral 300 #D0D5DD
  • Neutral 400 #98A2B3
  • Neutral 500 #667085
  • Neutral 600 #475467
  • Neutral 700 #344054
  • Neutral 800 #1D2939
  • Neutral 900 #101828