Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

  • Blog Navigation
A good style guide

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

• 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)

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

• 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.

  1. Nina Mehta says:

    Love the baking metaphor. You’re also right about capturing the attributes during early phases of the process and staying consistent throughout. A little work up-front goes miles down the road.

    Great post!

Post a Comment

Your Information (Name required. Email address will not be displayed with comment.)

* Copy This Password *

* Type Or Paste Password Here *

Share This