IRAS Brand portal
Effective. Transparent. Streamlined.
These are the guiding values behind the IRAS’s brand. This helps us distinguish every element and every experience as being distinctively IRAS.
Brand Overview
Our brand guidelines are for designers and non-designers alike, anyone creating or commissioning any form of design on behalf of IRAS. They provide clear criteria for the conception, creation and craftsmanship our brand demands and our users deserve. The implementation of our brand may evolve and expand over time, but our values are designed to endure.
Brand Portal & Toolkit
Templates & guidance
Download our Powerpoint template
Download nowFull IRAS logo
Our logo deserves prominence and needs the space to make an impact. The IRAS logo represents our values. It gives us an identity and separates us from other global health and social care research hubs. The IRAS logo has been created and carefully crafted for use across all IRAS communications.
The IRAS logo and sub-logos are the most important parts of the IRAS brand. It is important that they are always legible, prominent and unobstructed in any application. We need to take good care of it – respecting it, protecting it and making sure we use it in just the right way.
The master logo has two variations, both portrait and landscape - follow the simple guidance below to help us use our logo properly.
Landscape logo
The landscape variation of the IRAS logo is the primary version and should always be the first-choice for use on an item of collateral. The only reason that the portrait version of the logo should be used is if horizontal space is limited which causes the text to be too small.
Portrait logo
The portrait variation of the IRAS logo has been provided as a versatile but secondary alternative to the landscape version. Whenever space is at a premium, or the IRAS logo has to feature as part of a larger group of partner logos, the portrait version of the logo can make much more of the space available. Wherever possible, every effort should be made to ensure that the ‘Integrated Research Application System’ text under the logo remains large enough to read.
Colour
Our colours are an important part of who we are. Used wisely and creatively, they have a positive impact, help people to recognise us and make our platform more intuitive. The IRAS brand colour palette has been created to reflect the brand values and celebrate it’s successful history. The example combinations below are both faithful to the brand values and accessible to all of our users.
Violet / Navy
Lime / Navy
Navy / Violet
Forest Green / Mid Green
Mid Green / Navy
Light Green / Navy
Colours to avoid
Being trustworthy & transparent are two of the core values that underpin the IRAS brand - this means that we should be consistent, clear, and steadfast with our use of the brand colours. Using non-brand colours, gradients, or low-contrast colour combinations can compromise the standards of communications that our users deserve and expect.
Low contrast colours
Non-brand colours
Gradients
IRAS monogram
The IRAS monogram has been created as a playful and memorable addition to the IRAS brand. While it should never be used to replace the full IRAS logo on any item of communication, it can feature as a confident stamp of quality.
Full logo
The IRAS monogram should always be used on it’s own without the supporting ‘Integrated Research Application System’ text. It can be used as a decorative design element in both a solid colour, or as an outlined shape.
Colour
The colour combinations used for the IRAS monogram should be held to the same standards of brand consistency and accessibility as the full IRAS logos. The example combinations below are both faithful to the brand values and accessible to all of our users.
Violet / Navy
Lime Green / Navy
Navy / Violet
Forest Green / Mid Green
Mid Green / Forest Green
Light Green / Navy
Colours to avoid
While the IRAS monogram has been created to provide an energetic visual element to the IRAS brand, using non-brand colours, gradients, or low-contrast colour combinations can compromise the standards of communications that our users deserve and expect.
Non-brand colours
Gradients
Colour
Our colours are an important part of who we are. Used wisely and creatively, they have a positive impact, help people to recognise us and make our platform more intuitive. The IRAS brand colour palette has been created to reflect the brand values and celebrate it’s successful history. There is additional information about the use of color below.
Powerful purple
Wherever possible, purple should be the lead colour in any IRAS brand communications, the colour has been included in the brand pallet as an instantly recognisable visual connection between the old and new versions of the brand and underlying technical systems.
Greys
When attempting to communicate complex information, or deliver a clear message in a limited space, it is useful to have a range of neutral background colors to use as a base. When applying brand colours to the PEGA system or other digital communications light grey shades should always be used as the main background colour.
Panels of light grey shades can also be useful to define a clear hierarchy of content, or sections of a form.
Colour codes & values
Navy
#1a1b31
Forest Green
#1b4650
Grey
#9f9f9f
Mid Green
#5fcf86
Lime
#c0ff35
Violet
#c2b7ed
Light Green
#ddfdbc
Nude
#eedad9
Navy
26, 27, 49
Forest Green
27, 70, 80
Grey
159, 159, 159
Mid Green
95, 207, 134
Lime
192, 255, 53
Violet
194, 183, 237
Light Green
221, 253, 188
Nude
238, 218, 217
Navy
238, 218, 217
Forest Green
159, 159, 159
Grey
192, 255, 53
Mid Green
221, 253, 188
Lime
95, 207, 134
Violet
27, 70, 80
Light Green
26, 27, 49
Nude
194, 183, 237
100%
47%, 45%, 0%, 81%
100%
66%, 12%, 0%, 69%
100%
0%, 0%, 0%, 38%
100%
54%, 0%, 35%, 19%
100%
25%, 0%, 79%, 0%
100%
18%, 23%, 0%, 7%
100%
13%, 0%, 26%, 1%
100%
0%, 8%, 9%, 7%
Accessibility
When using colour, we always make sure we’re complying with accessibility guidelines. We follow the Web Content Accessibility Guidelines (WCAG) produced by the World Wide Web Consortium. The handy colour below above provides examples that meet accessibility standards when combining colours from our palette.
Contrast ratio
We use the WCAG when combining colour and text to ensure that everyone can read our content clearly. We prefer AAA compliance, but will accept AA.
– AAA compliance requires a contrast ratio of 7:1 for small text (12-17px) and 4.5:1 for larger text (18px and over)
– AA compliance requires a contrast ratio of 4.5:1 for small text (12-17px) and 3:1 for large text (18px and over)
WCAG AAA - Pass
Contrast Ratio - 9.06:1
WCAG AAA - Pass
Contrast Ratio - 4.13:1
WCAG AAA - Pass
Contrast Ratio - 8.63:1
WCAG AAA - Pass
Contrast Ratio - 12.58:1
WCAG AAA - Pass
Contrast Ratio - 8.63:1
WCAG AAA - Pass
Contrast Ratio - 5.27:1
WCAG AAA - Pass
Contrast Ratio - 5.53:1
Typography
As a digital-first brand, IRAS has selected to use the typeface Museo Sans that is licensed for use across design projects, websites, and video content. The clear and confident style of the Museo Sans typeface reflects the brand values of modernity, efficiency and transparency.
Our typeface
Museo Sans is based on the well-known typeface Museo. It is a sturdy, high contrast, geometric, highly legible sans serif typeface very well suited for any display and digital use. In exceptional circumstances (and only on printed collateral) here is also a Condensed, a Rounded and a Display family available for use.
Type treatment & accessibility
To ensure that there are never any issues of compromised legibility when text is used over a background design element, there should always be an area of clear space surrounding the line of text. An example of this clear area is included below.
Icons
To ensure consistency and continuity across all communications the IRAS brand uses the same set of line-icons provided by the PEGA platform. Wherever possible, careful attention should be paid to consistent use of these icons to match the default options on the PEGA platform.
Downloads
Visualising data
Showing complex information in a table or a chart makes it more eye-catching and easier to understand and digest. It can also help people to see patterns and trends. It adds colour to the data, if you will. But as with any written elements, care should be taken to ensure that sufficiently contrasting colours are used.
Photography
We follow three principles to ensure our imagery, whether photography, video, animation or illustration, communicates our values and our personality.
Authentic: Tell a real story or capture a moment that shows patients, staff and researchers actively engaged in an activity.
Dynamic: Show the vibrancy and diversity of the systems that IRAS supports. Find images that convey a sense of wonder, discovery, enjoyment, achievement and passion.
Diverse: Celebrate the diverse nature of the individual users of the IRAS system. Choose imagery that shows the depth and breadth of the research supported, to the world-class facilities and the pioneering work of the researchers we support.
Clinically real people
Wherever possible, any images used should be human in nature and outcome focused. Rather than relying on abstract or clichéd images to communicate vague concepts, we should always attempt to include authentic images of people.
Illustration
In some situations it is not possible to use photography, but there is still the requirement to apply the IRAS brand to a background or supporting brand element. A range of IRAS illustrations have been created specifically to meet this need. From the base of pop-up banners, through to report covers, the IRAS illustration style provides an attractive and engaging platform for clear messaging.
Downloads
IRAS illustrations (.ai, .png)
CMYK
Circles lead the way
The overlapping circular patterns have been inspired by both the recognisable shapes of new IRAS logo, and also the ways in which the layers of support provided by the IRAS system are an invaluable foundation for a myriad of research projects.