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 12 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 2021 Oct | com&on Medienagentur I © ContiTech AG 10 Light Red | Hex: #ff2d37 Design Elements Typography 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 › <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p> (body text) › <h1> 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.