Embed Size (px)
Citation preview
Brand architectureCodeless Platforms
Branding and design guidelines
ContentsBranding and design guidelines
2
These guidelines are designed to help you coherently and consistently apply our brand when you communicate.
They outline what our brand stands for and how we express it, and provide our visual approach. The Codeless Platforms brand is special. It represents who we are and what we stand for, so it is important to understand and follow these guidelines.
If you have any questions or need any additional support please email [email protected]
Quick links to our branding sections
1) Company message2) Logos3) Company logo4) Product / Platform logos 5) Fonts and icons6) Colour guidelines7) Supporting graphics8) Communication templates9) Writing style
Introduction
Contents
Company messageBranding and design guidelines
For the last two decades our sole aim has been to provide our customers and partners with software solutions that improve efficencies, reduce costs and facilitate growth.
Our two flagship products – BPA Platform and Applications Platform – have been developed so that organisations can quickly and easily build applications, automate business processes and integrate systems, and benefit from solutions that are 100% aligned with existing operational processes and business objectives.
A ‘codeless’ experience is the fundamental driver for our two platforms. Removing the code and empowering users through a point and click, drag and drop environment makes our technology accessible to all organisations. This means even the smallest organisation can reap the benefits of innovative, enterprise technology at a fraction of the cost that is traditionally associated with this type of product.
More than 7000 customers around the world use Codeless Platforms’ solutions in every type of industry, ranging from engineering, financial services and manufacturing to not-for-profit, public services and retail. These relationships remain at the very heart of our business and we continue to transfer all feedback into new functionality and features.
If, like us, you believe that creating business applications, automating processes or integrating business systems should be a ‘codeless’ experience, join us on our journey and together we can fundamentally transform the way people view and use business software.
Our vision
3
LogosBranding and design guidelines
4
The logo combines professionalism and gravitas through the letter forms and bold colours. A reference to the less than ( < ) symbol can be found in the negative space around the light blue diamond.
Where possible the company and product logos should appear on a white background. If for any reason this is not the case white out versions should be used.
The logos representing our platforms reference the key selling points. Business Process Automation Platforms messaging is focused around swim lanes and connecting processes. Applications platforms messaging is to rapidly develop bespoke applications through an elegant user interface.
As with the company logo the product logos should where possible appear on a white background. is is to emphasise the platform colour use for quick visual reference.
Company logo Company logo white out
Product logos Product logos white out
BPA Platform
ApplicationPlatform
ApplicationPlatform
BPA Platform
Company logoBranding and design guidelines
5
The company logo is balanced by the negative space defined by the less than ( < ) symbol. The height of the logo rotated by 45 degrees sets the clear space.
As our logo is full colour, it should not be reproduced using spot colours (Pantone) but can only be printed with four colour process inks (CMYK) or screen colours (RGB).
All logos should not be reproduced smaller 37mm wide / 7.8mm high, whatever value comes first.
We want our logo to be used to help promote brand awareness. The logo should always by used as supplied and never altered to fit the design.
Positioning and clear space What not to do
Height of logo
Do not horizontally scale.
Do not rotate.
Do not alter the elementsDo not add on coloured or patterned background
Do not make transparent.
Do not vertically scale.
Rotate 45O
Clear space height and width
37mm
Product / Platform logosBranding and design guidelines
6
The Business Process Automation Platform logo is designed to represent the key features of the product, the drag and drop approach to building processes using the swim lane graphical user interface.
The Applications Platform logo is designed to highlight its versatility by representing pre built modules that are available, enabling anyone to rabidly build bespoke applications.
BPA Platform logo Applications Platform logo
BPA Platform
BPA Platform
ApplicationsPlatform
ApplicationsPlatform
ApplicationsPlatform
BPA Platform
ApplicationsPlatform
BPA Platform
BPA Platform
Clear space height and width
White out logo only White out logo only
White out logo only White out logo only
An alternate logo can be used on dark blue only
An alternate logo can be used on dark blue only
Clear space height and width
ApplicationsPlatform
Fonts and iconsBranding and design guidelines
7
Open Sansis our primary font
Typography
The following font weight can be used:
Open Sans LightOpen Sans RegularOpen Sans Semi boldOpen Sans Bold
Italics is ONLY used as part of a quote
“Introducing Codeless Platforms’ BPA Platform has meant that we’re running at a third of what was originally envisioned for staffing, and it’s working successfully. It’s a complete end-to-end solution.”
Fontawesome icons are used to complement our messaging on all our resources.
To use Fontawesome you must first install the font into your computers font library. http://fontawesome.io/icons/
Open Sans is the only font we use for our branding. We chose Open Sans due to its clean and legible appearance, accessibility and quick load times.
To use Open Sans you must install the font into your computers font library.https://fonts.google.com/specimen/Open+Sans
fa-group
fa-bullhorn
fa-handshake-o
fa-calendar
fa-desktop
fa-info
fa-tags
fa-check-square-o
fa-download
fa-laptop
fa-thumbs-o-up
fa-chevron-left
fa-edit
fa-life-ring
fa-user
fa-chevron-right
fa-envelope-o
fa-lightbulb-o
fa-wrench
fa-code
fa-line-chart
fa-youtube-play
fa-cog
fa-exclamation
fa-magic
fa-plug
fa-cogs
fa-file-pdf-o
fa-map-signs
fa-power-off
fa-comments-o
fa-file-text-o
fa-mouse-pointer
fa-mobile
fa-random
fa-compass
fa-globe
fa-rocket
fa-database
fa-graduation-cap
fa-paper-plane-o
fa-shopping-cart
Icons commonly used
Colour guidelinesBranding and design guidelines
8
Core colour paletteThe range of colours provides flexibility while still ensuring a consistent look across our materials. Product / platform colours should never be used together as their intention is to differentiate and contrast between each other.
Core Blue
Hex #039BE5RGB 3/155/229CMYK 80/29/0/0Pantone 2925C
BPA Green
Hex #7CB342RGB 124/179/66CMYK 53/0/85/0Pantone 376C
Dark Blue
Hex #263645RGB 38/54/69CMYK 33/7/0/85Pantone 7546C
APP Red
Hex #E53935RGB 229/57/53CMYK 0/95/64/0Pantone 185C
BPMN Orange
Hex #F9A826RGB 249/168/37CMYK 0/40/89/0Pantone 143C
Action Orange
Hex #F47F16RGB 245/127/23CMYK 0/59/92/0Pantone 151C
Core colours
Shade colours
Highlight colours
Corporate colours Product / platform colours
Shade Core Blue#01579BC95 M65 Y9 K0
Core Blue#039BE5C80 M29 Y0 K0
Highlight Core Blue#1CB5FFC67 M14 Y0 K0
Shade Green#42661CC75 M37 Y100 K29
BPA Green#7CB342C53 M0 Y85 K0
Highlight Green#BCFF77C0 M33 Y70 K0
Action Orange#F47F16C0 M59 Y92 K0
BPMN Orange#F9A828C0 M40 Y89 K0
Highlight Orange#FFB63FC0 M34 Y80 K0
Shade Red#991614C25 M100 Y98 K25
APP Red#E53935C0 M95 Y64 K0
Highlight Red#FF5954C0 M76 Y59 K0
Black#212121C50 M0 Y0 K100
Grey#888888C0 M0 Y0 K60
Highlight grey#C2C9CCC10 M5 Y5 K25
Shade Dark Blue#1C2833C89 M70 Y53 K64
Dark Blue#263645C33 M7 Y0 K85
Highlight Dark Blue#426B91C78 M51 Y25 K8
Action colour
Supporting graphicsBranding and design guidelines
9
Graphical assetsTo complement our company logo and reference the less than ( < ) symbol found in the negative space, we have created a versatile vector graphic that can be use in a verity of ways to build on our brand. This asset can be used in various positions to increase/decrease the size to differentiate between brochures or resources.
Supporting graphicsBranding and design guidelines
10
Graphical assets in useExamples of how we present the company and the brand can be seen below. Due to a bold colour palette, we intentionally restrict the use of the core colours in our resources, this enables us to references colour via subtle highlighting to align with the products.
Want to learn more?
Discover how Codeless Platforms can help your business by improving performance, boosting efficiency and cutting costs.
+44 (0) 330 99 88 700
www.codelessplatforms.com
Codeless Platforms Applications Platform
Want to learn more?
Discover how Codeless Platforms can help your business by improving performance, boosting efficiency and cutting costs.
+44 (0) 330 99 88 700
www.codelessplatforms.com
Codeless Platforms Business Process Automation White Paper
BPAPlatform
Access Dimensions &Magento Solution v1.0
Communication templatesBranding and design guidelines
11
Email templatesWe have a range of HTML email templates containing various typography styles and pre-built modules. This enables us to create elegant and engaging communications aimed at putting the content first and ensuring delivery on mobile and desktop.
Communication templatesBranding and design guidelines
12
Social media bannersTo maximise space on social media posts, we designed an elegant way of including a featured image, referencing our look and feel and remaining true to our branding. This enables us to publish content reinforcing the resources they will encounter if the banner is clicked namely the feature image, company logo, the asset and the corporate colour palette.
Writing styleBranding and design guidelines
13
The way we use language expresses our brand as much as our look and feel. Our tone of voice reflects our approach that is audience-focused and engaging. However, just like the visual elements of our brand, we tailor our language to suit the communication. Sometimes we feel it’s appropriate to be more conversational, at other times to be more direct and to-the-point.
When writing about Codeless Platforms, we ask that you use language that is:
1) Spirited and engaging
• Using questions or different sentence structures to create interest
• Using headlines to grab attention or get the message across
• Be short, punchy and to the point
2) Positive, friendly and upbeat
• Be audience-friendly and keep copy as engaging and succinct as possible
• Use benefit-led messaging
• Write in the first person to reflect our inclusive and supportive culture.
3) Conversational and Natural
• Use quotes to bring our products to life
• Talk to people as people and avoiding jargon (but without dumbing down or being patronising).
There are many words and phrases in the English language that commonly trip people up. Many have a definitive right or wrong way to do it, while others can be subjective and therefore be inconsistent.
Codeless Platforms naming convention – any connector or solution or service proceeded by Codeless Platforms needs an apostrophe after it as it is possessive. i.e. Codeless Platforms’ eBay Integration Connector.
Company names - Always make sure to check how companies actually spell their name and present it. Some can be lower case, upper case, one word, two words etc. For example, dotmailer, Creditsafe, HubSpot, SYSPRO etc.
Company references - When referring to a company always use ‘it’ not ‘they’, or repeat the company’s name, or use ‘the company’. Likewise, use ‘Has’ not ‘have’. For example: “Codeless Platforms announced that it is…” “While the company has begun implementing…”
File format abbreviations - Use capitals when referring to file formats i.e. CSV, JPEG, XLS etc.
Numbering - If writing an article then spell out whole-number words for one to ten; use figures for numbers above ten. Use a combination of a figure and a word for very large round numbers (such as multiple millions/billions etc), or abbreviate it to ‘m’, ‘bn’ etc.
Ampersands - should only be used if they are part of official titles or names. Otherwise, spell out ‘and’.
Apostrophes - There is no apostrophe before the ‘s’ for a collective group of items. For example: IDs, CVs, SMEs etc.
Capitalisation - Unless it is a product name don’t capitalise it.
Spellings - Always use English spellings, not American, especially s not z. For example: organisation, realise etc.
Tone of voice Common word usage
Writing styleBranding and design guidelines
14
accounting - is always lower case, unless it is at the start of a sentence.
Cash flow - two words, not one.
Cloud-based - is hyphenated (this applies to almost all things that are followed by based i.e. web-based, client-based, etc.
Easy-to-use - hyphenated.
eCommerce - use lower case e and capital C to keep to our branding.
email - no hyphen. Use a lower case e unless it is at the start of a sentence.
Event-driven - hyphenated.
Focused - one ‘s’, not two. Looks neater and reads easier.
government - does not have a capital g unless it is at the start of a sentence.
Help desk - two words, not one
internet - no capital ‘i’ unless it starts a sentence.
Leverage, leveraging - would prefer not to be used.
Low-code - hyphenated.
Microsoft - please don’t not shorten this to MS. This is simply keeping to a company’s branding, and we especially don’t want Microsoft lawyers on our case.
Online - one word, not on-line.
On premises - is two words with no hyphen and also has an ‘s’ at the end.
Pro forma - not hyphenated.
Programme - word used to refer to a partnership programme.
Program - name for a computer program.
Software-as-a-Service - is hyphenated and abbreviated to SaaS – similarly PaaS.
Time-consuming - is hyphenated.
Up to date - is not hyphenated.
website - one word, not ‘web site’. No capital w unless at the start of a sentence.
Whereby - would prefer not to be used.
Common word usage
Got any ideas, thoughts to contribute?If you have any quiestions regarding our branding guidelines then please feel free to get in touch
+44 (0)330 99 88 700
www.codelessplatforms.com
