Edit

Windows 11 signature experiences

  • Article

Signature experiences are the design elements Windows 11 uses to express its visual language, while maintaining a coherent look and feel across all Fluent experiences.

Several UI elements highlighting new geometry in Windows 11

Geometry

Geometry describes the shape, size and position of UI elements on screen. These fundamental design elements help experiences feel coherent across the entire design system. Windows 11 features updated geometry that creates a more approachable, engaging and modern experience.

A window and modal dialog in light mode on the left and dark mode on the right

Color

Color helps users focus on their tasks by indicating a visual hierarchy and structure between user interface elements. Windows 11 uses color to provide a calming foundation, subtly enhancing user interactions and emphasizing significant items only when necessary.

An application window with a single content area

Layering and Elevation

Layering is the concept of overlapping one surface with another, creating two or more visually distinguished areas within the same surface. Windows 11 uses layering and elevation as its foundation for app hierarchy.

A UI surface made of acrylic

Materials

Materials are visual effects that make UI surfaces resemble real life artifacts. Windows 11 uses materials to keep the UI connected to its environment. Materials bring surfaces to life and help us distinguish between focused and unfocused applications.

A shopping cart icon

Iconography

Iconography is a set of visual images and symbols that help users understand and navigate your app. Windows 11 iconography has evolved in concert with our design language. Every glyph in our system icon font has been redesigned to embrace a softer geometry and more modern metaphors.

Several words rendered in Segoe UI Variable

Typography

As the visual representation of language, typography's main task is to communicate information. The Windows 11 type system helps you create structure and hierarchy in your content in order to maximize legibility and readability in your UI.

An animated image that shows several examples of motion in the Windows UI.

Motion

Motion describes the way the interface animates and responds to user interaction. Motion in Windows is reactive, direct, and context appropriate. It provides feedback to user input and reinforces spatial paradigms that support way-finding.