Skip to content

[Website] Implement new design #218

@rianrietveld

Description

@rianrietveld

Jeffrey Lauwers created a new look-and-feel for the site. Including a Wa11yPuu
Rian will work on this to get this ready before WordCamp Netherlands (27 november '25).

Figma: https://www.figma.com/design/MTMLnjkAGJvYrZjTeu5ert/WP-Accessibility-Knowledge-Base?node-id=0-1&p=f
It will be variant b (with the dark sidebar)

Codepen with the CSS:
https://codepen.io/jeffreylauwers/pen/yyONjJd

Fonts:
https://fonts.google.com/specimen/Source+Sans+3
https://fonts.google.com/specimen/Source+Serif+4

Wapuu holding a grey ball with a white accessibility logo Screenshot of new layout Screenshot of the footer

In Jeffrey's words:

My rationale

  • May I introduce: Wa11yPuu, with a dark gray ball, matching the logo from the WordPress site.
  • I want to ensure optimal readability combined with a style that aligns with WordPress.
  • A “kitchen sink” with content elements.
  • Used "Inspect element" frequently to see how things were structured and what names the components had, so I could use the same terminology.

Typography

  • The font meets all accessibility/readability guidelines.
  • Take a look at the tail of Wa11yPuu, and then at the ends of the letters f, r, and c in the text under Heading 1… 😉
  • The font size adjusts fluidly for larger viewports — except for the smallest size, which is 1 rem / 16 px and stays the same.

Color

  • Colors: dark gray, blue (for links) from WordPress, and yellow from Wa11yPuu.
  • The background isn’t pure white, and the foreground color isn’t pure black.
  • Proposal dark sidebar: more in line with WordPress. Feels solid, professional, elegant. Creates a clearer separation between navigation and content.

And futhermore

  • The target size of navigation elements (including the button that reveals deeper navigation items) is 3 rem / 48 px.
  • That also applies to the search input.
  • The main focus is on readability, but in the footer, a bit of the brand identity can shine through again — so I added a waving Wa11yPuu there.

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions