Copy content from primer.style/desktop → primer.style/design (#365)

* Copy content from primer.style/desktop → primer.style/design

* code review feedback

* update titles to be unique

Author: broccolinisoup

content/images/desktop-changesview.png

@@ -0,0 +1,107 @@
+---
+title: Foundations
+---
+
+These are the foundational design concepts and constraints that can help inform design decisions. The core considerations for GitHub Desktop include platform differences and relationships to Primer Web guidelines.
+
+## Color
+
+The color scheme file is the only element inherited directly from Primer CSS. For the most part, Deskotp uses the same palette as Primer CSS, with a few exceptions:
+
+- Use blue for the primary buttons (rather than the green buttons on github.com)
+- Use blue for tab underlines (orange is used on github.com)
+
+### Dark mode
+
+GitHub Desktop has a dark mode users can choose in their app preferences. It's displayed using a theme that essentially converts all the elements to their dark mode equivalents.
+
+## Iconography
+
+import icons from '../../images/desktop-icons.png'
+
+GitHub Desktop uses [octicons](https://primer.style/octicons/), but doesn't inherit updates, instead they're duplicated into the Desktop code base. There are icons that are unique to Desktop:
+
+- Stash: Uses the octicon for ‘modified’ but made to appear stacked
+- Commit co-author: Person with plus sign
+- Avatar default: The old version (a filled in silhouette with rounded container) is used instead of the newer outlined style due to the context
+- Force push icon: Push arrow with outline of two more arrows to make it look more extreme
+- Repo force push: Repo with arrow with triple outline above
+
+<img src={icons} alt="" />
+
+Some older octicons have also been used in the illustrations (check mark, question mark, ufo with speech bubble with telescope, planet with thumbs up).
+
+## Illustrations
+
+GitHub Desktop has its own set of illustrations, which were adopted from a previous GitHub Universe with a space theme. Illustrations primarily show up in the welcome wizard and empty states for lists areas. Because Desktop has a dark mode, hard-coded colors need to look good on either white or dark gray backgrounds. They are composed of 1 or 2 swatches that get swapped out with a css invert filter on. If a shadow is included in the illustration, it needs to be translucent.
+
+All of the illustrations can be found in the [desktop repo](https://github.com/desktop/desktop/tree/development/app/static/common).
+
+## Platforms
+
+Desktop is built using Electron, which allows it to be cross-platform. With Electron, it’s possible to implement anything that can be implemented on github.com, and more. For example, in the future, multiple desktop windows could be part of the app experience. Though Electron enables a cross-platform app, there are a few key differentiating features between macOS and Windows that need to be considered when designing for GitHub Desktop.
+
+### Button order
+
+#### Button order on macOS
+
+The secondary button is always on the left, whether it’s the default or cancel, and the primary action is on the right. This is aligned with the Primer guidelines used on github.com.
+
+Example: "Cancel | Let’s Do This"
+
+#### Button order on Windows
+
+The default button is always on the far right and the primary action is on the left. This differs from the Primer guidelines and should be taken into consideration for Windows users.
+
+Example: "Let’s do this | Cancel"
+
+### Capitalization
+
+#### Capitalization on macOS
+
+Title case is used for headlines and buttons. This is different from Primer guidelines, so it needs to be taken into consideration.
+
+Example: "Current Repository"
+
+#### Capitalization on Windows
+
+Sentence case is used for headlines and buttons, which is aligned with Primer guidelines.
+
+Example: "Current repository"
+
+### Menu bar
+
+#### Menu bar on macOS
+
+The menu bar on macOS sits at the top of the screen, disconnected from the GitHub Desktop window. The system menu bar is used.
+
+#### Menu bar on Windows
+
+The menu bar on Windows sits directly on top of the GitHub Desktop UI, with no separation or ability to disconnect it. The menu bar is a custom design, so when considering changing elements in the topbar (the top of the Desktop interface), consider the Windows menu bar in relation.
+
+## Relationship to Primer Web
+
+GitHub Desktop's architecture and Primer Web are not compatible. For that reason, Desktop has its own set of components and CSS that leverage Primer Web, and doesn't take advantage of Primer updates to the code directly, with the exception of the color scheme file.
+
+## Spacing
+
+GitHub Desktop uses a 10 pixel grid (different from the 8px grid used by Primer). Changing the spacing scale has been considered and is documented in [this PR](https://github.com/desktop/desktop/compare/spacing-scale-spike-v2).
+
+## System Elements
+
+The following UI elements use system-generated code that has not been customized or styled:
+
+- Context menus
+- Tooltips
+- Dropdowns
+- Menu bar on macOS (Windows uses a custom menu bar)
+
+## Typography
+
+GitHub Desktop uses system fonts. When creating design mockups for GitHub Desktop, consider that:
+
+- In Figma, use macOS fonts (Primer Web defaults) for mocking up designs, unless the feature is Windows-specific.
+- Windows' system font is Segoe UI, and type styles for Windows are included in the Figma library to make it easy to switch from SF Pro to Segoe to show the difference between Mac and Windows screens. Segoe UI reads a little smaller and tighter, so it may be worth adjusting the point size to make it feel consistent with macOS.
+- Styles and sizes follow the same guidelines as Primer Web, with the addition of `text-x-small` (11pt and used for all small, secondary text).
+
+[Download Segoe UI (Mac only)](https://aka.ms/SegoeFonts)

content/images/desktop-icons.png

@@ -0,0 +1,38 @@
+---
+title: Getting started
+---
+
+import DesktopChangesView from '../../images/desktop-changesview.png'
+
+## Getting started
+
+GitHub Desktop is a git workflow tool built on Electron. It's available on both macOS and Windows and was designed to feel like a native application, considering the core differences between the two platforms. It's meant to look platform agnostic and neutral, rather than mimicking the Primer styles used on github.com. These guidelines cover the basic principles and foundation elements to consider when designing for Desktop.
+
+<img src={DesktopChangesView} alt="" />
+
+## Principles
+
+Follow these principles to help guide your design choices.
+
+### Promote good git behavior
+
+Encourage using git sucessfully so that users can better communicate the work they've done to their teams and for their own records. For example, we encourage well written commit messages by making partial committing easy.
+
+### Balance the spectrum between “git” and “magic”
+
+Consider what the UI explicitly shows the user and what is hidden behind controls and feels like "magic". It's important to achieve a good balance between these two paradigms, so that users can understand what is happening and troubleshoot when necessary.
+
+### Prioritize beginners over advanced developers
+
+Always consider the needs of, and optimize for, beginner developers in favor of advanced developers.
+
+### Help developers learn as they go
+
+Use git terminology and add clarifying information and hints throughout to help users understand just enough of what’s going on behind the scenes. When git language is used accurately, users can more easily troubleshoot and learn concepts quickly.
+
+### Put what’s next front and center
+
+Always make it clear what the next step is after any given action. This helps beginner develolpers to learn common workflows.
+
+You can read more about how GitHub Desktop makes product decisions in the
+["What is GitHub Desktop and who is it for?"](https://github.com/desktop/desktop/blob/development/docs/process/what-is-desktop.md) document.

content/native/desktop/foundations.mdx

@@ -0,0 +1,21 @@
+---
+title: Desktop
+---
+
+import {Box, Link, Text} from '@primer/react'
+
+<Box display="grid" gridTemplateColumns={['1fr', null, null, null]} gridGap={4}>
+  <div>
+    <Link href="/native/desktop/getting-started" sx={{fontWeight: 'bold'}}>
+      Getting Started
+    </Link>
+    <Text as="p">Get started with the principles, standards, and recommendations for designing Github Desktop.</Text>
+  </div>
+  <div>
+    <Link href="/native/desktop/foundations" sx={{fontWeight: 'bold'}}>
+      Foundations
+    </Link>
+    <Text as="p">These are the foundational design concepts and constraints that can help inform design decisions. The core considerations for GitHub Desktop include platform differences and relationships to Primer Web guidelines.</Text>
+  </div>
+
+</Box>

content/native/desktop/getting-started.mdx

@@ -0,0 +1,14 @@
+---
+title: Native
+---
+
+import {Box, Link, Text} from '@primer/react'
+
+<Box display="grid" gridTemplateColumns={['1fr', null, null, null]} gridGap={4}>
+  <div>
+    <Link href="/native/desktop/" sx={{fontWeight: 'bold'}}>
+      Desktop
+    </Link>
+    <Text as="p">TODO: text for Desktop</Text>
+  </div>
+</Box>

content/native/desktop/index.mdx

@@ -161,12 +161,6 @@
       url: /components/tree-view
 - title: Native
   children:
-    - title: Mobile
-      children:
-        - title: Platforms
-          url: /native/mobile/platforms
-        - title: Foundations
-          url: /native/mobile/foundations
     - title: CLI
       children:
         - title: Getting started
@@ -175,3 +169,15 @@
           url: /native/cli/foundations
         - title: Components
           url: /native/cli/components
+    - title: Desktop
+      children:
+        - title: Getting started
+          url: /native/desktop/getting-started
+        - title: Foundations
+          url: /native/desktop/foundations
+    - title: Mobile
+      children:
+        - title: Platforms
+          url: /native/mobile/platforms
+        - title: Foundations
+          url: /native/mobile/foundations