-
Notifications
You must be signed in to change notification settings - Fork 7
Description
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
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
Projects
Status