In visual-style_images.html line 95, after <strong>Good resolution quality.</strong> a space is missing. It's probably faster when you fix this, instead of me cloning and creating a pull request.

On the Color section of the style guide, it states:

Utility colors are another type of accent color. Common meanings are associated with them. We use shades of red, green, and yellow as utility colors.

However, we never say what the "common meanings" are that we associate with each color. This information would be helpful to have when determining the appropriate usage. Here's what I am thinking:

• Variants of red indicate errors in components, such as invalid text in a text field.
• Variants of green indicate successes in components.
• Variants of yellow indicate a non-disruptive warnings or alerts.

Is that accurate? Can we provide examples for each?

I will add a follow section in your footer in which I will add some buttons of Instagram, Twitter, Facebook, and so on so can you assign me this, please!
Like this:

This document https://design.wikimedia.org/style-guide/resources/WikimediaUI-components_overview.svg has POPUP variant text appears floating onto the next page and makes text run off the screen.

Hello all! (Hello again Volker 😄 )
I was checking the Style-guide's CSS structure. I see that there is just one partial folder for the font files and I was wondering if you had discussed the possibility of having a modular CSS file structure and decided against it.
If not I can open a pull request with my proposal and the reasoning behind it.

Thank you and all the best!

The resource fontfaceobserver.standalone.js file added at the web page https://design.wikimedia.org/style-guide/components/file-inputs.html responded with a status of 404

Squoosh will be deprecated by it's author and support only up to Node v16 being the sole blocker of an update from Node v12 to v18.

The project uses Squoosh to generate PNGs from SVGs. sharp is a possible replacement.

icons should better stay organized in its own repo and could later be made available as a icon-font on npm

Hello, I think new site' font (base one) is really tall, and it is hard to read.

Description
Alerts are an important part of a platform and user experience that helps maintain consistency.

Currently, the Style Guide doesn't contain any components for Alerts. Alerts is a basic component that should be added.

resources contains too many binaries files and it's better if we can minimize the size this folder to improve DX

This page https://design.wikimedia.org/style-guide/components/buttons.html looks like this on Firefox:

On Chrome it looks as expected.

Right now I'm working on some loading indicators and want to pair it with microcopy. I'm looking at the typography sections in the style guide and don't see any directions. Do any exist?

Story: As a UX designer, I want to clearly understand how to practically implement “localizable” design.

Possible solutions: Either connecting this to every single section or add to one category (This is for Everyone).

Opportunity: right now this content is sprinkled throughout the guide on a very high level, however, if it was consolidated it would provide creators with a chance to deep dive into complex questions around localization.

Wikimedia style guide gives us a pretty good understanding of basic designing but I think there is room for more components to be added.

Given below is a list of components that we can consider adding:

1. Carousel
2. Navigation Bar
3. Progress Bar
4. Pagination

These are just a few basic components that come to mind and there are many more. @Volker-E please let me know your thoughts on this so that I can send you a draft of the content which I am thinking of adding.

Story: As a UX designer, I want to make sure that features of Wikimedia Projects adhere to basic usability principles, like visibility, feedback, UI standards etc .

Possible solution: Provide a section on Usability for Wikimedia Projects. A classic example are the Macintosh UI guidelines, which have a section on general UI principles.

Current problems:

• There are many usability principles, but they don't give a sense of ownership in Wikimedia projects.

As of current, we're basing our build scripts on Grunt.
To reduce maintenance overhead, dependencies and be future-proof, we should move over to npm scripts.

Story: As a designer I may need to provide reorderable lists or sliders as interface elements
Problem: Nor components nor styleguide give help on how to provide indication for draggability, and possible drop zones.

Description

The Navbar of this web site is not sticky. As a result viewers have to scroll back again to the top to go to another page. For short articles this is fine. But for long articles it takes much time to scroll (specially for mobiles).

Screenshot

So a "scroll to top" button can be added so that user can reach the nav bar more quickly and can go to the next page.

https://design.wikimedia.org/style-guide/visual-style_colors.html

In the mobile view of this page, the color blocks have a width of around 60% which leaves some white space on the right side of the page which does not look good

If the width is increased to 100% it looks better than the existing size and covers the white space.

Story: As a UX designer, I want to clearly understand how to practically implement “accessible” visual design.

Possible solutions: while this is called out specifically in the this is for everyone principle, it might be worth connecting some actionable bullets to this or dedicating a new in-depth chapter(s) towards accessibility and localization.

Opportunity: right now this content is sprinkled throughout the guide, however, if it was consolidated it would provide creators with a chance to deep dive into complex questions around localization, screen readers, meta data etc

As shown in image, space around links is missing

Story: I would like to contribute e.g. with a section on usability principles
Question: What is your preferred mode of contribution?

• Do you want to make me a member so I can push directly to a branch, which someone else can merge?
• Shall I fork to my own repo and make pull requests? (Which provides an additional level of separation, but imho makes updating and pushing harder for contributors, particularly those with less git experience aka designers)

In the mobile view of this website, the menu icon is not aligned properly with the logo.

The menu icon is slightly above the logo which does not look good. The top position should be increased slightly.

Can someone explain why this was changed? I personally find it hard to read, and this can make it harder for people who have visual impairments; content should be easily accessible by everyone. I suggest the font-weight should be changed back to normal font-weight (400).

This is how the top image in typography image is displayed in Ubuntu 18.10, Firefox.

The z in lato specimen is after a gap because:

<text xmlns="http://www.w3.org/2000/svg" fill="#222" font-family="Lato-Regular, Lato" font-size="16" letter-spacing=".6" mask="url(#c)">
       <tspan x="23" y="153">abcdefghjklmnopqrstuvwxy</tspan> 
       <tspan x="231.928" y="153">z</tspan>
</text>

There should be an obvious link to the Wikimedia Design Blog somewhere on the website.