Recommend best-practice markup for all Civi UI elements in updated UI Reference Guide / new Civi StyleGuide

Civi's UI Reference Guide is helpful but very incomplete. As well as trying to reduce the wide range of markup patterns in use in CiviCRM, a comprehensive StyleGuide (either a new project or an update to the Reference Guide is needed to:

• Ensure new CiviCRM interfaces - in core or extensions - use consistent, and core-team/community agreed markup.
• Allows a process to improve this markup.
• Support the development of a new Theme that separates canonical 'style-guide supported' markup patterns, from legacy patterns (support for which will eventually be dropped).
• Helps the eventual process of Civi Core markup clean-up by demonstrating what all the patterns documented in ThemeTest should be replaced with.

In the longer run the Style Guide can support the introduction of new user experience patterns (e.g. SearchKit layouts), by documenting how to change their appearance.

The chosen patterns should prioritise:

• accessibility, as well as improving legibility, font scalability, descriptive icons and colour contrast ratios, to fully incorporate ARIA attributes to support screen-readers,
• mobile responsiveness, as well as improving smaller screen support, using input modes to support mobile keyboards or perhaps enterkeyhint.
• usability, such as using HTML autocomplete to support browser-led auto-complete.

Examples of style guides (thanks Dryden@EcoPing for the list):

• Gov.UK - separates styles (e.g. lists, links), components (e.g. accordion, breadcrumbs) and patterns (from asking for a Date, to confirm an email, create a username).
• Shopify - separates more (foundations, design principles, etc) but still separates components (e.g. buttons) and patterns (e.g. confirmation screen), icons, and 'tokens' - classes that implement a quick design element.
• Material Design - Google's Open Source design system. Separates styles and components (no patterns).
• Mailchimp - Mailchimp's guide is called a Pattern library, and lists inside this components - its definitions for these seems different to Gov.UK and Shopify.

Lasting notes can be added to the Wiki Page for this.

Previous similar issue #24 by @bgm, & related Wiki with @andie.