Skip to content
Kalo UI Kit & Design Documentation
Branch: master
Clone or download
Latest commit 062afa0 May 23, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Use package-lock.json for Circle cache Mar 12, 2019
flow-typed/npm Update flow typed defs Sep 25, 2018
scripts Add documentation on how to add new tokens/token categories Apr 26, 2019
site Add color coral May 23, 2019
.babelrc Re-add displayName babel plugin Mar 21, 2018
.eslintignore Ignore config directory from typechecking/linting Jan 15, 2018
.eslintrc.js Bump prettier Feb 1, 2019
.flowconfig Flow skip emotion and polished Sep 25, 2018
.istanbul.yml Setup coverage tests May 5, 2017
.nvmrc Bump node version to match FE Mar 21, 2019
.prettierignore Ignore package.json from prettier to stop automatic updates from gett… Mar 16, 2018
.prettierrc Bump prettier Feb 1, 2019 Update readme May 15, 2019
gulpfile.js Build vanilla JS Apr 9, 2019
package-lock.json 3.10.0 May 23, 2019
package.json 3.10.0 May 23, 2019
postcss.config.js New styleguide (#232) Nov 23, 2018
wallaby.js Move to Jest Sep 19, 2017

Kalo UI

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 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.

Getting started

The documentation site ( are built using GatsbyJS and live in site/.

To run the docs locally:

  1. npm install in the root of UI
  2. cd site - this is where the docs live.
  3. npm install (you will also need to npm install in the root UI directory).
  4. npm run start
  5. 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

Common workflows

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:

  1. Run the SVG through SVGO
  2. Add the SVG file to src/icons/svg.
  3. Run npm run generate:icons to generate a new IconSymbols file.
  4. Add the new icon to the ICON Enum in src/components/icon/constants.js.

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 config/design-tokens.

To add a new design token:

  1. Add the token name and value to the appropriate file in config/design-tokens.
  2. Then run npm run generate:tokens.


  1. Ensure you have been added to the @kalo NPM team.

    If you're not sure, you can ask in #frontend-cohort.

  2. Once your changes have been merged in to master, checkout master and pull the latest.

  3. Run 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.
  4. Your change has been published 🎉. Remember to let the rest of the team know!

You can’t perform that action at this time.