Folders & Layouts

Folders  

There are three types of designs for folders in Windows XP: special folders, soft barrier pages, and generic webviews

Special Folders

Special folders, such as My Music and My Pictures, are visually distinguished by the unique design of the special task box at the top of the left pane and a large watermark in the right side of the folder. All graphics are stored as 32-bit .BMP files.

The large watermark in the bottom right of the folder is 150x150 pixels. It's designed to be anchored to the bottom of the page. Tint the image blue (R71G94B148) and screen back to about 12% opacity with an alpha channel.

Example of the My Music special folder

The special task box contains:

1. One 32x32 pixel icon to the left of the header.
2. A watermark in the bottom right of the special task box. Tint the image blue (R71 G94 B148) and screen back to about 12% opacity with an alpha channel.
3. The header font is Tahoma Bold, 8 point, white
4. Body font is Tahoma, 8 point, R33 G93 B198

Example of a special task box

Soft Barriers

The soft barrier pages contain a large watermark of the folder's icon in the bottom right measuring 300x300 pixels. It's designed to be anchored to the bottom of the page.

The title text in the soft barrier page is Franklin Gothic Medium 21 point, R214 G223 B245.

The body text is Franklin Gothic Medium 14 point, white.

To create the watermark in Adobe Photoshop:

1. Use a 300x300 image
2. Set the opacity to 15%
3. Tint the image applying this colorization: Hue 222, Saturation 0, Light 0
4. Set the input levels to 40, 100, 255

Example of a watermark in a soft barrier page

Generic webviews

Any folder that isn't a special folder and doesn't have a soft barrier page is a generic webview. A generic webview has task boxes in the left panel. The header font is Tahoma Bold, 8 point, R33 G93 B198.

Example of a generic webview task box.

Letterbox Layouts

A letterbox style layout is used for unique full-screen pages in the initial user experience. Two examples of this are the setup screen and the Welcome screen below. These layouts are characterized by dark blue horizontal strips framing a rich blue background. The background contains a soft glow and there are 2 horizontal accent gradients of white at the top and orange at the bottom.

White horizontal accent gradient: (from left to right)
R0 G51 B153 to R140 G170 B230 to R0 G51 B153

Orange horizontal accent gradient: (from left to right)
R62 G53 B71 to R53 G157 B53 to R171 G48 B171

In addition you can use a 1 pixel vertical line to visually separate content. This line is (from left to right):
R90 G126 B90 to R126 G222 B126 to R220 G255 B220

Example of the Welcome screen

Example of a screen in the set up experience