What is HDS 2.0?

HDS version 2.0 is a major release. The main goal of this update is to unify HDS and Hel.fi visual identity. HDS components will adapt to the new typography style and many of the components are updated to match the Hel.fi visuals.

Reading this article will help you understand what has been changed in the HDS 2.0 update and how it will affect your project. If you are looking for a guide for migrating from HDS 1.X to 2.0, please refer to our 2.0 migration guide.

What will change in this version?

The following are the major, breaking changes of the update. Most of the breaking changes are purely visual and there are no component API changes aside from a few deprecated React theme variables.

Typography update

HDS has now adapted to the new typography styles that have been made familiar by the Hel.fi renewing project. The most prominent change is the update to heading font weights. Large headings now use regular weight instead of bold and only small heading sizes use bold weight. Font sizes have also been slightly altered for each heading level to ensure a smoother scale. The amount of supported heading levels has been increased from 5 to 6. As previously, a separate heading scale is still available for mobile devices.

It is important to note that this change affects many HDS components. If the component has used a heading style before, it has been visually changed in this update. This can cause the small size and spacing differences in many components.

To learn about the typography changes in greater detail, please refer to the HDS 2.0 migration guide.

Typography - Before and after images

Accordion update

The changes Hel.fi project has done to the Accordion component have been brought to HDS. The accordion now supports an optional close button that will appear at the bottom of an expanded accordion. The component now also features three (3) size variants.

Accordion - Before and after images

Breakpoint token and the container component changes

HDS breakpoint guidelines have been changed. While the breakpoint token values have stayed the same, the way how the maximum container width works in each breakpoint has been altered. Now there is only one maximum container width value, 1200 pixels. In other breakpoints, the content container takes all available space while the outside margins stay unchanged. This change will allow a better experience on smaller screens as all the possible screen estate will be utilised. The easiest way to follow the new container width guidelines is to use the HDS Container component.

Container - Before and after images

Other minor changes

  • Supplementary button padding change
  • The default link size has been changed from S size to M size
  • The grayscale colour tokens have been slightly altered
  • Theme variables that have been previously marked as deprecated have been deleted
Read the full changelog in the HDS GitHub page

What happens to HDS V1?

The HDS team will continue supporting the V1 version at least until the end of the year 2022. Any new features will not be released but the version will be kept operational and fixes will be provided to critical bugs (that would prevent a project from using the package). We hope that most projects would migrate to the new version but we also understand that some projects may not have the development resources to do so immediately.

HDS V1 documentation

Looking for HDS V1 documentation? Find it here: HDS V1 documentation.

How to keep using the HDS V1 in Abstract?

It is possible to keep using HDS version 1 if your project is not planning to update to 2.0 soon. We have released a separate Abstract project which contains library files of the latest version 1 release 1.15. You can link these libraries to your project and keep using components from them if you wish to keep using version 1.

Unfortunately, Abstract does not offer any easy way of swapping between the version 1 and the version 2 libraries. However, you can make the process smoother by using an external Sketch plugin, Automate.

  1. Install the Automate plugin to your Sketch.
  2. Remove linked HDS libraries from your project in Abstract.
  3. Link HDS v1 libraries to your project in Abstract. Take a look at our Abstract tutorial if you need more info about linking libraries.
  4. In Abstract, open a Sketch document that is using components from HDS libraries.
  5. In Sketch, Open the "Plugins" menu and select "Automate" → "Library" → "Replace library" to replace symbol and style with their HDS v1 library counterparts. Remember to commit these changes!
  6. Repeat steps 4 and 5 for each Sketch document in your project.

An alternative method is to download a specific HDS version design kit from the release list. This is not recommended if your project is used via Abstract.

How HDS will be versioned in the future?

The HDS versioning will stay the same after the 2.0 update. We will follow semantic versioning and breaking changes can only be introduced in major releases. However, we are planning to release major releases more often in the future. The next major release, HDS 3.0, is currently planned to be released in autumn 2022.