Version 2.0

Xtremepush Brand Library

This brand portal is the single source of truth for the Xtremepush brand across every touchpoint. It brings together our core visual assets, guidelines, and templates to ensure consistency, clarity, and quality in everything we create.

Designed for all Xtremepush employees, it may also be shared with external partners when required. Please refer to it before creating any branded materials.

01

Xtremepush Brand Logo

Our logo is the most recognisable expression of the Xtremepush brand. It represents not just our name, but the experiences we deliver and the values we stand for. Consistent use of the logo builds familiarity, trust, and long-term brand equity.

Every application of the logo should reinforce clarity and confidence. Follow these guidelines carefully to ensure the brand is always presented correctly.

1.1 / Core Logo

The core logo combines our icon mark with the wordmark to form the primary brand signature

Use this lockup as the default across all communications, marketing materials, and partner placements. It is available in both horizontal and stacked orientations — choose based on the space available.

Core Logo
Core Logo 2
1.2 / Wordmark

The wordmark presents the full company name in our proprietary typeface without the icon mark.

Use it when the logo has already been established in context, space is limited, or a cleaner typographic treatment is preferred. It is also our most suitable fabrication logo for use cases such as embroidery or etching.

Wordmark
1.3 / Logomark

Our logomark is a standalone icon

The logomark is a simplified standalone icon used in space-constrained environments such as app icons, favicons, and social avatars. It should only be used where the Xtremepush brand is already clearly established.

Logomark
1.4 / Clear Space

Always maintain clear space around the logo

Always maintain sufficient clear space around the logo to preserve its visibility and impact. This space ensures the mark is never crowded or visually compromised by surrounding elements.

Clear Space 1
Clear Space 2-1
1.5 / Colour

Use the logo on approved backgrounds only

The logo should only be used in its approved colour variations. It must always maintain strong contrast against its background to ensure clarity and legibility. When placed on non-brand background colours, the appropriate approved logo version should be used to preserve contrast. Unapproved colours, gradients, or effects must not be applied.

col1
col2
col3-1
1.6 / Embroidery

Embroidery — branded merchandise

When reproducing the logo through embroidery, simplicity and legibility are key. Stitching techniques can introduce visual limitations, so the logo should always be applied in its approved single-colour variations.

Avoid fine details, gradients, or complex backgrounds. The logo should remain crisp, balanced, and clearly recognisable across all embroidered applications such as apparel and promotional items.

 

embroidered-1
1.7 / Etching

Etching — laser, embossed & engraving applications

For etched or engraved applications, the logo should be reproduced in a single colour or as a monochrome mark. This ensures clarity across materials such as metal, glass, or wood.

Always prioritise contrast and avoid overly intricate detailing that may be lost in production. The integrity of the mark must be preserved regardless of medium.

Foil
Leather1
Emboss

1.8 / Quick Download

Fabrication logos

Fabrication Logos are specially designed for precision applications like embroidery, etching, laser etching, and embossing. They use clean lines, simplified shapes, and minimal detail to ensure crisp, accurate results across a wide range of production methods.

XP_wordmark_light

Full Wordmark

The full company name - 'Xtremepush'

Colour Variant

Select a colour above

Download
XP_wordmark_short_light

XP Wordmark

Abbreviated Wordmark— 'XP'

Colour Variant

Select a colour above

Download

1.9 / Usage to Avoid

Incorrect use of the logo can weaken brand recognition and create inconsistency

Avoid altering the logo in any way, including stretching, recolouring, adding effects, or combining it with other graphic elements. Do not place the logo on backgrounds that reduce legibility or contrast.

When in doubt, default to the approved logo variations and treatments outlined in this library.

avoid 1

Avoid stretching or distorting the logo. 

avoid 2

Do not change the colour of any part of the logo.

avoid 5

Do not reposition any part of the logo lock up.

avoid 4

Do not resize any part of the logo lock up.

avoid 3

Do not attempt to use the logo mark with a different word mark.

avoid 6

Do not apply any unofficial brand colours to any part of the logo lock up.


1.10 / Partners

Co-branding and partner logo lockups.

When displaying partner logos alongside Xtremepush, ensure both marks are presented with equal consideration and clarity. Maintain balanced spacing and scale, and clearly separate logos to avoid visual confusion.

partners spacing 1-2
partners correct 1-1
partners spacing 2-1
partners correct 2-1

1.11 /

Logo Downloads

1.12 / Logo File Names

How to read our logo file names

Each logo filename has three parts:

Type: (logo, mark, or wordmark).

Layout (stacked, horizontal, short).

Background: (_dark = for use on dark backgrounds, _light = for use on light backgrounds). The suffix describes where to use it, not the colour of the logo itself.

col1

XP_logo_horizontal_light

example

XP_wordmark_short_dark

Wordmark

XP_wordmark_light


1.13 /

Logos for light backgrounds

Use these logo assets when placing the brand on light or neutral backgrounds. These versions are optimised to maintain clarity, contrast, and visual balance in brighter environments.

Select the appropriate file format depending on your use case. SVG files are recommended for web and digital interfaces due to their scalability and performance, while EPS files should be used for print applications, particularly in CMYK workflows. PNG files are suitable for general digital use where a raster format is required.

XP_logo_stacked_light
Portrait logo lockup, full colour. For use on Light Backgrounds.

File Format


Select a format above

Download
XP_logo_horizontal_light
Landscape logo lockup, full colour. For use on Light Backgrounds.

File Format


Select a format above

Download
XP_logo_short_light
Short logo lockup, full colour. For use on Light Backgrounds.

File Format


Select a format above

Download
XP_mark
Logomark, full colour. For use on Light Backgrounds.

File Format


Select a format above

Download
XP_wordmark_light
Wordmark, full colour. For use on Light Backgrounds.

File Format


Select a format above

Download
XP_wordmark_short_light
Abbreviated Wordmark, full colour. For use on Light Backgrounds.

File Format


Select a format above

Download


1.14 /

Logos for dark backgrounds

These logo variations are designed specifically for use on dark or high-contrast backgrounds. The light version of the logo ensures strong visibility and brand presence without compromising legibility.

Always ensure sufficient contrast between the logo and its background.

XP_logo_stacked_dark
Portrait logo lockup, full colour. For use on Dark Backgrounds.

File Format


Select a format above

Download
XP_logo_horizontal_dark
Landscape logo lockup, full colour. For use on Dark Backgrounds.

File Format


Select a format above

Download
XP_logo_short_dark
Short logo lockup, full colour. For use on Dark Backgrounds.

File Format


Select a format above

Download
XP_mark
Logomark, full colour. For use on Dark Backgrounds.

File Format


Select a format above

Download
XP_wordmark_dark
Wordmark, full colour. For use on Dark Backgrounds.

File Format


Select a format above

Download
XP_wordmark_short_dark
Abbreviated Wordmark, full colour. For use on Dark Backgrounds.

File Format


Select a format above

Download

1.15 /

Single colour logo

The single-colour logo is used in situations where full-colour reproduction is not possible or appropriate. This includes print limitations, merchandise, or specialist production methods.

Use only approved single-colour variations and ensure the logo remains clear and recognisable at all sizes.

Single-colour versions that include the logomark are not suitable for etching or embroidery applications, as the logomark relies on gradient detail that cannot be accurately reproduced in these formats.

 

XP_logo_stacked_white
Portrait logo lockup, white. For use on Dark Backgrounds.

File Format


Select a format above

Download
XP_logo_horizontal_white
Landscape logo lockup, white. For use on Dark Backgrounds.

File Format


Select a format above

Download
XP_logo_short_white
Short logo lockup, white. For use on Dark Backgrounds.

File Format


Select a format above

Download
XP_mark_white
Logomark, white. For use on Dark Backgrounds.

File Format


Select a format above

Download
XP_wordmark_white
Wordmark, white. For use on Dark Backgrounds.

File Format


Select a format above

Download
XP_wordmark_short_white
Abbreviated Wordmark, white. For use on Dark Backgrounds.

File Format


Select a format above

Download


1.16 / Partners

XP Partners logo

These assets belong to the XP Partners sub-brand. They are provided to approved clients and partners for use on their own websites and channels to declare their partnership with us.

Use these logos as supplied. Do not alter, combine, or co-brand them with other marks.

 

Logos for light backgrounds


Use these logo assets when placing the brand on light or neutral backgrounds. These versions are optimised to maintain clarity, contrast, and visual balance in brighter environments.

XP_partners_short_wordform_light
Main Logo Lockup, full colour.

File Format


Select a format above

Download
XP_partners_logo_horizontal_light
Logo Lockup, full name, full colour.

File Format


Select a format above

Download
XP_partners_short_light
Logo Lockup, shortform, full colour.

File Format


Select a format above

Download

1.17 /

Logos for dark backgrounds

These logo variations are designed specifically for use on dark or high-contrast backgrounds. The light version of the logo ensures strong visibility and brand presence without compromising legibility.

XP_partners_short_wordform_dark
Main Logo Lockup, full colour.

File Format


Select a format above

Download
XP_partners_logo_horizontal_dark
Logo Lockup, full name, full colour.

File Format


Select a format above

Download
XP_partners_short_dark
Logo Lockup, shortform, full colour.

File Format


Select a format above

Download

1.18 /

Badges

A compact logo format for use in tight spaces, these badges can be applied by partners or internally to indicate an official partnership.

XP_partners_badge_long_horizontal
Badge, horizontal, full name.

File Format


Select a format above

Download
XP_partners_badge_short_horizontal
Badge, horizontal, short name.

File Format


Select a format above

Download
XP_partners_badge_stacked
Badge, stacked, full name.

File Format


Select a format above

Download
XP_partners_badge_short
Badge, stacked, short name.

File Format


Select a format above

Download

02

Typographic Styles

Typography plays a critical role in how our brand communicates. It shapes readability, tone, and overall perception across digital and print experiences.

Our type system is designed to be clear, modern, and highly legible, ensuring consistency across all touchpoints—from marketing materials to product interfaces.

2.1 / Fonts we use

Typography

Our typeface is Lexend — a variable Google Font designed to reduce visual stress and increase reading fluency. 

Lexend
Primary Typeface Google Fonts · Variable · Lexend

Headings

H1 — Display

The future of digital experiences.

Lexend 700 Bold clamp(38px → 60px) line-height 1.1 tracking −0.03em #141e48

H2 — Section Heading

Build something that lasts.

Lexend 700 Bold clamp(28px → 44px) tracking −0.03em

H3 — Sub-heading

Every detail matters.

Lexend 700 Bold clamp(22px → 32px) tracking −0.03em

Body & Labels

Body — Paragraph

Lexend is used for all body copy and descriptive text. Its open apertures and generous spacing make it highly readable at smaller sizes, even on screen. Use it for paragraphs, captions, and supporting descriptions.

Lexend 400 Regular clamp(14px - 15px) line-height 1.7 #6070a0

Eyebrow / Section Label

Brand Library · Section Title

Lexend 700 Bold 11px uppercase tracking 0.16em #003DF5

UI Label

Form field label · Nav item · Card title

Lexend 600 Semi-Bold 13px #141e48

Button / CTA

Get started today

Lexend 700 Bold 14px tracking 0.01em

Weight Scale

Available weights — Lexend

Aa 300 Light
Aa 400 Regular
Aa 500 Medium
Aa 600 Semi-Bold
Aa 700 Bold
Aa 800 Extra-Bold

Character Set

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9 & @ ! ? . , : ;

Download Lexend from Google Fonts

Free to use under the Open Font Licence. Download the full variable family for use in design tools, documents, and applications.

Download Font

03

Brand Colours

Colour is a fundamental part of the Xtremepush identity. Our palette is designed to be bold, distinctive, and flexible, enabling us to create cohesive and recognisable brand experiences across all channels.

Use colour intentionally to guide attention, communicate hierarchy, and reinforce brand recognition.

 

There are minor and intentional differences between colours used in marketing and public-facing brand materials and those used within the product UI.

This distinction exists because each serves a different purpose. While marketing colours are expressive and emotive, platform colours must support readability, hierarchy, and interaction.

Despite these differences, both systems are designed to feel cohesive. They sit within the same brand hierarchy and should never feel visually disconnected or jarring when experienced together.

3.1 / Primary Brand Colours

Primary colours

Our primary colours form the foundation of the brand. They should be used consistently across all key touchpoints and act as the most recognisable visual identifiers.

Primary

Core Blue

C:100
M:65
Y:0
K:0

#003DF5

Midnight Blue

C:100
M:40
Y:0
K:80

#00021B

Emerald Green

C:100
M:0
Y:18
K:21.57

#00C8A4

White

C:0
M:0
Y:0
K:0

#FFFFFF


Keep it clean — blues and neutrals do the heavy lifting.

If you're unsure which colours to reach for, start with Core Blue, Midnight Blue, and White — these three form the backbone of our visual identity and work in almost any combination.

Emerald Green works best as a supporting accent; use it to highlight or add energy, not as a primary base colour.


3.2 / Secondary Brand colours

Secondary colours

Our secondary palette expands on the core brand colours, providing additional flexibility across layouts, backgrounds, and supporting elements. These colours are designed to complement the primary palette rather than compete with it.

Use secondary colours to introduce hierarchy, highlight information, or support more complex layouts while maintaining a cohesive visual language.

Secondary Blues

Dark Slate Blue

#283353

Bright Cerulean

#3AA1FF

Sky Blue

#91CEFF

Ice Blue

#C0E5FF

Blue Chalk

#F1EDFC

Secondary Greys (Neutral)

Smoke Blue

#9695B0

Ghost Grey

#D6D9E0

Haze Grey

#EEEFF3


3.3 / Tertiary Brand colours

Tertiary colours

The tertiary palette exists to support nuance and depth within the brand system. These colours are used sparingly for accents, data visualisation, and moments where additional differentiation is required.

They are not intended for dominant use, but instead to enhance clarity and usability in more detailed or content-heavy environments.

Tertiary Greens

Jade Green

#25AC56

Mint Green

#00C8A4

Fresh Green

#4BD882

Chalk Green

#8BEBB2

Light Turquoise

#77F7C0

Tea Green

#BCF5D5

Tertiary Yellows

Mellow Butter

#FFDC1A

Electric Sunlight

#E1FF0A

Lemon Glow

#FDFA6F

Soft Vanilla Cream

#FDF5E0

Whisper Cream

#FEFAEF

Tertiary Oranges

Honey Gold

#F7C466

Radiant Amber

#F8BD07

Ember Orange

#FD7934

Marigold Glow

#FEA52A

Peach Mist

#FFEACB

Tertiary Purples

Deep Indigo Night

#26018E

Velvet Plum

#8A49D8

Icy Periwinkle

#9791FF

Lavender Sky

#9A95E9

Cloud Lavender

#D5D4F4


3.4 / Platform Brand Colours

Platform brand colours

Platform colours are specifically defined for use within the Xtremepush product interface. Unlike marketing colours, which communicate brand personality, platform colours prioritise usability, accessibility, and clarity within interactive environments.

They are designed to work seamlessly alongside the broader brand palette while meeting the functional needs of digital products.

Platform colours.

Platform Dark Blue

#1E40AF

Platform Primary Blue

#2563EB

Platform Text Grey

#4B515F

Platform Text Secondary Grey

#5C6374

Platform Success

#1EA97C

Platform Error

#E24C4C

Platform Warning

#F97316

Platform Light Blue

#B5DCF4

Platform Pastel Blue

#E6F0FE

Platform Pastel Red

#FFEEEE

Platform Pastel Green

#ECFAF5

Platform Pastel Orange

#FFF6EB

Platform Border

#DFE7EF


This section contains internal resources and is restricted to authorised users. Please log in to continue.

Enter your passcode to access this content.

04

Branded Documents

Our branded document templates ensure consistency across all internal and external communications. They provide a structured starting point for presentations, reports, and client-facing materials.

Using these templates helps maintain a cohesive visual identity while improving efficiency and reducing the need to create documents from scratch.

4.1 / Slide Decks

Google slide templates

Our presentation system is built around a single core template: the Main Slide Template. This template serves as the foundation for all Xtremepush presentations and ensures consistency across all slide-based communications.

The Main Template is available in the Google Slides template gallery. When creating a new presentation, always begin by selecting this template from the gallery. From there, remove any slides that are not required and build your deck using the provided layouts, components, and design elements.

All presentations should begin with the master presentation template. It includes the full set of approved layouts, components, and brand assets—allowing you to select only the slides required and remove the rest.

Presentations should be created using the approved templates to ensure consistency with brand guidelines. Decks developed outside these templates may require additional time to review and align.

 


main template Google Slide

Main Slide Deck Template

Our main branded slide deck that should be the basis of every starting deck.

Go to template gallery
Q42025 Games Sales Deck (1) Google Slide

Q4 2025 Games Sales Deck

Launching Customisable Integrated Games

Go to slide deck
Platform Overview Dec 2025 Google Slide

Platform Overview Dec 2025

CRM, Gamification & Loyalty Platform.

Go to slide deck

4.2 / Brand Resources

Google doc templates

Our document templates provide a consistent framework for written communication, from internal documents to client deliverables. All templates are available within the Google Docs template gallery and can be accessed directly when creating a new document. Selecting the appropriate template ensures correct formatting, typography, and layout from the outset.

DOC-Document Template XP@1x Google Doc

Standard Document Template

A general-purpose document template for internal and external communications, preformatted with Xtremepush brand styles.

Go to template gallery
DOC- XP Client Project Deliverables@1x Google Doc

XP Client Project Deliverables Template

A structured template for presenting client deliverables clearly and consistently.

Go to template gallery
DOC- Policy template@1x Google Doc

Policy Template

A formal document template designed for internal policies and governance materials.

Go to template gallery
DOC-XP On Premise Pre-Sale Qualification@1x Google Doc

XP On Premise Pre-sale Qualification Template

This document is to qualify the need and scale of an On Premise request and outline the required resource provision. For use in the pre-sale process.

Go to template gallery
DOC-Emailcenter Headed Paper Generic@1x Google Doc

Emailcenter Headed Paper Generic Template

Official branded document templates for formal correspondence and external communication.

Go to template gallery
DOC-Headed Paper Template Generic@1x Google Doc

Headed Paper Generic Template

Official branded document templates for formal correspondence and external communication.

Go to template gallery
DOC- Xtremepush LIA template@1x Google Doc

Xtremepush LIA Template

A standardised template for completing Legitimate Interest Assessments in line with compliance requirements.

Go to template gallery

05

Games Templates (Artwork)

This section contains base design templates for game-based experiences. Each template is built as a structured starting point that can be easily customised to suit specific client requirements.

These files are typically shared when presenting or pitching a particular game format, allowing clients to understand the structure and flow of the experience. The templates themselves are maintained as source files, ensuring a consistent and controlled foundation for all game formats.

Clients should not edit these original files directly. Instead, when customisation is required, the relevant content should be copied into a new Figma file where it can be adapted to meet specific brand or campaign needs.

5.1 / Games

Games Templates

Each Figma file is structured to present a complete view of the game experience, including all available screens and states within a single file. This enables a clear understanding of user flows, interactions, and variations.

The files are built using reusable components and interconnected design systems. This approach allows key elements to be updated efficiently, with changes cascading throughout the template where relevant.

As a result, targeted edits to a defined set of assets can significantly transform the overall appearance of a game, supporting rapid customisation and scalable production workflows.

accjack Figma

AccJack

A blackjack-inspired game adapted for promotional use, blending familiarity with simplified mechanics.

Open Figma
Advent Figma

Advent Calendar

A time-based experience that unlocks rewards over a defined period, encouraging repeat engagement.

Open Figma
bracketpred Figma

Bracket Predictor

A tournament-style prediction game where users forecast outcomes across multiple rounds.

Open Figma
crash Figma

Crash

A high-intensity, risk-and-reward game where users must act before the multiplier resets, designed to create urgency and excitement.

Open Figma
dailyc-1 Figma

Daily Challenge

A time-based or skill-based challenge designed to encourage daily participation and consistent engagement.

Open Figma
Dailpicks Figma

Daily Picks

A recurring prediction-based game where users make daily selections, driving habitual engagement and return visits.

Open Figma
dailypstreaks Figma

Daily Picks (Streaks)

A variation of Daily Picks that rewards consecutive participation through streak-based progression.

Open Figma
derbydash Figma

Derby Dash (OTB)

A race-themed game format where participants track progress and outcomes in a competitive, fast-moving environment.

Open Figma
opethe Figma

Open The Box

A mystery-driven experience where users select from multiple options to reveal hidden rewards or outcomes.

Open Figma
plinko Figma

Plinko

A chance-based game inspired by the classic Plinko format, combining randomness and anticipation to create an engaging user experience.

Open Figma
pirates Figma

Pirates Plunder (OTB)

A themed “open the box” experience with a pirate concept.

Open Figma
thunderboard-1 Figma

Progressive Tunderboard

A dynamic leaderboard-style game that builds engagement over time, encouraging repeat interaction through progressive rewards and competitive positioning.

Open Figma
Rrace Figma

Reindeer Race (OTB)

A seasonal race-themed game designed for festive campaigns.

Open Figma
reveals-1 Figma

Reveals

An interactive reveal mechanic where users uncover hidden outcomes, prizes, or messages through progressive interaction.

Open Figma
predictor Figma

Standard Predictor

A flexible prediction format that can be adapted to various events or scenarios.

Open Figma