Style Guide 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. Each grid row must contain parts that add up to one whole. 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. This is an example of a full-width grid (note: turn off the sidebar): Colors Typography Buttons
Writing for Accessibility | MailChimp Content Style Guide We’re always working to make our content more accessible and usable to the widest possible audience. Writing for accessibility goes way beyond making everything on the page available as text. It also affects the way you organize content and guide readers through a page. We write for a diverse audience of readers who all interact with our content in different ways. As you write, consider the following: Would this language make sense to someone who doesn’t work here? Many of the best practices for writing for accessibility echo those for writing technical content, with the added complexity of markup, syntax, and structure. Avoid directional instructions and any language that requires the reader to see the layout or design of the page. Yes: “Select from these options,” (with the steps listed after the title)No: “Select from the options in the right sidebar.” Headers should always be nested and consecutive. Put the most important information first. Each browser handles alt tags differently.
Voice and Tone | MailChimp Content Style Guide One way we write empowering content is by being aware of our voice and our tone. This section explains the difference between voice and tone, and lays out the elements of each as they apply to MailChimp. To learn more about how we adapt our tone for different situations, check out our Voice and Tone guide. What’s the difference between voice and tone? Your tone also changes depending on the emotional state of the person you’re addressing. The same is true for MailChimp. MailChimp’s voice is human. One way to think of our voice is to compare what it is to what it isn’t. Fun but not sillyConfident but not cockySmart but not stodgyInformal but not sloppyHelpful but not overbearingExpert but not bossyWeird but not inappropriate MailChimp’s tone is usually informal, but it’s always more important to be clear than entertaining. MailChimp has a sense of humor, so feel free to be funny when it’s appropriate and when it comes naturally to you. Active voice Use active voice.