less/base/variables.lessOur 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.
#168eea
#137ac9
#0f63a4
Our brand palette is used to describe the various brands represented in the Buffer product.
#4a484c
#3b5998
#dd4b39
#007bb6
#bd081c
#55acee
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.
#323b43
#59626a
#666c72
#ced7df
#f4f7f9
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.
#fff
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.
#2fd566
#f1cb3a
#ff1e1e