WordPress News Gets a New Design

WordPress.org’s News section is sporting a new design with a bold color scheme and updated typography. The design was created by Automattic-sponsored contributor, Beatriz Fialho, who unveiled earlier versions of the update in June 2021.

Fialho selected Inter, an open source font, for paragraphs and functional text, and EB Garamond for headings.

As design trends change on the web, colors come in and out of fashion. WordPress appears to be moving away from its signature dusty blue color, which Fialho has scrapped in favor of a blue that commands your attention. The color reminds me of YInMn, the first inorganic blue pigment invented in 200 years, which was recently approved for commercial use. The vibrant hue and new typefaces work together to create a modern, opinionated design that is more befitting world-class publishing software.

“The new design leans on the aesthetics of jazz, intrinsically connected to WordPress and which ultimately translates its uniqueness, historic significance and future potential,” Automattic-sponsored designer Kelly Hoffman said.

“Among other improvements, the new design leaves more space for content and includes new typefaces for better readability. It also uses a color palette intended to reflect the evolving Gutenberg language.”

The new design’s header and footer have been rolled out to the entire WordPress.org site and Hoffman said the idea is to “improve the site iteratively.” (In the meantime, the selected page indicator in the menu and the “Get WordPress” button do not match the old blue, in case that was perplexing when visiting the other pages.)

I would not be surprised if the block editor adopts the bolder blue aspect of the new color scheme, as Fialho said it is “intended to reflect the evolving Gutenberg language.” It would provide a more consistent visual experience for WordPress across different mediums.

The new design is a fork of Blockbase, Automattic’s open source “Universal” starter theme. Now that it’s live, future discussions on the project will happen in the #design channel on Slack. Bugs and suggestions for the design can be reported on GitHub.