Windows Development – Styling Guide

Home

Table of Contents ▾

Overview

This guide outlines the visual language and styling conventions for native Windows applications built with WinUI, UWP, and the Windows App SDK. Following these standards ensures consistency, accessibility, and a modern user experience across the Microsoft ecosystem.

Naming Conventions

ElementPatternExample
Resource Dictionary{Component}Resources.xamlShellResources.xaml
Style Key{Target}{State}StyleButtonPrimaryStyle
Control Template{Control}TemplateComboBoxTemplate

Color Palette

The primary palette is based on the Fluent Design System. Use the following semantic colors for consistency.



    
    <Color x:Key="ColorPrimary">#0067B8</Color>
    <Color x:Key="ColorPrimaryDark">#004880</Color>
    <Color x:Key="ColorPrimaryLight">#E5F1FF</Color>

    
    <Color x:Key="ColorAccent">#0099BC</Color>
    <Color x:Key="ColorAccentSecondary">#00B294</Color>

    
    <Color x:Key="ColorNeutral100">#FFFFFF</Color>
    <Color x:Key="ColorNeutral200">#F5F7FA</Color>
    <Color x:Key="ColorNeutral600">#6C757D</Color>
    <Color x:Key="ColorNeutral900">#212529</Color>
</ResourceDictionary>

Typography

Use Segoe UI as the default typeface. Sizes and weights are defined below.

UsageFont SizeWeight
Title (H1)28 pxSemiBold
Section (H2)22 pxBold
Body14 pxRegular
Caption12 pxLight

Layout & Grids

Adopt a 4‑pixel baseline grid. Margins and paddings should be multiples of 4.



    
    
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>
    ...
</Grid>

Standard Controls

All controls must use the Fluent styles provided by the Microsoft.UI.Xaml namespace. Below is a sample Button style.


<Style x:Key="ButtonPrimaryStyle" TargetType="Button">
    <Setter Property="Background">{ThemeResource ColorPrimary}</Setter>
    <Setter Property="Foreground">White</Setter>
    <Setter Property="CornerRadius">4</Setter>
    <Setter Property="Padding">12,6</Setter>
    <Setter Property="FontSize">14</Setter>
    <Setter Property="FontWeight">SemiBold</Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="{TemplateBinding Background}"
                        CornerRadius="{TemplateBinding CornerRadius}">
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPointerOver" Value="True">
                        <Setter Property="Background" Value="{ThemeResource ColorPrimaryDark}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Best Practices