Windows UI Guidelines
Designing for Windows requires a consistent, intuitive, and accessible user experience across devices. This guide provides best‑practice recommendations for layout, controls, typography, color, and accessibility.
Layout
Use the Responsive Grid to adapt content to various screen sizes. Margins, paddings, and spacing should follow the 8‑pixel baseline grid.
| Device | Grid Columns | Gutter |
|---|---|---|
| Phone (portrait) | 4 | 16 px |
| Tablet (portrait) | 8 | 24 px |
| Desktop | 12 | 32 px |
.grid { display: grid; gap: var(--gutter); }Controls
Standard controls follow the Fluent Design System. Use the default style library to ensure visual consistency.
- Buttons:
.btn-primary,.btn-outline - Text fields:
<input type="text">with.inputclass - Toggle switches, sliders, and checkboxes follow the same density guidelines.
Typography
Primary typeface: Segoe UI. Use the following scale:
/* Example */
h1 { font-size: 28px; font-weight: 600; }
h2 { font-size: 22px; font-weight: 600; }
p { font-size: 14px; font-weight: 400; }Color & Theme
Windows supports both Light and Dark themes. Use CurrentTheme resources to automatically adapt.
Primary #0078D7
Light Surface #FFFFFF
Dark Surface #202124
Accessibility
All UI elements must have appropriate aria-* attributes and meet a minimum contrast ratio of 4.5:1.
- Keyboard navigation order
- Screen reader friendly labels
- High‑contrast mode support