Design and philosophy behind the new front-end theme for Drupal

03 Nov 2021

Drupal is getting more modern in everything, and the default front-end theme is no exception. You might have heard that Drupal has a new front-end theme — Olivero. It was added to Drupal in version 9.1 as an experimental theme and is going to become the out-of-the-box option soon, which means all newly created Drupal installations will have it from the start instead of Bartik. Let’s see why this is great news, what design features Olivero has, and what philosophy is behind it.

Why Drupal needed a new front-end theme

Drupal’s default front-end theme Bartik definitely needed a replacement. Bartik was first introduced in Drupal 7 (the year 2011). Yes, Bartik meets Drupal 8 and 9’s new mobile-first requirements and is responsive to mobile devices. However, its design is a bit outdated, the theme does not ship with some of the latest functionalities, and does not fully show how visually appealing Drupal websites can be from day one.

“Bartik was a great theme for Drupal, but as time went by, the web changed, and Bartik’s design stayed the same. Bartik slowly began to feel dated. It used outdated graphical elements such as gradients and drop shadows that made it feel heavy. This can often lead to a negative perception of Drupal when people new to it do their first install. We want to ensure that when people install Drupal, they are immediately impressed not only by the power and versatility of it but also by the look and feel.”

— the Olivero creators’ team at DrupalCon Amsterdam 2019’s Driesnote

How the idea about the Olivero theme was born

It all began with a casual conversation of cool Drupal people in a hotel lobby at DrupalCon Seattle 2019, as described in the blog post by one of the main heroes of the story — Putra Bonaccorsi. She, Mike Herchel, Lauri Eskola, and Angie Byron were discussing what distinguished a good CMS theme.

The conversation led them to the discovery that there was no initiative for a Drupal 9 default theme, and they decided to improve the situation. This further grew into a Drupal 9 theme initiative. Before announcing the new idea to the world, Putra and Mike identified the three key goals of the initiative:

  • updating to a modern design that would be relevant for the next 5 to 10 years
  • making sure the new theme supports the most commonly used Drupal’s new functionality (Layout Builder, Media, and more)
  • making the theme WCAG AA compliant so it meets the strict accessibility standards

Key design principles for Olivero

Through research and collaboration with stakeholders and designers, the key design principles were defined for the new front-end theme:

  • Accessible

A top priority for Olivero is WCAG AA conformance. Its layout, colors, and functionality should make it accessible to all users.

  • Simple

It’s important to avoid unnecessary visual elements and complexity.

  • Modern

The new theme relies on the benefits of modern browsers and interaction patterns.

  • Focused

Olivero uses high contrast, saturated colors, and negative space to help users pay attention to what’s most important on a page.

  • Flexible

To take into account diverse needs, the theme offers options and overrides.

The new theme honors Rachel Olivero

The theme was named after Rachel Olivero, a well-known accessibility expert, contributor, and thought leader who passed away in 2019. The Drupal community decided to do so in honor of Rachel’s impact on modern accessibility best practices.

“Rachel touched many people in both the Drupal and accessibility communities. She worked at the National Federation of the Blind, and she was committed to making technology accessible to all people. We chose the name Olivero not because we made accessibility a top priority but also because we aspire to develop this new theme in our community in a manner that is consistent with the qualities that Rachel embodied, including patience, generosity, and inclusivity.”

— the Olivero creators’ team at DrupalCon Amsterdam 2019’s Driesnote

Appreciation by the National Federation of the Blind

It’s great to know that accessibility as a top priority for Olivero has received special appreciation based on the ready theme’s testing. The National Federation of the Blind (US) was doing accessibility testing for it and confirmed that Olivero was very well done and low-vision accessible. Their reaction has been quoted by Drupal’s creator at the Drupal Europe 2021 keynote.

“We are not finding any issues with contrast, focus, or scaling, the forms are very well done and the content is easy to find and navigate.”

— National Federation of the Blind (US)

The key design features of Olivero

What helps the theme achieve its goals, fulfill the design principles, and receive plenty of compliments? Let’s review some of Olivero’s features.

Color palette

The base color in Olivero’s palette is bright blue. Additionally, neutral grays are often used for creating a better balance. This choice of colors gives Olivero a bright and modern look and is also in line with Drupal branding. Darker and lighter colors enhance accessibility and support the design elements.

Typography

Olivero uses an 18px font for body copy. Other UI elements such as headers, quotations, etc. have been created based on it to ensure consistency and good proportions. The font size is adjusted for devices with a smaller screen.