Our new branding means a unified aesthetic. Across our websites, software, documentation and in print, this page serves as a source of truth.
Contact design team
Our core message puts technology and human excellence at the forefront, contrasting and complementing each other. Here and throughout the design and the business, the human element is put first: the wellbeing of our employees and of the clients we take care of are of the utmost importance. The technology serves a supporting role, using it to enable us to do more and to do more, more efficiently.
Our logo depicts two hands / arms in protective (above) and supportive (below) roles placed around a core, representing the person. SSGC: A Software and Security Guarding Company.
Everything we do – that includes what we design – should express our brand pillars. The connection does not always have to be obvious. For example, it could be as subtle as choosing a modern CCTV camera instead of an older one; this would show that we are tech-forward and innovative.
Viewed through the lens of the core message, two of the brand pillars are technology related (performance, innovation) and two are related to humanity (social value, employer of choice).
Exponential growth in the best-performing UK security business
Tackling challenges such as COVID-19 recovery and socio-economic inequality
Bespoke tech providing industry-leading automation and workflow visibility
Investment in software and training programmes for all to develop professionally
SSGC user interfaces are built atomically. That is to say there are base units (like atoms) that are combined to create larger structures which in turn can create sections and entire pages. This allows us to easily create consistant and visually-appealing user interfaces whilst minimising design-time and integration complexity.
Analagous to the atom. Small, contained building blocks. E.g. a button.
Analagous to the molecule. A collection of atoms, bound together. E.g. an image with descriptive text.
A combination of structures and components to create an entire block of content. E.g. a selection of 3 blog posts.
Though not something we can show on this page, the final order
Our brand font, for use in all communications and expressions of the brand, is Public Sans. It is a versatile modern type family designed by the U.S. Digital Service for legibility & consistency. Like its primary inspiration (Libre Franklin), it has a friendly, but no-nonsense demeanour. The specifics weights in use can be downloaded from our company Sharepoint here (preferred). the entire family can be downloaded from Google Fonts here.
We carry forward the interaction between technology & humanity.
The vibrant, energetic & warm oranges represent the human centered quality of the business. Using an orange for the logo provides uniqueness to the brand, setting it apart from its competitors. The formal, calming & cool blue-greys communicate the trustworthy, reliable and well-structured values of the company. The range of tones chosen represent the modern & technology-forward components of the company.
Note that even in the design, the shades of blue are placed in supporting roles (backgrounds, text) whereas the shades of orange are used in prominence (buttons, logo, links, call-out stats). Human excellence, supported by great technology.
BgLight 1: White
FFFFFF
BgLight 2: Alpine
F4F6F9
Rich Black
0D1423
Sand
FDA76D
Orange
E96000
Mahogany
B64900
Independence
33415C
Rich Black
0D1423
The choice of button depends on it’s importance and therefore, its desired emphasis.
We use one font throughout the design: Public Sans. You can download it for free from Google Fonts here.
All text is placed on either dark or light surfaces. Below are all generic text styles for both variants.
Body Large
Body Medium
Body Small
Caption
Body Large
Body Medium
Body Small
Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. Our text fields clearly indicate when they are being hovered and focussed.
Picking the perfect image is a skill that comes with time, though there are some tips you can use to whittle down the possible options.
Should you be in a position of choice – where you do not need a specific image but rather just "an image", consider picking one with a similar color profile as the rest of the branding; at a basic level, this means there are colours and tones similar to those in the Colours section above. Further, high-quality, visually sleek and
This gives off a more put together and cohesive visual rather than just something we stuck our logo on.
Often, if you are adding something on top of an image, adding a background is a good idea. This ensures the content you add is legible and confirms to accessibility standards. This is the case even when just the logo is added. The standard here is to use either a DARK or LIGHT background (defined below) with conforming content styles (e.g. light or dark text elements).
DARK background: RichBlack (Surface Dark) @ 85% with a 10px background blur
LIGHT background: BgLight 2: Alpine (Surface Alt) @ 85% with a 10px background blur
There are two colour variants of the logo. One is meant for use on light backgrounds and the other is for use on dark background. See more in the Logo section below.
As well as the Colours (above), the Elements, the Components (above) and Structures (below) you see on this page can and indeed, should, be used on any imagery or graphics created where applicable.
As well we bullet points in text, custom bullet point lists can be used to draw attention to a set of important ideas. There are two custom bullet styles: one used for distinct benefits or included features / content and the other is a generic bullet, taking inspiration from our logo.
When we want to highlight a figure, we can use this structure. It places the figure at the forefront in a rather graphic fashion. It can be accompanied with an arrow (green point up or red pointing down) to illustrate change.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
This has two variants allowing for alternating composition.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Button TextLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Button TextThere are many combinations of base components to create something like the “Image&Text(Vertical)” item. Here are three examples demonstrated throughout the site.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Read more
Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Read moreDepending on its context, surroundings and size, the company logo can be scaled to provide more or less information.
Usage of the larger variants should be done with care. If a variant made to be larger is scaled down, the text becomes unreadable and makes the brand seem unaccessible.
Conversely, though smaller variants can be scaled up, the context they are placed in can sometimes benefit from additional information. For example, press related representations should include the logotype and proposal documents could include the full version.
There are two color variants of the logo. The above uses our primary accent color: Orange.
To better suit darker backgrounds, we use a modified, desaturated orange in keeping with guidance from WCAG. The desaturated orange is: Tiger (#E47D38).
