WordPress.org

Making WordPress.org

Opened 6 months ago

Last modified 6 months ago

#5013 new enhancement

Overarching design style guide

Reported by: valentinbora Owned by:
Milestone: Priority: normal
Component: General Keywords: needs-design
Cc:

Description

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

Change History (7)

#1 @valentinbora
6 months ago

Last edited 6 months ago by valentinbora (previous) (diff)

This ticket was mentioned in Slack in #docs by valentinbora. View the logs.


6 months ago

#3 follow-up: @dufresnesteven
6 months ago

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.

#4 in reply to: ↑ 3 @valentinbora
6 months ago

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.

This ticket was mentioned in Slack in #design by valentinbora. View the logs.


6 months ago

This ticket was mentioned in Slack in #meta by valentinbora. View the logs.


6 months ago

#7 @karmatosed
6 months ago

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/

Note: See TracTickets for help on using tickets.