Colors

At Buffer, we use five palettes; Blue, Brand, Gray, State, and Shade. These can be found as part of less/base/variables.less

Blue Palette

Our blue palette is used to describe primary actions such as pimary buttons, links, and other objects that fall into this category. When thinking about what defines a primary action, it is the first action we're looking for a user to take.

We use @curious-blue as the main blue color for the object, @denim for its :hover state, and @tory-blue for its :active state.

@curious-blue

#168eea

@denim

#137ac9

@tory-blue

#0f63a4

Brand Palette

Our brand palette is used to describe the various brands represented in the Buffer product.

@appdotnet

#4a484c

@googleplus

#dd4b39

@linkedin

#007bb6

@pinterest

#bd081c

Gray Palette

Our gray palette is used in most objects; from typography and border colors to backgrounds and shadows.

We use @outer-space for the color of input, label, the active NavBar__menu__item, h1 through h6, the :active state of a Button--type-tertiary (including its background-color property at 10% opacity), and the :hover state of a Button--type-tertiary.

We use @shuttle-gray for the color of body, NavBar__menu__item, and Tag.

We use @nevada for the border-color and color of Button--type-tertiary.

We use @geyser for the border-color of all objects that require a border.

We use @aqua-haze for an alternative, light background color.

@outer-space

#323b43

@shuttle-gray

#59626a

@nevada

#666c72

@geyser

#ced7df

@aqua-haze

#f4f7f9

Shade Palette

We only use one shade; @white, which is either used as a background-color or a color. When used as a color, it can be coupled with an opacity variation.

@white

#fff

State Palette

Our state palette includes three colors used to describe the state of a given object.

We use @shamrock as the background-color at 20% or the color of any object that has a --state-success.

We use @saffron as the background-color at 20% or the color of any object that has a --state-warning.

We use @torch-red as the background-color at 20% or the color of any object that has a --state-error.

@shamrock

#2fd566

@saffron

#f1cb3a

@torch-red

#ff1e1e