Online Styleguides

What is a style guide?

A style guide is a structured presentation of design principles. Style guides do exist longer than the web. They are used to permanently capture the appearance of products, printed materials, or digital applications.

But a style guide can also be used in conjunction with a design system. In this case, it effectively represents the "shop window" of a store and gives its visitors an overview of the entire range of existing design elements - it acts as a "front end".

In the backyard (or "backend") of the store is the workshop. The people who work there are called designers and developers. They assemble the products that are shown in the shop window from many individual parts. To prevent the products from becoming unnecessarily expensive, they use templates and modules that they assemble according to certain patterns.

AtomicKitchen: functionality of backend and frontend

What is the difference between a style guide, design system, and a pattern library?

A design system often constitutes the basis for a style guide. As mentioned earlier, a style guide can be viewed as a visual representative of a design system. If a style guide also contains a library of ready-to-use components, this is called a «pattern library».

AtomicKitchen combines the advantages of a modular and easily scalable design system, a well-organized style guide and a practical pattern library in a single solution.

This password-protected system is available to you 24 hours a day, can be operated both online and offline, and displays your design pixel-perfectly and 100% responsive.

You can search for individual elements, copy their HTML or CSS code, or download assets such as web fonts or icons. Even complete page templates (with HTML/CSS and JS) can be provided in the style guides.

Individual creation of style guides & corporate design manuals

As an experienced partner in building online style guides and corporate design manuals, we can also develop your company a custom design system that precisely meets your requirements. Contact us. We'll be happy to show you how you can integrate AtomicKitchen into your workflow, whether for a planned website relaunch or to manage your brand guidelines.