Introduction

As the Buffer team grows, it will become increasingly important to maintain a consistent style and visual language across all areas of the product. To do this, we have built the following style guide to document reusable components for faster product development.

This style guide is based largely on the principles of atomic design. The key idea of this methodology is that small, independent - atomic - parts, can be combined into larger molecular structures. Molecular structures can be combined into larger organisms, which can then serve as the foundation for templates and full pages.

Grid

At the moment we only utilize the grid system on static (non-app) pages. For the sake of simplicity, the grid is built using larger chunks that provide a few simple ways to create diverse page layouts. The page can be divided into fifths, fourths, thirds and halves - and any combination of these.

Each grid row must contain parts that add up to one whole. For example, one-fourth + one-half + one-fourth. Reference the styleguide.php file to see an example of the grid system in use.

Nested Grids

Grids can be nested, too!

Full-Width Grids

You can add a full-width class modifier to a <section class="grid"> in order to escape any containers and margins. An example of this lives on the transparency dashboard.

This is an example of a full-width grid (note: turn off the sidebar):

Colors

Using colors consistently brings a sense of familiarty and unity to a product. Buffer's color scheme aims to be clear, unintrusive and friendly.

The color grid below lists the hex value and CSS variable for each respective color. When writing CSS for production code, please use the LESS variables when possible. For further reference, see the variables.less file.

Typography

We almost exclusively use Open Sans as the base typeface across the entire Buffer product. Maintaining typographic clarity and hierarchy is important; here is a showcase of different ways to structure content:

Heading Level One

Heading Level Two

Heading Level Three

Heading Level Four

Heading Level Five

Heading Level Six

This is a lead paragraph. It might be used as a longer-form tagline or subheading for a page or content section. It has a slightly larger font size and line-height.

This is a normal paragraph. On static pages, it's designed for readability and optimizing the number of characters per line. The font size is larger to account for longer chunks of text.

This is a blockquote. While rarely used, it's designed to stand out from the main body of content and provide hierarchical contrast on the page.

• This is an
• unordered list
• which can be used to
• ...you know, make lists

• This is a blank
• unordered list
• which can be used to
• ...you know, make lists

• Inline
• lists
• are
• possible
• too!

1. This is an
2. ordered list
3. which has numbers in front of each item
4. because counting is cool

Buttons

Buttons are styled and controlled in buttons.less. We aim to keep all buttons across the app as consistent as possible. Any implementations of buttons should aim to follow a systematic class naming system, detailed below:

Inputs

Creating forms can be tricky - this will be a toolkit to help build fast, flexible forms to be used anywhere in the product. Coming soon.

Notifications

Buttons are styled and controlled in buttons.less. We aim to keep all buttons across the app as consistent as possible. Any implementations of buttons should aim to follow a systematic class naming system, detailed below:

Forms

Creating forms can be tricky - this will be a toolkit to help build fast, flexible forms to be used anywhere in the product. Coming soon.

Modals

We use modals heavily throughout the product to help users focus on single-tasks (like changing billing information or adding a team member). Modals should maintain a consistent style to provide a unified experience for users.