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:
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:
In an operation, icons represent the Dropbox connector activities:
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:
-
Adobe Photoshop
- Template:
SourceFile_Photoshop.psd - Walkthrough:
Walkthrough_Photoshop.mov
- Template:
-
Sketch
- Template:
SourceFile_Sketch.sketch - Walkthrough:
Walkthrough_Sketch.mov
- 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.