Kalastatic is a prototyping framework and static site generator.


At Kalamuna we use Kalastatic to put into practice atomic web design principles to produce a living styleguide/component library that can be used to guide back-end implementations in a framework-agnostic approach.

It integrates tightly with Drupal 7 and 8, effectively sharing twig templates between the styleguide, prototype and the CMS.

Kalastatic serves as a point of convergence between front-end development, back-end development, and content strategy. Ultimately it facilitates putting design first, and this in front users for testing, and stakeholders for meaningful and timely feedback.





Agency, PMs, Account Managers

User Experience

Frontend Dev

Content Strategist

Backend developers



What's a styleguide?

A web Styleguide offer a way of ensuring consistency between brand, design and code. Herein we are looking documenting every component and its code on the site in one place to ensure "same-pagey" communications between designers, front end developers and developers.

The pattern portfolio expresses every component and layout structures throughout the site. It articulates the atomic design structure, and is used to illustrate the project’s shared vocabulary.

The Kalastatic Styleguide

Website styleguides serving both as pattern library, but can also be serve as brand styleguide, to ensure consistency and conformancy in the use of brand assets. The styleguide not only ensures that new front end development can follow established patterns, but also facilitates the creation of on brand ancillary digital properties. Its compiled CSS and JS assets can be referenced and cosumed by third party services as well to create harmonious expressions across multiple systems.

Kalastatic uses kss-node as the basis for its styleguide.

Kalastatic uses the KSTAT-KSS-Builder to generate the styleguide, which extends some of the documenation features to make it better suited for documenting colors, and other brand-related style concerns.


To provide working, responsive prototypes, we use metalsmith and a bevvy of other tools

Prototyping is most useful to consider the components with layouts, side by side with other elements. Where the styleguide documents components in isolation, prototyping helps us see all the bits in context, and even develop behaviors (js) and other integrations, before we dive into CMSs and app-frameworks.

Prototypes can be created at will, and draw upon the family of defined components in the system to build out pages, complete with custom content.