Create a late-2024 UX Design Style guide for use on the public part of site

[fancyham]

Overview

With the new design language of the public part of the site that rolled out in early-2024, we need to make it easier for designers and developers to pull accurate colors, fonts, and layout from our Figma files.

To do this, @JohnHaoHuang is creating a new Figma style guide (link to guide in Figma) that designers can pull elements from for their own designs.

(Note: The private part of our site will continue to use the old style guide (link to guide in Figma)) for now, but the hope is that someday the two parts of the site will use the same style guide.

John is also creating this using Figma's Components and Variants ([link] (https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants)) which should make it easier to update colors, fonts, etc.

Who will use this?

• UX Designers -- to create new pages and modify existing ones
• Developers -- to pull colors, fonts, and spacing for HTML code

Training required:

• This is a powerful and slightly advanced technique, so we need to confirm that designers know how to use it, and perhaps how to update it as well.

Action Items

• Create new style guide
• Beta test with designers and developers as they build pages and revise as needed, focusing on for usability.
  • Ensure that when people use these style guide elements, that new updates to the style guide (say, changing color) don't affect old designs.
• If it's working great and several features have been designed using it without problems, then this issue is done and can be closed.