Technische Universität München (TUM)

Overview

TUM presents itself as a research-driven, entrepreneurial institution. Its interface is an institutional blue system: a deep navy header (#072140) carries the wordmark and primary navigation over full-bleed, documentary-style hero imagery of campus life. The emotional register is confident, orderly and credible rather than playful, the feeling of a serious engineering university that still wants to be seen as dynamic. The aesthetic movement is best described as Institutional Modernism: a flat, grid-disciplined layout, saturated brand blue, and a single warm yellow reserved for highlights.

Voice is direct, factual and declarative, with the headline 'TUM. The Entrepreneurial University' setting the tone. Sentences are short, German-first with English parity, and avoid superlatives. Example sentence: "Innovation durch Talente, Exzellenz und Verantwortung."

Colors

Primary (#3070B3) is the brand blue used for calls to action such as 'Zum Termin' and for active and focus states; its on-color is white. Primary-container (#165DB1) is the deeper hover state. Secondary (#FED702) is the brand yellow, reserved for small highlights and accents rather than large fills, and it always carries navy text (#072140). Tertiary (#F7B11E) is an orange accent for status and emphasis.

The surface stack runs from white (#FFFFFF) for content cards through pale blue tints (#F0F5FA, #E3EEFA, #D7E4F4) for section bands, and #072140 for the global header and dark sections. Body text is navy (#072140) on white, which gives strong contrast. Gradients are not used; color blocks are flat and sit on the grid.

Typography

The type system is a single sans-serif family, Roboto, used throughout. The hero display is 48px/52.8px bold with a 0.2px tracking, and section headlines step down to 32px/38.4px bold. Body copy is 16px/26px regular, so the vertical rhythm is set by a 26px line-height. Labels and buttons use 16px bold with normal tracking rather than uppercase. Weight carries hierarchy: 700 for anything that needs to be read first, 400 for running text. Apply text-shadow only over the hero video, never on body copy.

Layout

The layout uses a fixed-width container with a 1200px maximum and a 12-column grid with 24px gutters. Page rhythm alternates full-bleed imagery and stacked content bands. Section separation uses the lg spacing step (20px) for internal padding and xl (24px) between groups; the xs (8px) and sm (12px) steps govern tight label and icon spacing. Text is kept left-aligned and never justified.

Elevation & Depth

Depth is conveyed mostly through flat color blocking rather than shadow. Level 1 is the page surface (#FFFFFF). Level 2 is a pale tint band (#F0F5FA or #E3EEFA) with no shadow. Level 3, used for floating elements such as the media pause control and menus, uses 0 2px 5px rgba(0,0,0,0.2). Inset glow (inset 0 0 12px 4px #fff) appears only on focus-state controls.

Shapes

The shape language is Soft-Technical: nearly square corners with small radii. Buttons use 4px, cards and inputs 3px, and the 1px radius is used for thin accent edges. Circular forms (9999px) are reserved for icon toggles and status badges. The small radii reinforce the institutional, engineered character.

Components

Action Elements Primary buttons use #3070B3 with white 16px bold label, 48px height and 4px radius. On hover the fill shifts to #165DB1 with no transform. Transitions should be short, about 150ms ease. Secondary actions are transparent with blue text and gain a #D7E4F4 fill on hover.

Containers & Surfaces Content cards sit on #FFFFFF with 3px radius and 20px internal padding. Pale tint bands (#E3EEFA) separate sections. Hover on a card lifts it to #D7E4F4 with no shadow change.

Inputs & Interaction Input fields use a 1px #9ABCE4 border at rest, 3px radius, 12px padding, and 16px regular text. Focus replaces the border with the primary blue and adds the inset white glow. Navigation items and list rows reveal #D7E4F4 backgrounds on hover over roughly 150ms.

Do's and Don'ts

**Do**

• Use #3070B3 as the single action color on every CTA so users learn where to click.
• Keep section backgrounds to the pale blue tint scale and reserve #FED702 for small highlights.
• Set headlines in Roboto 700 at 48px for the hero and 32px for section titles.
• Preserve the 4px and 3px radii; do not round buttons into pills.

**Don't**

• Don't use the yellow #FED702 as a button fill or as text on white.
• Don't add gradients or glassmorphic blur; the brand is flat and institutional.
• Don't set body copy below 16px or above a 26px line-height.
• Don't place large drop shadows on cards; separation comes from color blocking.