The Helsinki Design System (HDS) is an open-source design system built by the City of Helsinki. It consists of tools for development and design as well as resources and guidelines for creating user-friendly, accessible solutions for the city.
HDS documentation
|
Available components
|
React Storybook
|
Core Storybook
|
Contributing
Features
- Accessibility baked-in – All HDS components are designed from the ground up to be as accessible as possible. Components go through a third-party accessibility audit before release.
- React & CSS – Components are available both as React and CSS styles. Choose the one which suits best for your project.
- Customizable – HDS components are designed to be customizable to allow expressing the vibrant Helsinki brand.
- Design and Implementation in sync – Designers use a collection of Sketch libraries that are perfectly in sync with the implementation.
Packages
HDS is divided into three (3) separate packages:
-
– Helsinki City brand colors, typography, and base styles as CSS styles and variables. -
– Provides HDS components implemented using React. -
– Basis of the HDS which includes base colors, typography, etc. as design tokens.
Getting Started
🔧 Are you a developer? If yes, start by checking out the HDS – For developers page.
🎨 Are you a designer? If yes, start by checking out the HDS – For designers page.
Using the Packages in Your Project
See the package-specific instructions on how to get started using the packages:
Setting Up Local Development Environment
Start setting up your local development by going through the steps in the development guide.
Contributing
Before contributing, it is recommended to read the HDS Contribution – Before contributing page. We are accepting new features, feature requests, and help with improving the documentation. There are multiple ways you can contribute:
- Opening issues about bugs, improvements, new features, etc.
- Opening pull requests with changes, fixes, new features, etc.
- Opening branches in Abstract to propose new component designs or design changes. More information about design contribution can be found in the HDS Contribution – Design page.
- Take part in discussion and commenting on new HDS features. The easiest way to do this is to browse open issues and pull requests and leave a comment! If you have access to the City of Helsinki Slack, you may also join the discussion there. More info about the ways to contact us can be found in the HDS About – Support page.
Troubleshooting
If you encounter issues during installation or while using the Helsinki Design System, here are a few steps to troubleshoot effectively:
- Ensure all packages are up to date by checking the version numbers.
- Review the developer and designer pages for updated documentation and guidance.
- Check the issues on GitHub for reported problems similar to yours, and see if there’s a fix available.
For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.
At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.