What’s New in Drupal 9? Olivero, A New Default Front-End Theme in Drupal

"What's new in Drupal 9?" or "What are the new features in Drupal 9?"

These 2 questions are on everyone's lips these days, both Drupal teams and organizations using Drupal.

How about a... shiny new main theme?

For, let's face it: we've been longing for a new default theme in Drupal for some time now... 

The current one, Bartik, hasn't got an update since... 2011 and it has started to show: Drupal 8's outgrown its core theme.

The new one, Olivero, which is still just design with a proof of concept, is expected to address all of Bartik's limitations:
 

• to be more simple
• to be more modern
• to be more flexible
• to support Drupal's increasingly powerful functionality
   

But let's dig in for some more info about this initiative:
 

• why do you need a new default theme in Drupal?
• the key design principles established for this theme
• the main components of the new design system
   

1. How Does Your Ideal Default Theme for Drupal Look Like? 

Does it resemble Bartik?

I'm pretty sure it doesn't, judging by the fact that:
 

• it hasn't seen a major change since January 2011
• it still uses gradients, drop shadows and other out-of-date graphical elements
• it no longer accommodates all the modern website functionality implemented in Drupal (e.g. Layout Builder) over the last years
   

Overall: Bartik has started to look a bit... out-of-fashion, while Drupal's back-end has been growing more and more robust.

Therefore, I bet that the words that you'd use to describe your "ideal" default theme in Drupal revolve around these key adjectives:
 

• clutter-free/minimalistic
• flexible: to provide plenty of options to choose from
• light
• modern and fresh
• accessible
• intuitive
• elegant
• clean
   

2. Olivero and The 3 Main Goals Behind this Drupal Core Initiative

No goal no... glory.

That's why the team behind this Drupal core initiative, Lullabot, set 3 major objectives for the Olivero theme:
 

1. it should support all the latest functionality implemented in Drupal: embedded media, second-level navigation, layout builder, etc.
2. it should be WCAG AA compliant from the ground up (accessibility should not be an afterthought)
3. it should look and feel more modern: all those design elements that made Bartik feel too heavy to be reduced to a minimum, while particular design system parts — color palette, typography, and animation — to be reconsidered
    

3. What's New in Drupal 9: Design Principles Set for Its Theme

Source: Dries Buytaert's blog

Curious which of the features on your wishlist for an ideal default theme have made it to the list of design principles for Olivero?

Well, here they are:
 

• simple: clutter-free; by "clutter" they mean all colors, effects and visual elements that are irrelevant and make the theme look and feel too heavy
• modern: support for modern browsers' features and interaction modes
• flexible: presents Drupal (front-end) developers with multiple options to choose from
• focused: includes all those design elements, like negative space and high contrast, that grab user attention
• accessible: it's designed with WCAG AA conformity in mind; from functionality to layout, to colors, all elements should be thought out to be accessible for everyone
   

4. The Olivero Design System: Key Components

"What's new in Drupal 9?" Look forward to a new, promising design system.

I'll highlight just 5 of its components, so you can get an idea of what the team behind this initiative mean by "modern" and "flexible" in relation to the Drupal 9 default theme:


Source: Drupal.org

4.1. Color Palette

They chose:
 

• bright blue as the base color
• neutral grays to counterbalance the design elements and layout
• darker colors to enhance accessibility
• lighter colors in the layout to highlight the design elements
   

4.2. Typography

They used the size 18px for the base font in the body copy, to be leveled for metadata, headers, quotations, etc. and adapted to smaller viewports, as well.

Consistency, throughout line-height and spacing, has been a key goal when setting the scale for typography.
 

4.3. Header & Navigation

The flexibility principle is best reflected in the header of the future default theme for Drupal 9:
 

• it's designed to incorporate, seamlessly, all logo types and text titles
• it comes in multiple versions to choose from, one for every site identity type
• it turns into a hamburger menu once the user scrolls down
   

4.4. Sidebar

The news factor is that in Drupal 9 you'll have one sidebar region instead of two competing for space on the screen.

A single spacebar, next to the primary content, where your content team can display related posts and all kinds of utility blocks.
 

4.5. Site Branding Variations

The Olivero theme will ship with background-color and width settings that you can configure in order to fit any text length and logo type.
 

5. Final Word

"What's new in Drupal 9?"

I think this question is not quite accurate, in relation to this upcoming front-end theme.

"What's bound to be new in Drupal 9?" is more appropriate.

For the Olivero theme is not yet... a theme in itself, but work-in-progress.

A proof of concept, a core initiative that's still calling out for contributors. One that's expected to become the new default theme in Drupal, that should:
 

• accommodate all the new powerful features implemented in Drupal these last years
• be accessible from the ground up
• be (more) intuitive 
   

Why would you care for this initiative if you were a Drupal developer?

Because it would improve your entire experience of working with Drupal.

Why would you care about this work-in-progress theme if you were considering Drupal for your next web project?

Because all visually-appealing websites have one thing in common: a modern, accessible and flexible theme.


Image by Mudassar Iqbal from Pixabay