 |
Controls
Controls in Windows XP are characterized by round corners, subtle dimensionality, and color to help distinguish states. The images in this section are shown in the default Blue color scheme and change color if the user selects the Silver or Olive Green schemes.
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 the video card DPI settings.
The text for a radio button should change depending on its state. The following RGB values should be used for the text of these states:
Checked Disabled Text: R: 161 G: 161 B: 146
Unchecked Disabled Text: R: 161 G: 161 B: 146
 |
||
|
Check Boxes
Check boxes have 3 sizes: 13x13, 16x16, and 25x25 pixels. Windows XP automatically uses the best size based on the video card DPI settings.
The text for a check box should change depending on its state. The following RGB values should be used for the text of 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
 |
||
|
Command Buttons
A command button should typically be 75 pixels wide (50 dialog units) by 23 pixels tall (14 dialog units). The curve of 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
 |
||
|
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
 |
||
|
Tabs
Tabs have a rollover state as shown below.
 |
||
|
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
 |
||
|
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
 |
||
|
Scroll Bars
Scroll bars are composed of three different pieces: the scroll 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 typically used for vertical sliders, and the pointed style is used horizontally.
 |
 |
| 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 and displays information about the current state of the document or other information in the window.
The status bar is composed of 3 different pieces: the background area, separators to group information and grippers 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 most elements of a window. There are two sets of frames and title 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 and 16x16 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 your information. When you mouseover a column, an orange highlight appears on the column's header. Clicking on a column 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 the outline 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 the user to a new place in Windows XP. The signage style of these 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 four colors:
| 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 high impact. 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 are available 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 yet familiar way.
We've colored the Start button green to help improve discoverability of where users should to being their experience. Move your mouse over the Start button and it lights up to give you feedback. The plastic texture of the taskbar gives a nice tactile feel and the notification area on the right uses a lighter color value to indicate it has a unique 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 and easier to use.
Locking the taskbar
The taskbar is locked by default to prevent users from moving 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 the taskbar is unlocked.
Taskbar Orientations
 |
| Top |
 |
| Bottom |
 |
| Right |
 |
| Left |