What’s new in the W3C Website Design System

The W3C Team published a significant update to the W3C Website Design System at the end of September 2026. The update was built by my team, as part of our involvement since the launch of the W3C website redesign in 2023, in response to feedback on the site. Our focus was on making the design system more flexible and easier to use. This post is about why the W3C website looks a bit different. It dives (sometimes deep) into the technical details of the update.

The design system itself was created in 2021 as part of the W3C website redesign project by Studio 24. A design system helps document and standardize the look and feel of a website, which then makes it easier to apply a consistent design across the different areas of a website.

Changes include replacing an old CSS reset, rebuilding typography around a new type scale, reviewing how space is managed, and removing several wrapper elements to simplify page markup. Here’s what changed, why, and what it means if you browse pages that use the design system.

collage of two side-by-side screenshots showing before on the left and after on the right — Before / after the design system changes on the W3C homepage and the page about web standards

Less empty space and text that adapts to the screen

Following the launch of the W3C design system, a lot of feedback was received about text sizes:

This update introduces a new 1.125 type scale. The steps between text sizes are more subtle, and headings are now smaller overall, so pages feel tighter while retaining a hierarchy that reads clearly, and a comparable elegant and airy use of space. We have also introduced fluid typography, so text sizes adjust smoothly with the viewport instead of jumping at fixed breakpoints.

Nine font sizes are now defined as CSS custom properties. These replace the Sass mixins that previously set combinations of font size and line height.

People familiar with the design system will remember that those mixins were tied to classes named after objects in our Solar System. The new text size classes are named for what they are. For backwards compatibility, the old classes still work and now map to the new ones.

Simpler page structure

We have removed the sticky footer pattern. Dropping it simplifies the overall page markup, in keeping with other changes made as part of this update.

The pre-footer component has also been refactored to make room for more content. The switcher layout which holds links such as an RSS feed, a contact email or event archives, is now a child of <div class="pre-footer">. Extra content can be added to the pre-footer, as long as it sits outside the switcher layout.

Small additions for lists and tables

Two new list modifier classes provide more control over list styles, with an option to hide bullets or numbers and another to remove the default indentation.

A new table modifier class adds vertical borders between columns, which helps with dense data tables.

Changes to listing templates

Listing templates used to require a wrapping container around their items or filtered results, with a class for each type of content.

That container and its classes are now gone entirely. The cards themselves handle most of the styling, including the space between them, through a class for each type of card.

Because cards no longer depend on a parent list, nesting one type inside another is much easier. For example, you can now place <div class="card card--user"> inside <div class="card card--member">. We have added styles for exactly that case: a nested user card has no content width restriction, and its avatar is 30% smaller.

Dense option for cards

There is a new modifier class for cards, to make them visually more dense. When added to a card that uses the sidebar layout, <div class="l-sidebar card">, two things happen: the width restriction on the wider content panel is removed, and all headings shrink to body copy size. This condenses each card, which makes long pages easier to scan.

A lighter, more modern baseline

Previously, the design system used Normalize.css, a widely used stylesheet that smooths out differences in how browsers display HTML elements by default. Because Normalize hasn't been updated since 2018, it has been replaced with a smaller, more modern set of baseline styles that serve the same purpose. We've also switched to CSS logical properties where practical, which adjust automatically for different text directions and reduce the need for language-specific rules.

A bigger change is how margin and padding are handled in the design system, in response to feedback from the community. Previously, a wildcard selector reset the initial margin and padding of all HTML elements and pseudo elements to zero, evening out any differences between browsers and allowing a fine degree of control by CSS authors. Spacing was then added on a granular basis, often targeting the sibling elements of a specifically named parent container.

This worked well for pages derived from the content management system, which offers a tightly defined set of content “components” and page templates. However, a number of GitHub issues were raised, which highlighted a lack of flexibility when working with the design system decoupled from the CMS environment:

That ruleset has been removed in the September 2026 update, which should make using the design system significantly easier.

For example, prose content previously had to sit within a dedicated text component, <div class="component component--text">, which managed the space and capped line length. With this update, that wrapper is gone. Line length is now limited directly on headings, paragraphs, list items and description lists. The result is a cleaner and more semantic markup that behaves the way you would expect HTML to behave.

Tell us what you think

The full list of changes is in the design system changelog. If you spot a problem, please open a GitHub issue.