Living Style Guides


Style Guide Screenshots

Style guides have been around as a reference source in web design for a long time. They grew out of similar documents used in print design for branding and visual identity. However, In recent years style guides have progressed from the static, flat documents of the print world to something much more interesting.


Style guides now go by many names: pattern libraries, design systems, living style guides and more. The underlying trend of these documents, whatever the name, is that they integrate design and code. This means that the guide becomes dynamic, collaborative and complex. Static designs are necessary to lay the foundation, but can’t fully communicate a web experience. The guide exists as a web page and so naturally gives that experience.


For Designers

At KWALL style guides serve a number of specific functions. For designers they insure that all members of the design team have a single point of common reference. It also becomes possible for the designers to create more complex interactions like hover effects, animations, transitions and slideshows.


For Developers

The style guide also serves as a hand-off to our developers. The production site and the style guide share a codebase. This means that when the production site is initially set up, all of the basic formatting is already done. The developers don’t have to reinterpret the mockups, the code is already written. Internally this smoothes the transition from design to development.


For Clients

Style guides also benefit the client by offering a central location to collect and document the patterns used throughout the website. This can be referenced by content creators and stakeholders when adding new pages, creating subsites and generating collateral material. The style guide also can serve to better understand the feel of the website. The guide is a final step in the approval process to make sure everything not covered in the static designs is perfect.


Having a visual reference source has become necessary for large, complex websites. Modern, dynamic style guides are able to move beyond simple reference into a living document that defines more complex interactions and even gives a jump start to development. At KWALL it’s a collaborative document, both internally and externally, that keeps everything moving in a unified direction.