CATTS Style Guide
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.
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.
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: 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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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).
Brand ID color gradients: Do's and Dont's
Gradients involving the identity colors may be applied in accordance with the following guidelines.
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).
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).
Abc
Abc
Abc
Abc
Abc
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.
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).
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.
Montserrat
Abc
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890
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.
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.
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.
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.
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
Phasellus non fermentum tellus, quis scelerisque urna. Integer in ultricies felis, ut fermentum arcu. Donec imperdiet fermentum gravida.
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.
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.
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.
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
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
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.
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.
For specific content about any of the CATTS Services in particular, we alter images to reflect the related Service colors more dominantly.
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
Larger text. Orci erat ex ultrice, accumsan turpis.
Regular sized text. Lorem ipsum dolor sit amet, consectetur orci erat.
Regular sized text. Ultricies lacus, ex accumsan turpis.
accent4.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.
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.
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 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.
The sheets may be titled in the same or opposing directions to a maximum of 7 degrees.