Story

We’ve divided the content into three core sections: Foundations, Elements, and Components. Once you’re familiar with the how to use them, you can download the working files at the bottom of the page. Please keep in mind we’re continually growing the UI Toolkit, but this is a good place to start. If there is something you’d like to see that’s missing, drop our team a note at brand@here.com.

Guidelines

Foundations

We’ve put this file together to give you a quick way to get started with our basic grid structure for desktop, tablet and mobile. We’ve also included a simple series of spacers that will help give your page layout some breathing room, as well as some basic typographic scale that should cover most use cases. Please use these styles whenever possible to keep the typographic hierarchy.  

Elements

This file has all the little bits and pieces that make up the HERE UI ecosystem so far. We plan to evolve this section as the User Interface library grows, but for now we’ve given you a good place to start. You’ll notice within the file that sizing of all elements is based on our grid system, so please consider using this same system when designing elements for your project.

Components

The smaller elements grouped together create components. You’ll see that we have a good number of these to start off with but just like Elements, we plan to build-out this User Interface Library as the design language grows. We understand that not every instance is covered, so use this file as a starting point to create your own components.

Usage Examples

Download Assets

UI Toolkit files package

Click the link to download the UI Toolkit package as a PSD file