Developers

Introducing Calcite Design System (beta release)

Build beautiful, consistent apps that seamlessly integrate with the ArcGIS ecosystem.

For several years, Esri designers and developers have been collaborating on a design system to be used across Esri products and websites to enable a unified user experience. It’s called the Calcite Design System. Today we released a beta version of Calcite for the developer community that is fully integrated with the Developer site. Using Calcite, developers can create beautiful, user-friendly, responsive, and consistent experiences across apps with minimal effort. It includes design best practices, icons, color schemes, and an accessible web component library with UI elements such as buttons, panels, accordions, alerts, and many more. It also manages spacing and layout with relative positioning so your app can achieve a clean, responsive design for any screen size.

Integration with the ArcGIS ecosystem

The design system originated as a collaboration between Esri’s design and development teams to create a unified visual standard of excellence. Using a shared collection of resources and guidelines, teams can create consistent, on-brand Esri experiences for use by ArcGIS products and Esri Professional Services projects.

As the design system evolved and improved, we realized that it could offer a significant benefit to the broader developer community. In addition to building beautiful apps faster, developers would have the ability to create a cohesive product experience by using the patterns and established best practices that are native to ArcGIS. Their apps could integrate with the ArcGIS ecosystem by offering the familiar ArcGIS look and feel – and at the same time showcase their own brand and style. Hence, we made the design system’s design and developer resources available through the ArcGIS Developers site.

The new Map Viewer uses Calcite for UI layout and components to construct the user experience. This shows examples of where Calcite is used.
This is a custom app built with Calcite and the ArcGIS API for JavaScript. You can recognize some of the same components used in the new Map Viewer.

UI building blocks: web components

Developers can build their web apps using a collection of 50+ UI components that are the foundational building blocks of any web application. They all have the following characteristics:

Esri heavily depends on the design system for creating the UI/UX of ArcGIS products – so as products evolve, new products are introduced, and the developer community begins to contribute requirements, the component library will expand and evolve.

Customize to match your own brand

Theming allows you to integrate your own style or company branding in your app.

By default, UI components will use the ArcGIS color palette, font, and component shape. If you want to adapt the look to match your brand or style preference, you can easily customize the components in a variety of ways:

Setting theme="dark" will apply the dark theme to the components. This app also demonstrates how you can play with the basemap color to contribute to the overall style of your app.
--calcite-ui-brand: #00DBAA;
--calcite-ui-brand-hover: #C71585;
This is the same app as the vaccine finder, but was customized to be a bakery finder instead. It uses custom branding colors, button shape, and fonts.

From design to app using UI Kits

What is your process for designing your application? Perhaps you work with a design team to first create the experience, or maybe you design and develop the app yourself. In either case, you can choose to use popular design tools and our design system’s UI kit to easily drag and drop components into your app’s UI layout. (Note: With this first release, only Sketch is supported but we are working to add support for Figma and Adobe XD later this year.)

In the UI Kit, you’ll find symbolized versions of all the web components calcite-components, colors, icons, and fonts that are part of the design system. As you construct your designs in Sketch, developers will be able to implement them in code.

Learn how you can use the UI Kit to design your app in Sketch.

Icons

Our icon and illustration team maintains a collection of icons for products and marketing efforts. These icons can be used in your application UI or used as symbology in your map.

Calcite includes two main libraries; calcite-ui-icons and calcite-point-symbols. All of the icons are available as SVG images and have tags attached to them so that it’s easy for users to find the functional or mapping icons they are looking for. You can browse both libraries of icons using the icons page.

calcite-ui-icons

A collection of 700+ monochrome user interface icons meant for use outside of a map. They represent software functions in web and native application experiences. These icons depict straightforward concepts avoiding unnecessary complexity and are implemented with a single fill color. Built at 16px, 24px, and 32px in the primary 1px outline style. These icons are also implemented as an icon component in the calcite components library.

calcite-point-symbols

A collection of 700+ monochrome point symbol icons for usage on maps. Built at 13px, 17px, and 21px. Constructing these symbols on an odd-numbered pixel grid means that they can be centered both horizontally and vertically.

Colors

Esri’s colors have sparse use of strong and bold colors and leave the core focus on the primary blue brand color and UI states. Additionally, all the colors are designed with accessibility in mind when building the component library. Moreover, both light and dark themes pass the WCAG AA accessibility contrast ratio.

Get started

Everything you need to get started is available on the Developers website. You will find resources such as usage guidelines, best practices (do’s and don’ts), writing and copy guidelines, accessibility documentation, and a component API reference. Most notable, you will find knobs for the component configuration to visualize the flexibility of its properties, light/dark theme, and right-to-left layout for localization. As you adjust the component knobs and properties, you can copy the code from what you modified and paste it straight into your application.

A look into the future

Stay tuned for the production release. Calcite is currently in beta. While it is in beta, please feel free to try it out and share your feedback with us via the Calcite place on Esri Community!

An evolving design system. As with other state-of-the-art design systems, Esri’s design system is constantly evolving with the advancement of ArcGIS technology, the available tooling for web development, and the underlying technology. Since Esri heavily depends on the design system for creating the user experience for products, the component library will continue to grow and see on-going enhancements.

Beyond web. While the current UI components are limited to the web platform, we plan to expand the offering to support more platforms. In fact, apps built with technologies other than web can still benefit from many of the design system resources such as the design guidelines, icon library, and colors.

We can’t wait to see what you build!

About the authors

Julie Powell is a Principal Product Manager, focusing on ArcGIS API for JavaScript and Esri's design system. She interfaces with a wide user community to maintain awareness and insight into GIS community needs, meanwhile contributing feedback to development teams in order to help ensure users can be successful in building state of the art, purposeful solutions using ArcGIS software. Julie presents GIS technology trends and innovative solutions at the Esri Developer Summit, Esri International User Conference, Esri Latin American User Conference, and other regional conferences. Julie brings 19 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets. Julie has worked on a wide range of projects and consulting endeavors, including serving as technical lead for web mapping solutions for strategic customers.

Connect:

Leave a Reply

Please Login to comment

Next Article

What’s new in ArcGIS for Office (July 2021)

Read this article