Connectorly Brand Guidelines

This document provides styles, color codes and graphical elements that implement the Connectorly brand.

Company Name

Our company name is Connectorly, written with a capital C in sentences.

For official documents, we use the name Connectorly Limited, since that is the name our company is registered under in England and Wales.

Our (2nd level) domain is connectorly.io. Our services may also require 3rd level domains *.connectorly.io and 4th level domains *.*.connectorly.io

Connectorly Logo

Primary Mark

The primary logo mark is dark blue with connectorly.io url underneath.

Usage where we've established our company name

In situations where we've already established visually our logo is associated with the name Connectorly, it can be appropriate to use it without connectorly.io.

Greyscale versions

Dark grey

Light grey

White

Colours definition

Font/Border/Vector Colours

Desc	CSS Name	Code
Connectorly Colour black no. 1	.c-colour-black-1	#000000 rgb(0, 0, 0)
Connectorly Colour black no. 2	.c-colour-black-2	#444444 rgb(68, 68, 68)
Connectorly Colour darkblue no. 1	.c-colour-darkblue-1	#061536 rgb(6, 21, 54)
Connectorly Colour darkblue no. 2	.c-colour-darkblue-2	#0b2653 rgb(11, 38, 83)
Connectorly Colour darkblue no. 3	.c-colour-darkblue-3	#081420 rgb(8, 20, 32)
Connectorly Colour purple no. 1	.c-colour-purple-1	#716f87 rgb(113, 111, 135)
Connectorly Colour purple no. 2	.c-colour-purple-2	#51668a rgb(81, 102, 138)
Connectorly Colour red no. 1	.c-colour-red-1	#db5461 rgb(219, 84, 97)
Connectorly Colour skyblue no. 1	.c-colour-skyblue-1	#2a7bb9 rgb(42, 123, 185)
Connectorly Colour skyblue no. 2	.c-colour-skyblue-2	#1498bd rgb(20, 152, 189)
Connectorly Colour white no. 1	.c-colour-white-1	#ffffff rgb(255, 255, 255)
Connectorly Colour yellow no. 1	.c-colour-yellow-1	#fbba45 rgb(251, 186, 69)

Background Colours

Desc	CSS Name	Code
Connectorly Background Colour black no. 1	.c-bg-colour-black-1	#000000 rgb(0, 0, 0)
Connectorly Background Colour black no. 2	.c-bg-colour-black-2	#444444 rgb(68, 68, 68)
Connectorly Background Colour darkblue no. 1	.c-bg-colour-darkblue-1	#061536 rgb(6, 21, 54)
Connectorly Background Colour darkblue no. 2	.c-bg-colour-darkblue-2	#0b2653 rgb(11, 38, 83)
Connectorly Background Colour darkblue no. 3	.c-bg-colour-darkblue-3	#081420 rgb(8, 20, 32)
Connectorly Background Colour purple no. 1	.c-bg-colour-purple-1	#716f87 rgb(113, 111, 135)
Connectorly Background Colour purple no. 2	.c-bg-colour-purple-2	#51668a rgb(81, 102, 138)
Connectorly Background Colour red no. 1	.c-bg-colour-red-1	#db5461 rgb(219, 84, 97)
Connectorly Background Colour skyblue no. 1	.c-bg-colour-skyblue-1	#2a7bb9 rgb(42, 123, 185)
Connectorly Background Colour skyblue no. 2	.c-bg-colour-skyblue-2	#1498bd rgb(20, 152, 189)
Connectorly Background Colour white no. 1	.c-bg-colour-white-1	#ffffff rgb(255, 255, 255)
Connectorly Background Colour yellow no. 1	.c-bg-colour-yellow-1	#fbba45 rgb(251, 186, 69)

Background Colours

WCAG2 Color Contrast is a standard to define how good two colors lay together to help human visibility. For the given Columns (Font Colours) and Rows (Background Colours), calculate the WCAG2 Color Contrast compliancy of each element of the cartesian product between columns and rows.

WCAG2 References:
http://www.w3.org/TR/WCAG20/#relativeluminancedef
http://www.w3.org/TR/WCAG20/#visual-audio-contrast
http://www.w3.org/TR/WCAG20/#larger-scaledef

bg-color/font-color	#000000	#444444	#061536	#0b2653	#081420	#716f87	#51668a	#db5461	#2a7bb9	#1498bd	#ffffff	#fbba45
#000000	~~1.00~~	~~2.16~~	~~1.17~~	~~1.42~~	~~1.13~~	4.33	3.62	5.45	4.63	6.26	21.00	12.21
#444444	~~2.16~~	~~1.00~~	~~1.85~~	~~1.52~~	~~1.91~~	~~2.01~~	~~1.68~~	~~2.53~~	~~2.15~~	~~2.90~~	9.74	5.66
#061536	~~1.17~~	~~1.85~~	~~1.00~~	~~1.21~~	~~1.03~~	3.70	3.10	4.67	3.96	5.35	17.98	10.45
#0b2653	~~1.42~~	~~1.52~~	~~1.21~~	~~1.00~~	~~1.25~~	3.05	~~2.55~~	3.85	3.27	4.42	14.83	8.62
#081420	~~1.13~~	~~1.91~~	~~1.03~~	~~1.25~~	~~1.00~~	3.82	3.20	4.82	4.09	5.53	18.56	10.79
#716f87	4.33	~~2.01~~	3.70	3.05	3.82	~~1.00~~	~~1.20~~	~~1.26~~	~~1.07~~	~~1.45~~	4.85	~~2.82~~
#51668a	3.62	~~1.68~~	3.10	~~2.55~~	3.20	~~1.20~~	~~1.00~~	~~1.51~~	~~1.28~~	~~1.73~~	5.81	3.38
#db5461	5.45	~~2.53~~	4.67	3.85	4.82	~~1.26~~	~~1.51~~	~~1.00~~	~~1.18~~	~~1.15~~	3.85	~~2.24~~
#2a7bb9	4.63	~~2.15~~	3.96	3.27	4.09	~~1.07~~	~~1.28~~	~~1.18~~	~~1.00~~	~~1.35~~	4.53	~~2.64~~
#1498bd	6.26	~~2.90~~	5.35	4.42	5.53	~~1.45~~	~~1.73~~	~~1.15~~	~~1.35~~	~~1.00~~	3.36	~~1.95~~
#ffffff	21.00	9.74	17.98	14.83	18.56	4.85	5.81	3.85	4.53	3.36	~~1.00~~	~~1.72~~
#fbba45	12.21	5.66	10.45	8.62	10.79	~~2.82~~	3.38	~~2.24~~	~~2.64~~	~~1.95~~	~~1.72~~	~~1.00~~

Basic blocks:

Font, Font size, Font weight, Line height

Element

Result

CSS

<body>

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Red Hat Display

<h6>

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Space Grotesk

<h5>

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Space Grotesk

<h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Space Grotesk

<h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Space Grotesk

<h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Space Grotesk

<h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Space Grotesk

<pre>

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Endpoints Logo

Each endpoint logo is a 256x256 PNG image, with transparent background and no margin/padding in the picture. Here a list of the official pictures in use at Connectorly:

Appinsights

Logo:

Details:

Codename: appinsights
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_appinsights.png

Cash

Logo:

Details:

Codename: cash
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_cash.png

Datto

Logo:

Details:

Codename: datto
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_datto.png

Dynamics

Logo:

Details:

Codename: dynamics
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_dynamics.png

Elastic

Logo:

Details:

Codename: elastic
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_elastic.png

Hubspot

Logo:

Details:

Codename: hubspot
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_hubspot.png

Infor-ln

Logo:

Details:

Codename: infor-ln
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_infor-ln.png

Jira

Logo:

Details:

Codename: jira
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_jira.png

Leadforensics

Logo:

Details:

Codename: leadforensics
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_leadforensics.png

Meditex

Logo:

Details:

Codename: meditex
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_meditex.png

Microsoft365

Logo:

Details:

Codename: microsoft365
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_microsoft365.png

Powerbi

Logo:

Details:

Codename: powerbi
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_powerbi.png

Servicenow

Logo:

Details:

Codename: servicenow
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_servicenow.png

Stripe

Logo:

Details:

Codename: stripe
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_stripe.png

Topdesk

Logo:

Details:

Codename: topdesk
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_topdesk.png

Workflowmax

Logo:

Details:

Codename: workflowmax
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_workflowmax.png

Xero2

Logo:

Details:

Codename: xero2
Size:  (256x256)
Filename: ./brand-guidelines/endpoint_logo_xero2.png

ServiceApps

The Service Apps are the Connectorly products. They all have an ID and a CODENAME constant among all of the Connectorly services, reports, itnernal references etc.

The "Logo" is a PNG format, 1024x768, transparent background, representation of the ServiceApp logo, used in contexts requiring a square image.

The "Alt(ernate) Logo" is a PNG format, 512x512, transparent background, representation of the ServiceApp logo, used in contexts requiring a square image.

Note: when we represent a connection, each endpoint logo must remain distinct. We are infringing the brand guidelines (and possibly copyright) of the apps we are connecting to if it appears that this is a single logo.

Microsoft Dynamics 365 and Xero Connector

Logo:

Alt Logo:

Details:

ID: 1
CODENAME: DynamicsXeroConnector
Filename: ./brand-guidelines/serviceapp_logo_DynamicsXeroConnector.png
Size (1024x371):

Dynamics Xero Forecast Standard

Logo:

Alt Logo:

Details:

ID: 2
CODENAME: DynamicsXeroForecast
Filename: ./brand-guidelines/serviceapp_logo_DynamicsXeroForecast.png
Size:

Trackables service

Logo:

Alt Logo:

Details:

ID: 3
CODENAME: Track.abl.es
Filename: ./brand-guidelines/serviceapp_logo_Track.abl.es.png
Size:

VisitJersey Connector

Logo:

Alt Logo:

Details:

ID: 4
CODENAME: VisitJerseyConnector
Filename: ./brand-guidelines/serviceapp_logo_VisitJerseyConnector.png
Size (1024x768):

Seven Signals Connector

Logo:

Alt Logo:

Details:

ID: 5
CODENAME: SevenSignals
Filename: ./brand-guidelines/serviceapp_logo_SevenSignals.png
Size (1024x768):

AUA Connector

Logo:

Alt Logo:

Details:

ID: 6
CODENAME: AUAConnector
Filename: ./brand-guidelines/serviceapp_logo_AUAConnector.png
Size (1024x768):

Gold Standard Connector

Logo:

Alt Logo:

Details:

ID: 7
CODENAME: GoldStandardConnector
Filename: ./brand-guidelines/serviceapp_logo_GoldStandardConnector.png
Size (1024x768):

Cash To Xero Connector

Logo:

Alt Logo:

Details:

ID: 8
CODENAME: CashToXeroConnector
Filename: ./brand-guidelines/serviceapp_logo_CashToXeroConnector.png
Size (1024x768):

Xero Invoice Tracking Code Updater depending on GL Codes

Logo:

Alt Logo:

Details:

ID: 9
CODENAME: XeroInvoicesTrackingCodeUpdater
Filename: ./brand-guidelines/serviceapp_logo_XeroInvoicesTrackingCodeUpdater.png
Size (1024x768):

Hubspot Workflowmax Connector

Logo:

Alt Logo:

Details:

ID: 10
CODENAME: HubspotWorkflowmaxConnector
Filename: ./brand-guidelines/serviceapp_logo_HubspotWorkflowmaxConnector.png
Size (1024x370):

Xero and Power BI Connector

Logo:

Alt Logo:

Details:

ID: 11
CODENAME: XeroPowerBIConnector
Filename: ./brand-guidelines/serviceapp_logo_XeroPowerBIConnector.png
Size (1024x370):

Xero InforLN Connector

Logo:

Alt Logo:

Details:

ID: 12
CODENAME: XeroInforLNConnector
Filename: ./brand-guidelines/serviceapp_logo_XeroInforLNConnector.png
Size (1024x370):

Company Service Credentials Vault

Logo:

Alt Logo:

Details:

ID: 13
CODENAME: CompanyServiceCredentials
Filename: ./brand-guidelines/serviceapp_logo_CompanyServiceCredentials.png
Size (1024x768):

Leadforensics Hubspot Connector

Logo:

Alt Logo:

Details:

ID: 14
CODENAME: LeadforensicsHubspotConnector
Filename: ./brand-guidelines/serviceapp_logo_LeadforensicsHubspotConnector.png
Size (1024x370):

Meditex Xero Connector

Logo:

Alt Logo:

Details:

ID: 15
CODENAME: MeditexXeroConnector
Filename: ./brand-guidelines/serviceapp_logo_MeditexXeroConnector.png
Size (1024x371):

Ticket Mover for Topdesk and Hubspot

Logo:

Alt Logo:

Details:

ID: 16
CODENAME: TicketMoverTopdeskHubspot
Filename: ./brand-guidelines/serviceapp_logo_TicketMoverTopdeskHubspot.png
Size (1024x768):

Ticket Mover for ServiceNow and Hubspot

Logo:

Alt Logo:

Details:

ID: 17
CODENAME: TicketMoverServicenowHubspot
Filename: ./brand-guidelines/serviceapp_logo_TicketMoverServicenowHubspot.png
Size (1024x768):

Jira and Workflowmax Connector

Logo:

Alt Logo:

Details:

ID: 18
CODENAME: JiraWorkflowmaxConnector
Filename: ./brand-guidelines/serviceapp_logo_JiraWorkflowmaxConnector.png
Size (1024x370):

Workflowmax and Power BI Connector

Logo:

Alt Logo:

Details:

ID: 19
CODENAME: WorkflowmaxPowerBIConnector
Filename: ./brand-guidelines/serviceapp_logo_WorkflowmaxPowerBIConnector.png
Size (1024x370):

Microsoft 365 and Power BI Connector

Logo:

Alt Logo:

Details:

ID: 20
CODENAME: Microsoft365PowerBIConnector
Filename: ./brand-guidelines/serviceapp_logo_Microsoft365PowerBIConnector.png
Size (1024x370):

Datto and Power BI Connector

Logo:

Alt Logo:

Details:

ID: 21
CODENAME: DattoPowerBIConnector
Filename: ./brand-guidelines/serviceapp_logo_DattoPowerBIConnector.png
Size (1024x370):

Hubspot and Power BI Connector

Logo:

Alt Logo:

Details:

ID: 22
CODENAME: HubspotPowerBIConnector
Filename: ./brand-guidelines/serviceapp_logo_HubspotPowerBIConnector.png
Size (1024x370):

Xero Payroll and Power BI Connector

Logo:

Alt Logo:

Details:

ID: 23
CODENAME: XeroPayrollPowerBIConnector
Filename: ./brand-guidelines/serviceapp_logo_XeroPayrollPowerBIConnector.png
Size: