Opattern is a design system and style guide for everyone who creates Opower products.

Whether you’re working with pixels, code, or words, it’s helpful to have design patterns—they save time, keep us consistent, and create a better user experience. With Opattern, all of these patterns are in one place.


See the look and feel we’re going for and get specs for colors, buttons, charts, and more.


Add Opattern to your project as a Ruby gem or a Node module. You’ll have access to a set of classes and mixins.


See writing guidelines and voice/tone examples, plus a handy reference for grammar and style.

The Opattern design system draws inspiration from a lot of different sources, including our UX design principles and behavioral science techniques. The result is a visual language that feels memorable, credible, and meaningful.


Opower products are clear, focused, and leave a lasting impression.

Bold color, strong hierarchy, and delightful animation help things stand out from the fray.


We want to tell a cohesive and simple story based on facts.

We rely on recognizable interaction patterns and a consistent approach to displaying data and visualizing information.

Meaningful visual metaphors

We want our interfaces to feel intuitive and meaningful.

We use a clean, flat aesthetic with occasional allusions to real-world elements. We aim to be intentional with design choices.

Learn more about our approach—check out Opower’s UX design principles.