feat(docs): add getting started guides for web (#138)

* feat(docs): add getting started guides for web

* fix(docs): apply suggestions from @n8chur code review

Co-Authored-By: Westin Newell <westin.newell@gmail.com>

* fix(docs): replace 'design system' with 'Diez project' when appropiate

docs/existing-project-integration/web.md

@@ -0,0 +1,82 @@
+# Integrating A Diez Project into an Existing Web Application (JavaScript)
+
+## Requirements and installation
+
+Diez works in macOS, Windows, and Linux and only requires Node.js >= 7.10.1. For specific instructions on how to install Diez please refer to the [installation guide][TODO:].
+
+This guide assumes that you already have a Diez project. If you don't have one, you can generate a starter project by running:
+
+```bash
+$ yarn create diez-project my-project
+$ cd my-project
+```
+
+## Diez as a library
+
+The output of the Diez compiler for a specific target is a library that is ready to use. For Web with JavaScript, this means that you can consume your Design System by `import`ing it.
+
+```
+// Import your DesignSystem and Diez
+import {DesignSystem, Diez} from 'diez-my-project';
+
+// Create a new Diez instance providing your DesignSystem as a source
+const diezDs = new Diez(DesignSystem);
+
+// Listen to changes in the design system
+diezDs.attach((ds) => {
+  // the ds has been updated!
+});
+```
+
+In a typical setup, you'll have a folder that contains your design system definitions and a separate folder with your web project.
+
+To use the compiled files in your project, you need to add the design system as a local dependency to your project, in your `package.json`:
+
+```
+dependencies: {
+  "diez-my-project": "./your/project/path"
+}
+```
+
+The Diez compiler can compile your design system in two modes: normal and hot.
+
+### Development flow
+
+`hot` mode is used for development and will watch your Diez project for file changes and hot reload your code.
+
+`hot` mode also comes with an integrated development server that will take care of serving assets like images and fonts for you.
+
+To start your development server you can run:
+
+```
+$ diez hot -t web
+```
+
+### Build flow
+
+Once you are ready to build your application, you need to compile your files:
+
+```
+$ diez compile
+```
+
+## Interacting with Prefabs
+
+Diez comes packaged with many prefabs that you can use to define your [Design Token Components (DTCs)](TODO:). All of the properties defined on these components are available to you along with a number of extensions and helpers to make interacting with these components as seamless as possible.
+
+### [Color](TODO:)
+
+```javascript
+```
+
+### [Image](TODO:)
+
+```javascript
+```
+
+### [Lottie](TODO:)
+
+```javascript
+```
+
+### [Typograph](TODO:)

docs/getting-started/web.md

@@ -0,0 +1,80 @@
+# Web Getting Started Guide (JavaScript)
+
+## Getting Started
+
+The easiest way to try out Diez is by using our official template project which comes with everything set up for you. To get the project, run in your terminal:
+
+```bash
+$ yarn create diez-project my-project
+$ cd my-project
+```
+
+### Building your project
+
+In the template project, you'll find a sample Diez project defined for you in `src/DesignSystem.ts` and a sample web project consuming it in `examples/web`.
+
+The template project comes with a couple of commands defined in `package.json`, including `build-web` which generates a build of your Diez project ready to consume in JavaScript as a library.
+
+To build your Diez project for web run:
+
+```bash
+$ yarn build-web
+```
+
+This command instructs Diez to compile your project for web. If you are curious what that looks like, you can inspect the build files at `build/diez-your-project-web`.
+
+### Running the web app
+
+If you take a look at the code in `examples/web/App.tsx`, you'll find that the design system is used across the app in sections of the code like this:
+
+```jsx
+<Masthead
+  backgroundColor={ds.colors.darkBackground.toString()}
+  backgroundImage={`url(${ds.images.masthead.url})`}
+/>
+```
+
+As you can see, the app is **directly** consuming your design system! To start the web app, run the following commands in your shell:
+
+```
+$ cd examples/web
+$ yarn start
+```
+
+And visit [http://localhost:8080](http://localhost:8080) in your favorite web browser.
+
+## Making Changes
+
+You can view changes in real time by starting a hot Diez server for your project. This server will take care of compiling your Diez project every time it changes.
+
+To start the server, in a **new** terminal window or tab, run:
+
+```bash
+yarn run-web
+```
+
+For example, you can change the background color of the application by modifying the design system's source of truth.
+
+First, open `src/DesignSystem.ts` in an editor of your choice. Look for the following block of code:
+
+```typescript
+class Colors extends Component {
+  @property lightBackground = palette.white;
+  @property darkBackground = palette.black;
+  @property text = palette.black;
+  @property caption = palette.purple;
+}
+```
+
+> In this example, the `Colors` component maps semantic names to the `Palette` component's color definitions.
+
+Change `lightBackground` to `palette.lightPurple` like so:
+
+```Diff
+- @property lightBackground = palette.white;
++ @property lightBackground = palette.lightPurple;
+```
+
+Go back to your browser and see the web app hot update! You can update and hot reload **any** value defined in your design system: strings, colors, images, fonts, etc.
+
+Now you are ready to start! if you want to integrate Diez with an existing project, check out [Integrating Diez with an existing web project][TODO:]