Design System
The design principle of Tipico is dynamism and movement. The corporate design translates this idea in the form of “diagonal”, which is the primary design element.
The angle of the diagonal is derived from the Tipico logo and is always 12.5 degrees. The diagonal runs always from bottom left to top right.
Basic Structure
Each layout or format always consists of a diagonal and a counter-diagonal. Sharing the format in three parts.
Diagonal & Diagonal Counter
The areas, which are formed by the division, are recognizable as such by coloring the counter surfaces and counter-diagonals in identical colors. (Example A: white, Example B: red). The choice of display (inverted or normal) depends on the content and the communication itself. As a rule, a large red area generates a higher visual dominance and is well suited for communication to achieve greater attention.
Proportions
The sizes of the areas and their relationship is not defined as a fixed rule but is based on the respective application. Preferred is an asymmetric solution in which the left diagonal is bigger than the counter diagonal (Option A and Option B). Alternatively, the diagonal can be created the same size (variant C) for very withdrawn applications.
Screen size and contrast
With layouts that are dominated by the color white, you can apply the counter-diagonal in anthracite. This provides the layout more overall contrast if the layout has little or no dark areas such as headlines or key visuals.
System Design and Logo
The diagonal is a great device to attach the Tipico logo to. Depending on how the diagonal is applied, the logo can be attached left or right.
Logo connection with Appendix brands
When attached to the right side using the Markenappendix, the edge of the Appendix decides the orientation. It is precisely aligned on the line of the diagonal.
Logo connectivity without marks Appendix
When attached to the right side without the appendix applies, the minimum distance of the Tipico logo applies. The positioning aid (parallelogram around the logo) facilitates the alignment of the diagonal.
Logo connection with inverted application of the Diagonal
When left-aligned (inverted display) the minimum distance of Tipico logos applies regardless of whether the application is carried out with or without appendix.
