Transfer and polish existing "Nord Xcode" docs and assets

Inititially this includes the install & activation and asset
catalog color set guide.

GH-182

content/docs/ports/xcode/asset_catalog/index.mdx

@@ -0,0 +1,80 @@
+import Link from "atoms/core/Link";
+import { Banner, Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
+import { Code } from "atoms/core/html-elements";
+import { ReactComponent as ColorSwatchesStripes } from "assets/images/illustrations/color-swatches-stripes.svg";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Installation & Activation",
+  subline: "Get up and running with a few commands"
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <ColorSwatchesStripes />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+## Color Set
+
+Nord Xcode provides a _color set_ for Xcode [asset catalog][apple-dev-lib-asset_catalog] that can be used as named colors in the [Interface Builder][apple-dev-if_builder] and programmatically, e.g. via the `UIColor(named)` function.
+
+<Image
+  alt="Screenshot showing the Xcode interface builder using the Nord color set from the asset catalog"
+  fluid={props.images["ui-interface_builder.png"]}
+>
+  <span>
+    The Xcode{" "}
+    <Link href="https://developer.apple.com/xcode/interface-builder" target="_blank">
+      interface builder
+    </Link>{" "}
+    using the Nord color set from the asset catalog.
+  </span>
+</Image>
+
+The colors are located in the [`nord.xcassets`][gh-tree-xcassets] folder and can be installed by [adding the folder to your project][apple-help-xcode-add_folder_files].
+
+<SpaceBox mTop={2} mBottom={2}>
+<Banner
+  title={
+    <>
+      More details about the asset catalog, color sets and the usage.
+    </>
+  }
+>
+
+Please read the official documentation section on how to [create a asset catalog and color sets][apple-help-xcode-create_ass_cata] to learn more about the usage in the [Interface Builder][apple-dev-if_builder].
+
+</Banner>
+</SpaceBox>
+
+<Image
+  alt="Screenshot showing the Nord color set in the Xcode asset catalog"
+  fluid={props.images["ui-asset_catalog.png"]}
+>
+  <span>
+    The Nord color set in the{" "}
+    <Link
+      href="https://developer.apple.com/library/archive/documentation/Xcode/Reference/xcode_ref-Asset_Catalog_Format"
+      target="_blank"
+    >
+      Xcode asset catalog
+    </Link>
+    .
+  </span>
+</Image>
+
+</ShrinkedWidth>
+
+[gh-tree-xcassets]: https://github.com/arcticicestudio/nord-xcode/tree/develop/src/nord.xcassets
+[apple-dev-lib-asset_catalog]: https://developer.apple.com/library/archive/documentation/Xcode/Reference/xcode_ref-Asset_Catalog_Format
+[apple-dev-if_builder]: https://developer.apple.com/xcode/interface-builder
+[apple-help-xcode-add_folder_files]: https://help.apple.com/xcode/mac/current/#/dev81ce1d383
+[apple-help-xcode-create_ass_cata]: https://help.apple.com/xcode/mac/current/#/dev10510b1f7

content/docs/ports/xcode/installation/index.mdx

@@ -0,0 +1,73 @@
+import Link from "atoms/core/Link";
+import { Image, ShrinkedWidth, SpaceBox } from "atoms/core/mdx-elements";
+import { ReactComponent as WindowCode } from "assets/images/illustrations/window-code.svg";
+
+import WIPNotice from "../../../../shared/docs/wip-notice";
+
+export const frontmatter = {
+  title: "Installation & Activation",
+  subline: "Get up and running with a few commands"
+};
+
+<ShrinkedWidth value={25}>
+
+<SpaceBox mTop={4} mBottom={4}>
+  <WindowCode />
+</SpaceBox>
+
+</ShrinkedWidth>
+
+<ShrinkedWidth value={80}>
+
+<WIPNotice />
+
+## Installation
+
+Nord Xcode can be installed by downloading the latest [`Nord.xccolortheme`][gh-tree-xccolortheme] file from the [GitHub repository][gh-repo] and place it into the `~/Library/Developer/Xcode/UserData/FontAndColorThemes` directory.
+
+```sh
+mkdir -p ~/Library/Developer/Xcode/UserData/FontAndColorThemes
+curl https://raw.githubusercontent.com/arcticicestudio/nord-xcode/develop/src/Nord.xccolortheme -o ~/Library/Developer/Xcode/UserData/FontAndColorThemes/Nord.xccolortheme
+```
+
+### Latest Development State
+
+To always use the latest development state of Nord Xcode, [clone the repository][gh-repo] and create a [symbolic link][wiki-symlink] of the [`Nord.xccolortheme`][gh-tree-xccolortheme] file to `~/Library/Developer/Xcode/UserData/FontAndColorThemes/Nord.xccolortheme` afterwards:
+
+```sh
+git clone https://github.com/arcticicestudio/nord-xcode
+ln -sr "$PWD/src/Nord.xccolortheme" "$HOME/Library/Developer/Xcode/UserData/FontAndColorThemes/Nord.xccolortheme"
+```
+
+<Image
+  alt="Screenshot showing the GitHub repository web UI to download the project repository"
+  fillSize={60}
+  fluid={props.images["github-clone.png"]}
+>
+  <span>The GitHub repository web UI to download the project repository.</span>
+</Image>
+
+## Activation
+
+To activate and use Nord Xcode as your default color theme…
+
+1. …open _File_ > _Preferences_
+2. …switch to the _Fonts & Colors_ tab
+3. …select _Nord_ from the list
+
+<SpaceBox mTop={4} mBottom={4}>
+  <Image
+    dropShadow
+    fluid={props.images["ui-activation.png"]}
+    rounded
+    alt="Screenshot showing the Xcode preference to activate the Nord color theme"
+  >
+    <span>The Xcode preferences to activate the Nord color theme.</span>
+  </Image>
+</SpaceBox>
+
+</ShrinkedWidth>
+
+[gh-repo]: https://github.com/arcticicestudio/nord-xcode
+[gh-tree-xccolortheme]: https://github.com/arcticicestudio/nord-xcode/blob/develop/src/Nord.xccolortheme
+[wiki-symlink]: https://en.wikipedia.org/wiki/Symbolic_link