Skip to main content
Design System
Get started Introduction

Introduction

Working scaffold

Run the Design System and documentation site locally.

Install and run

Use Node.js 22 or newer. From the repository root:

npm install
npm run dev

This compiles src/hes.scss into dist/hes.css, copies that exact asset for the documentation site, then starts Astro. Changes to Sass require rebuilding the stylesheet.

Build

npm run build

The compiled Design System stylesheet is produced at dist/hes.css. The static documentation site builds separately to site/dist/.

Scope

The current output is Bootstrap with a provisional HES Button pilot. This is not an approved HES-wide theme. The pilot reference values are generated from a single JSON file and will later be replaced by reviewed semantic token mappings.

Using Bootstrap

Prefer established Bootstrap components and utilities. Use HES-specific classes only when Bootstrap cannot appropriately express a distinct HES pattern. The documentation site has its own navigation styles, which are not part of the distributable Design System CSS.