From 389a2e2d8cccd6f365e5b6b1d6130b6f111eebc5 Mon Sep 17 00:00:00 2001
From: jillianhowarth <jillianlovesdogs@gmail.com>
Date: Mon, 21 Sep 2020 12:09:36 -0500
Subject: [PATCH] Docs: design tutorials page (#1732)

* Docs: design tutorials

* docs: typo

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 src/data/nav-items.yaml           |  2 ++
 src/pages/designing/tutorials.mdx | 59 +++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 src/pages/designing/tutorials.mdx

diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml
index 63247c86427..ef941e4bb5a 100644
--- a/src/data/nav-items.yaml
+++ b/src/data/nav-items.yaml
@@ -12,6 +12,8 @@
       path: /designing/kits/sketch
     - title: Other resources
       path: /designing/design-resources
+    - title: Tutorials
+      path: /designing/tutorials
 - title: Developing
   pages:
     - title: Get started
diff --git a/src/pages/designing/tutorials.mdx b/src/pages/designing/tutorials.mdx
new file mode 100644
index 00000000000..961e3fb7b17
--- /dev/null
+++ b/src/pages/designing/tutorials.mdx
@@ -0,0 +1,59 @@
+---
+title: Tutorials
+description:
+  The Carbon design tutorials will get you set up to start designing with Carbon
+  and teach you about some of the foundational pieces of the design system.
+---
+
+import { Button } from 'carbon-components-react';
+import { ArrowRight16 } from '@carbon/icons-react';
+
+<PageDescription>
+
+The Carbon design tutorials will get you set up to start designing with Carbon
+and teach you about some of the foundational pieces of the design system.
+
+</PageDescription>
+
+<AnchorLinks>
+
+<AnchorLink>Introduction to Carbon</AnchorLink>
+<AnchorLink>Designing with Carbon</AnchorLink>
+<AnchorLink>Using the 2x Grid</AnchorLink>
+
+</AnchorLinks>
+
+## Introduction to Carbon
+
+Learn about Carbon and its history. This video covers how the IBM Design
+Language is applied to Carbon, how Carbon interacts with domain level guidance,
+and what it means to be an open source design system.
+
+<Video vimeoId="457802924" />
+
+For further learning, check out
+[All about Carbon](/all-about-carbon/what-is-carbon),
+[Get started](/designing/get-started), and the
+[IBM Design Language](https://www.ibm.com/design/language/).
+
+## Designing with Carbon
+
+This video covers how to design with components and type styles, and where to
+find relevant guidance and resources while designing. It also goes through the
+steps of getting set up with the Carbon Sketch kits and grid template.
+
+<Video vimeoId="457803206" />
+
+To learn more about our Sketch kits, head over to
+[Design Kits](/designing/kits/sketch).
+
+## Using the 2x Grid
+
+Learn about the fundamentals of using our 2x Grid. This video gives an overview
+of basic grid terminology, breakpoints, the three grid modes, and some resources
+to get started designing with the 2x Grid.
+
+<Video vimeoId="457802917" />
+
+You can find detailed grid guidance on the
+[2x Grid](/guidelines/2x-grid/overview) page.