BJSS

📋 1 Guidelines

🔗 Connections

Sector

Consulting Software

Region

United kingdom

Guideline Year

2021

Language

English

Tags

Engineering

Official Websites

Brand Guidelines

2021

Brand Summary

Mission
  • To deliver world-class technology solutions and digital transformation, focusing on quality and embodying core values in every stakeholder interaction [^1].
Core Values
  • Professional Excellence
  • Delivering Great Outcomes
  • Innovative Thinking
  • Collaboration
  • Long-term Relationships [^2]
Target Audience
  • Businesses and organizations seeking innovative technology, engineering, and industry solutions, with a focus on digital transformation and operational productivity [^3].
Personality Traits
  • Professional
  • Innovative
  • Collaborative
  • Quality-focused [^4][^3]
Visual Identity Overview
  • The visual identity is minimalistic, modern, and professional, featuring a consistent logo, strict color palette, Catamaran typography, abstract and work-related imagery, and clean iconography. Navy and white are primary colors, with supportive accent colors used conservatively. Layouts emphasize clarity, legibility, and balanced composition across print and digital materials [^5].

Categories

Brand Imagery
  • There are four different photography styles used at BJSS. 1. Abstract 2. ‘BJSS at Work’ 3. People 4. ‘BJSS in the Community’ (CSR) These photography styles and the uses of the different styles are explained over the next couple of pages. Please do not use other photography styles unless there is a specific request.
  • Abstract imagery is the main BJSS photography style. Uses include website banners, social graphics and document covers. You should always use abstract imagery, even for work that talks about a literal subject. Exceptions to this rule are detailed on the following pages.
  • Choose imagery that consists of tones that sit within the BJSS colour palette. Do not use imagery that features colours that are not within the BJSS colour palette. For example, an abstract imagery that uses red or orange tones would not be suitable.
  • If using the logo and/or text on top of an abstract image (for example on a website banner or document cover) you should use a flat BJSS colour or gradient overlay on top of the abstract image. The overlay opacity should be set to 65%.
  • For main homepage banners and their supporting assets, please use a dark navy toned abstract image and/or a flat navy overlay at 65% opacity.
  • ‘BJSS at Work’ imagery is the secondary BJSS photography style. These images should be used for: > Case Study header banners and featured images on the BJSS website > Testimonial banners on the website > On some printed and digital materials where we talk about our people. If in doubt about image choices please speak to a member of the Marketing Team who will be able to advise you.
  • For Case Study header banners and featured images on the website please use a gradient overlay set at 65% opacity. Choose the gradient that relates to the industry the Case Study is about: > Financial Services -Blue Gradient > Retail -Teal Gradient > Health & Social Care -Pink Gradient > Energy -Green Gradient > Public Sector -Purple Gradient.
  • For Testimonial banners on the website please use the pink or blue gradient overlay set at 65% opacity.
  • People photography refers to images of individual members of staff. Images should be converted to grayscale (black and white) before use to keep consistency across materials. These images should be used for: > Engineering Insights pages and featured images > Industry Insights pages > Biogs > Event pages and social graphics > On some printed and digital materials.
  • ‘BJSS in the Community’ photography refers to images taken at CSR events. These images should be used for: > CSR banners on the website > On some printed and digital materials where we talk about CSR.
  • For CSR Testimonial website banners please use the pink gradient overlay on top of an image. The overlay opacity should be set to 65%.
Color Palette
  • Our brand colours are a distinct and crucial part of our identity and they work together to make our brand recognisable.
  • When applied consistently, these colours also provide a strong visual link across various materials and communications and they distinguish us from the competition.
  • Use the codes to replicate the colours. No colours other than these may be used.
  • The Navy Pantone colour should only be used for one colour process print.
  • RGB values should be used for display (digital and screen).
  • CMYK values should be used for full colour print.
  • When using a colour as an overlay on an image, please set the opacity at 65%.
  • Navy and white are the primary colours. Other colours are supportive and should be used conservatively to create hints of colour.
  • Navy and white are the primary text and background colours.
  • Pink may be used as a secondary background colour.
  • White or navy text can be used on top of a pink background. Pink text can be used on both white and navy backgrounds.
  • Pink should be used for all URLs, links and buttons.
  • Grey may be used as a secondary background colour.
  • Use navy text on top of a grey background. Grey text should be used on a navy background.
  • Blue may be used as a secondary background colour.
  • Use white text on top of a blue background. Blue text should be used on a white background.
  • Green may be used as a secondary background colour.
  • White or navy text can be used on top of a green background.
  • Green text can be used on both white and navy backgrounds.
  • Purple may be used as a secondary background colour.
  • Use white text on top of a purple background. Purple text should be used on a white background.
  • Teal may be used as a secondary background colour.
  • Use navy text on top of a teal background. Teal text should be used on a navy background.
  • There are five gradients that can be used for backgrounds, overlays and graphic assets.
  • Each gradient runs from left to right and uses two variants of the same colour. Both colours should be used in equal proportion.
  • Where one half of each gradient uses a colour displayed in the section above, the colour used in the other half of each gradient cannot be used as a standalone colour.
  • When using a gradient as an overlay on an image, please set the opacity at 65%.
  • Choose imagery that consists of tones that sit within the BJSS colour palette.
  • Do not use imagery that features colours that are not within the BJSS colour palette. For example, an abstract imagery that uses red or orange tones would not be suitable.
  • If using the logo and/or text on top of an abstract image (for example on a website banner or document cover) you should use a flat BJSS colour or gradient overlay on top of the abstract image. The overlay opacity should be set to 65%.
  • For main homepage banners and their supporting assets, please use a dark navy toned abstract image and/or a flat navy overlay at 65% opacity.
Typography
  • The BJSS font is a fundamental part of its visual style that helps achieve a unique and consistent look across its materials.
  • BJSS uses only Catamaran as its font family for digital and print. It is a free google font that can be downloaded here: https://fonts.google.com/specimen/ Catamaran
  • Three weights may be used - Regular, Bold and Black.
  • All text using Catamaran Black must be uppercase.
  • Do not use any other font weights.
  • Catamaran Regular should be used for body text.
  • Catamaran Bold should be used for subheadings. Catamaran Bold should also be used to create emphasis, for example: Keywords, Call to Actions and URLs.
  • Catamaran Black can only be used for headers and large numbers.
  • It should never be used for body copy or numbers in paragraphs of text.
Logo Usage
  • Full colour and monochrome versions of the BJSS logo allow for maximum impact across all background colours.
  • On a white background the full colour logo must be used. On any other background or on top of an image the white monochrome logo should be used.
  • If a background is very light and has far more contrast with the full colour logo than the white monochrome logo the full colour logo may be used.
  • Do not modify the logos under any circumstances, including altering their form or colour - even for internal use.
  • BJSS has a single-colour variant of its logo. This should only be used in applications where multiple colours cannot be used.
  • A clear space area has been established to ensure that the BJSS logo maintains its visibility and impact.
  • Maintaining this clear space zone between the logo and other page elements such as text, images and other logos, ensures that it always appears unobstructed and distinct from competing graphic elements.
  • Please maintain this space around the logo.
  • The preferred amount of clear space is equal to the height of the “S”, which should be relative to the size of the logo.
  • The logo should be placed in the top left corner of the document, page or artboard. Where this is not possible the logo may be placed in the bottom right corner.
  • The logo can only be centred if it is the only element on the page/document or artboard.
  • So that legibility is never compromised, minimum sizes have been established.
  • Like with logo clearance, these are minimum sizes and where appropriate the logo should make use of the available space (without looking too over-bearing and ill-considered).
  • Print: 12mm high
  • Digital: 38px high
  • When displaying multiple logos together, the minimum space between the logos must be equal to the height of the “S”
  • The logos should be vertically aligned.
  • The height and width of each logo will vary, but the surface area of the logos should be roughly the same so the logos appear to take up equal amounts of space. For example a longer, thinner logo (like the Microsoft logo pictured here) is wider than both the BJSS and AWS logos, but not as tall; the AWS and BJSS logos are taller but more narrow than the Microsoft logo.
  • When deciding what order to put logos in, the first logo is the most important and depends on the engagement. For example, if it is a BJSS engagement the BJSS logo should be displayed first. The remaining logos do not have to appear in any particular order but should be arranged however makes sense to you.
Brand Values

  • Professional Excellence

  • Delivering Great Outcomes

  • Innovative Thinking

  • Collaboration

  • Long-term Relationships

Visual Style
  • Full colour and monochrome versions of the BJSS logo allow for maximum impact across all background colours.
  • On a white background the full colour logo must be used. On any other background or on top of an image the white monochrome logo should be used.
  • If a background is very light and has far more contrast with the full colour logo than the white monochrome logo the full colour logo may be used.
  • Do not modify the logos under any circumstances, including altering their form or colour - even for internal use.
  • BJSS has a single-colour variant of its logo. This should only be used in applications where multiple colours cannot be used.
  • A clear space area has been established to ensure that the BJSS logo maintains its visibility and impact.
  • Maintaining this clear space zone between the logo and other page elements such as text, images and other logos, ensures that it always appears unobstructed and distinct from competing graphic elements.
  • Please maintain this space around the logo.
  • The preferred amount of clear space is equal to the height of the “S”, which should be relative to the size of the logo.
  • The logo should be placed in the top left corner of the document, page or artboard. Where this is not possible the logo may be placed in the bottom right corner.
  • The logo can only be centred if it is the only element on the page/document or artboard.
  • So that legibility is never compromised, minimum sizes have been established.
  • Like with logo clearance, these are minimum sizes and where appropriate the logo should make use of the available space (without looking too over-bearing and ill-considered).
  • Print: 12mm high
  • Digital: 38px high
  • When displaying multiple logos together, the minimum space between the logos must be equal to the height of the “S”
  • The logos should be vertically aligned.
  • The height and width of each logo will vary, but the surface area of the logos should be roughly the same so the logos appear to take up equal amounts of space.
  • When deciding what order to put logos in, the first logo is the most important and depends on the engagement. For example, if it is a BJSS engagement the BJSS logo should be displayed first. The remaining logos do not have to appear in any particular order but should be arranged however makes sense to you.
  • The BJSS font is a fundamental part of its visual style that helps achieve a unique and consistent look across its materials.
  • BJSS uses only Catamaran as its font family for digital and print. It is a free google font that can be downloaded here:
  • Three weights may be used - Regular, Bold and Black.
  • All text using Catamaran Black must be uppercase.
  • Do not use any other font weights.
  • Catamaran Regular should be used for body text.
  • Catamaran Bold should be used for subheadings. Catamaran Bold should also be used to create emphasis, for example: Keywords, Call to Actions and URLs.
  • Catamaran Black can only be used for headers and large numbers.
  • It should never be used for body copy or numbers in paragraphs of text.
  • Our brand colours are a distinct and crucial part of our identity and they work together to make our brand recognisable.
  • When applied consistently, these colours also provide a strong visual link across various materials and communications and they distinguish us from the competition.
  • Use the codes to replicate the colours. No colours other than these may be used.
  • The Navy Pantone colour should only be used for one colour process print.
  • RGB values should be used for display (digital and screen).
  • CMYK values should be used for full colour print.
  • When using a colour as an overlay on an image, please set the opacity at 65%.
  • Navy and white are the primary colours. Other colours are supportive and should be used conservatively to create hints of colour.
  • Navy and white are the primary text and background colours.
  • Pink may be used as a secondary background colour.
  • White or navy text can be used on top of a pink background. Pink text can be used on both white and navy backgrounds.
  • Pink should be used for all URLs, links and buttons.
  • Grey may be used as a secondary background colour.
  • Use navy text on top of a grey background. Grey text should be used on a navy background.
  • Blue may be used as a secondary background colour.
  • Use white text on top of a blue background. Blue text should be used on a white background.
  • Green may be used as a secondary background colour.
  • White or navy text can be used on top of a green background. Green text can be used on both white and navy backgrounds.
  • Purple may be used as a secondary background colour.
  • Use white text on top of a purple background. Purple text should be used on a white background.
  • Teal may be used as a secondary background colour.
  • Use navy text on top of a teal background. Teal text should be used on a navy background.
  • There are five gradients that can be used for backgrounds, overlays and graphic assets.
  • Each gradient runs from left to right and uses two variants of the same colour. Both colours should be used in equal proportion.
  • Where one half of each gradient uses a colour displayed in the section above, the colour used in the other half of each gradient cannot be used as a standalone colour.
  • When using a gradient as an overlay on an image, please set the opacity at 65%.
Iconography
  • Icons should be crafted to suit messaging they support.
  • Icons should be constructed from a single line. However, this may not always be possible or appropriate depending on the subject or design. Icons can be constructed from more than one line if a single line design is not feasible.
  • Icon choices should be clean and modern. They should have a moderate amount of detail so that they have clear white space and are legible at a small size.
  • Full colour icons should be constructed from a Pink > Purple > Blue gradient (see Step 4) and can be used on white or coloured backgrounds.
  • White icons can be used on coloured backgrounds. Step 5 provides instructions on how to construct white icons.
  • In Adobe Illustrator set up a 1080 x 1080 pixel artboard. Create a one-line icon with a stroke width of 30pt.
  • When you are happy with your icon expand the stroke so it becomes a fill.
  • Once a fill, and with the icon selected, you can apply a ‘Freeform Gradient’ to it which you can find in your gradient menu.
  • With the Freeform Gradient selected you can add various points along your icon. It’s important to try and space the points out evenly so there’s an even distribution of the three colours.
  • Add swatches for the Pink, Purple and Blue colours in these Brand Guideline. Change each point to Pink > Purple > Blue.
  • When applying the swatches to create the transparent ends make sure to have them as Pink and Blue with an opacity of 0%. Changing them to white will affect the colour.
  • To create a white version double click on all your gradient points and make them 100% white.
  • Make sure that the two ends have a 0% opacity.
  • When icons overlap be sure to seperate them into parts whilst they are still strokes so you can still create the look that it’s been compiled with one line. Using the scissors tool cut the stroke into two parts at a corner point so it now consists of two strokes.
  • Expand them both so they are now two shapes.
  • Before applying your gradient points with the Freeform gradient tool, make sure that the shapes are Ungrouped.
Layout And Composition
  • A clear space area has been established to ensure that the BJSS logo maintains its visibility and impact.
  • Maintaining this clear space zone between the logo and other page elements such as text, images and other logos, ensures that it always appears unobstructed and distinct from competing graphic elements.
  • Please maintain this space around the logo.
  • The preferred amount of clear space is equal to the height of the “S”, which should be relative to the size of the logo.
  • The logo should be placed in the top left corner of the document, page or artboard. Where this is not possible the logo may be placed in the bottom right corner.
  • The logo can only be centred if it is the only element on the page/document or artboard.
  • So that legibility is never compromised, minimum sizes have been established.
  • Like with logo clearance, these are minimum sizes and where appropriate the logo should make use of the available space (without looking too over-bearing and ill-considered).
  • Print: 12mm high
  • Digital: 38px high
  • When displaying multiple logos together, the minimum space between the logos must be equal to the height of the “S”
  • The logos should be vertically aligned.
  • The height and width of each logo will vary, but the surface area of the logos should be roughly the same so the logos appear to take up equal amounts of space. For example a longer, thinner logo (like the Microsoft logo pictured here) is wider than both the BJSS and AWS logos, but not as tall; the AWS and BJSS logos are taller but more narrow than the Microsoft logo.
  • When deciding what order to put logos in, the first logo is the most important and depends on the engagement. For example, if it is a BJSS engagement the BJSS logo should be displayed first. The remaining logos do not have to appear in any particular order but should be arranged however makes sense to you.

  • Print

  • 12mm high

  • BJSS has a single-colour variant of its logo. This should only be used in applications where multiple colours cannot be used.
  • The Navy Pantone colour should only be used for one colour process print.
  • CMYK values should be used for full colour print.
Digital Guidelines
  • BJSS uses only Catamaran as its font family for digital and print. It is a free google font that can be downloaded here: https://fonts.google.com/specimen/ Catamaran
  • Three weights may be used - Regular, Bold and Black.
  • All text using Catamaran Black must be uppercase.
  • Do not use any other font weights.
  • Catamaran Regular should be used for body text.
  • Catamaran Bold should be used for subheadings. Catamaran Bold should also be used to create emphasis, for example: Keywords, Call to Actions and URLs.
  • Catamaran Black can only be used for headers and large numbers.
  • It should never be used for body copy or numbers in paragraphs of text.
  • RGB values should be used for display (digital and screen).
  • When using a colour as an overlay on an image, please set the opacity at 65%.
  • Navy and white are the primary colours. Other colours are supportive and should be used conservatively to create hints of colour.
  • Pink should be used for all URLs, links and buttons.
  • Grey text should be used on a navy background.
  • Blue text should be used on a white background.
  • Green text can be used on both white and navy backgrounds.
  • Purple text should be used on a white background.
  • Teal text should be used on a navy background.
  • There are five gradients that can be used for backgrounds, overlays and graphic assets.
  • Each gradient runs from left to right and uses two variants of the same colour. Both colours should be used in equal proportion.
  • Where one half of each gradient uses a colour displayed in the section above, the colour used in the other half of each gradient cannot be used as a standalone colour.
  • When using a gradient as an overlay on an image, please set the opacity at 65%.
  • Abstract imagery is the main BJSS photography style. Uses include website banners, social graphics and document covers. You should always use abstract imagery, even for work that talks about a literal subject.
  • Choose imagery that consists of tones that sit within the BJSS colour palette.
  • Do not use imagery that features colours that are not within the BJSS colour palette. For example, an abstract imagery that uses red or orange tones would not be suitable.
  • If using the logo and/or text on top of an abstract image (for example on a website banner or document cover) you should use a flat BJSS colour or gradient overlay on top of the abstract image. The overlay opacity should be set to 65%.
  • For main homepage banners and their supporting assets, please use a dark navy toned abstract image and/or a flat navy overlay at 65% opacity.
  • ‘BJSS at Work’ imagery is the secondary BJSS photography style. These images should be used for: > Case Study header banners and featured images on the BJSS website > Testimonial banners on the website > On some printed and digital materials where we talk about our people.
  • For Case Study header banners and featured images on the website please use a gradient overlay set at 65% opacity. Choose the gradient that relates to the industry the Case Study is about: > Financial Services -Blue Gradient > Retail -Teal Gradient > Health & Social Care -Pink Gradient > Energy -Green Gradient > Public Sector -Purple Gradient.
  • For Testimonial banners on the website please use the pink or blue gradient overlay set at 65% opacity.
  • People photography refers to images of individual members of staff. Images should be converted to grayscale (black and white) before use to keep consistency across materials.
  • These images should be used for: > Engineering Insights pages and featured images > Industry Insights pages > Biogs > Event pages and social graphics > On some printed and digital materials.
  • For CSR Testimonial website banners please use the pink gradient overlay on top of an image. The overlay opacity should be set to 65%.
🐛 Report