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.
Designers
See the look and feel we’re going for and get specs for colors, buttons, charts, and more.
Engineers
Add Opattern to your project as a Ruby gem or a Node module. You’ll have access to a set of classes and mixins.
Writers
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.
Memorable
Opower products are clear, focused, and leave a lasting impression.
Bold color, strong hierarchy, and delightful animation help things stand out from the fray.
Credible
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.
