helsinki-design-system

Helsinki Design System, or HDS, is an open-source design system built by the City of Helsinki. It bundles tools for development and design together with guidelines and resources for creating user-friendly, accessible digital services for the city. What it provides: - Accessibility baked in. Components are designed from the ground up to be as accessible as possible and go through a third-party accessibility audit before release. - React and CSS. Components ship both as React implementations and as CSS styles, so teams can pick whichever fits their project. - Customizable components. The components are built to be tailored, allowing projects to express the Helsinki brand. - Design and implementation in sync. Designers work with a collection of Sketch libraries that are kept in step with the implementation. Packages: HDS is split into three packages published to npm. hds-core provides the City of Helsinki brand colors, typography and base styles as CSS styles and variables. hds-react provides the HDS components implemented in React. hds-design-tokens holds the basis of the system, including base colors and typography, as design tokens. The project site at hds.hel.fi hosts the documentation, a list of available components and Storybook instances for both the React and core packages. Separate getting-started guides exist for developers and for designers. Development and contribution: the monorepo uses Lerna for running scripts across packages, versioning and releases, and pnpm workspaces for dependency management, which lets the separate packages reference each other through symlinks during local development. A development guide covers setting up a local environment. Contributions are welcome in the form of issues, pull requests and proposed component designs; the project also documents a support page for ways to get in touch. The repository is released under the MIT licence.