A good style guide

June 19, 2013 Aaron Lawrence

A good style guide is similar to a recipe for baking a cake. The goal is to break down design attributes in a simple format that bridges the beginning stages of the design to development. Here at pivotal we don’t create fancy spec documents but rather a simple break-down of ui elements in one easy recipe:

Break down your type sizes in categories:
• H1 large 34 pt-size
• H2 medium 21 pt-size
• H3 small 13 pt-size
• A1 paragraph 10 pt-size)

Color Guide:
• Call-out the first and secondary color choices
• Show the Hex and RGB specifications next to each specific color swatch

Forms:
• Communicate the states and their attributes
If your worried about a “inner shadow,” show a screen shot of your photoshop inner shadow dialog window.
(this will give developers an ideas of what the pixel implementations are)

Buttons:
• Communicate the states and their attributes
• Call out any subtle gradients or strokes

Background:
• Noise or subtle textures

Stop and capture these attributes during early phases of the visual design process and stay consistent as you move throughout or else your cake will taste like eggs.

About the Author

Biography

More Content by Aaron Lawrence
Previous
Pivotal Contributes Open Source Plugins for New Relic’s Pluggable Monitoring and Management Platform: RabbitMQ and Web Server
Pivotal Contributes Open Source Plugins for New Relic’s Pluggable Monitoring and Management Platform: RabbitMQ and Web Server

Smart development teams at SoundCloud, Zendesk, and Atlassian use New Relic for application performance mon...

Next
Dealing with Eventual Consistency in the AWS EC2 API
Dealing with Eventual Consistency in the AWS EC2 API

The following is a Cloud Foundry technology blog from engineer Martin Englund Within the Cloud Foundry BOSH...

Enter curious. Exit smarter.

Register Now