Stijlgids
v1.2

CATTS Style Guide

v1.2

De visual aspects of a corporate identity are only as strong as the people wielding them. Uniformity is key. In order to achieve this, a Style Guide is used to document essential brand aesthetics accompanied by examples, preferences, do's and dont's.

You are presented here with the CATTS Style Guide. It will help anyone dealing with branded documents and designs to adhere to our visual style.

01 - Logo

A business' logo is essential for its recognizability. Therefore, its appearance and use should always be clearly defined and restricted.

The logo section presents the original logo followed by a series of variations in both color and shape, as well as guidelines concerning its placement in a context considering layout and backgrounds.

1.1 - Logo and Backgrounds

There is only one Original Logo. For flexibility, however, it is not uncommon to allow for some alternative appearances. An important consideration here is the use of the logo on different background, which may require a change of color.

The Default

The default logo displays the name's letters "CATTS." seemingly made out of paper strokes. Gradients are used to imply shade where the strokes are folded and overlapping themselves.

Default Logo

Dark Backgrounds: Logo by Night

In some cases, we might want to display the logo on a dark background because it serves the overall design of a certain document. For these cases, we use a lighter version of the logo that will constrast with the dark background. We call this alternative version the "Logo by night".

The "Logo by night" is basically a white version of the logo, but it is edited to feature the same folded-paper characteristic as the original.

By using a gradient based on transparency rather than on color for the shade-effect, this version of the logo can be applied on different background colors.

Logo by Night (default background color)
Background color
Navy Blue
Logo by Night (alternative background color)
Background color
Classic Red - Darker

Photographic Background

In addition to a plain, colored background, we may want to use the logo on top of a photographic background. However tricky, it can be made to look stylish.

Wether we use the original logo or its "by night" alternative depends on the background photo and the overall layout of the design. Readability is the keyword here. When in doubt, it is best to leave the use of this option to a professional designer.

Default Logo (photographic background)
Few photos are suited as a background for the default logo. Look for clean, close-to-white areas.
Logo by Night (photographic background)
The "Logo by Night" is generally easier to work with on photographic backgrounds.

Default Logo: Do's and Dont's

The Default Logo is the most preferred appearence of the logo. It should be used in accordance to the guidelines below.

White background
We use the Default Logo primarily on plain, white surfaces.
Colored background
Don't use any color behind the Default Logo.
Photo-background: questionable image
Photographic backgrounds are tricky. Consult our designer.
Photo-background: insufficient contrast
Avoid poor contrast between logo and background.

Logo by Night: Do's and Dont's

In relation to the Logo by Night, we can also define some acceptable use-cases and absolute no-go's.

Default background colors
'Navy Blue' and 'Classic Red - Darker' are the preferred background colors.
Alternative background colors: ID Colors
The Logo by Night may appear on any ID color (base color or 'Dark' shade).
Non-preferred background colors
Other colors are nonpreferred. Consult our designer.
Background gradients
Gradients are nonpreferred. Consult our designer.
Photo-background
Darker images make for suitable backgrounds.
Photo-background: insufficient clairity
Avoid poor readability resulting from messy backgrounds.

1.2 - Placement in context

To ensure a professional appearance as well as uniformity across designs, the placement of a logo inside its context should also be clearly defined. Placement refers to the spacing around the logo as well as its alignment within the document layout.

By applying relative Logo Margins, a healthy amount of whitespace (empty space) around the logo is ensured. The margins allow for the logo to breathe and emit a sense of calm. Logo Alignment is a matter of preference, based on the logo design itself.

Logo Margins

The CATTS Original Logo is neathly laid-out on a grid. We use this grid to visualize the desired whitespace and resulting margins, distancing the logo from any other texts and design elements.

Logo Grid

The period at the far right of the logo, next to the S, covers a 1 x 1 space in the grid. It makes for a handy measuring tool. Multiply the height and weight of the period times 3 and you have the correct margin for each side.

In each direction of the logo, we apply a margin of 3 grid spaces.

The Logo Margins as defined here should always be respected. No other elements such as text or images may overlap this usually invisible aura. For clarification, the space occupied by the margins has been made visible in the examples below.

Logo margins properly applied
This is a body of text.
This is a body of text.
There is sufficient distance between logo and text.
Logo margins violated
This is a body of text.
This is a body of text.
The body of text is too close to the logo, violating the logo margins.

Logo Alignment

The CATTS logo is purely textual, implying it should follow the same rules of alignment as any regular text in the design.

Additionally, due to the period on the far right, the right edge of the logo is not as clearly defined as the left edge, making an alignment to the right visualy dissatisfying.

Resulting from these considerations, we preferrably align the logo to the left-side corners or the center of the containing box.

Left Side Corner & Center Alignment
It is our preference to stick with these alignments.
Right Side Alignment
Right side alignment is nonpreferred.

1.3 - Variations

In certain contexts space might be limited, or a less prominent role for the logo is desired. In other situations there is room aplenty and the logo should take Center Stage. A selection of form variantions of the logo may be applied in such situations.

With Tagline

CATTS formulated a tagline (or slogan) to convey the company's identity in a single phrase. While not an inherent part of the logo design, the tagline will rarely appear apart from the logo. Therefor the appearance of the two combined needs to be adressed.

Logo with Tagline
Logo by Night with Tagline

Suggested use cases

  • non-repetative appearances
  • promotionals contexts

Center Stage

In the "Logo with Tagline" as presented above, the tagline appears relatively small at the risk of going unnoticed. This in acceptable in many cases where a design contains more relevant info.

However, when an important document's cover or the first slide of presentation contain little else than the logo with tagline, it could be a good opportunity to put the tagline in the spotlight. The Logo with Tagline is taking Center Stage.

Logo with Tagline: Center stage
Logo by Night with Tagline: Center stage

Suggested use cases

  • front page / cover
  • first presentation slide

The Profile Picture

We cannot always control the context of our logo. A good example are social media profiles that allow us to set a profile picture. Oftentimes they are displayed in a small, square box. For such situations, we use a minimalistic version of the logo. 

Logo Minimal

Here, a margin the size of 2 grid spaces will suffice.

Logo Variants: Do's and Dont's

We choose the most suitable form variant based on the context. The guidlines concerning placement as defined for the Original Logo should still be respected. When in doubt, revert to the original logo or consult our designer.

Logo: twisted
Don't rotate any of the logo variants.
Logo with Tagline margins
This is a body of text.
The Logo Margins of the Default Logo apply.
Logo by night with Tagline: Center stage
This is a body of text. It contains information relevant to your target audience. In this context, the "Center stage" appearance of the logo with tagline distracts from this mesage.
Don't combine this variant with other messages or design elements.

02 - Color

A brand's color palette consists of a small number of defining identity colors, suplemented with a range of supporting colors for specific uses.

In this section, the full palette of colors will be laid-out for use in various types of branded graphic design.

2.1 - Primary Colors

Colors are important transmitters of emotions and tools for association. As such, a set of identity colors can be considered one of the main ingredients of any brand identity.

At a practical level, we have to decide on which colors to use and how many. We should also determine their hierarchy.

In addition, one or several shades may be derived from any of the base colors in order to secure consistent use of color in richer graphic designs. The use of gradients, if appropriate, may also be defined.

Brand Identity colors

The CATTS brand features 4 identity colors that will be reffered to as: CATTS Purple (primary), CATTS Red (accent), CATTS Navy Blue (background) and CATTS Lila (secondary accent). A couple of brighter and darker shades of these base colors are also defined as part of the CATTS color scheme.

Color Square
Color Square

The full range of identity colors and shades is displayed in the Color Square. The square represents not just the colors themselves, but also their hierarchy; colors with a larger share are more dominantly present in branded graphic design. This should be considered a rough indication.

Brand ID color codes

Below, the identity tones and shades are presented with the corresponding codes in HEX and RGB (digital), and CMYK (print).

Midnight Blue
HEX
#232176
RGB
35, 33, 118
CMYK
33, 33, 0, 54
CATTS Purple Light
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Lighter
HEX
#
RGB
, , 
CMYK
, , , 
Midnight Blue - Darker
HEX
#181752
RGB
24, 23, 82
CMYK
23, 23, 0, 68
CATTS Purple Darker
HEX
#
RGB
, , 
CMYK
, , , 
Midnight Blue - Brighter
HEX
#34259e
RGB
52, 37, 158
CMYK
42, 47, 0, 38
CATTS Purple Faded
HEX
#
RGB
, , 
CMYK
, , , 
Classic Red
HEX
#c13000
RGB
193, 48, 0
CMYK
0, 57, 76, 24
CATTS Red Light
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Red Lighter
HEX
#
RGB
, , 
CMYK
, , , 
Classic Red - Darker
HEX
#a82a00
RGB
168, 42, 0
CMYK
0, 49, 66, 34
CATTS Red Darker
HEX
#
RGB
, , 
CMYK
, , , 
Classic Red - Brighter
HEX
#cf3400
RGB
207, 52, 0
CMYK
0, 61, 81, 19
CATTS Red Faded
HEX
#
RGB
, , 
CMYK
, , , 
Navy Blue
HEX
#0b0a1f
RGB
11, 10, 31
CMYK
65, 68, 0, 88
CATTS Red Light
HEX
#
RGB
CMYK
, , , 
CATTS Red Lighter
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Red Dark
HEX
#
RGB
CMYK
, , , 
CATTS Red Darker
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Red Bright
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Red Faded
HEX
#
RGB
, , 
CMYK
, , , 
Lila
HEX
#9595f4
RGB
149, 149, 244
CMYK
37, 37, 0, 4
Lila - Lighter
HEX
#b0b0df
RGB
176, 176, 223
CMYK
18, 18, 0, 13
CATTS Red Lighter
HEX
#
RGB
, , 
CMYK
, , , 
Lila - Darker
HEX
#6969c9
RGB
105, 105, 201
CMYK
38, 38, 0, 21
CATTS Red Darker
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Red Bright
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Red Faded
HEX
#
RGB
, , 
CMYK
, , , 

Brand ID color gradients: Do's and Dont's

Gradients involving the identity colors may be applied in accordance with the following guidelines.

Kleur  >  Kleur
Midnight Blue  > Midnight Blue - Darker
Toegestaan kleurverloop
Any base color may blend into its darker shade.
Kleur   >   Kleur
Navy Blue > Black
Afgekeurd kleurverloop
Navy Blue may blend into black.
Kleur   >   Kleur
Midnight Blue > Classic Red
Afgekeurd kleurverloop
Don't let one ID color blend into another.

2.2 - Secondary colors

Identity colors set the mood for every design, but they are usually not sufficient to fulfill all needs. Elements such as lengthy texts and backgrounds often take mores neutral tones. For such purposes, some extra colors are defined.

The set of supporting colors includes original colors, but may also adopt some identity colors defined earlier.

Background color codes

These are the preferred colors for document backgrounds, defined in HEX and RGB (digital), and CMYK (print).

BG White
HEX
#ffffff
RGB
255, 255, 255
CMYK
0, 0, 0, 0
BG Grey
HEX
#f6f6f6
RGB
246, 246, 246
CMYK
0, 0, 0, 4
BG Navy Blue
HEX
#090828
RGB
9, 8, 40
CMYK
12, 13, 0, 84
BG Red Dark
HEX
#a82a00
RGB
168, 42, 0
CMYK
0, 49, 66, 34

Text color codes

These are the most commonly used text colors in relation to their background, defined in HEX and RGB (digital), and CMYK (print).

TXT Body Grey

Abc

HEX
#434343
RGB
67, 67, 67
CMYK
0, 0, 0, 74
Background
BG White / BG Grey
TXT Heading Navy Blue

Abc

HEX
#090828
RGB
9, 8, 40
CMYK
12, 13, 0, 84
Background
BG White / BG Grey
TXT Translucent White

Abc

HEX
#FFFFFFE6
RGB
255, 255, 255 (90%)
CMYK
0, 0, 0, 0 (90%)
Background
BG Navy Blue
TXT Translucent White

Abc

HEX
#FFFFFFE6
RGB
255, 255, 255 (90%)
CMYK
0, 0, 0, 0 (90%)
Background
BG Red Dark
TXT Lila

Abc

HEX
#9595f4
RGB
149, 149, 244
CMYK
37, 37, 0, 4
Background
BG Purple

Additional Colors

For special purposed unique to the brand, a series of additional colors may be defined to further extend the color palette.

Palette colors

At CATTS, our services are categorized by the letters of our company name. In order to clearly communicate these five corner stones, we have allocated a unique color to each of them.

These colors (their base tones) are less saturated colors as compared to the Identity colors. As such, these colors are clearly subordinate.

The Service Colors make subtle reference to traditional dossier files, post-its and cargo containers, all symbols of ordening and a systematic approach.

Dossier files
Cargo containers

Palette color codes

Each of the Service Colors paired with a Brichter and Darker shade, is defined here in HEX and RGB (digital), and CMYK (print).

CC Orange
HEX
#cc8352
RGB
204, 131, 82
CMYK
0, 29, 48, 20
CC Orange Brighter
HEX
#cc7033
RGB
204, 112, 51
CMYK
0, 36, 60, 20
CC Orange Darker
HEX
#4c250f
RGB
76, 37, 15
CMYK
0, 15, 24, 70
CATTS Purple Dark
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Darker
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Bright
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Faded
HEX
#
RGB
, , 
CMYK
, , , 
AA Blue
HEX
#7099cc
RGB
112, 153, 204
CMYK
36, 20, 0, 20
AA Blue Brighter
HEX
#4989cc
RGB
73, 137, 204
CMYK
51, 26, 0, 20
AA Blue Darker
HEX
#0f2c4c
RGB
15, 44, 76
CMYK
24, 13, 0, 70
AA Blue Darker
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Darker
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Bright
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Faded
HEX
#
RGB
, , 
CMYK
, , , 
TW Turquoise
HEX
#61abab
RGB
97, 171, 171
CMYK
29, 0, 0, 33
TW Turquoise Brighter
HEX
#2babab
RGB
43, 171, 171
CMYK
50, 0, 0, 33
TW Turquoise Darker
HEX
#0f4c4c
RGB
15, 76, 76
CMYK
24, 0, 0, 70
CATTS Purple Dark
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Darker
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Bright
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Faded
HEX
#
RGB
, , 
CMYK
, , , 
TW Red
HEX
#cc6a5c
RGB
204, 106, 92
CMYK
0, 38, 44, 20
TW Red Brighter
HEX
#cc4733
RGB
204, 71, 51
CMYK
0, 52, 60, 20
TW Red Darker
HEX
#66271f
RGB
102, 39, 31
CMYK
0, 25, 28, 60
CATTS Purple Dark
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Darker
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Bright
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Faded
HEX
#
RGB
, , 
CMYK
, , , 
SE Yellow
HEX
#d9ad5f
RGB
217, 173, 95
CMYK
0, 17, 48, 15
SE Yellow Brighter
HEX
#d99821
RGB
217, 152, 33
CMYK
0, 25, 72, 15
SE Yellow Darker
HEX
#594012
RGB
89, 64, 18
CMYK
0, 10, 28, 65
CATTS Purple Dark
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Darker
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Bright
HEX
#
RGB
, , 
CMYK
, , , 
CATTS Purple Faded
HEX
#
RGB
, , 
CMYK
, , , 

03 - Typography

Typography is about more than just fonts. We are dealing with titles, headigs and sub-headings, lists, over-all document layout and more.

This section will set the standards for text-based content and everything textual our visual content may include.

3.1 - Typeface usage

Usually at least two brand typefaces are defined: one for regular text, such as body text, and another for headings. These two lettering style choices may be identical. In such a case, headings will only be distinguishable by font variations in size and weight.

Brand Typefaces

We use a single typeface for all fixed CATTS content (service info, about section, etc). The font is chosen for optimal readability and flexibility for use with different languages.

Regular Text Typeface

Montserrat

Abc

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890

Headings Typeface

Montserrat

Abc

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890

3.2 - Text Formatting

The rules of text formatting include properties such as size, weight, line height and paragraph spacing. As with the fonts, we differentiate between body text and headings. Differences between digital and printed text may also apply.

Markup basics

Regular text comes in 3 sizes with a fixed ratio. The default size may vary based on the context (web, print, etc.) while the scaling ratio will remain the same.

The larger text size may be applied to an introductory paragraph or any other short text that requires emphasis, whereas the smaller text size is well suited for meta data and captions.

The heading sizes are also derived from the default regular text size and defined by percentage. A pixel size for each heading type is included for ease of use.

Text Formatting example (web)
small font size ---
button text
H1 heading ---
Webpage or document title
small font size ---
19 juli 2022
large font size ---

Nam interdum pretium nulla, et ullamcorper libero pulvinar elementum. Quisque interdum, diam ac accumsan ultrices, augue augue molestie purus, et lacinia mauris nisl at turpis. Vestibulum vitae elit mi. Nunc hendrerit, justo a laoreet varius, neque massa sollicitudin dolor, et vestibulum erat est vitae eros.

H2 heading ---
Secondary heading for sections or chapters
default font size ---

Quisque justo nibh, pharetra eget dolor vitae, condimentum pharetra orci. Nunc elit lacus, iaculis eleifend gravida at, scelerisque non ipsum. Nunc hendrerit, justo a laoreet varius, neque massa sollicitudin dolor, et vestibulum erat est vitae eros.

Vestibulum vitae elit mi. Nunc hendrerit, justo a laoreet varius, neque massa sollicitudin dolor, et vestibulum erat. Interdum pretium nulla, et ullamcorper libero pulvinar elementum.

Third level heading

Nunc elit lacus, iaculis eleifend gravida at, scelerisque non ipsum. Nunc hendrerit, justo a laoreet varius, neque massa sollicitudin dolor, et vestibulum erat est vitae eros. Phasellus non fermentum tellus, quis scelerisque urna. Integer in ultricies felis, ut fermentum arcu. Donec imperdiet fermentum gravida.

Uncommon 4th level sub-heading

Nunc hendrerit, justo a laoreet varius, neque massa sollicitudin dolor, et vestibulum erat est vitae eros. Phasellus non fermentum tellus, quis scelerisque urna. Integer in ultricies felis, ut fermentum arcu. Donec imperdiet fermentum

Heading level five

Phasellus non fermentum tellus, quis scelerisque urna. Integer in ultricies felis, ut fermentum arcu. Donec imperdiet fermentum gravida.

Paragraph heading

Interdum pretium nulla, et ullamcorper libero pulvinar elementum. Quisque interdum, diam ac accumsan ultrices, augue augue molestie purus, et lacinia mauris nisl at turpis.

Website / E-mail

We take a digital-first approach on our text formatting guidelines. The properties below apply to texts displayed on a large (desktop) screen. On mobile devices, gradual scaling of font sizes may be applied.

Body text Formatting attributes
Standaard tekstformaat. Lorem ipsum dolor sit amet.
Grote tekst. Orci erat ex ultrice turpis.
Kleine tekst. Proin a malesuada auctor.
Regular sized text. Lorem ipsum dolor sit amet.
Larger text. Orci erat ex ultrice.
Smaller text. Proin a malesuada auctor.
Website / E-mail
Font size Default
14px
Font size Large
115% / 16px
Font size Small
85% / 12px
Line height
font size x2
Font weight Default
400
Line weight Large
500
Line weight Small
400
§ spacing
font size x2
Heading text Formatting attributes
H1 Titel
H2 Sectie
H3 Sub-sectie
H4 Tussenkop
H5 Aandachtspunt
H1 Title
H2 Section
H3 Sub-section
H4 Sub-heading
H5 Sub-heading
Website / E-mail
H1 Font size
230% / 32px
H2 Font size
140% / 20px
H3 Font size
130% / 18px
H4 Font size
105% / 15px
H5 Font size
100% / 14px
H1-H2 Font weight
800
H3 Font weight
700
H4 & H5 Font weight
600
Line height
font size x1.4
H2-H5 top margin
heading font size * 2

Print / PDF ( doc )

Whether printed of viewed digitally as a PDF, any material set-up in more traditional document formats such as A4 or A5 adopts slightly different text formatting properties.

Text is generally smaller in size to adjust for the smaller viewing distance of printed materials. Additionally, the line height is different because software optimized for print deals with leading (the distance between lines) in slightly different ways.

Optically, the text formatting of CATTS printed materials should look close to identical to texts optimized for screens.

Body text Formatting attributes
Standaard tekstformaat. Lorem ipsum dolor sit amet.
Grote tekst. Orci erat ex ultrice, accumsan turpis.
Kleine tekst. Proin a malesuada auctor.
Regular sized text. Lorem ipsum dolor sit amet.
Larger text. Orci erat ex ultrice.
Smaller text. Proin a malesuada auctor.
Print / PDF ( doc )
Font size Default
10pt
Font size Large
130% / 13pt
Font size Small
85% / 8.5pt
Line height
1.67
Font weight Default
regular
Line weight Large
medium
Line weight Small
regular
§ spacing
single line (10pt * 1.67)
Heading text Formatting attributes
H1 Titel
H2 Hoofdstuk
H3 Paragraaf
H4 Tussenkop
H5 Aandachtspunt
H1 Title
H2 Chapter
H3 Section
H4 Sub-section
H5 Sub-heading
Print / PDF ( doc )
H1 Font size
230% / 23pt
H2 Font size
140% / 14pt
H3 Font size
130% / 13pt
H4 Font size
105% / 10.5pt
H5 Font size
100% / 10pt
H1-H2 Font weight
extra bold
H3 & H4 Font weight
semi-bold
H5 Font weight
medium
Line height
1.67
H2-H5 top margin
heading font size * 2

04 - Visual Features

While a brand's logo, colors and typography are the core of any corporate identity, a complete visual style includes more. We have to consider our overall design signature, consisting of so-called Visual Features.

This section may cover graphics, illustrations, icons and photos, all of which are meant to sustain the overall brand identity and communication.

4.1 - Iconography

The use of icons can enhance designs in many ways. They are oftentimes applied to information presented as a list such as services, core values, key benefits and the like.

In any context, icons add a visual dimension to text-heavy content, increasing the amount of whitespace and the sense of visual ordening to make texts more appealing and readable.

Favicon

The Favicon is a very particular kind of icon. The term originates from early webbrowsers allowing users to save websites of interest as 'Favorites' (now often referred to as bookmarks). It is still used for this purpose. The icon appears next to the website title in your bookmarks list.

In most cases, a Favicon is essentially an iconized version of the company logo, designed to be recognizable at very small dimensions and on any background color, dark or light. These two requirements set it apart from the 'Logo Minimal' as presented in the Logo-section.

Logo Favicon
Background
White
Logo Favicon
Background
Light
Logo Favicon
Background
Dark
Illustratieve iconen

We are planning to use illustrative icons for the "How can we help?" sections on each of the service pages on our website. These icons are yet to be designed.

In any context where a page or design is dedicated to one service in particular, the icon adopts the corresponding Service Color.

Mogelijke toepassingen

  • Service-specific page or document
  • Special effects website

Iconenreeks

4.2 - Call-to-action

A Call-to-action (or CTA) is a design element meant to seduce the audience to act in a predefined way. It calls on the reader to contact the company, call them, subscribe to their newsletter or to proceed to a next step in any sort of proces.

In the online environment, CTA's are usually designed as buttons that allow actual interaction. But in print, the same design principles may be applied to articulate a CTA.

The printed CTA

A Call-to-action is essentially a highlighted piece of information or simply a verb (or a short phrase containing a verb). It usually contains text, but it may also be a highlighted icon or a combination of the two.

In any case, the way the CTA is designed is meant to encourage the audience to respond. Therefore, it should stand out from its surroundings.

There are a couple of design features that characterize our CTA's and make them stand out:

  • the word, phrase or icon is framed
  • any text is capitalized
  • the frame features two opposing cut corners
  • the frame features either a filled background or a border
CTA Default examples
+31 20 308 2010
call us
CTA Accent examples
+31 20 308 2010
call us

The button

Online, we can upgrade our CTA's to interactive buttons, making the intended action as easy as a click. The buttons presented below are optimized for use on the company website. They include hover-effects involving a slight change of color and a subtle retraction of the cut corners.

Buttons in Identity Colors
Buttons in Identity Colors

4.3 - Imagery

The use of images has a large impact on the overall look-and-feel of any design, and thus on any brand. It is therefore important to consider guidelines related to types of images, style and color.

Concept: Stock images reimagined

Stock images can water down any corporate identity, but sometimes their use can be difficult to avoid.

In an industry where competitors all tend to fish in a small pond of cliche imagery, we developed a signature editing technique to alter stock images into typical CATTS images.

With a strict editing process, we turn every generic stock image into an illustration that matches the CATTS color palette.

The images may combine any Identity colors and Service colors as well as derived shades that are not explicitly defined in this Style Guide.

Sample image 1
Sample image 2

For specific content about any of the CATTS Services in particular, we alter images to reflect the related Service colors more dominantly.

Sample image 'Audits & Assessments'

4.4 - Highlighted content

Whenever a specific piece of content is to stand out from its context, graphics can be of aid. A recognizable combination of shape, background, text formatting that reappears throughout extended documents will draw a reader's attention to what matters most. Additionally, it will enhance the visual appeal of the document as a whole.

The concept: Colored Box, Oblique Cut

CATTS presents highlighted content in a colored box (CATTS' primary Identity Color by default), which usually appears in a column besides the main content. The box occupies no more than a third of the total document width.

The colored box is characterized by an oblique cut, defining the bottom edge.

Inside the box, the following properties apply:

  • background gradient: CATTS Purple > CATTS Purple Darker
  • background texture: a subtle grid-texture makes reference to our accurate working methods
  • the default font size shrinks by 1px (as compared to the context) and derived font sizes change accordingly
Newsletter 
Stay Informed

Larger text. Orci erat ex ultrice, accumsan turpis.

Sub-heading

Regular sized text. Lorem ipsum dolor sit amet, consectetur orci erat.

Special benefit

Regular sized text. Ultricies lacus, ex accumsan turpis.

accent

4.5 - Backgrounds

Backgrounds may contain more than just plain color or gradients. This section explains any reoccuring graphic features concerning backgrounds.

The concept: Overlapping Sheets

The visual style of CATTS makes several references to paper, paperwork, categorization and tight organization. These keywords and characteristics of our services are also reflected in the way we deal with backgrounds and surface division.

We work with a concept called Overlapping Sheets. The sheets come in white, 'CATTS Red' or in the form of an image, and overlap each other in various ways as to sustain the document's layout.

Overlapping sheets

Sheets featuring a mid-tone color, usually CATTS Red, contain a subtle grid-texture identical to the one we use for Highlighted content.

The backdrop of any such arrangement of Overlapping Sheets is always colored 'CATTS Navy Blue'.

Use cases

The Sheets can be applied in various ways. They can be used at the top and bottom of documents to distinguish secondary information from the main content, or to form a transition between different content sections.

Header use case
top
Footer use case

This is a body of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, enim a malesuada auctor, orci erat ultricies lacus, a accumsan turpis ex quis urna.

Orci erat ultricies lacus, a accumsan turpis ex quis, malesuada auctor. Vivamus dictum dignissim orci vel ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.

This is a body of text.
bottom
Horizontal split use case (text document)
Heading
This is a body of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, enim a malesuada auctor, orci erat ultricies lacus.
Heading
This is a body of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, enim a malesuada auctor, orci erat ultricies lacus.
Vertical split use case (presentation slide)
This is a body of text.
This is a body of text.
This is a body of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, enim a malesuada auctor.
H2 heading
This is a body of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat, enim a malesuada auctor, orci erat ultricies lacus, a accumsan turpis ex quis urna.
This is a body of text. Malesuada auctor, orci erat ultricies lacus, a accumsan turpis ex quis urna.
  • This is a list
  • It contains bullit points
  • A total of three

Do's and Dont's

The Sheets-concept offers flexibility to provide for different layout-related use cases. A few guidelines apply in order to safeguard aesthetics.

Overlapping sheets - Stacking order
Don't change the stacking order.
Overlapping sheets - Angles

The sheets may be titled in the same or opposing directions to a maximum of 7 degrees.