Welcome to the Windows
XP Visual Guidelines
We are excited to share with you the
new look and feel of Windows XP.

WelcomeWhat's New
About the Design
Fonts
Colors
Icons
Controls
Folders & Layouts
FAQ

We changed the look of Windows to
make your computer more exciting
to use. Say goodbye to Windows
grey and say hello to fresh colors,
soft curves, rich gradients andfriendly typography and imagery.
The Windows XP look is based on
simplicity, color, freshness andexcitement. We believe that visualdesign is integral to the user
experience. We hope theseguidelines help you generate
excitement about Windows XP inyour efforts.

The Windows XP Design TeamSee our Frequently Asked Questions
page.

About these guidelines
This is a graphics-intensive site, intended for viewing in 16bit or 24-bit color. Thanks for your patience in waiting forthe 24-bit graphics to appear, and for adjusting yourmonitor to get the full effect.

This document is provided for informational purposes only
and Microsoft makes no warranties, either express or
implied, in this document. Information in the document,
including URL and other Internet Web site references, issubject to change without notice. Portions of this document
specify software that is still in development. Some of theinformation in this documentation may be inaccurate or may
not be an accurate representation of the functionality of
final documentation or software. Microsft assumes noresponsibility for damages that might occur directly or
indirectly from the inaccuracies.
Site last updated August 1, 2001

©2001 Microsoft Corporation. All rights reserved. Terms of Use

What's New in the Windows XP User
InterfaceWelcome Screen

WelcomeWhat's New
Welcome Screen
Start Menu
Control Panel
Film Strip View
Group View
Learn About
Color Schemes
About the Design
Fonts
Colors
Icons
Controls
Folders & Layouts
FAQ

The Welcome screen shows the name of every user who
has an account on that computer. The screen appears when
you start the computer and when you switch users. Users
can pick images, also called tokens, to identify themselves.
Note: if your computer belongs to a domain, as is common
in many office networks, you won't see this new log-on
screen.

Welcome screen

Start Menu
Click on the Windows XP start button and you'll discover a
new Start menu that lets you easily access the most useful
items on your computer. The left side of the menu lists the
programs you use most frequently. This area includes
space at the top to "pin" your favorite programs so they
are always readily available.
The top of the Start menu shows the name and token of thecurrent user. The Log Off and Shut Down buttons at thebottom provide highly visible access to those features.

Start Menu

Group view
With Windows XP, you can view the contents of yourfolders by various categories based on file properties. To
try this feature, click the View menu, select "Arrange Icons
by", then select "Show in Groups". This feature lets you
group files by name, size, file type, or other unique
categories depending on the folder you're in. For example,
you can view the files in the "My Music" grouped by artist,
length, or year of release. Each group is separated by agroup title and a blue line.

Example of a Group view

Filmstrip View
Filmstrip view shows you thumbnail previews of picturesand lets you zoom in, zoom out, and change orientation ofeach image. To see this feature, open My Pictures or any
folder that is primarily used for pictures.

Example of a Filmstrip view

Control Panel
The Control Panel in Windows XP has been simplified tohelp you more easily find settings you're looking for.
Control panels are grouped into categories. Picking acategory displays a list of common tasks from the control
panels in that category. You can click the control panels
themselves to perform less common tasks.

Control Panel

Learn About
Learn About topics are available in the User Accounts
control panel in Windows XP Home Edition. These topics
provide easily accessible help that's relevant to yourcurrent task.

Example of a Learn About

Color Schemes
The new visual style of Windows XP comes in 3 different
color schemes to give users you a variety of choices forenjoying their your user experience. You can change cColor
schemes can be changed to match your mood, personality
or activity. In addition to the Windows XP provides adefault Blue color scheme there are and two alternativecolor schemes, Olive Green and Silver.
How to change the Color Scheme
1. Right-click on the Desktop and click "Properties" inthe shortcut menu to open the "Display Properties"
dialog.
2. The "Display Properties" dialog appears.
3. Click "Appearance".
4. Under "Color Scheme", choose Default (blue), Olive
Green, or Silver.
5. Click OK.
Blue color scheme characteristics
The default Blue color scheme is fresh, vivid and engaging.
This color scheme is the signature of the product and has
the essence of the new Windows XP.

Olive Green color scheme characteristics
The Olive Green color scheme is comforting, natural andfresh. This color scheme has the feeling of home and isdesigned to be more neutral and soft toned.

Silver color scheme characteristics

The Silver color scheme is metallic and fresh. This color
scheme is characterized by its precision sculpted look andneutral color scheme.

©2001 Microsoft Corporation. All rights reserved. Terms of UseAbout the Windows XP
Design
The new look of Windows XP is designed
to create a friendly and visually simpler
user experience.
WelcomeWhat's New
About the Design
Fonts
Colors
Icons
Controls
Folders & Layouts
FAQ

There are four key adjectives that
describe the Windows XP look and feel:
fresh, desirable, colorful, and simple.
FreshRich color, soft curves and subtle
gradients breathe life into Windows. Highquality graphics and new icons add
sophistication and personality. Windows
has been completely revamped to makeyour computer experience moreenjoyable.
Desirable
Texture and light give the interface amore tactile feel. The title bar and taskbar
have a soft plastic feel and colorful
buttons light up on mouseover to invite
you to click on them. Subtle threedimensional buttons and controls use
color and light to provide better feedback.
Once you use the Windows XP look andfeel, you'll never want to go back toWindows Classic.
Colorful
A rich color palette of blues with accentsof green, red and yellow define thedefault look of Windows XP. Subtle
gradients and glows give depth andrichness to backgrounds and toolbars.
Color is used to improve discoverability
and convey meaning of buttons such as

the green Start button and red Close
button. Say goodbye to Windows grey andsay hello to smart, friendly colors.
SimpleThe Windows XP look is designed toenhance ease of use. Improved
typography and layout provide hierarchy
and clarity to help users find tasks.
Colored buttons provide visual cues tocommunicate important system functions.
Improvements in visual design andinterface design combine to make asimpler Windows.

©2001 Microsoft Corporation. All rights reserved. Terms of Use

FontsTo improve visual interest and hierarchy, Windows XP
uses some new typefaces and a variety of type sizes. To
better support our Microsoft brand, we've introduced
Franklin Gothic into the Windows XP user interface.
WelcomeWhat's New
About the Design
Fonts
Colors
Icons
Controls
Folders & Layouts
FAQ

Franklin Gothic is used
only for text over 14
point. Franklin Gothic isoften used for headers,and should never beused for body text.
Tahoma is used as thesystem's default font.
Tahoma should be used
at 8, 9 or 11 point sizes.
Verdana is used only fortitle bars of tearoff/floating palettesVerdana Bold, 8 point.
Trebuchet MS is used
only for the title bars of
windows- Trebuchet MS
Bold, 10 point.
Franklin Gothic

Example of Franklin Gothic Medium 21 point
used as a title in the Control Panel.

Tahoma

Example of Tahoma 9 point used as body copy in a Learn About help
topic.

Verdana

Example of Verdana Bold 8 point
as the title in a task box in the
My Pictures folder.

Trebuchet MS

Example of Trebuchet MS Bold 10
point in the My Pictures title bar.

©2001 Microsoft Corporation. All rights reserved. Terms of Use

Colors

WelcomeWhat's New
About the Design
Fonts
Colors
Icons
Controls
Folders & Layouts
FAQ

Color is integral to achieving the fresh, friendly and simple
experience of Windows XP. The Windows XP look ischaracterized by an energetic blue complimented with red,amber and green. Gradients, glows and textures give life anddimension to Windows XP colors. Color helps guide users
through their experience. For example, the red close button
helps improve discoverability of how to close a window.
Below is a sample of the colors used in Windows XP. Because
the Windows XP look uses many color gradients, werecommend you refer to the actual user interface to see therange of color values used.

Base colors
R: 255, G: 204, B:
0
Hex: #FFCC00
R: 255, G: 153, B:
51
Hex: #FF9933
R: 227, G: 92, B:
47
Hex: #DE5C2F
R: 230, G: 234, B:
216
Hex: #E6EAD8

R: 140, G: 170, B:
230
Hex: #8CAAE6
R: 100, G: 135, B:
220
Hex: #6487DC
R: 0, G: 51, B: 153
Hex: #003399
R: 19, G: 146, B:
13
Hex: #13920D

Control colors
R: 242, G: 201, B:
119
Hex: #F2C977

R: 127, G: 157, B:
185
Hex: #7F9DB9

R: 230 G: 139, B:
44
Hex: #E68B2C

R: 33, G: 120, B:
224
Hex: #2178E0

R: 128, G: 128, B:
128
Hex: #808080

R: 18, G: 139, B:
231
Hex: #128BE7

R: 161, G: 161, B:
146
Hex: #A1A192

R: 77, G: 159, B:
225
Hex: #4D9FE1

R: 184, G: 180, B:
163
Hex: #B8B4A3

R: 131, G: 166, B:
244
Hex: #83A6F4

R: 199, G: 197, B:
178
Hex: #C7C5B2

R: 183, G: 211, B:
252
Hex: #B7D3FC

R: 201, G: 199, B:
186
Hex: #C9C7BA

R: 210, G: 236, B:
255
Hex: #D2ECFF

R: 235, G: 235, B:
238
Hex: #EBEBEE

R: 38, G: 124, B: 8
Hex: #267C08

R: 0, G: 60, B: 165
Hex: #003CA5
R: 8, G: 46, B: 162
Hex: #082EA2
R: 0, G: 70, B: 213
Hex: #0046D5
R: 49, G: 106, B:
197
Hex: #316AC5

R: 130, G: 130, B:
130
Hex: #828282
R: 34, G: 192, B:
32
Hex: #22C020
R: 155, G: 234, B:
156
Hex: #9BEA9C

Window Frame and Taskbar colors
R: 8, G: 27, B: 203
Hex: #081BCB
R: 73, G: 119, B:
180
Hex: #4977B4
R: 0, G: 98, B: 234
Hex: #0062EA
R: 20, G: 165, B:
244
Hex: #14A5F4
R: 142, G: 182, B:
217
Hex: #8EB6D9

R: 93, G: 179, B:
255
Hex: #5DB3FF
R: 0, G: 141, B: 0
Hex: #008D00
R: 49, G: 164, B:
49
Hex: #31A431
R: 94, G: 219, B:
94
Hex: #5EDB5E

Icon colors
R: 155, G: 102, B:
0
Hex: #9B6600

R: 0, G: 102, B:
204
Hex: #0066CC

R: 204, G: 155, B:
0
Hex: #CC9B00

R: 0, G: 155, B:
255
Hex: #009BFF

R: 255, G: 204, B:
0
Hex: #FFCC00

R: 155, G: 204, B:
255
Hex: #9BCCFF

R: 255, G: 255, B:
0
Hex: #FFFF00

R: 204, G: 255, B:
255
Hex: #CCFFFF

R: 255, G: 255, B:
155
Hex: #FFFF9B
R: 255, G: 204, B:
102
Hex: #FFCC66
R: 255, G: 51, B: 0
Hex: #FF3300
R: 152, G: 0, B: 0
Hex: #980000
R: 102, G: 0, B: 0
Hex: #660000
R: 0, G: 51, B: 152
Hex: #003398

R: 0, G: 102, B: 0
Hex: #006600
R: 255, G: 157, B:
51
Hex: #31A431
R: 102, G: 204, B:
51
Hex: #66CC33
R: 155, G: 255, B:
102
Hex: #9BFF66
R: 204, G: 255, B:
204
Hex: #CCFFCC

Welcome screen colors
R: 255, G: 153, B:
51
Hex: #FF9933

R: 62, G: 53, B:
171
Hex: #3E35AB

R: 200, G: 222, B:
255
Hex: #660000

R: 90, G: 126, B:
220
Hex: #5A7EDC

R: 0, G: 51, B: 153
Hex: #003399

Folder colors
R: 1, G: 72, B: 178
Hex: #0148B2
R: 40, G: 91, B:
197
Hex: #285BC5
R: 85, G: 130, B:
210
Hex: #5582D2

R: 100, G: 135, B:
220
Hex: #6487DC
R: 140, G: 170, B:
230
Hex: #8CAAE6
R: 214, G: 223, B:
245
Hex: #D6DFF5©2001 Microsoft Corporation. All rights reserved. Terms of Use

IconsThis section walks you through the process ofdesigning and creating Windows XP-style icons.

WelcomeWhat's New
About the Design
Fonts
Colors
Icons
Step 1
Step 2
Step 3
Step 4
Step 5Toolbar Creation
AVI Creation
Controls
Folders & Layouts
FAQ

The Windows XP icon style is all about fun, color andenergy. Windows XP icons include a 32-bit version
that provides smooth edges -no more jaggies! Eachicon is rendered in a vector program and thenmassaged in Photoshop to create a beautiful image.
This section is intended primarily for graphic
designers. We strongly recommend you work with adesigner to create your images, preferably one withexperience in using vector or 3D programs.
Characteristics of Windows XP-style Icons
1. Color is rich and complementary to the Windows XP look.
2. Angle and perspective provides a dynamic energy to theimages.
3. Edges and corners of elements are soft and slightly rounded.
4. Light source is coming from the upper left-hand corner withthe addition of an ambient light to illuminate other parts of
the icon.
5. The use of gradients provide dimension and give the icon aricher appearance.
6. A drop shadow provides contrast and dimension.
7. Outlines provide definition.
8. Everyday objects have a more modern consumer look suchas computers and devices.
Icon Sizes
There are 4 sizes of Windows icons- 48x48, 32x32, 24x24 and16x16 pixels.
We recommend that your icon contains these 3 sizes:● 48x48 pixels● 32x32 pixels● 16x16 pixels

Icons on the right side of the Start menu are 24x24 pixels. You
need not include this size in your icons.

If you are creating icons for a toolbar, the Windows standard
sizes are 24x24 and 16x16 pixels.

Icon Color Depth Support
Windows XP supports 32-bit icons which are 24-bit images
with an 8-bit alpha channel. This allows icons to display withsmooth edges that appear to blend into any background.
Each Windows XP icon should contain these 3 color depths tosupport various monitor display settings:● 24-bit with 8-bit alpha (32-bit)● 8-bit (256 colors) with 1-bit transparency● 4-bit (16 colors) with 1-bit transparency

Color PaletteThese are the main colors that are used in our icons:
R: 153, G: 102, B:
0
Hex: #996600

R: 102, G: 102, B:
153
Hex: #666699

R: 204, G: 153, B:
0
Hex: #CC9900

R: 51, G: 51, B:
102
Hex: #333366

R: 255, G: 204, B:
0
Hex: #FFCC00

R: 0, G: 51, B: 153
Hex: #003399

R: 255, G: 255, B:
0
Hex: #FFFF00
R: 255, G: 255, B:
153
Hex: #FFFF99

R: 0, G: 102, B:
204
Hex: #0066CC
R: 0, G: 131, B:
215
Hex: #0083D7
R: 62, G: 154, B:
222
Hex: #3E9ADE

R: 255, G: 219, B:
157
Hex: #FFDB9D
R: 255, G: 204, B:
102
Hex: #FFCC66
R: 255, G: 153, B:
51
Hex: #FF9933
R: 255, G: 121, B:
75
Hex: #FF794B
R: 255, G: 51, B: 0
Hex: #FF3300
R: 153, G: 0, B: 0
Hex: #990000
R: 255, G: 204, B:
255
Hex: #FFCCFF
R: 204, G: 204, B:
255
Hex: #CCCCFF
R: 153, G: 153, B:
255
Hex: #9999FF

R: 0, G: 153, B:
255
Hex: #0099FF
R: 153, G: 204, B:
255
Hex: #99CCFF
R: 180, G: 226, B:
255
Hex: #B4E2FF
R: 222, G: 255, B:
255
Hex: #DEFFFF
R: 0, G: 102, B: 0
Hex: #006600
R: 0, G: 153, B: 0
Hex: #009900
R: 102, G: 204, B:
51
Hex: #66CC33
R: 153, G: 255, B:
102
Hex: #99FF66
R: 204, G: 255, B:
204
Hex: #CCFFCC

R: 102, G: 102, B:
204
Hex: #6666CC
R: 153, G: 153, B:
204
Hex: #9999CC
Angle and grouping of objects
This is the perspective grid that Windows XP-style icons use:

Not all objects work well displayed at an angle in the 16x16
size. For example, the following objects are usually shownstraight-on:
1. Document icons.
2. Icons that are symbols such as warning or information
icons.
3. 3. Icons that are not as recognizable at an angle or are
single objects, such as the magnifying glass.

If your icon includes overlapping secondary objects, you should
place them at an angle as well, with the exceptions for straighton icons described above. Consider also how your icons will beviewed as a set to help determine how to group objects.

Drop Shadows
Windows XP icons use a drop shadow to provide definition andadded dimension. This effect is added in Photoshop and is
described in more detail below.
To add the drop shadow to your images, double-click on theimage's layer in Photoshop and select Drop Shadow. Thenchange the angle to 135, Distance to 2 and Size to 2. The drop
shadow is black at 75% opacity.

Outlines
When illustrating Windows XP-style icons, add an outline to theimage to provide definition and ensure that the image works
well on different background colors.

Step 1: Conceptualize
When designing new icons, we recommend sketching yourideas out with pen and paper.
Here's an example of an initial sketch for the Windows XP My
Pictures icon:

Considerations when designing icons:1. Use established concepts where possible to ensure
consistency of meanings for the user.
2. Consider how the icon will appear in the context of youruser interface and how it might work as part of a set of
icons.
3. Consider the cultural impact of your graphics. Avoid
using letters, words, hands, or faces in icons. When you
must represent people or users, depict them as
generically as possible.
4. When you combine multiple objects into one image in an
icon, consider how the image will scale to smaller sizes.
We suggest you use no more than 3 objects in an icon.
For the 16x16 size, you can also consider removing
objects or otherwise simplifying the image to improverecognition.
Note: Only icons that Microsoft ships as part of Windows may
use the Windows flag logo. Don't use the Windows flag in youricons.
To support trademark and Windows branding guidelines, weare not using Windows flag icons with the exception of theWindows update icon.
Common Icons

Common Toolbar Icons:

Step 2: IllustrateTo illustrate Windows XP-style icons, we recommend using avector tool such as Freehand or Illustrator. Use the palette andstyle characteristics as outlined in the Icon Design Overview.
1. Illustrate your image using Freehand or Illustrator.
2. Create 3 sizes of the image. Because there will be a drop
shadow added to the image later, you should create 3
sizes that are around 46x46, 30x30 and 14x14 pixels.
3. Copy and paste the vector images into Photoshop.

Note: Photoshop is the recommended image creation tool
because the tool we use to create the .ico files, Gif Movie Gear,
offers a direct import of Photoshop files. Any image created in
Photoshop that uses the "RGB" mode has an alpha channel
attached. If there is transparency in the image or layer, thatchannel becomes meaningful for icon purposes.

Step 3: Creating the 24-bit images
After pasting your vector files into Photoshop, the next step is
to finalize the 24-bit images.
1. Once you've pasted your 3 sizes in Photoshop, check thereadability and resolution of your images, especially at
the 16x16 size. You may need to do some pixel-pushing.
If the 16x16 is not reading clearly, consider going backto Freehand to simplify the image at that size.
2. Add the drop shadow to your images by double-clicking
on the image's layer and selecting Drop Shadow. Thenchange the angle to 135, Distance to 2 and Size to 2. The
drop shadow is black at 75% opacity.

3. To merge the drop shadow and the 24-bit images
together, create a new blank layer. In the Layers menu,
select Merge Visible and merge the 3 layers together.

4. Create 3 new Photoshop files, one for each size: 48x48,
32x32 and 16x16 pixels. Copy and paste the appropriate
image. If an image's drop shadow gets cropped, you
should go back to Freehand and scale down the image
and follow the steps again.
5. Save each file as a .psd file. Do NOT merge the image
layer with the Background layer. It's helpful to include
the size and color depth in the file name.

Step 4: Creating the 8-bit and 4-bit images
Now that you have the 24-bit images ready to be made into 32bit icons, you need to create 8-bit versions. The 8-bit icons will
be displayed in any color mode lower than 32-bit.
The 8-bit versions will not have the 8-bit alpha channel. They
will need to have their edges cleaned up because there's noanti-aliasing, so their edges will be jaggy.
1. In Photoshop, duplicate your 24-bit image layer andrename the layer to 8-bit images.
2. Create a new blank layer and fill the layer with a darkcolor such as blue.
3. Merge the 8-bit image layer with the new layer.
4. Clean up the edges with solid colors, removing any antialiased pixels. Use consistent stair-stepping to makeyour jaggies less pronounced.
5. Check your image on a light background such as white tosee how the image looks.

6. Create 3 new Photoshop files for each size: 48x48, 32x32
and 16x16 pixels. Copy and paste the appropriate image.
7. Next you need to index the images down to 256 colors.
The 8-bit icons can have custom palettes.
a. Take your 48x48 image and fill the background color
with a unique background color that your image is
not using. Windows XP icons often use magenta(R255 G0 B255).
b.Go to Image>Mode>Indexed Color and select Flatten
Layers.

c. In the Palette dropdown, select Custom. In the
Custom dialog, click OK. Click OK in the IndexedColor dialog.
d.Save the file as a .psd file.
e. Save the other 2 size files using the samebackground color and applying the custom palette.
8. Save each file as a .psd file.
If you want your icons to look good on older versions ofWindows, provide 16 color versions of your icon.
1. Index your 8-bit images to the Windows 16 color palette.
2. Clean up your images using only the colors from the 16
color palette.
3. Use a black outline on the bottom and right edges of theimage.
4. Use a dark gray or dark color outline for the left and top
edges of the image.
5. Save the 3 sizes using the same background color. Be
sure that the background color isn't used in the image
because that's the color that will be the transparent
color.

Step 5: Creating the .ico files
Once you have all of your images, it's time to compile them into
an .ico file. To create 32-bit icons, we use a tool called Gif
Movie Gear (GMG). To get this tool, go to
www.gamani.com/foricons.
These steps will walk you through the process of creating atypical .ico file which has 3 sizes and 3 color depths.
1. You should have a total of 9 files- 3 sizes per color
depth:
48x48 at 24 bit
32x32 at 24 bit
16x16 at 24 bit
48x48 at 8 bit
32x32 at 8 bit
16x16 at 8 bit
48x48 at 4 bit
32x32 at 4 bit
16x16 at 4 bit
2. Open Gif Movie Gear (GMG) and simply drag each image
file into the window (or use File>Insert Frames). Each
image will become a frame.
3. When you drag the 24-bit images (or any .psd file withlayers) into GMG, you will be prompted with a dialog:Check that the settings are: Layers as multiple frames,
No blending, and Keep background transparency.
4. The background layer of each 24-bit image will appear asa frame. Remove these blank frames by selecting theframe and hit the Delete key.
5. Now you should have a total of 9 frames. The icons
should be ordered in increasing color resolution: the first
three are 4-bit (16 color), the next three are 8-bit (256color), and the last three are 24-bit color with an 8-bit
alpha channel (32-bit total).

Note: To check your image's attributes, move yourmouse over the images. You will notice a tooltip box
containing resolution information about each image. The
default setting shows dimensions, transparency, and bit
count. You can add or remove the items shown by goingto Edit>Preferences>Frame Tips.
6. For the 8-bit and 4-bit versions, you need to make thebackground transparent. GMG uses lime green to
represent the "transparent" color. You can set your own
color (or stick with the default background color) byusing the View>Transparency As menu item. The color
chosen is only used for viewing and does not affect theimages.
7. To make the 8-bit and 4-bit versions transparent:

a. Select a frame and click the dropper toolbar icon (thePick Transparency Color icon).

b.A dialog will open showing your icon. With the
dropper, click the background color of the icon. This
color will change to the lime green (or whatevercolor has been chosen as the transparent backgroundcolor in GMG).
c. Repeat for all 4-bit and 8-bit frames.
8. To save the icon, select File>Save Icon As…

Toolbar Creation
The Windows toolbar icons follow the same style as other icons
except that they do not use a drop shadow. Because toolbar
icons are fairly small, we recommend keeping the images
simple. You can make the images straight-on rather thanangled if it helps clarify the meaning of the image.
The Windows toolbar displays 2 sizes: 24x24 and 16x16 pixels.
There are 2 states: default and hot (mouseover). For the hot
state, we slightly increase the saturation of the images.
The process for creating toolbar icons is very similar to othericons, except that the images are put into .bmp strips -basically an ordered row of icons.
1. Once you've illustrated the icons in Freehand at eachsize, copy and paste them into Photoshop. Put the
24x24s on one layer and the 16x16s on another.
2. 2. Draw a single row of boxes for each size on a separate
layer, one row of 16x16 boxes and another row of 24x24
boxes.

3. Place each image in a square in the order you need them.
Check that there's no overlap between images.

4. Save your Photoshop file.
5. Next you will create the hot states in Photoshop.
a. Take your 24x24 and 16x16 layers and duplicate
each one. Rename the layers so they're clearlylabeled as the hot versions.

b.For each hot version, select the layer and go to
Image>Adjust>Levels… and move the middle arrow
to 0.75. Click OK.

6. Once you've created the hot versions, you should have 1
layer per strip: 1 default 24x24, 1 hot 24x24, 1 default
16x16, and 1 hot 16x16.
7. Next you need to create individual files for each strip.
a. One way to do this is to use the Crop tool and crop
the file down to a strip's dimensions and then savethat file. Each strip must be measured from the
beginning of the first box to the end of the last box.
b.Save each strip as a separate 24-bit .psd file.

8. To save a strip as a 32-bit image, drag a strip into GMG.
Remove any blank frames. Go to File>Exportas>Filmstrip. On the Film Export dialog, check that
BMP/DIB and 24-bit with Alpha is selected.

AVI Creation
Windows XP uses 8-bit AVIs. The process for creating .avi files
is the same as for icons: you prepare the pieces in Photoshop
then drag them into GMG. Follow the instructions for creating 8bit icon versions.
To save your AVIs using GMG, go to File>Export As>AVI file…
Considerations when creating .avi files:● Use magenta (R255 G0 B255) as the backgroundtransparency color.
● In Photoshop, it's important that you don't have any
stray pixels that could appear. Set your fill tolerances to
0 and make sure anti-aliasing is not checked.
©2001 Microsoft Corporation. All rights reserved. Terms of Use

Controls
Controls in Windows XP are characterized by roundcorners, subtle dimensionality, and color to help
distinguish states. The images in this section are shown inthe default Blue color scheme and change color if the user
selects the Silver or Olive Green schemes.
WelcomeWhat's New
About the Design
Fonts
Colors
Icons
Controls
Radio Buttons
Check Boxes
Command Buttons
Text Boxes
Tabs
Group Boxes
DropDown Combo
Boxes
Scroll Bars
Spin Button
SliderWindows Status
Bar
Window Title Bar
and Frame
Toolbars
Menus
Folders & Layouts
FAQ

Radio Buttons
Radio buttons have 3 sizes: 13x13, 16x16 and 25x25
pixels. Only the 16x16 size is available in Windows XP.
Windows XP automatically uses the best size based on thevideo card DPI settings.
The text for a radio button should change depending on its
state. The following RGB values should be used for the textof these states:
Checked Disabled Text: R: 161 G: 161 B: 146
Unchecked Disabled Text: R: 161 G: 161 B: 146

Radio button states

Check Boxes
Check boxes have 3 sizes: 13x13, 16x16, and 25x25 pixels.
Windows XP automatically uses the best size based on thevideo card DPI settings.
The text for a check box should change depending on its
state. The following RGB values should be used for the textof these states:
Checked Disabled Text: R: 161 G: 161 B: 146
Unchecked Disabled Text: R: 161 G: 161 B: 146
Mixed Disabled Text: R: 161 G: 161 B: 146

Check box states

Command Buttons
A command button should typically be 75 pixels wide (50dialog units) by 23 pixels tall (14 dialog units). The curveof a command button is a 1 pixel indent.
The button text for a command button should change
depending on its state.
Disabled Text: R: 161 G: 161 B: 146

Command button states

Text Boxes
The colors for an edit box should change depending on its
state.
Normal Border Color: R: 127 G: 157 B: 185
Fill Color:
Disabled: R: 235 G: 235 B: 228
Read Only: R: 235 G: 235 B: 228
Text Color:
Disabled: R: 161 G: 161 B: 146
Read Only: R: 0 G: 0 B: 0

Text box states

Tabs
Tabs have a rollover state as shown below.

Tabs

Group Boxes
Group boxes can be any size necessary to accommodate
the intended grouping of controls.
A group box title should change depending on its state.
Text Color:
Normal: R: 0 G: 70 B: 213
Disabled: R: 161 G: 161 B: 146

Group Box

DropDown Combo Boxes
A dropdown combo box's text should change depending on
its state.
Text Field Fill Color:
Normal: R: 255 G: 255 B: 255
Disabled: R: 201 G: 199 B: 186

Text Field Border Color:
Normal: R: 127 G: 157 B: 185
Disabled: R: 245 G: 244 B: 234

Dropdown Combo Box states

Scroll Bars
Scroll bars are composed of three different pieces: thescroll arrow buttons, the scroll box, and the scrollbar shaft
which is the vertical background of the scroll bar.

Scroll box and button states

Scroll shaft states

Slider
The slider control can be displayed in a vertical or
horizontal orientation. Sliders are available in two different
styles: square and pointed. The square style is typicallyused for vertical sliders, and the pointed style is usedhorizontally.

Slider control states

Spin Buttons
The text for an edit box should change depending on its
state.
Text Field Normal

Outline Color: R: 130 G: 130 B: 130
Fill Color: R: 255 G: 255 B: 255
Text Field Disabled
Outline Color: R: 161 G: 161 B: 146
Fill Color: R: 235 G: 235 B: 228

Left/right spin buttons

Up/down spin buttons

Windows Status Bar
The status bar is located at the bottom of a window anddisplays information about the current state of the
document or other information in the window.
The status bar is composed of 3 different pieces: thebackground area, separators to group information andgrippers for resizing the window.

Example of a status bar

Separator Left Line: R: 199 G: 197 B: 178
Separator Right Line: white
Gripper Front Squares: R: 184 G: 180 B: 163

Gripper Front Squares: white

Window Title Bar and Frame
The window title bar and frame are the outer mostelements of a window. There are two sets of frames andtitle bars: standard windows and tool palettes.

Standard window components in actual size

Title Bar Buttons

Example of the states for Title Bar buttons

Toolbars
The Windows XP toolbar displays 2 icon sizes: 24x24 and16x16 pixels. There are 2 icon states: default and hot. By
default, the icons are in color and on mouse-over they
appear slightly more saturated.

Example of toolbar

Menus

Here are the colors and states for menus:

Highlight Background Color: R: 49, G: 106, B: 197
Highlight Text Color: R: 255, G: 255, B: 255
Border + Separator Color: R: 128, G: 128, B: 128
Disabled Text Color: R: 128, G: 128, B: 128
Background Color: R: 255, G: 255, B: 255
Enabled Text Color: R: 0, G: 0, B: 0

Column Heading Controls
The column heading control, also called a header control,
has some new visual cues to help you sort yourinformation. When you mouseover a column, an orange
highlight appears on the column's header. Clicking on acolumn to sort displays a grey background under the list to
give feedback on the sort selection.

Example of column header states

Progress Indicator
The progress indicator is composed of the progress track
and the progress indicator. The progress track is theoutline of the progress indicator. The progress indicator is
the green square that fills the progress track.

Navigation Buttons
Navigation buttons are used for actions that navigate theuser to a new place in Windows XP. The signage style ofthese buttons emphasizes their navigational purpose.
These buttons are used for a defined set of tasks or actions
in Windows XP. They should not be used for command
buttons.
The color of the navigational buttons is designed to convey
the level of severity of the action. Windows XP uses fourcolors:Blue:

A neutral action. Example: the control to minimize
a window.

Green: The start of an action, or a simple navigation.
Example: the Go button in the Address bar.
Red:

An action that has a high impact result. Examples:
the Close button in the title bar; the Shut down
button in the Start menu.

Yellow: A less severe result than red, but still highimpact. Example: the Log Off button in the Start
menu.
These navigation buttons are used at these sizes: 32x32,
24x24, 21x21, 16x16, and 13x13 pixels.

Navigational buttons are completed by adding a white sign
to the colored background. The following signs areavailable in Windows XP:

Start button and Taskbar
The Start button and taskbar define the look of Windows:
colorful, softly curved and engaging the user in a fresh yetfamiliar way.
We've colored the Start button green to help improvediscoverability of where users should to being theirexperience. Move your mouse over the Start button and it
lights up to give you feedback. The plastic texture of thetaskbar gives a nice tactile feel and the notification area on
the right uses a lighter color value to indicate it has aunique usage.

Start button and taskbar

Taskbar button states

Start button states

Taskbar Elements
These are some of the main elements of the taskbar:

When you open several windows in one application,
Windows XP automatically groups them together in one
taskbar button, making the taskbar less cluttered andeasier to use.
Locking the taskbar
The taskbar is locked by default to prevent users frommoving it accidentally. To unlock the taskbar, right-click on
a blank area of the taskbar and select Lock the taskbar. A
gripper bar at the top of the taskbar appears when thetaskbar is unlocked.

Taskbar Orientations

Top

BottomRightLeft©2001 Microsoft Corporation. All rights reserved. Terms of Use

Folders & Layouts
Folders
There are three types of designs for folders in Windows XP:
special folders, soft barrier pages, and generic webviews
WelcomeWhat's New
About the Design
Fonts
Colors
Icons
Controls
Folders & Layouts
Letterbox Layouts
Special Folders
Soft Barrier Pages
Generic Webviews
FAQ

Special Folders
Special folders, such as My Music and My Pictures, arevisually 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 32bit .BMP files.
The large watermark in the bottom right of the folder is
150x150 pixels. It's designed to be anchored to the bottomof 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 taskbox. 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 thefolder'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 softbarrier 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 thesetup screen and the Welcome screen below. These layouts
are characterized by dark blue horizontal strips framing arich 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©2001 Microsoft Corporation. All rights reserved. Terms of UseFrequently Asked Questions
Icons

WelcomeWhat's New
About the Design
Fonts
Colors
Icons
Controls
Folders & Layouts
FAQ

Q: Can I just take a screenshot of an icon
to use it?
A: No, you can not. The Windows XP icons
have a dropshadow and anti-alias to thebackground so taking a screenshot will
reduce the quality of the image.
Additionally you may only reuse icons
that are redistributed for public use. We
will be releasing some common icons in
the near future such as cut, copy, paste.
Q: I see an icon in Windows XP that I like,how can I get it?
A: Windows XP icons should be usedconsistently to represent the same task orobject. Using an icon to represent
multiple things in the user experience
dilutes the meaning and recognition. For
example, always use the same scissors
icon to represent "cut" or only use theControl Panel icon to represent theControl Panel folder. We will be providing
a set of common icons for usage in a
future update to these guidelines.
Q: Can I modify an existing icon torepresent something else?
A: The modification of an icon needs to bevery significant to avoid any potential
confusion with the existing icon.
Q: Is there somewhere I can go to havethe icons I need made to match the styleof Windows XP?
A: There are companies such as
IconFactory (www.iconfactory.com) thatare experts at making Windows XP styleicons. A good illustrator or designer

should be able to emulate the stylefollowing the guidelines and looking at
Windows XP.

Graphics

Q: Is it possible to implement graphic
elements that anti-alias on the fly by the
OS or should we not anti-alias theseelements?
A: Yes, the operating system does support
32-bit bitmaps. You can use tools such as
GifMovieGear to create these images.
When creating an anti-aliased element it
is important to remember to test yourgraphic in 16-bit and 24-bit color
configurations.
Q: The page layout includes a header. Is it
acceptable to have a web-like navigation
bar inside the header?
A: Yes. However we do not have an
example of this in Windows XP torecommend how you could apply this.

Themes

Q: How do I create a theme?
A: At this point in time we are notallowing additional themes to be createdfor Windows XP. This is primarily because
we have found that additional themes cancause application compatibility issues.
Allowing the creation of additional
themes is something that we areinvestigating for future releases.
Q: Can individual applications theme
themselves separately from the OS?
A: Yes it is possible for applications totheme themselves separately from theOS. Windows Media Player is an example
application that does this however
theming separately is not recommended.
Most users will expect a consistent user

experience, across multiple applications
so doing a custom look on yourapplication can detract from the user
experience of your application. Diverging
from the Windowsn XP look and feel will
also mean that your application will
manually need to adjust for the currently
selected theme, as well as handle
accessibility and system colors
appropriately.
Q: Can I get access to the bmps for thedifferent Windows XP themes?
A: No, you should never use any of thetheme bitmaps directly, you should
always render the theme images using
the theme API's. This way if new themes
are released in the future your application
will work correctly.
Q: How do I make my application/design
work with different color schemes such as
Lilac or High Contrast?
A: When rendering your application andthere is no theme selected (Null theme
handle) your application should use
system metric colors to correctly renderthe various aspects of the application.
This is the same technique as used on
Windows 2000.
Q: Do I need to create 3 different sets ofgraphics (blue, silver, olive green) for myapplication?
A: If you have decided to theme yourapplication separately from the OS thenwe recommend that you stay in sync withthe currently selected theme and provide
the user with a consistent experience.
Because of the added complexity we do
not recommend that applications theme
themselves separately from the OS.

General

Q: Will Microsoft critique the work wehave done on our project to be sure weare on the right track?
A: We are very interested in theapplications that you make and will often
provide feedback on how theseapplications can work better with
Windows XP however we can notguarantee that you will get a response.
Unfortunately we just don't have the timeto see all the great work people are doingwith applying the Windows XP look totheir products.

The document "Using Windows XP Visual
Styles" describes how to use Microsoft
Windows XP to perform the more common
tasks that are necessary to apply visual
styles to your applications.
If you have further questions, pleaseemail your inquiries towinxpdes@microsoft.com©2001 Microsoft Corporation. All rights reserved. Terms of Use