You learn them and you love them. Most designers would say that sarcastically but style guides actually promote creativity rather than stifle it.

Grommet’s open source style guide, built using Sketch, creates a baseline for designers (and ambidextrous developers) to mold their ideas and applications. By referencing the styles, we not only provide consistency in every app, but we also supply flexibility to create a cohesive brand identity. Some designers may call these guides “constraints,” but Grommet’s guidelines are meant to do just that — guide. If you look closely, you’ll notice each element is crafted to work together seamlessly. That principle is what makes our styles flexible and also results in effortless theming in Grommet.

Carrie Cousins from Design Shack reminds us that thinking inside the box may be a key “to consistency that helps brands establish visual identity and guide voice.” Learning someone else’s design process can profoundly influence your design, regardless of the style.

Below I’ll walk through some of Grommet’s “keys to consistency” in our open source style guide.

Text Styling

“Is black text actually black?” “Why do you use dark grey (#333) instead of black (#000) for your Primary text color?” If you look at dark items in nature, there are not many objects that are 100% black. Your shadow, tires on a car, or the night sky, none are pure black. Forcing an app to incorporate too much black can be overwhelming since it’s not “natural” to the human eye and can make it harder to read. [1]

Color Palette

The Grommet purple provides uniqueness amongst its sister frameworks, since we have integrated what is normally a secondary color into our “Call to Action.” Purple gives a great mix between its parent colors, red and blue, by incorporating red’s stimulation and blue’s calm. Purple is said to have “the power to uplift, calm nerves and encourage creativity.” [2] This makes purple a universal, all-inclusive color — and it’s not the common-played blue!

Buttons

Grommet’s buttons have rounded corners to allow for quick visual processing of the button and the text inside. Rounded containers have corners that point inward toward the middle of the button, putting the user’s focus on the text inside. Sharp corners point outward, putting less focus on the inside text and forcing the user to process the information longer.[3] Since buttons are fundamental, regularly occurring objects in apps, they need to be easily processed by the user’s eye.

Conclusion

We hope the Grommet open source style guide will allow you to kick off your next project knowing we have already infused many design principles in the guidelines by default. By building on to our foundation, you can ensure app consistency and the design freedom to focus on what your business needs.

And remember, you can always contribute! Let us know what you think in the comments.

Footnotes

  1. “Design Tip: Never Use Black.” Ian Storm Taylor. N.p., n.d. Web. 12 Jan. 2016. http://ianstormtaylor.com/design-tip-never-use-black/

  2. “Psychology of the Color Purple and What It Means for Your Business | Fatrabbit CREATIVE.” Website Design | Graphic Design Agency in Morris County NJ | Fatrabbit CREATIVE. N.p., n.d. Web. 12 Jan. 2016. http://www.fatrabbitcreative.com/blog/psychology_of_the_color_purple_and_what_it_means_for_your_business

  3. “Why Rounded Corners Are Easier on the Eyes – UX Movement.” UX Movement – Articles on User Experience Design. N.p., n.d. Web. 12 Jan. 2016. http://uxmovement.com/thinking/why-rounded-corners-are-easier-on-the-eyes/