Sketch UI Kit

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 Github.com. 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).

link-library-in-sketch

  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:

  • Esri Colors
  • Esri Typography
  • Esri UI Icons
  • Esri Components

Calcite Colors

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

Color categories:

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

Calcite Typography

This library contains the Avenir Next typeface. Choices are defined in the core definition of Esri Web. Type styles are organizes on pages that reflect the weights used in the framework CSS. The options are defined as Text Styles in Sketch. Additionally, for on-premise use, you can use the local font files from the Esri fonts repository.

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 pages:

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