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.
Install via npm
This design system is available on npm and can be installed in any node project:
# Using npmnpm i --save @hospitality-digital/design-system# Using yarnyarn add @hospitality-digital/design-system
The design system can be used as a complete system, or by extracting individual components on an as-needed basis.
To use the complete design system, import
all.css into your project:
In order to extract individual components, first import the
This file contains the fundaments of the design system and includes CSS variables, helper classes, and basic element styles.
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';