7.8 KiB
Windows visual and layout foundations
Contents
- Design principles
- Visual foundations
- Layout and responsive behavior
- Color and themes
- Materials and elevation
- Typography, icons, and motion
- Foundation review checklist
- Official sources
1. Design principles
Use the current Windows 11 principles as evaluation questions:
| Principle | Ask |
|---|---|
| Effortless | Can users complete the primary task with focus, precision, and little interpretation? |
| Calm | Is secondary chrome quiet enough for content and current work to dominate? |
| Personal | Does the app respect theme, accent, text size, input, and user preferences? |
| Familiar | Do navigation, commands, selection, windowing, and feedback behave like Windows? |
| Complete + Coherent | Do screens, windows, states, and input modes feel like one system? |
Do not substitute the older Fluent vocabulary of light, depth, motion, material, and scale for these five product principles. Treat color, elevation, iconography, materials, geometry, typography, and motion as visual foundations.
2. Visual foundations
Build a semantic token layer instead of styling each screen independently:
surface.base,surface.layer,surface.overlay;text.primary,text.secondary,text.disabled;accent.default,accent.hover,accent.pressed,accent.disabled;status.success,status.caution,status.critical,status.informational;stroke.control,stroke.divider,focus.stroke;space.1throughspace.n,radius.control,radius.overlay;motion.fast,motion.normal, and shared easing tokens.
Map these semantics to WinUI theme resources where available. Keep brand tokens above platform tokens so light, dark, and high-contrast mappings remain explicit.
Use one primary accent action per local task area. Use size, spacing, alignment, and weight before adding more colors or surfaces.
3. Layout and responsive behavior
Design in effective pixels (epx). Use multiples of 4 epx for sizes, margins, and positions when practical; text size is not restricted to this grid.
Use the current Windows width classes as starting points, then adjust only when content demonstrates a real need:
| Class | Effective width | Typical response |
|---|---|---|
| Small | <= 640 |
single pane, collapsed or minimal navigation, stacked form, deferred secondary content |
| Medium | 641–1007 |
compact navigation, list/detail may switch between one and two panes |
| Large | >= 1008 |
persistent navigation or multi-pane workspace when it improves the task |
Use the actual content region or window width, not monitor resolution. Validate at the app's supported minimum size, Windows Snap widths, restored windows, maximized windows, and across display scaling changes.
Apply responsive techniques deliberately:
- Reflow: wrap or stack content without changing meaning.
- Resize: let flexible regions absorb space; constrain readable text measure.
- Reposition: move secondary panels or commands while preserving order.
- Reveal: progressively expose low-priority content as room grows.
- Replace: switch to a more suitable navigation or presentation control.
- Re-architect: use a different workflow only when a compact window cannot support the same structure.
Define the narrow state as the safe default, then use VisualStateManager and AdaptiveTrigger for wider states. Prefer control-provided thresholds such as NavigationView compact/open pane widths when those express the intended behavior. Avoid fixed widths for content that must localize or scale.
4. Color and themes
- Use
{ThemeResource ...}for colors and brushes that must update when the theme changes. - Test light, dark, and high contrast independently; do not generate dark mode by inversion.
- Respect the system accent color unless product identity or domain semantics justify a controlled brand accent.
- Maintain at least 4.5:1 contrast for normal text. Use icons, text, or patterns in addition to semantic color.
- Do not encode state only through reduced opacity. Preserve recognizable text, focus, selection, and disabled semantics.
- Never place critical text over a material or image without a deterministic readable fallback.
Prefer system resources such as text fill, control fill, stroke, accent fill, and system status brushes. Verify resource names against the project's Windows App SDK version before emitting code.
5. Materials and elevation
Use material to clarify layers, not to decorate every container:
| Need | Preferred mechanism | Notes |
|---|---|---|
| Main window background | MicaBackdrop |
Windows 11; solid fallback on Windows 10 |
| Desktop-see-through window | DesktopAcrylicBackdrop |
More visually active; use only when the experience benefits |
| Material on a specific region | SystemBackdropElement |
Requires Windows App SDK 1.6.3 or later |
| Blur content inside the window | in-app AcrylicBrush |
Does not show the desktop behind the app |
| Simple content surface | theme solid color | Often the clearest and cheapest choice |
Do not use UWP HostBackdrop patterns in WinUI 3. Allow system fallback when transparency is disabled, hardware is insufficient, Battery Saver suppresses Acrylic, Remote Desktop is active, or high contrast is enabled. Ensure the fallback color preserves hierarchy and contrast.
Use elevation only to communicate overlap, focus, or transient UI. Prefer system shadows and overlay behavior. Do not introduce an external shadow control merely to make cards look raised.
6. Typography, icons, and motion
Use Segoe UI Variable and the WinUI type ramp by default. Reuse platform text styles rather than copying numeric sizes throughout XAML. Use regular body weight, stronger titles or labels, tabular figures for aligned numeric data, and wrapping before truncation. When truncation is unavoidable, expose the full value through an accessible tooltip or detail surface.
Use SymbolIcon, FontIcon with Segoe Fluent Icons, or a consistent vector asset set. Keep icon metaphor, size, stroke/fill style, and alignment consistent. Give unfamiliar or icon-only commands an accessible name and tooltip. Do not use emoji as navigation or command icons.
Use motion to explain causality, hierarchy, and continuity:
- give immediate pointer/press feedback;
- prefer platform transitions and connected animations where they clarify movement;
- animate compositor-friendly properties such as opacity and transforms;
- keep motion interruptible and never use it to delay input;
- reduce or remove nonessential motion when system animation settings request it;
- avoid perpetual decorative movement in productivity surfaces.
7. Foundation review checklist
- The UI reflects Effortless, Calm, Personal, Familiar, and Complete + Coherent.
- Semantic tokens cover themes and all interaction states.
- Layout is proven at compact, medium, wide, snapped, and scaled conditions.
- Spacing and geometry follow a coherent 4 epx rhythm.
- Material choice communicates a layer and has a solid fallback.
- Typography remains readable under text scaling and localization.
- Icons use one language and are not emoji.
- Motion communicates change and respects user settings.