In Search of a Living Design System [Mar 28, 2015] – This led to my “zomg!” moment. I realized that Sass + Style Guides = Awesome. I no longer needed to update color swatches when colors changed because it used the same variables – so swatches would already change automatically. It became a sandbox for new components and elements. I’d design in the browser from within the style guide itself, and document it in place. This I found would kill 2 birds with 1 stone (create the new object and already have it documented in the style guide). Then there’s no waiting until later (which never happens). It also became a quality assurance test; if it was broken in the style guide, it’s most likely broken in the app since it’s all the same code. Anytime I refactor something, I check the style guide to make sure everything’s still working & looking the way their supposed to.
Writing an Interface Style Guide [A List Apart Article – Jun 03, 2008] – Interface design standards enable brand stewardship. Commonly documented in a design “style guide,” these standards inform clients and content editors of branding guidelines for typography, whitespace, color, etc. The design style guide provides a reference in which developers can describe the way the interface is intended to look, and helps designers to be consistent as the interface is updated so that, in turn, the interface continues to feel consistent. Some design style guides are simple and straightforward, including only basic typography and color styles; others are informative and somewhat complicated, and go into great detail in defining all aspects of brand guidelines. Like the interface itself, a great design style guide should be straightforward, intuitive, and informative. It should provide detailed information, yet be clear and concise. The following are important elements and relevant details to include.