Website Styleguide Status: 2021 October

Continental Industry Website Styleguide Status: 2021 October

Digital Communications ContiTech Business Area Continental Industry Website Styleguide

› Introduction 03 › Table 16 › Layout Principles 04 › Page Elements 17 › Basic Layout 05 › Header 18 › Desktop 06 › Footer 19 › Responsive Design 07 › Navigation 20 › Design Elements 08 › Desktop 21 › Logo 09 › Mobile 23 › Colors 10 › Onpage 24 › Typography 11 › Login Area 26 › Images 12 › Special Case: Campaign 27 › Icons & Buttons 14 › Contact 35 › Fields of Interaction 15

2021 Oct | com&on Medienagentur I © ContiTech AG 2 Introduction

This styleguide for the ContiTech Business Area Internet pages was developed to ensure the appropriate use and consistency of design elements, page structures and interactions for technical implementation. The content presented is binding for all websites of the ContiTech Business Area under the Continental brand.

This styleguide describes the elements and functions of the user interface. It serves as a central point of contact for all questions regarding the implementation of design elements on the page templates.

The ContiTech Business Area website uses the content management system Kentico. In this system, all design elements shown are preset.

All screens and wording shown do not represent real content and therefore are without any claim to correctness.

2021 Oct | com&on Medienagentur I © ContiTech AG 3 Continental Industry Website Styleguide

› Layout Principles › Basic Layout › Desktop › Responsive Design

2021 Oct | com&on Medienagentur I © ContiTech AG 4 Layout Principles Basic Layout

The quality seal is always positioned at the top-left of the page and is always flush-left with the first column of the grid and content area. It always overlaps the header image. The 47px tall top navigation is followed by the Quality stage image. There is a 5px strong yellow separator line below the stage Seal image and the 62px tall main navigation below that. The content area below the navigation is always centered horizontally and has a max. width of 1140px. Top navigation, stage image, separator line and main navigation always stretch across the whole width of the monitor.

Device breakpoints › Mobile: 0 - 599px › Small Tablet: 600 - 767px › Tablet: 768 - 1023px › Desktop: from 1024px

2021 Oct | com&on Medienagentur I © ContiTech AG 5 Layout Principles

Desktop Content Area 6-6

Both the stage and footer area are displayed unboxed until a width of Full 4-8 HD 1920px is surpassed. 8-4

The content area has a maximum width of 1140px and consists of 12 „units“ that can be split up in the following combinations: 4-4-4 12 | 6-6 | 4-8 | 8-4 | 4-4-4 | 3-3-3-3

3-3-3-3

Examples of splitting

8-4

2021 Oct | com&on Medienagentur I © ContiTech AG 6 px 15 Layout Principles Responsive Design

Mobile

The content area is always centered horizontally between 15px wide distance containers on both sides. There is no separator line or main navigation bar below the image. The navigation can be accessed via the burger menu in the top right. Instead of a quality seal, the Continental logo appears in the top bar. px 60

Tablet The content area is always centered horizontally between 60px wide distance containers on both sides. The stage image stretches across the whole width of the screen. There is no separator line or main navigation bar below the image. The navigation can be accessed via the burger menu in the top right.

2021 Oct | com&on Medienagentur I © ContiTech AG 7 Continental Industry Website Styleguide

› Design Elements › Logo › Colors › Typography › Images › Icons & Buttons › Fields of Interaction › Table

2021 Oct | com&on Medienagentur I © ContiTech AG 8 Design Elements Desktop Logo

The Continental logo or quality seal must be visible at all times and must appear on every page of the website. Its state may change on different viewport sizes and devices. The given Continental Corporate Design Guidelines must be upheld. Tablet

Download Corporate Design Basic Elements Sticky navigation When scrolling further down the page, the sticky navigation will fade in which replaces the quality seal with the Continental logo. On desktop, the logo sits flush with the left edge of the content area. On tablet, the logo is positioned at the top left with a 60px wide distance container to the left outer display border. Sticky Navigation

Download Logo and Seal Mobile The logo is always positioned at the top-left of the page with a minimum distance of 10px to the left outer display border. Mobile

2021 Oct | com&on Medienagentur I © ContiTech AG 9 Yellow | Hex: #FFA500 Use e.g.: Accent, buttons, lines Design Elements Light Yellow | Hex: #FEBB40 Use e.g.: Hover color Continental Color System Black | Hex: #000000 Use e.g.: Font White | Hex: #FFFFFF The Continental colors give the company’s communication its Use: Background Gray 01 | Hex: #333333 characteristic appearance. Continental Yellow represents the brand’s Use e.g.: Select country bar background dynamism, superiority, and active prowess. The basic color Continental Gray 02 | Hex: #737373 Yellow is supplemented by black, white and intermediate shades. Use e.g.: Footer Gray 03 | Hex: #969696 Use e.g.: Buttons, teaser, backgrounds, dots Gray 04 | Hex: #cdcdcd Use e.g.: Buttons, borders, backgrounds, table head, font Gray 05 | Hex: #f0f0f0 Use e.g.: Mobile menu, mouseover, background & table content Light Blue | Hex: #00a5dc

Dark Blue | Hex: #004eaf

Light Green | Hex: #2db928

Dark Green | Hex: #057855

The Nunito Sans webfont is used throughout the websites and cannot be substituted under any circumstances. All fonts are preset in the Kentico CMS.

The line-height is by default the respective font size times 1,2 (e. g. 48px * 1,2 = 57,6; approx. 58px) Download Font CSS-Tags

›

,

,
(body text)
›

can only be used once per page
› Due to SEO the tags can be used multiple ways
2021 Oct | com&on Medienagentur I © ContiTech AG 11 Design Elements Stage Images Download .psd Template
All pages have a stage image in the header area which is partially covered by Big Stage Desktop the logo (seal) on the left side on desktop and tablet. The point of interest of this picture should be to the right, because logo and text are on the left side.
The Big Stage format is only used for the home page. All image formats must be created in triplicate for the appropriate devices. Videos are created in desktop format. › Desktop: Width 1680px, Height 750px, 96 dpi › Tablet: Output format 991 x 500px [create: 1982 x 1000px], 96 dpi Mobile › Mobile: Output format 575 x 950px [create: 1150 x 1900px], 96 dpi Big Stage Tablet
The Overview Stage has a lower height and is used for overview pages, industry pages and location profiles. All image formats must be created in triplicate for the appropriate devices. › Desktop: Width 1680px, Height 480px, 96 dpi › Tablet: Output format 991 x 480px [create: 1982 x 960px], 96 dpi Overview Stage Desktop › Mobile: Output format 575 x 575px [create: 1150 x 1150px], 96 dpi
The Small Stage format is used for all other subpages. › Width 1680px, Height 264px, 96 dpi Mobile 2021 Oct | com&on Medienagentur I © ContiTech AG 12
Overview Stage Tablet Design Elements Content Images 1,76
Each image in the content area of the website has the same aspect ratio. 1 ~16:9 All other image dimensions are a multiple of this aspect ratio and are automatically converted to the correct format in the CMS.
› Width 749px, Height 424px, 96 dpi Aspect Ratio
Product pure images always have a gray background. The gradient is preset as a layer in the downloadable Master Template.
Download .psd Master Template
Product Image Example 2021 Oct | com&on Medienagentur I © ContiTech AG 13 Favicon Download Design Elements Read more External Icons & Buttons Breadcrump link List Icons and buttons refer to services and further information on the website. Internal Next level navigation link The following colors are used for icons: #FFA500 Yellow Scroll #000000 Black to top #FFFFFF White Close navigation 43px #969696 Grey 03
The icons are taken from Font Awesome. Get Font Awesome Note: Arrows for bullets, links or buttons use icon-angle-… 40px Button Scroll left/right Button Sizes 32px › The width is determined by the button text
› With arrow: Text left-aligned and arrow right-aligned; padding right/left 10px Video Accordeon/More Info › Without arrow: Text centered open/close Social media icons Social Media Please use the templates of the respective channels: Drop down › LinkedIn 32 Close › Twitter px pop-up › YouTube 2021 Oct | com&on Medienagentur I © ContiTech AG Search 14 Sign out General search field Design Elements Fields of Interaction
The following input fields are available to facilitate the search for content or specific products. Input fields always have rounded edges, similar to the call-to-action buttons. Input field › Input fields: The category of the input field can be placed outside the field as well as directly in the field to save space. The search command is executed by pressing the enter key. A separate search button is possible.
› Option fields: The option fields are round. A yellow marker appears inside them when they are selected.
› Selection fields: Parameters can be chosen from a dropdown list that appears after selecting the field. Option fields
An autofill function should be offered for the full text search of the website.
2021 Oct | com&on Medienagentur I © ContiTech AG 15 Selection fields Table Colors Design Elements #DDDDDD Table #EEEEEE Lines: #FFFFFF
Tabular displays should be avoided as far as possible, › List Icon: as their clarity is lost on mobile devices. #FFA500 The lineweight is 2px. Typo: Nunito Sans regular/bold 16 px.
Examples
2021 Oct | com&on Medienagentur I © ContiTech AG 16 Continental Industry Website Styleguide
› Page Elements › Header › Footer
2021 Oct | com&on Medienagentur I © ContiTech AG 17 Page Elements Header There are three types of headers. All types are terminated with a 5px wide yellow separator line. The stage title always begins left-alligned with the seal. There is a 20px (entry page) or 10px (overview and subpage) tall padding below the title. If there are multiple lines of text (overline and subline), the overline ist followed by a 10px padding, the headline is followed by 20px padding. Entry Page Header Desktop A gradient of black 40% transparency starting from the bottom of the image guarantees the readability of the title.
The entry page header (home or campaign page) has an image in Big Stage format with title in white. Overline, subline and link to subpages are optional. Headline: max. 50 characters, Subline: max. 90 characters. A maximum of five topics can be integrated as image or self-running video as sliders. Overview Page Header Desktop The overview page header has a white title and can be found on the Products & Solutions, Industries and Media pages as well as the Sales & Service Locations.
All other pages have a subpage header in small stage format with title in white.
› For header sizes see Design Elements Subpage Header Desktop 2021 Oct | com&on Medienagentur I © ContiTech AG 18 Page Elements Footer The footer element is visible on every page of the website and borders on a yellow Desktop separator line at the top. Gray 02 (#737373) is used as the background color. Its height is variable and determined by the content. The footer contains two areas:
Links to other websites/areas of the Continental Corporation The area on the right always contains the Continental webs under the title „Continental World“. On external pages of our business area the link to Continental Industry is positioned above Continental Tires. The area on the left contains can be made flexible. These links can be different depending on the theme of the website.
Service navigation with social media links
The service navigation always contains a link to a general contact form, as well as all legally required information, conditions etc. These may vary from country to country. Tablet
2021 Oct | com&on Medienagentur I © ContiTech AG 19 Mobile Continental Industry Website Styleguide
› Navigation › Desktop Top Navigation 21 › Desktop Main Navigation 22 › Mobile 23 › Onpage 24
2021 Oct | com&on Medienagentur I © ContiTech AG 20 Navigation Desktop – top navigation
The navigation concept for all of the Continental Corporation’s websites consists of three sections: top navigation, main navigation and footer navigation (› see: Page elements/Footer). Onpage navigation elements supplement the user guidance.
Top Navigation The top navigation contains a search field that is flush right with the content area. In addition, important topics can be linked here to the left of the search field for special target groups (e.g. corporate topics). The company area and tools, the shopping cart function and login information are placed here as well. The language menu is positioned as the left-most option. When hovering over a topic with the cursor, a yellow line appears under it. A fly out menu for the integration of two further levels is possible.
Fly Out Menu
2021 Oct | com&on Medienagentur I © ContiTech AG 21 Navigation Desktop – main navigation
The main navigation is positioned below the stage. The active state is shown with yellow. Each category can expand to up to four levels. When scrolling down the page, the main navigation bar remain at the top of the website as a sticky navigation. Main Navigation Desktop
Sticky Navigation Desktop
2021 Oct | com&on Medienagentur I © ContiTech AG 22 Navigation Mobile
There is only one type of navigation on the mobile version without any distinction between top and main navigation. This navigation can be accessed by tapping on the burger menu icon on the right of the navigation bar. Lower levels always have a back button to return to the previous level.
First level and sublevel with back button
2021 Oct | com&on Medienagentur I © ContiTech AG 23 Navigation Onpage
Breadcrumb Navigation Each page has a breadcrumb navigation above the content. The breadcrumb navigation is a link path that offers the user orientation. It shows the user where they are within the hierarchy of the website. The active page is always black. Tab Navigation Desktop There is a tab navigation on each product group page. The tab navigation is visible when opening the page. Ideally, three tabs explain the characteristics and advantages of the product. A maximum of four tabs plus contact button are possible.
For further navigation elements see also
› Design Elements/Icons & Buttons.
2021 Oct | com&on Medienagentur I © ContiTech AG 24 Tab Navigation Mobile Navigation Onpage
Entry pages structure the diverse information on the website. In addition to the home page, each solution has an overview page. These pages describe topics through images and short text elements and thus refer to further content.
The content areas are indicated by subheadings with dotted lines. The topics are shown in a ratio of 2/3 to 1/3, with the ratio changing per element. Each element has thereby a padding of 15 px. Onpage Navigation Homepage The entire area is linked. In the desktop version, the text block becomes conti yellow by mouse over. In addition arrows refer to the link function.
In the mobile view, the text blocks arrange themselves below the images.
2021 Oct | com&on Medienagentur I © ContiTech AG 25 Mobile Onpage Navigation Overviewpages Solutions Login Area Page Elements
Password-protected member areas can be used to offer a certain group access to exclusive information. All guidelines of the Continental Industry Styleguide as well as the following guidelines apply: Overview stage and small stage format are used as stage images. › See Design Elements/ Stage Images The Small Footer is used. › See Page Elements/ Footer The personalization area contains the username as well as links to settings and logout. On desktop, the area is positioned flush with the top edge of the stage image and flush right with the content area. On mobile and tablet, these links can be found in the burger menu. Max Mustermann › For icons, see Design Elements/ Buttons & Icons
2021 Oct | com&on Medienagentur I © ContiTech AG 26 Special Case: Campaign Sites Styleguide
› Purpose 28 › Page Elements › Header/Stage 29 › Full Row Modules 30 › Half Row Modules 31 › Hidden Content 32 › Teaser Area Module 33 › Optional Features 34
2021 Oct | com&on Medienagentur I © ContiTech AG 27 Campaign Sites Purpose
If certain products or solutions are to be promoted more intensively, campaign pages can be used. However, this template should only be used for appropriate reasons. Content
Large-format multimedia elements and text boxes can be combined on one page to prominently present a topic and refer to further information Optional feature on the Continental Industry site.
The campaign pages can be accessed via their own URL.Large-format Image & text multimedia elements and textboxes can be combined on a page to prominently present a topic and link to further information elsewhere on the Continental Industry page. Campaign sites can be accessed via Text & video their own URL.
Content
Image & text 2021 Oct | com&on Medienagentur I © ContiTech AG 28 Campaign Page Elements Header/Stage
The page header consists of an image in Big Stage format and a headline. Overline and subline are optional. Multiple topics can be integrated as a slider. Links to further 1 information can be integrated.
2 (1) Image(s) or Video 3 (2) Overline (optional) 4
(3) Headline
(4) Subline (optional) Download .psd Template
Stage Image Dimensions: › Desktop: 1680x750px, 96 dpi › Tablet: Output format 991 x 500px [create: 1982 x 1000px], 96 dpi › Mobile: Output format 575 x 950px [create: 1150 x 1900px], 96 dpi
2021 Oct | com&on Medienagentur I © ContiTech AG 29 Campaign Page Elements Full Row Modules
Module Content
This element stretches across the whole width of the content area. Text can be 1 placed on various background colors. Optional links to further information can 2 5 3 be added via buttons. (1) Headline (5) Background color
(2) Subheadline › White › Gray 05 (3) Content 5 › Black (4) Link button for internal link / 4 › Yellow external link / downloads with Module Content button; target options _self or _blank Module Big Image/Video This element stretches across the whole width of the content area and is used Module Big Image/Video to place images or videos. Dimensions: › Create 1680x476px, 96dpi; output differs depending on device Videos: › Embedded via Azure Cloud preferably, via Admiral Cloud alternatively
2021 Oct | com&on Medienagentur I © ContiTech AG 30 Campaigns Page Elements Module Image/Video & Text 1 Half Row Modules 2 3 Module Image/Video & Text
The Module Image/Video & Text stretches across the whole width of 4 the content area. It is split in half with the image/video either on the left or right side.
Module Mediaslider & Text
This module stretches across the whole width of the content area. Multiple 6 pieces of media can be uploaded via this module to be displayed in a slider. The module is split in half with the mediaslider either on the left or right side. 5
Image dimensions: 749x424px, 96dpi Download .psd Master Template
Videos: Embedded via Azure Cloud preferably, via Admiral Cloud alternatively Module Mediaslider & Text
(1) Headline (5) Link button (2) Subheadline (6) Background color (3) Content › White › Black (4) Hidden content option › Gray 05 › Yellow
2021 Oct | com&on Medienagentur I © ContiTech AG 31 Hidden Content Buttons Campaign Page Elements Hidden Content
The hidden content is displayed in collapsable boxes that can be opened via a button in the following modules: content, image/video & text and mediaslider & text. The hidden content opens right below its parent module and offers the following design options:
Examples of use (1) Headline, possibility of subheadline 1 6 (2) Content 2 (3) Image/graphics (4) List (5) Grid (6) Background color 3 › White › Black › Gray 05 › Yellow
5 4 2021 Oct | com&on Medienagentur I © ContiTech AG 32 Campaign Page Elements Teaser Area Module 1
The teaser area displays and links to further content. Three teaser tiles are visible at a time and further ones can be added through the slider option.
(1) Headline (2) Teaser image (dimensions:749x424px, 96dpi)
(3) Teaser title Download .psd Master Template (4) Teaser text 2
3
4
2021 Oct | com&on Medienagentur I © ContiTech AG 33 1 Campaign Page Elements Optional Features
2 Special requirements can be realized in compliance with the design guidelines, e.g.
(1) Fairs & events (integration via database possible) (2) Icons with skip links 3 3 (3) Animated GIFs (4) Special graphics with link option (5) Database based searches
4 5
2021 Oct | com&on Medienagentur I © ContiTech AG 34 Contact
Mareike Elena Wiemann ContiTech Communications Head of Digital Communications
ContiTech AG Vahrenwalder Straße 9, 30165 Hannover, Germany
Mobile: +49 (0)151 73 044 295 E-Mail: [email protected]
2021 Oct | com&on Medienagentur I © ContiTech AG 35

Website Styleguide Status: 2021 October

,

,

,

,

,

, (body text)›

,
(body text)
›