---
title: Getting started
label: Getting started
---

The HDS offers a catalogues of accessible, mobile-friendly components ready to use, promoting consistency and saving teams the effort of building everything from scratch for their web design and redesign projects.

## How to use the design system
Developers can use the system in three ways:

<div class="au-body">
    <div class="health-band getting-started">
        <div class="health-grid health-listing health-grid--3col-md">
            <div class="health-card health-card--shadow health-card--colour-primary">
                <div class="health-card__body">
                    <h2 class="health-card__title">1. Out of the box</h2>
                    <div class="health-card__text">
                        <ul>
                        <li>Simply download and include the CSS and JS files from the folder in your product.</li>
                        <li>Browse the system to understand how to use components.</li>
                        <li>Use the templates as a starting point.</li>
                        <li>Copy the HTML from the components to build your product.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="health-card health-card--shadow health-card--colour-secondary">
                <div class="health-card__body">
                    <h2 class="health-card__title">2. Build yourself</h2>
                    <div class="health-card__text">
                        <ul>
                        <li>Clone the <a href="https://github.com/healthgovau/health-design-system">HDS repository</a> into your project via NPM, or download it.</li>
                        <li>Compile the code into usable CSS and JS.</li>
                        <li>Browse the system to understand how to use components.</li>
                        <li>Use the templates as a starting point.</li>
                        <li>Copy the HTML from the components to build your product.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="health-card health-card--shadow health-card--colour-tertiary">
                <div class="health-card__body">
                    <h2 class="health-card__title">3. Use the starter kit</h2>
                    <div class="health-card__text">
                        <ul>
                        <li>Familiarise yourself with the Health Design System.</li>
                        <li>Clone the <a href="https://github.com/healthgovau/health-design-system-starter-kit">HDS Starter Kit</a> which includes a local development environment and the HDS.</li>
                        <li>Start protyping.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

## Installation
Detailed instructions are available in the [Health Design System repository](https://github.com/healthgovau/health-design-system#installation).
## Codebases
- [GitHub](https://github.com/healthgovau/health-design-system)
- [NPM](https://www.npmjs.com/package/@health.gov.au/health-design-system)