Design system for building user interfaces at Kalo.
Welcome to Kalo UI.
This repo contains the source code for the design system, as well as the source for the documentation site that powers kalo.design The purpose of Kalo UI is to provide a UI kit of components to be used across all Kalo products, regardless of the technologies they are implememnted with. It should be our equivalent to Material, containing components, icons, design tokens and other tools required on Kalo products.
The documentation site (kalo.design) are built using GatsbyJS and live in
To run the docs locally:
npm installin the root of UI
cd site- this is where the docs live.
npm install(you will also need to
npm installin the root UI directory).
npm run start
- And you should be up and running at localhost:8000
For full documentation on how to use @kalo/ui, please refer to the documentation site: KDS Documentation
Adding a new icon
The raw SVG files are stored in
src/icons/svg. These are then converted in to symbols which are imported in to Kalo Frontend.
To add a new icon, follow these steps:
- Run the SVG through SVGO
- Add the SVG file to
npm run generate:iconsto generate a new IconSymbols file.
- Add the new icon to the ICON Enum in
Adding a new design token
Design tokens make up the core of our design system. They are shipped in several formats (including JSON, JS, CSS Custom Variables, and SCSS Variables). The source files are in
To add a new design token:
- Add the token name and value to the appropriate file in
- Then run
npm run generate:tokens.
Ensure you have been added to the
If you're not sure, you can ask in #frontend-cohort.
Once your changes have been merged in to master, checkout master and pull the latest.
npm run release.
This will open an interactive cli, which will let you select the type of version that you're releasing.
Here's a rough guidance to the types of version:
patch- Isolated bug fixes.
minor- An internal backwards-compatible change
major- A breaking change has been introduced.
Your change has been published
🎉. Remember to let the rest of the team know!