Effects: Transfer Over Tokens & Update Guidelines

[qluuu]

Platform
Oppia Web | Oppia Android

Describe the request
Filling in tokens for Effects (i.e., shadows and elevations) in the design system template. Drawing from the existing Oppia design system files from on-boarding files and Project 2, combine, refine and update Effects guidelines. This will be used as a starting point to further analyze and solve deeper design system issues.

Context for the request
This is a new initiative to update, improve, and maintain Oppia's design system to meet UX designer needs.

What is the broader user journey that this feature fits into?
This issue lies in the designer's journey of struggling or wasting time finding the correct asset efficiently.

What is the current user experience like (where is the user located before they encounter this feature)? Feel free to add screenshots.
Designer can reference and grab assets from:

• Project 2
• On-boarding Figma Design Guide (Web)
• On-boarding Figma Design Guide (Android)
• Look at the current products (web/mobile)
• Or, grab from other projects that may have a solution.

Link to Oppia Design Systems Template
Oppia Design Systems Figma File

Information about deadlines/priorities
This can be tackled at the usual priority.

DESIGN APPROVAL CHECKLIST -- DO NOT EDIT.

• UX Design approved (Android mocks should include dark mode)
• UX Writing approved
• Design Systems Team approved
• Product approved

For a design project to be completed, it needs approval from UXD, UXW, DS and PM. Please tag the following reviewers when your project is ready (at least one reviewer for each of the 4 bullet points below):

• UXD: N/A (for design style guide projects)
• UXW: @stepmalt
• Design systems: @qluuu / @celestinetales
• PM: @seanlip

[liwei899]

Completed the section with dark mode https://www.figma.com/file/MOnLoR43wqVrxjBrN8oKj1/Oppia-Design-System-Template?type=design&node-id=32834%3A414&mode=design&t=OvnsRptlrzcTOx6P-1