Introduction

The new HD Design System provides an easy, theme based approach to design various services and tools with one unified language. Based on atomic components and simple rules for Typography, Layout and Spacing it is flexible enough to cover everything from simple form inputs to contextual actions and nested modals.

It's aim is not to provide the Designer with every single component but to rather provide essential patterns and rules to apply to more complex layouts and flows down the line.

Getting started

Install via npm

This design system is available on npm and can be installed in any node project:

# Using npm
npm i --save @hospitality-digital/design-system
# Using yarn
yarn add @hospitality-digital/design-system

Usage

The design system can be used as a complete system, or by extracting individual components on an as-needed basis.

Complete

To use the complete design system, import all.css into your project:

@import 'node_modules/@hospitality-digital/design-system/css/all.css';

Individual components

In order to extract individual components, first import the main.css file. This file contains the fundaments of the design system and includes CSS variables, helper classes, and basic element styles.

@import 'node_modules/@hospitality-digital/design-system/css/main.css';

Now you can start importing individual components:

@import 'node_modules/@hospitality-digital/design-system/css/components/button.css';
@import 'node_modules/@hospitality-digital/design-system/css/components/body-text.css';