Introduction

What is Halstack

Halstack is an Open Source Design System built and maintained by DXC Technology with the purpose of providing all the necessary tools for designing and implementing accessible, intuitive and consistent User Experiences with UXPin and React.

A tool for designers

Halstack's first goal is to provide Product Designers with pre-created designs for the most common use-cases they will face during the product design stage. Using Halstack, they don't need to reinvent the wheel looking for a solution to these mundane problems, and can focus on adding business value. Also, by centralizing these efforts in a Design System team, we can pay the right amount of attention to aspects as important as usability, accessibility, or consistency.

A tool for developers

Halstack's second goal is to simplify the handoff process from designers to developers, and facilitate the development of the components and patterns that already exist as part of the Design System. This way, we speed up the development process and minimize the room for errors when implementing these components.

What is not Halstack

A headless component library

Unlike headless component libraries like Radix UI or Reach UI, which are intentionally agnostic of design decisions, Halstack is a highly opinionated Design System, and most of its value resides in its design opinions.

Halstack React library does expose a themes API that allows developers to override many of these opinions. Still, the themes API has its limitations, and it is considered a work around the Design System guidelines to allow a restricted level of white-labeling. That means if you are designing an application and you already have strong UI/UX opinions, Halstack might not be the right tool for you.

A business component library

All the opinions provided by Halstack Design System always remain within the boundaries of the generalistic UI/UX Design domain. Halstack will not get into business-specific elements even if they are reusable. For example, Halstack might provide guidelines on using forms within the context of digital applications. Still, it doesn't get into the specifics of designing a form for an insurance quote application.

This design domain is noticeable by looking at the different configuration parameters in the Halstack React library, which resemble the language used by UX designers, without ever getting into the business semantics.

Although it doesn't get into the business domain, Halstack is currently used for the most part by insurance applications. For this reason, many of the decisions taken and the patterns observed might be influenced by this reality.

A replacement for the Product Design stage

Halstack should always be considered as assistance to the Product Design process, but never as a replacement. Product Designers are still a fundamental piece of this process since they will need to add the business context, validate the patterns contemplated by the Design System, and contribute back to the design system when necessary.

Assets

Design Guidelines

These are the pre-defined design opinions explained by writing. They are contained on this website and describe, with a high level of detail, aspects like usage, existing variants, or design specifications of the identified patterns.

UXPin

In the past, we used to rely on Adobe XD for our Design UI Kit. But we recently decided to migrate all the assets to UXPin to start a new and exciting journey. This decision brings, in addition to the well-known image-based classic design library, a new feature, the prototyping library.

Classic Design Library

Implementing the previously described Design Guidelines so that product designers can easily drag and drop the pre-created components into their designs, obtaining automatic updates of these components as the Design System evolves.

Prototyping Library

The prototyping library is a Halstack CDK component-based design library for fast prototyping, reducing the gap between designers and developers. Also, UXPin Merge is a low-code solution that can be leveraged to generate React code on top of Halstack components directly from the prototypes.

React Library

Including tailored development tools that will assist React developers in implementing Halstack applications. This library attempts to bring the Design System guidelines to your application, minimizing the effort by abstracting developers from the implementation details while taking the design semantics into the code.

How to use this site

This website contains essential information for both designers and developers. These are two different types of users, but they share a significant part of the journey.

Some Design Systems decide to organize their documentation following a development-centric approach, mimicking the structure of the development libraries. That is not the case for Halstack. Since the design process starts with designs, the Halstack documentation site's main navigation structure follows a design-first approach.

Content is always presented and arranged by design elements. Each design page contains not only information about usage and design specifications but also technical details about the different tools available for developers. These tools will help them implement the corresponding design element.

Legacy documentation sites

Although this is the current and only documentation we recommend reading while using Halstack Design System, the old site is still available through the following links for consulting legacy features and components:

Please note that these sites are discontinued and no longer supported.