Overarching design style guide

[valentinbora]

Aside from the header and footer, various sites have (sometimes wildly) different styling.

This is a request for a UI design style guide that helps us be consistent across .org themes/sub-sites.

Specifically, I'm looking to define:

• Typography (heading sizes, body size, font family, colors)
• Form elements (padding, label formatting, margin, widths)
• Buttons, links (paddings, sizes, normal, hover, active, visited states, corner rounding etc.)
• General color scheme, branding
• Other items to be defined

[valentinbora]

Related: #1015, #5008, #4934, #4901, #4096, #4043, #3968, #3673

[dufresnesteven]

Agreed.

We need to also look to remove some of the global styles that interfere with all the themes. Styles in https://s.w.org/style/wp4.css are frequently overwritten in the themes and from what I know about that file, it contains a fair bit of legacy css that no longer applies (could be wrong though..) but is allowed to run havoc.

[valentinbora]

Replying to dufresnesteven:

Agreed.

We need to also look to remove some of the global styles that interfere with all the themes. Styles in https://s.w.org/style/wp4.css are frequently overwritten in the themes and from what I know about that file, it contains a fair bit of legacy css that no longer applies (could be wrong though..) but is allowed to run havoc.

Sounds good. I think your comment makes more sense as a follow up to #1015, whereas this ticket aims to simply create a style guide as a global reference, without the actual implementation in code, which should come afterwards as a separate effort.

[karmatosed]

Just adding a link here from the design handbook that is a great starting point for an iteration: ​https://make.wordpress.org/design/handbook/design-guide/