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.

Header and navigation

There are multiple options for header and navigation in the new front-end theme based on the specifics of a website. Olivero offers a header that collapses into a hamburger-button menu upon scrolling down allowing users to access the menu on longer pages. You can also enable hamburger-button-based navigation for wide pages with many long first-level menu items.

Site branding variations

The background color and width can be changed in the theme’s settings, which allows Olivero to be better suited to specific logo and text sizes.

Buttons

Buttons are presented in Olivero’s bright blue color, have good contrasts, and are easy to recognize as clickable elements. The theme has a primary button style that is filled with color and a secondary button style that is outlined.

Forms

Forms in Olivero are characterized by elegant simplicity. They have a uniform look and a color bar on the left, which makes them even more recognizable as forms. Labels are put above the fields, which makes the process of filling the forms out more accessible.

Messages

Website messages in the Olivero theme are designed with the use of a bright color that makes them stand out visually. At the same time, the bright color does not impact the message’s readability. Icons are additionally used to support the message types.

Breadcrumbs

Breadcrumbs, secondary navigation elements that help users find their way through the website, are located near the top of the page in the Olivero theme, which is the most expected and traditional breadcrumb placement. Their link color is the same as with other links on the website. On mobile devices, breadcrumbs are spilling off the edge of the screen, and users can swipe from side to side to see the full breadcrumb trail.

RTL support

Starting with version 8, the Drupal core became multilingual out-of-the-box. One of the features it received for this purpose is the support for the right-to-left text direction. Olivero fulfills this requirement as well — it fully supports RTL languages.

Sidebar

To help editors highlight additional content in the most meaningful way, Olivero has a single sidebar region instead of two. The sidebar region floats next to the primary content region.

To sum up

The above has been a brief overview of the new front-end theme for Drupal. Olivero will become the default theme soon — with the release of Drupal 10 in 2022 at the latest. This means that all newly created Drupal websites will be “born” more accessible, user-friendly, modern-looking, and visually appealing. They will be “visiting cards” of the Drupal CMS showcasing its strengths. Our Drupal team celebrates all new initiatives and is looking forward to seeing the Olivero theme in the core.