Users/hickeys/release cobalt/hickeys updates (#1650)

* Add new design docs and images

* Add new store docs and images

* Fix build warnings

Author: hickeys

.openpublishing.redirection.json

@@ -6624,6 +6624,11 @@
       "source_path": "windows-apps-src/design/controls-and-patterns/menus-and-context-menus.md",
       "redirect_url": "/windows/apps/design/controls/menus-and-context-menus",
       "redirect_document_id": false
+    },
+    {
+      "source_path": "hub/apps/fluent-design-system.md",
+      "redirect_url": "/hub/apps/design/index",
+      "redirect_document_id": false
     }
   ]
 }

hub/apps/design/downloads/index.md

@@ -2,7 +2,7 @@
 description: Get the latest downloads and tools for Windows apps user interface layout and controls designs.
 keywords: uwp app layout, UI, user interface designs, downloads, uwp tools, windows app layout, windows ui tools
 title: Design toolkits and samples for Windows apps
-ms.date: 09/24/2020
+ms.date: 06/24/2021
 ms.topic: conceptual
 ms.assetid: 88da6d1a-379c-4173-a56d-d8b9a4eab5da
 ms.localizationpriority: medium
@@ -23,40 +23,29 @@ These toolkits provide controls and layout templates for designing Windows apps.
 
 :::row:::
     :::column:::
-:::image type="icon" source="images/figma.png":::
-<b>Figma toolkit</b><br>
-WinUI 2.4, May 2020<br>
-<a href="https://aka.ms/figmatoolkit">Download</a>
+        ![Figma Toolkit icon](images/figma.png)
     :::column-end:::
-    :::column:::
-:::image type="icon" source="images/sketch.png":::
-<b>Sketch toolkit</b><br>
-v1810, October 2018<br>
-<a href="https://aka.ms/sketchtoolkit">Download</a>
-    :::column-end:::    
-    :::column:::
-:::image type="icon" source="images/adobe-xd.png":::
-<b>Adobe XD toolkit</b><br>
-v1901, January 2019<br>
-<a href="https://aka.ms/adobexdtoolkit">Download</a>
+    :::column span="2":::
+        **Figma Toolkit**<br>
+        WinUI 2.6, June 2021<br>
+        [Download](https://aka.ms/figmatoolkit)
     :::column-end:::
 :::row-end:::
 
-
 ## Developer toolkits and libraries
 
 :::row:::
     :::column:::
-![WinUI library thumbnail](images/WinUI-library.png)
-<b>Windows UI Library</b><br>
-Controls and other UI elements for Windows apps.<br/>
-<a href="/uwp/toolkits/winui/getting-started">Installation instructions</a><br/>
+        ![WinUI library thumbnail](images/WinUI-library.png)
+        <b>Windows UI Library</b><br>
+        Controls and other UI elements for Windows apps.<br/>
+        <a href="/uwp/toolkits/winui/getting-started">Installation instructions</a><br/>
     :::column-end:::
     :::column:::
-![Windows community thumbnail](images/Windows-community-toolkit.png)
-<b>Windows Community Toolkit</b><br>
-Helper functions, custom controls, and app services.<br />
-<a href="/windows/uwpcommunitytoolkit/getting-started">Installation instructions</a>
+        ![Windows community thumbnail](images/Windows-community-toolkit.png)
+        <b>Windows Community Toolkit</b><br>
+        Helper functions, custom controls, and app services.<br />
+        <a href="/windows/uwpcommunitytoolkit/getting-started">Installation instructions</a>
     :::column-end:::
     :::column:::
         ![Windows Template Studio thumbnail](images/Windows-template-studio.png)
@@ -68,8 +57,10 @@ Helper functions, custom controls, and app services.<br />
 
 ## Fonts
 
-* <a href="https://aka.ms/SegoeFonts">Segoe UI and MDL2 icon fonts (Mac only)</a>
-* <a href="https://aka.ms/hololensiconfont">Hololens icon font (Windows only)</a>
+- [Segoe UI Variable](https://aka.ms/SegoeUIVariable)
+- [Segoe Fluent Icon](https://aka.ms/SegoeFluentIcon)
+- [Segoe UI and MDL2 fonts](https://aka.ms/SegoeFonts)
+- [Hololens icon font (Windows only)](https://aka.ms/hololensiconfont)
 
 ## Tools
 

hub/apps/design/signature-experiences/color.md

@@ -0,0 +1,36 @@
+---
+author: hickeys
+description: An overview of where and how color is used in Windows 11
+title: Color in Windows 11
+ms.assetid: 139F3A69-8C33-40A8-9FF0-76D62953339E
+ms.author: hickeys
+ms.date: 06/24/2021
+ms.topic: article
+keywords: windows 11, design, ui, uiux, color, light mode, dark mode
+ms.localizationpriority: medium
+---
+
+# Color in Windows 11
+
+Windows 11 employs color to help users focus on their tasks by indicating a visual hierarchy and structure between user interface elements. Color is context appropriate and used to provide a calming foundation, subtly enhancing user interactions and emphasizing significant items only when necessary.
+
+## Color Modes
+
+![Color hero image](images/color_hero_1880.png)
+
+Windows 11 supports two color modes: light and dark. Each mode consists of a set of neutral color values that are automatically adjusted to ensure optimal contrast.
+
+In both light and dark color modes, darker colors indicate background surfaces of less importance. Important surfaces are highlighted with lighter and brighter colors. See [layering & elevation](layering.md) for more information.
+
+## Accent color
+
+:::row:::
+    :::column:::
+        ![Assorted controls in light mode](images/color_light_controls_940.png)
+    :::column-end:::
+    :::column:::
+        ![Assorted controls in dark mode](images/color_dark_controls_940.png)
+    :::column-end:::
+:::row-end:::
+
+Accent color is used to emphasize important elements in the user interface and to indicate the state of an interactive object or control. Accent color values are generated automatically and optimized for contrast in both light and dark modes. Accent colors are used sparingly to highlight important elements and convey information about an interactive element's state.

hub/apps/design/signature-experiences/design-principles.md

@@ -0,0 +1,39 @@
+---
+author: hickeys
+description: An overview of the design principles behind Windows 11
+title: Windows 11 design principles
+ms.assetid: 8A299698-0A42-401B-87BE-6C870135A844
+ms.author: hickeys
+ms.date: 06/24/2021
+ms.topic: article
+keywords: windows 11, design, ui, uiux, design principles, effortless, calm, personal, familiar, complete, coherent
+ms.localizationpriority: medium
+---
+
+# Windows 11 design principles
+
+![Various Windows 11 design elements](images/principles_hero_1880.png)
+
+Windows 11 marks a visual evolution of the operating system. We have evolved our design language alongside with Fluent to create a design which is human, universal and truly feels like Windows.
+
+The design principles below have guided us throughout the journey of making Windows the best-in-class implementation of Fluent.
+
+## Effortless
+
+Windows 11 is faster and more intuitive. It's easy to do what I want, with focus and precision.
+
+## Calm
+
+Windows 11 is softer and decluttered; it fades into the background to help me stay calm and focused. The experience feels warm, ethereal and approachable.
+
+## Personal
+
+Windows 11 adapts seamlessly to the way I use my device. It bends and flexes to my individual needs and preferences so that I can truly express myself.
+
+## Familiar
+
+Windows 11 balances a new, refreshed look and feel with the familiarity of the Windows I already know. There is no learning curve; I can pick it up and go.
+
+## Complete + Coherent
+
+Windows 11 offers a visually seamless experience across platforms. I can work in many platforms and still have a consistent Windows experience.

hub/apps/design/signature-experiences/geometry.md

@@ -0,0 +1,92 @@
+---
+author: hickeys
+description: An overview of geometry and spacing in Windows 11
+title: Geometry in Windows 11
+ms.assetid: E9E66189-2C81-406D-9C89-8AFBEE0BCC47
+ms.author: hickeys
+ms.date: 06/24/2021
+ms.topic: article
+keywords: windows 11, design, ui, uiux, geometry, gutters, margins, corners, rounded corners, corner radius
+ms.localizationpriority: medium
+---
+
+# Geometry in Windows 11
+
+![Rounded corners and element spacing in Windows 11](images/geometry_hero_1880.png)
+
+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 geometry has been crafted to support modern app experiences. Progressively rounded corners, nested elements, and consistent gutters combine to create a soft, calm, and approachable effect that emphasizes unity of purpose and ease of use.
+
+## Rounded corners
+
+![Dialog with rounded corners](images/geometry_rounded_corners_1880.png)
+
+Windows 11 applies rounded corners to all all app windows created using standard windowing APIs. The same applies to most common controls such as Button and ListView. Windows 11 will apply rounded corners to controls by default; no code changes required.
+
+Windows 11 uses three levels of rounding depending on what UI component is being rounded and how that component is arranged relative to neighboring elements.
+
+| Corner radius | Usage                     |
+|---------------|---------------------------|
+| 8px           | Top-level containers such as app windows, flyouts and dialogs are rounded using an 8px corner radius. |
+| 4px           | In-page elements such as buttons and list backplates are rounded using a 4px corner radius.           |
+| 0px           | Straight edges that intersect with other straight edges are not rounded.                              |
+| 0px           | Window corners are not rounded when windows are maximized.                                            |
+
+## Spacing and gutters
+
+The use of consistently sized spacing and gutters semantically groups an experience into separate components. These values map to our rounded corner logic and together help create a cohesive and usable layout.
+
+:::row:::
+    :::column:::
+        ![Two buttons separated by 8 pixels](images/geometry_spacing_buttons_626.png)
+    :::column-end:::
+    :::column span="1":::
+        **8px** between buttons
+    :::column-end:::
+:::row-end:::
+
+:::row:::
+    :::column span="1":::
+        ![A button and a flyout separated by 8 pixels](images/geometry_spacing_flyout.svg)
+    :::column-end:::
+    :::column span="1":::
+        **8px** between buttons and flyouts
+    :::column-end:::
+:::row-end:::
+
+:::row:::
+    :::column:::
+        ![A control and a header separated by 8 pixels](images/geometry_spacing_header.svg)
+    :::column-end:::
+    :::column span="1":::
+        **8px** between control and header
+    :::column-end:::
+:::row-end:::
+
+:::row:::
+    :::column:::
+        ![A Control and a label separated by 12 pixels](images/geometry_Spacing_Label.svg)
+    :::column-end:::
+    :::column span="1":::
+        **12px** between control and label
+    :::column-end:::
+:::row-end:::
+
+:::row:::
+    :::column:::
+        ![Two content areas separated by 12 pixels](images/geometry_Spacing_Cards.svg)
+    :::column-end:::
+    :::column span="1":::
+        **12px** between content areas
+    :::column-end:::
+:::row-end:::
+
+:::row:::
+    :::column:::
+        ![A surface containing text with 12 pixel gutters on both sides](images/geometry_Spacing_Margins.svg)
+    :::column-end:::
+    :::column span="1":::
+        **12px** between surface and edge text
+    :::column-end:::
+:::row-end:::

hub/apps/design/signature-experiences/iconography.md

@@ -0,0 +1,85 @@
+---
+author: hickeys
+description: App and system icons in Windows 11
+title: Iconography in Windows 11
+ms.assetid: EC94D54F-4C24-4E16-B8E0-08F3916C00F0
+ms.author: hickeys
+ms.date: 06/24/2021
+ms.topic: article
+keywords: windows 11, design, ui, uiux, icons, app icons, system icons, segoe fluent icons, segoe
+ms.localizationpriority: medium
+---
+
+# Iconography in Windows 11
+
+Iconography is a set of visual images and symbols that help users understand and navigate your app. Icons are used throughout the user interface as visual metaphors representing a concept, action, or status.
+
+Windows 11 uses three different type of icons: application icons, system icons, and file type icons.
+
+## Application icons
+
+![An abstract application icon for a hypothetical maps app](images/iconography_hero_1880.png)
+
+Application icons represent your app in the Windows Shell. They are primarily used to launch your application, but also represent your app wherever it appears in the Windows shell.
+
+App icons should represent your app's core functionality through a metaphor. See [App Icons](../style/app-icons-and-logos.md) for more information about designing and constructing your app's icon.
+
+## System icons
+
+![A shopping cart icon from Segoe Fluent Icons](images/iconography_SystemIcons.svg)
+
+Windows 11 introduces a new system icon font, [Segoe Fluent Icons](..\downloads\index.md#fonts). This new font compliments Windows 11's [geometry](geometry.md).
+
+All glyphs in Segoe Fluent Icons are drawn in a Monoline style, which means they are created using a single stroke of 1 epx.
+
+Glyphs in Segoe Fluent Icons follow three aesthetic principles:
+
+1. **Minimal**: Glyphs contain only the details necessary to communicate the concept.
+2. **Harmonious**: Glyphs are based on simple and geometric forms.
+3. **Evolved**: Glyphs use modern metaphors that are easily understood.
+
+### Sizing
+
+![A properly sized printer icon](images/iconography_IconSizing.svg)
+
+Segoe Fluent Icons font metrics were developed to match how designers and developers are used to working with SVG and bitmap icons.
+
+Each font glyph is designed so that the footprint of the icon area is a square em.
+A 16 epx font size icon is the equivalent of a 16x16 epx icon, making sizing and positioning more predictable.
+
+### Anatomy
+
+System icons glyphs can be visually constructed by combining a base icon with a modifier icon.
+
+**Base icons** are the main element of a visual metaphor. Base elements should should occupy the entire icon footprint.
+
+**Modifier icons** modify the meaning of the base icon. Modifier elements should be placed in one of the bottom quadrants of the icon footprint.
+
+:::row:::
+    :::column:::
+        ![A file icon](images/iconography_Anatomy1.svg)
+    :::column-end:::
+    :::column span="3":::
+        **Base icon only**<br>
+        On its own, the paper sheet icon communicates the concept of a *file*
+    :::column-end:::
+:::row-end:::
+:::row:::
+    :::column:::
+        ![A file icon overlayed with an up arrow icon](images/iconography_Anatomy2.svg)
+    :::column-end:::
+    :::column span="3":::
+        **Base icon + modifier icon**<br>
+        Adding an up arrow to the file icon changes the meaning of the icon to represent an *uploaded file*
+    :::column-end:::
+:::row-end:::
+
+### Layering
+
+Icon layering is a technique used to overlap two different glyphs. We recommend using icon layering to create a different state of the same icon (e.g. active or selected state).
+
+![A black and white folder icon plus a beige folder icon with no outlines equals a beige folder icon with a black outline](images/iconography_IconLayering.svg)
+
+### Localization
+
+Understand the cultural connotations of certain symbols in different cultures. While in most cases iconography doesn't require localization, certain icons may be acceptable in one culture but not in another. Validate your iconography choices with the context in which they will be used.