Skip to main content

​
Overview

Web XP uses styled-components for styling, providing a modern CSS-in-JS approach to create authentic Windows XP visual elements. The project features the classic XP color scheme with blue gradients, Tahoma fonts, and pixel-perfect window chrome.

​
Styled-Components Architecture

The project extensively uses styled-components for all UI elements: 
import styled from 'styled-components';

const Container = styled.div`
  font-family: Tahoma, 'Noto Sans', sans-serif;
  height: 100vh;
  background: url(${wallpaper}) no-repeat center center fixed;
  background-size: cover;
`;

​
Key Styled Components

The main styled components are located throughout the codebase:
  • Window Chrome: src/WinXP/Windows/index.jsx:155
  • Footer/Taskbar: src/WinXP/Footer/index.jsx:174
  • Header Buttons: src/WinXP/Windows/HeaderButtons.jsx:54
  • Desktop Container: src/WinXP/index.jsx:297

​
Typography

​
Primary Font: Tahoma

Windows XP’s signature font is used throughout the interface: 
font-family: Tahoma, 'Noto Sans', sans-serif;

​
Font Configuration

The project uses Noto Sans as a fallback, configured in src/assets/font.css:1-26: 
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  src: url('/fonts/NotoSans-latin.woff2') format('woff2');
}

body {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
}

​
Windows XP Color Scheme

​
Window Header Gradients

Focused windows use the iconic blue gradient (src/WinXP/Windows/index.jsx:165-167): 
background: ${({ isFocus }) =>
  isFocus
    ? 'linear-gradient(to bottom,#0058ee 0%,#3593ff 4%,#288eff 6%,#127dff 8%,#036ffc 10%,#0262ee 14%,#0057e5 20%,#0054e3 24%,#0055eb 56%,#005bf5 66%,#026afe 76%,#0062ef 86%,#0052d6 92%,#0040ab 94%,#003092 100%)'
    : 'linear-gradient(to bottom, #7697e7 0%,#7e9ee3 3%,#94afe8 6%,#97b4e9 8%,#82a5e4 14%,#7c9fe2 17%,#7996de 25%,#7b99e1 56%,#82a9e9 81%,#80a5e7 89%,#7b96e1 94%,#7a93df 97%,#abbae3 100%)'}

​
Taskbar Gradient

The taskbar features a distinctive blue gradient (src/WinXP/Footer/index.jsx:176-194): 
background: linear-gradient(
  to bottom,
  #1f2f86 0,
  #3165c4 3%,
  #3682e5 6%,
  #4490e6 10%,
  #3883e5 12%,
  #2b71e0 15%,
  #2663da 18%,
  #235bd6 20%,
  // ... more color stops
);

​
Customizing Window Chrome

​
Window Border and Padding

Windows have a 3px padding with blue borders (src/WinXP/Windows/index.jsx:158-162): 
padding: ${({ header }) => (header.invisible ? 0 : 3)}px;
background-color: ${({ isFocus }) => (isFocus ? '#0831d9' : '#6582f5')};
border-top-left-radius: 8px;
border-top-right-radius: 8px;

​
Header Buttons

The minimize, maximize, and close buttons use radial gradients (src/WinXP/Windows/HeaderButtons.jsx:76-104): 
.header__button--minimize {
  box-shadow: inset 0 -1px 2px 1px #4646ff;
  background-image: radial-gradient(
    circle at 90% 90%,
    #0054e9 0%,
    #2263d5 55%,
    #4479e4 70%,
    #a3bbec 90%,
    white 100%
  );
}

.header__button--close {
  box-shadow: inset 0 -1px 2px 1px #da4600;
  background-image: radial-gradient(
    circle at 90% 90%,
    #cc4600 0%,
    #dc6527 55%,
    #cd7546 70%,
    #ffccb2 90%,
    white 100%
  );
}

​
Window Header

The window title bar styling (src/WinXP/Windows/index.jsx:200-213): 
.app__header {
  height: 25px;
  font-weight: 700;
  font-size: 12px;
  font-family: 'Noto Sans';
  text-shadow: 1px 1px #000;
  color: white;
}

​
XP-Style Visual Patterns

​
Border Styles

Classic inset/outset borders for depth: 
border: 1px solid #808080;
border-top-color: #fff;
border-left-color: #fff;
box-shadow: 1px 1px 1px #000;

​
Focus States

Windows show focus through opacity and color changes: 
opacity: ${({ isFocus }) => (isFocus ? 1 : 0.6)};
background-color: ${({ isFocus }) => (isFocus ? '#0831d9' : '#6582f5')};

​
Rounded Corners

XP-style subtle rounding: 
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-radius: 2px;

​
Customization Examples

​
Changing Window Border Color

Modify the StyledWindow component in src/WinXP/Windows/index.jsx:159: 
background-color: ${({ isFocus }) => (isFocus ? '#0831d9' : '#6582f5')};
// Change to:
background-color: ${({ isFocus }) => (isFocus ? '#1a5fb4' : '#78aeed')};

​
Adjusting Font Sizes

Update font sizes in the header (src/WinXP/Windows/index.jsx:205): 
font-size: 12px; // Change to 13px or 14px for larger text

​
Customizing Button Colors

Modify button gradients in src/WinXP/Windows/HeaderButtons.jsx:76-187 to match your color scheme.

​
Best Practices

  1. Maintain XP Aesthetics: Keep gradients and rounded corners subtle
  2. Use Tahoma Font: Essential for authentic Windows XP look
  3. Preserve Focus States: Always differentiate focused vs unfocused elements
  4. Test Contrast: Ensure text remains readable with color changes
  5. Keep Borders Consistent: Use the same border pattern throughout
  • src/WinXP/Windows/index.jsx - Window chrome styling
  • src/WinXP/Footer/index.jsx - Taskbar styling
  • src/WinXP/Windows/HeaderButtons.jsx - Button styling
  • src/assets/font.css - Font definitions
  • src/index.css - Global styles

Build docs developers (and LLMs) love

Get started for freeTalk to us