Sketch UI Kit

This resource will be deprecatedPlease reference the Figma UI Kit documentation.Learn more

The UI-Kit contains all the resources you need for Sketch to design great web applications. In this kit you'll find symbolized versions of all Calcite Components, Calcite UI Icons, Calcite Colors, and Calcite Typography. As you construct your designs in Sketch, developers will easily be able to implement them in code.

When there are new updates to the library, they are exported and versioned on In order to use the built symbols you will need to download the Sketch library.

Download Sketch UI Kit

Once you have downloaded the files above make sure to unzip and follow the steps below to link the libraries in Sketch.

  1. Click Sketch > Preferences

  2. Click the libraries tab, then add library. link-library-in-sketch

  3. Navigate to the folder with extracted ZIP files and select all the files from the library you downloaded. You can also import individual files. For example, you only need the Calcite UI icons library. link-library-in-sketch

  4. You have successfully linked the Sketch library, you can now close the Preferences window 🎉

Using the kit

To keep components and parts of a component organized, focusing on the naming of the component first will help the user navigate. From there, it's the type (off, on, empty, error, etc) followed by the state (focus, hover, idle).


  1. Every component is made up of 3 drill-downs: Component -> Type -> State
  2. Leverage the symbol panel to change the state of the component along with any applicable overrides

What is in the library?

In the project are the following libraries:

  • Calcite Colors
  • Calcite Typography
  • Calcite UI Icons
  • Calcite Components

Calcite Colors

This library contains the UI Colors that are leveraged in the design system. For the complete Calcite Color reference, see Calcite colors repository.

Color categories:

  • Brand
  • Status
  • Borders
  • Type
  • Background/foreground
  • Grays

Calcite Typography

Typographic styles are defined as Text Styles in Sketch.

Type styles:

  • Avenir / Light
  • Avenir / Regular
  • Avenir / Medium
  • Avenir / Bold

Calcite UI Icons

This library contains the complete set of SVG icons available in the Calcite UI Icons. The icons are converted to symbols and can be placed into your design file. The symbols have a color mask applied that allows the color to be overridden with any color.

Icon sizes:

  • 16px
  • 24px
  • 32px

Calcite Components

The library contains components such as buttons, links, inputs, switches, sliders, cards, modals, etc. Components from the Sketch library will always have parity to the web frameworks.

  • Small, medium, and large sizes for each component
  • Light and dark themes for each component
  • Thousands of unique variations

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.