If you’re following my Twitter stream, you know that over the last few days i have been working to bring the Office Blue skin of Substance look-and-feel closer to the original visuals. The original visuals for Office 2007 built-in skins are comprised of hundreds of hand-crafted images and around 1500 colors, and are quite a challenge to reproduce even with the rich skinning APIs of Substance.

Here is a screenshot of the old Office Blue skin:

While the overall direction is right (washed blues + a combination of yellow / orange colors for active states), it was quite off in both hue and saturation.

Here is how it looks in the latest 5.1dev drop of Substance (code-named Panama):

Office Blue skin is by far the most complicated Substance skin, and uncovered deficiencies in the core library as far as the skinning flexibility goes. The most visible change is breaking the API of highlight painters to add two new parameters (for passing the border color schemes). All the other changes are additive, bringing more control over the definition of color scheme bundles.

You can now associate the following three new types of color schemes with each component state (see the SubstanceColorSchemeBundle and OfficeBlue2007Skin for more details):

• Color schemes for marks (check marks, arrow icons, …)
• Color schemes for tabs (see the white fill of the selected tab)
• Border color schemes for tabs (run the WebStart demo below and move the mouse over the selected tab to see the orange glow)

At the present moment, the Office Blue skin is defined by fifteen different color schemes that cover thirty six different component state configurations. Additional color schemes may be added later to further tweak the visuals.

As with Substance 5.0, performance is the major factor. Adding the new color scheme kinds and component state combinations introduces about 0.8% performance degradation to the skins that do not use them, and about 2.1% to the skins that do. I do believe that the new fine tuned control over defining the visual aspects of your custom skins is worth it, and i will try to bring the numbers down until the final 5.1 release (set to coincide with the final 4.0 release of Flamingo).

The final piece is a new visual tool to assist in defining Substance color schemes based on the existing designs. It is called Jitterbug and will be properly introduced next week. You can create a new color scheme with Jitterbug in under a minute, and all fifteen color schemes of the new Office Blue skin were created with it.

To see the new Office Blue skin in action on the Flamingo ribbon component, run the following WebStart demo:

If you want to test new visuals and APIs, you will need to take the latest 5.1dev drop of Substance (code-named Panama).