- TypeScript 83.7%
- JavaScript 7.4%
- SCSS 5.7%
- Handlebars 3.1%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
| .bob | ||
| .changeset | ||
| .github | ||
| .vscode | ||
| packages | ||
| patches | ||
| showcase | ||
| website | ||
| .copywrite.hcl | ||
| .gitignore | ||
| .mcp.json | ||
| .npmrc | ||
| .nvmrc | ||
| .tool-versions | ||
| AGENTS.md | ||
| CLAUDE.MD | ||
| LICENSE | ||
| opencode.json | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
The Helios Design System provides the building blocks to design and implement consistent, accessible, and delightful product experiences across HashiCorp.
Usage
For guidelines on how to use Helios, see our documentation website.
Release notes
A changelog for code and Figma changes is kept on the Helios website
Packages
packages/components 
Design System components in Ember.js
- npm package:
@hashicorp/design-system-components - website: https://helios.hashicorp.design/components
- more info: see components/README and components/CONTRIBUTING.
packages/flight-icons 
Flight icons in different formats (SVG/SVG Sprite/React)
- npm package:
@hashicorp/flight-icons - more info: see flight-icons/README and flight-icons/CONTRIBUTING for details on how to use the "sync/build" scripts that export the assets from Figma and generate a bundle of standalone SVG files.
packages/tokens 
Design tokens
- npm package:
@hashicorp/design-system-tokens - website: https://helios.hashicorp.design/foundations/tokens
- more info: see tokens/README and tokens/CONTRIBUTING for details on how to update the design tokens.
Contributing
Workspaces
This monorepo uses pnpm workspaces to manage dependencies for all packages.
Adding new packages
Run this command from the monorepo root:
pnpm -F <workspace-npm-package> add --dev <npm-package>
e.g. pnpm -F @hashicorp/design-system-components add --dev ember-cli-flash
Using ember install in the monorepo
Run this command from the monorepo root:
pnpm -F <workspace-npm-package> run ember install <npm-package>
e.g. pnpm -F @hashicorp/design-system-components run ember install ember-a11y-refocus
Changesets
This project uses changesets to manage how changes will be released. Each user-facing change to a package should come with a changeset for each package that has changed.
To create a changeset, run and follow the prompts in your terminal:
pnpm changeset
See the changeset docs for more information.
Note: If you want to ignore a changeset bump in terminal (e.g. major bump for selected "package x" is N/A, want a patch release), press return on the command line to skip that step. Press the spacebar to select that step.
Releasing
See the release docs for the process we follow to publish a new package version.
License
This project is licensed under the Mozilla Public License 2.0.
Versioning
We use SemVer for versioning.