More colour for the web content
With the newly introduced interaction design as well as a revised colour concept, a colour focus is set on the ETH websites. The goal is an attractive and consistent web presence for all screen sizes.
The biggest visible change that has been introduced with the current release is a new interaction design. The presentation of links and buttons has been revised in all areas of the web pages. In addition, a new colour concept will be introduced. This offers the possibility of using colour themes to colour various elements of the website (in addition to the content navigation, also individual components such as accordions, citations or highlight containers).
Quotes can now also be coloured and thus specially highlighted.Author of the quote
The ETH colours have been revised and reduced from nine to seven for the ETH Corporate Design as part of the introduction of the new interaction design on the ETH website. The new colours are fresher, more consistent and vibrant and meet accessibility requirements. The colour values are documented in the CD manual and are available in the AEM backend and in our CD templates. We recommend working with these colours with immediate effect in print media as well.
Configuration of the colour scheme
One can set the default colour theme for a whole website in the protected pageWebsite Settings tab of the homepage. This will, for example, set the website's colour for link lists, links in the navigation, subnavigation, and related content area, as well as label colours and hover changes for links in certain components.
One can override the default colour of a website for a specific page by selecting a different colour in the Appearance tab of the protected pagepage properties of a particular page.
One can also override the default colour of the website or a particular webpage at a component level for those components with an Appearance tab in the dialogue of the component, as well as for a carousel label by selecting a specific colour in the protected pageCarousel tab of the page properties of a carousel's target page.