Skip to content

Connector SDK UI Endpoint Icons

Endpoint and Activity Icons

The Cloud Studio UI for a connector created with the Jitterbit Harmony Connector SDK uses icons in the UI to represent the endpoint and its activities.

In the component palette, icons represent both the configured endpoint and its activities. This screen capture of the Dropbox connector shows how different icons are used:

Configured Dropbox connector

One icon (a folder) is used for the connection, with a different icon used for the activities. It’s possible to have a different icon for each activity, though a common theme of colors and shapes for an endpoint is advised. As the text describing the activity is overlaid on the icon, it’s best to leave the bottom half of the icon a solid color so that the white text has a solid background to appear against.

Note that unconfigured endpoints are slightly greyed compared to the configured endpoints. Compare the two Amazon S3 icons in this image:

Cloud Studio connectors

In an operation, icons represent the Dropbox connector activities:

Dropbox operation

As can be seen in the connector JSON schematic, you can define icons for the connection and each of the activities (together referred to as an endpoint). Icons are defined in SVG format, and are provided as a path to an SVG file.

To work properly in the Cloud Studio UI—both graphically and aesthetically—icons must follow specific conventions in their design and creation.

As can be seen from these examples, the design pattern for an icon consists of a colored background against which a white logo is applied. White type is added by the Cloud Studio UI at runtime to label the activities. For this reason, space must be left in the design of an icon to accomodate this text.

Icon Sizes, File Type, and Color Rules

Two icons are required: an endpoint icon and an activity icon.

Both icons are the same size (90 pixels by 90 pixels), with the logo inside a maximum size of 64 pixels wide and 54 pixels high.

An icon must be saved as an SVG file.

The icons—in order to fit with the aesthetic of Cloud Studio—should follow these color rules:

  • Logo color: White. No exceptions.

  • Light color: The main brand color, preferably chosen so that it can support white type on top.

  • Dark color: Darker tint of the light color. Typically, this means reducing the brightness to 80% of the original value.

  • Gradient: Applied to the activity icon, with the light color at the top and the dark color at the bottom.

Example Colors

These colors are currently used in Jitterbit Harmony. They are subject to change.

Jitterbit Brand Palette

The Jitterbit Brand Palette has four main colors. Across the Harmony Suite, these colors have been used to differentiate between the four main applications.

Color Name Hex Value RGB Value Usage
Brand Orange Hex #F68A4F RGB 246, 138, 79 Cloud Studio
Brand Purple Hex #8171C2 RGB 129, 113, 194 Management Console
Brand Green Hex #69CBAD RGB 105, 203, 173 API Manager
Brand Blue Hex #558FCB RGB 85, 143, 203 Citizen Integrator

Application UI Palette

The Application UI colors are based on the Jitterbit Brand Palette, but have been adjusted for better readability within the UI.

Color Name Hex Value RGB Value Usage
UI Orange Hex #F68C4F RGB 246, 140, 79 Primary call to action color
UI Purple Hex #918AC1 RGB 145, 138, 193 Selected or rollover state for text links and icons
Text Gray Hex #46494A RGB 70, 73, 74 All copy and text links
Canvas Beige Hex #FAF9F8 RGB 250, 249, 248 Backgrounds and form elements
White Hex #FFFFFF RGB 255, 255, 255 Backgrounds and form elements

Secondary Colors

Secondary colors are used sparingly and to add attention or connection to different UI elements.

Color Name Hex Value RGB Value Usage
Error Red Hex #F55C55 RGB 245, 92, 85 “On Fail” workflow logic lines on the canvas and error messages
Success Green Hex #3FC45F RGB 63, 196, 95 “On Success” workflow logic lines on the canvas and positive confirmation messages
Conditional Blue Hex #6CC4FC RGB 108, 196, 252 “On Condition” workflow logic lines on the canvas

Highlight Colors

Highlight colors are used for selection or rollover states within lists.

Color Name Hex Value RGB Value Usage
Highlight Orange Hex #9FA8B6 RGB 159, 168, 182 Selection and/or rollover state within table lists and hierarchical lists
Highlight Purple Hex #F2F1F9 RGB 242, 241, 249 Selection and/or rollover state within the Project Navigator list
Highlight Red Hex #FFF8F4 RGB 255, 248, 244 Selection state for invalid items within the Project Navigator list

Grayscale Colors

This selection of grayscale colors should be used for text and UI elements.

Color Name Hex Value RGB Value Usage
Landing Page Headline Gray Hex #888A90 RGB 136, 138, 144 Landing page headlines
Text/Icon Gray Hex #46494A RGB 70, 73, 74 All text other than headlines, placeholders, and for UI icons
Placeholder Text Gray Hex #A7A9B0 RGB 167, 169, 176 Text used in placeholders in forms
Unselected Menu Gray Hex #8A919D RGB 138, 145, 157 Unselected background color for action menus
Selected Menu Gray Hex #9FA8B6 RGB 159, 168, 182 Selected and rollover background color for action menus
Unselected Table Header Hex #E4E3E5 RGB 228, 227, 229 Unselected background color for table headers
Selected Table Header Hex #CDCCCE RGB 205, 204, 206 Selected and rollover background color for table headers
Inactive Gray Hex #DDDDDD RGB 221, 221, 221 Inactive button shapes

Icon Template Files and Walkthroughs

Two template files are available to help create the icon files. Each template file has both icons in it, and a walkthrough video can be downloaded that shows the configuration and creation of icon files using the template:

When completed, export the layer group for each icon as a separate SVG file. See the walkthroughs for examples of exporting the layer groups.

Endpoint Icon

The endpoint icon consists of series of folders with a white logo on top. The back-most folder is in the dark color and the front-most folder is in the light color. These colors can be assigned using the different layers of templates.

The logo needs to be created with a transparent background so that when placed on the folder images, the colors show around and through the logo appropriately.

Activity Icon

The activity icon is a solid gradient, light color at the top and dark color at the bottom. The logo can be the same as the one used in the endpoint icon or a different one, as appropriate. However, in most cases it will be the same as the one in the endpoint activity, but placed higher up, leaving space at the bottom for the activity labels.

The minimum space at the bottom should be 45 pixels (50% of height).

As with the endpoint icon, the logo needs to be created with a transparent background so that when placed on the folder images, the colors show around and through the logo appropriately.

Working Examples

See the Dropbox connector’s adapter.json file for a working example using icon files.

For examples of different logos and color treatments, see the current selection of connectors available in Cloud Studio.