Design MVP option 3 of Figma Design System Colors section

[daniellex0]

Overview

We need to design MVP option # 3 of the Design System Colors (side-by-side color variants) section in Figma, based on our discussions and preference votes in the Wed 8/25 meeting, so that we can narrow down our options for final Colors section options.

Action Items

• Start a new draft in the "Draft v2" column to the right of current versions in Figma
• New version:
  • Can be similar to overall category formatting of Anh's (since that one is similar to the typography section) or any other draft. But try to make it not too similar to Material Design's format. Should have blue strip on top that we are using in Typography section.
  • Include side-by-side color shade variants
  • Include usage examples for each color
  • Include other categories
    • Use the blue color palette from our buttons for the primary colors and variants
    • If you want you can follow the categories in Danielle's design in the purple rectangle, which has been updated to include Anastasia'a categories and others we discussed at our meeting. The actual 'secondary' colors themselves etc. are placeholders until we design the component library and more components, so feel free to adjust the colors as you like.
  • Include color names (in 'design token' format- 'blue-100' etc)
  • Test how it would look if usage line is longer for colors that have several usage examples (longer than one line). Adjust layout to accommodate if necessary.

Resources/Instructions

Figma Design System Colors section

[AdesinaBernard]

I am done a quick refinement of the color sections and this issue can be closed.