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.
