Web toolkit

The web toolkit provides a set of resuable HTML and CSS components that can be used inside any web based project.

Use the code samples provided in the UI Library along with the web toolkit.

Get the toolkit

How to use the web toolkit in your project

A) Compile source

Compiling the Honeycomb source is the preferred way of using the web toolkit as it allows settings to be customised to the projects requirements.

  • npm install git://
  • In your Sass reference the different modules needed for the project. E.g. @import "honeycomb/src/base/css/main";

Modules that have settings will have settings directories and partials. Override the settings in your sass by setting them before importing the Honeycomb module.

B) Precompiled distributable

  • Download the dist directory from the Git repo and drop the contents into your project
  • Reference the honeycomb.css CSS file from your project
  • Reference the honeycomb.min.js JavaScript file from your project
    • If referencing the JavaScript, add the following script to tell Honeycomb where it is, before referencing the Honeycomb JavaScript:
    • Depending on your browser support you may need to include the babel polyfill before the Honeycomb JavaScript:

      More info on the Babel polyfill

Design toolkit (Sketch library)

The design toolkit is a Sketch pattern library that lives in

Get the toolkit

How to use the design toolkit in your project

Video walkthrough (No audio)

  • Ensure you have the latest version of Sketch (if you haven’t moved Sketch to the Apps folder you won’t get updates)
  • Ensure you have installed Roboto and Segoe UI (otherwise the elements will look weird and be misaligned).
  • Install and log in to the sketch plugin:
    • Download and run the plugin. This will install the plugin and launch Sketch
    • In Sketch, create a new document, or open an existing Sketch document
    • Open the window from the Sketch Menu (Plugins> or CMD+Shift+D
    • Log in to
  • Hopefully you’re now ready start using in sketch – you should now be able to insert components and style existing elements with the plugin.

Ensure you’re always using the latest version of the Honeycomb Library

Click ‘Sync to Document’ at the bottom of the window to update your document to use the latest Honeycomb styles.

Winforms toolkit (Private)

WPF toolkit (Private)