{"id":434922,"date":"2021-06-02T19:12:43","date_gmt":"2021-06-03T02:12:43","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&p=434922"},"modified":"2021-06-02T19:12:43","modified_gmt":"2021-06-03T02:12:43","slug":"calcite","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite","title":{"rendered":"Introducing Calcite, Esri\u2019s Design System"},"author":1031,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_links_to":"","_links_to_target":""},"categories":[10832,25002],"tags":[472461,474612,474332],"arcuser_issues":[474432],"class_list":["post-434922","arcuser","type-arcuser","status-publish","format-standard","hentry","category-developer-technology","category-developers-corner","tag-arcuser","tag-dev-tools","tag-esri-calcite-design-system","arcuser_issues-spring-2021"],"acf":{"short_description":"Esri\u2019s design system (Calcite) enables you to create beautiful, easy to use, and consistent experiences across apps with minimal effort.","pdf":{"host_remotely":false,"file":434932,"file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"Esri\u2019s design system (Calcite) enables you to create beautiful, easy to use, 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 including buttons, panels, accordions, and alerts. The design system also manages spacing and layout with relative positioning so your app can achieve a clean, responsive design for any screen size.\r\n

Integration with the ArcGIS Ecosystem<\/h3>\r\nThe design system originated as a collaboration between design and development teams at Esri to create a unified visual standard of excellence. Using a shared collection of resources and guidelines allows the creation of consistent, on-brand Esri experiences for use in ArcGIS products and Esri Services projects.\r\n\r\nAs Calcite evolved and improved, Esri realized that offering it to the broader developer community would provide significant benefits. 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 native to ArcGIS.\r\n\r\nApps created with the design system could seamlessly integrate with the ArcGIS ecosystem, providing the familiar ArcGIS look and feel. Consequently, Esri made the design system resources available through the ArcGIS Developers site at developers.arcgis.com\/calcite-design-system. It was initially released as beta, and will have a production release later in 2021.\r\n\r\n "},{"acf_fc_layout":"image","image":435022,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

UI Building Blocks: Web Components<\/h3>\r\nDevelopers can build web apps using the collection of 47 UI components that are the foundational building blocks of any web application. These components are flexible, responsive, localizable, framework agnostic, accessible, and themable.\r\n\r\nFlexible\u2014Components can be configured in a variety of ways. For example, buttons can have square or rounded edges).\r\n\r\nResponsive\u2014UI components have sizing options and other adaptive traits so apps can adjust to various display sizes.\r\n\r\nLocalizable\u2014Components support both left-to-right and right-to-left localization, and text properties can be set for any locale.\r\n\r\nFramework Agnostic\u2014Because components are built on the web component standard, they are framework agnostic so that developers can use these components within their choice of JavaScript framework and will require nothing more than vanilla JavaScript, HTML, and CSS.\r\n\r\nAccessible\u2014Components undergo regular, formalized accessibility testing to ensure that they can be easily used by any audience.\r\n\r\nThemeable\u2014Developers can apply a light or dark theme or define a custom theme to match their brand.\r\n\r\nEsri heavily depends on the design system for creating the UI\/UX of ArcGIS products. As products evolve, new products are introduced, and the developer community contributes to requirements, the component library will expand and evolve.\r\n

Customize to Match Your Brand<\/h3>\r\nApplying a theme allows you to integrate your style or that of your company branding with 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 style preference or brand, you can easily customize the components in a variety of ways.\r\n\r\nLight\/Dark Theme\u2014Using a single property, you can cAvonfigure all components to use a dark or a light theme. The dark and light themes will style all components and their states (e.g., hover, selected) using the chosen theme.\r\n\r\nColors\u2014Using the components\u2019 color variables, you can configure the color scheme in your app. The following CCS will give all components a dark pink color with a slightly darker hover state color.\r\n\r\n--calcite-ui-brand: #FF1493;\r\n--calcite-ui-brand-hover: #C71585;\r\n\r\nComponent Shape\u2014You can configure the shape of some UI components. For example, you can use a rounded button style.\r\nTypography\u2014You can apply a specific font to the entire app or individually across components.\r\n

From Design to App Using UI Kits<\/h3>\r\nWhat is your process for designing your application? Perhaps you work with a design team first to create the experience. Maybe you design and develop the app yourself. In either case, you can use popular design tools and the Esri design system UI kit, easily dragging and dropping components into your app\u2019s UI layout. (Note: In the first release, only Sketch is supported but Esri is working to add support for Figma and Adobe XD later this year.)\r\n\r\nIn the Esri design system UI kit, you\u2019ll find symbolized versions of all the web components, colors, icons, and fonts that are part of the design system. As you construct designs in Sketch, you will be able to implement them in code.\r\n\r\nTo learn more about how you can use the UI Kit to design your app in Sketch, see the guide page in the online documentation<\/a>.\r\n

Icons<\/h3>\r\nThe Esri icon and illustration team maintains a collection of icons for products and marketing efforts. All Esri icons come in SVG format and have tags so that it\u2019s easy for you to find the functional or mapping icons you are looking for. You can browse both icon libraries at at developers.arcgis.com. These icons, which can be used in your application UI or as symbology in your map, are offered in two main libraries: calcite-ui-icons and calcite-point-symbols.\r\n

calcite-ui-icons<\/h3>\r\nA collection of more than 700 monochrome user interface icons meant for the UI outside of the 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. They are built at 16-, 24-, and 32-pixel in a primary 1-pixel outline style.\r\n

calcite-point-symbols<\/h3>\r\nThe more than 700 calcite-point symbols in this library are monochrome point symbol icons built at 13-, 17-, and 21-pixels sizes for use on maps. Constructing these symbols on an odd-numbered pixel grid means that they can be centered both horizontally and vertically.\r\n\r\n "},{"acf_fc_layout":"image","image":435032,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Colors<\/h3>\r\nStrong and bold colors are used sparingly, leaving the focus on the primary blue brand color and UI states. In addition, all colors are designed with accessibility in mind. Both light and dark themes pass the Web Content Accessibility Guidelines (WCAG) Level AA accessibility contrast ratio requirements.\r\n\r\n "},{"acf_fc_layout":"image","image":435042,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Getting Started<\/h3>\r\nThe design system is available from developers.arcgis.com. You will find resources such as usage guidelines, best practices (do\u2019s and don\u2019ts), 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.\r\n

Looking to the Future<\/h3>\r\nAs with other state-of-the-art design systems, Esri\u2019s 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 be enhanced.\r\n\r\nWhile the current UI components are limited to the web platform, Esri plans to expand the design system to support more platforms. Apps built with technologies other than web can benefit from design system resources such as design guidelines, icon library, and colors."}],"references":null},"yoast_head":"\nCalcite | Esri launches a comprehensive design system<\/title>\n<meta name=\"description\" content=\"Esri\u2019s design system (Calcite) enables you to create beautiful, easy to use, and consistent experiences across apps with minimal effort.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Calcite, Esri\u2019s Design System\" \/>\n<meta property=\"og:description\" content=\"Esri\u2019s design system (Calcite) enables you to create beautiful, easy to use, and consistent experiences across apps with minimal effort.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2021\/05\/calcite_banner.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2021\/05\/calcite_1.jpg\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite\",\n\t \"name\": \"Calcite | Esri launches a comprehensive design system\",\n\t \"isPartOf\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t },\n\t \"datePublished\": \"2021-06-03T02:12:43+00:00\",\n\t \"description\": \"Esri\u2019s design system (Calcite) enables you to create beautiful, easy to use, and consistent experiences across apps with minimal effort.\",\n\t \"breadcrumb\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"Introducing Calcite, Esri\u2019s Design System\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t \"name\": \"Esri\",\n\t \"description\": \"Esri Newsroom\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t },\n\t \"query-input\": {\n\t \"@type\": \"PropertyValueSpecification\",\n\t \"valueRequired\": true,\n\t \"valueName\": \"search_term_string\"\n\t }\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/82e5143bcdebadf8fd64d84e503ca468\",\n\t \"name\": \"Monica Pratt\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg\",\n\t \"contentUrl\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg\",\n\t \"caption\": \"Monica Pratt\"\n\t },\n\t \"description\": \"Monica Pratt is the founding and current editor of ArcUser magazine, the executive editor of ArcNews magazine, the editor of Esri Globe and head of the Publications team at Esri. She has been writing on technology topics, specializing in GIS, for more than 30 years. Before joining Esri in 1997, she worked for newspapers and in the financial industry.\",\n\t \"sameAs\": [\n\t \"https:\/\/x.com\/ArcUser\"\n\t ],\n\t \"url\": \"\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Calcite | Esri launches a comprehensive design system","description":"Esri\u2019s design system (Calcite) enables you to create beautiful, easy to use, and consistent experiences across apps with minimal effort.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite","og_locale":"en_US","og_type":"article","og_title":"Introducing Calcite, Esri\u2019s Design System","og_description":"Esri\u2019s design system (Calcite) enables you to create beautiful, easy to use, and consistent experiences across apps with minimal effort.","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2021\/05\/calcite_banner.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_image":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2021\/05\/calcite_1.jpg","twitter_site":"@Esri","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite","url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite","name":"Calcite | Esri launches a comprehensive design system","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2021-06-03T02:12:43+00:00","description":"Esri\u2019s design system (Calcite) enables you to create beautiful, easy to use, and consistent experiences across apps with minimal effort.","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/calcite#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"Introducing Calcite, Esri\u2019s Design System"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/82e5143bcdebadf8fd64d84e503ca468","name":"Monica Pratt","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg","contentUrl":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/08\/MonicaMug_agol2.jpg","caption":"Monica Pratt"},"description":"Monica Pratt is the founding and current editor of ArcUser magazine, the executive editor of ArcNews magazine, the editor of Esri Globe and head of the Publications team at Esri. She has been writing on technology topics, specializing in GIS, for more than 30 years. Before joining Esri in 1997, she worked for newspapers and in the financial industry.","sameAs":["https:\/\/x.com\/ArcUser"],"url":""}]}},"sort_order":"6","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/434922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcuser"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/1031"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/434922\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=434922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=434922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=434922"},{"taxonomy":"arcuser_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser_issues?post=434922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}