CORPORATE DESIGN STANDARDS

This manual sets the standard for all visual Swisscontact communication applications produced by employees and partners.

The manual provides communications standards and templates ranging from graphic and digital media templates. To get more details download the full Swisscontact corporate design manual.

BRAND

The logo

Our logo is locked together in spacing, size, colour and proportion and must not be altered. 

Specific colours are assigned to the logo and should always be adhered to as specified here.

Where possible, the logo should appear in full colour on a white background. If there are printing restrictions, the logo may also appear in single colour black.

PANTONE 541 C
100c 45m 0y 45k
0r 71g 122b
#00477A
PANTONE 446 C
10c 0m 0y 75k
90r 95g 97b
#5A5F61

The foundation logo

The foundation logo (Swiss Foundation for Technical Cooperation), should be placed alongside the Swisscontact logo in a prominent position. The preferred placement is below the Swisscontact logo and to the left of the layout. It can appear in the white area next to the Swisscontact logo or on top of the image area in blue or white.

The foundation logo should always appear on:

  • Annual reports
  • Corporate brochures
  • Business cards
  • Title slide of presentations
  • Office signage

The official foundation name may appear in the relevant publication’s language as required and as indicated here. We mainly communicate in four languages German, English, Spanish and French.

The world map

The world map appears as a circular device. There is a corporate version which includes all continents, as well as four regional versions (Africa, Asia, Latin America and Europe). The regional maps are used for region-specific collateral.

Global
Africa
Asia
Europe
Latin America

The world map can be used in full colour (blue and white), or as single colour white or blue.

Icons for Working Areas

The icons representing our working areas are defined below. A colour has been assigned to each icon, and it can be placed as positive on a white background, or reversed out of its colour in white.

COLOURS

Primary Colours

The primary colour palette consists of the Swisscontact blue, Swisscontact grey, cold grey and warm grey. These colours may be used in all collateral, and tints of these  colours are allowed for graphs, tables and colour blocks.

PANTONE 541 C
100c 45m 0y 45k
0r 71g 122b
#00477A
PANTONE 446 C
10c 0m 0y 75k
90r 95g 97b
#5A5F61
PANTONE 429 C
10c 0m 0y 35k
172r 182g 188b
#ACB6BC
PANTONE WARM GREY 4 C
0c 4m 9y 30k
194r 186g 176b
#C2BAB0

Secondary colours

The secondary colour palette consists of colours intended for the design and structuring of documents and can be used for colour blocks and graphics.

Yellow
0c 20m 70y 0k
254r 208g 96b
#FED060
Orange
0c 64m 100y 0k
238r 115g 0b
#EE730
Olive
35c 0m 80y 40k
128r 146g 56b
#809238
Lemon
30c 0m 100y 10k
184r 196g 0b
#A1E600
Light blue
70c 10m 0y 0k
42r 175g 229b
#2AAFE5
Dark blue
80c 20m 13y 20k
0r 132g 170b
#0084AA
Burgundy
15c 95m 5y 22k
174r 23g 107b
#AE176B
Magenta
0c 100m 0y 0k
229r 0g 125b
#E5007D

TYPOGRAPHY

Eletronic/Web Fonts

Mulish is the digital typeface for electronic and web based communication.

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnop
qrstuvwxyz
1234567890

Available weights: Regular, Semi-Bold, Bold

 

EB Garamond is the digital typeface to use for web based headlines.

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnop
qrstuvwxyz
1234567890

Available weights: Regular, Semi-Bold


Microsoft Font

Calibri is the digital typeface for electronic communication and word processing documents where the primary and secondary typeface cannot be used due to technical constraints.

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnop
qrstuvwxyz
1234567890

Available weights: Light, Light italic, Regular, Regular italic Bold, Bold italic


Fonts for print

Primary typeface Akzidenz Grotesk is the primary typeface for use across all applications which include headlines sub-headings and body copy.

Available weights: Italic, Medium Italic, Semibold Italic, Bold Italic


Secondary typeface Garamond Italic is the secondary typeface used to highlight pull-out copy, testimonials, case studies and quotations.

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnop
qrstuvwxyz
1234567890

Available weights: Italic, Medium Italic, Semibold Italic, Bold Italic


WEBSITE

Headlines

Headline 1

Google Font "Mulish", font-size 52px, font-weight "semi-bold"
Used for main page headline.


Headline 2

Google Font "Mulish", font-size 40px, font-weight "regular"
Used for headlines in content.

 

Headline 3

Google Font "Mulish", font-size 26px, font-weight "bold"
Used for headlines in content.

 

Headline 1 Root Page

Google Font "EB Garamond", font-size 60px, font-weight "semi-bold", font-style "italic"
Used for main headline on the root/home page.


Paragraph

Google Font "Mulish", font-size 17px, font-weight "regular"

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

 

CONTENT ELEMENTS

Text/Image

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Images

Images can be used in 3 different sizes (medium, large, full-size) and in groups of 2 images each row. The example below shows a medium-sized image.

Teasers

Lorem ipsum dolor sit amet
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
At vero eos et accusam et justo
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.