---
name: Getting Started
route: /
edit: false
---

# The Economist Design System

* NPM module: [@economist/design-system](https://www.npmjs.com/package/@economist/design-system)
* GitHub repository: [EconomistDigitalSolutions/design-system](https://github.com/EconomistDigitalSolutions/design-system)

## About the documentation

The Economist Design System uses [docz](https://www.docz.site/) to generate interactive documentation.

This documentation is automatically updated as part of the design system release process.

## Getting Started

Run `npm run docs` to run the interactive documentation and to preview when developing components in the design system.

Every component should have a [MDX](https://mdxjs.com/) file which imports the component, lists defined properties and can be used to describe how and when to use the component.

```
---
name: Button
route: /components-button
edit: false
---

import { Playground, Props } from 'docz'
import Button from './button'

# Button
<Playground>
  <Button type='button'>Click</Button>
</Playground>

## Properties
<Props of={Button} />
```