TWE Design System Components: Colors

[RobinElayn]

Overview

We need to create components for the TWE design system for the future website development & handoff.

Action Items (original)

• Create organized component
• Get sign off from product lead
• When this issue is complete, please go TWE Design System: Create Generic Design Components and Mockups #397 and check off the dependency. If all other dependencies are checked off, move the issue from the icebox to the new issue approval column.

Action Items (update)

• Research best practices for using styles and tokens for color systems in Figma
• Clean up Figma (styles vs variables, naming conventions)
• Add/update any needed color variations for M3
• Check accessibility standards
• Update organized color system/guide on WIP
• Get sign off from product lead
• Update microsite for the dev team (if necessary)
• When this issue is complete, please go TWE Design System: Create Generic Design Components and Mockups #397 and check off the dependency. If all other dependencies are checked off, move the issue from the icebox to the new issue approval column.

Resources/Instructions

• Google Doc
• HfLA Figma File
• Internships Figma File

Design link provided to dev for original

none, just a general link

Design Link provided to dev for updated

[RobinElayn]

Updated styles within component. Finalized Component sheet.

[meetminji]

Updated colors

[meetminji]

Microsite draft 1

[meetminji]

@joshfishman would like to know your input on the microsite before moving forward or making changes. Thank you.

[ExperimentsInHonesty]

look up color names https://encycolorpedia.com/247984

[ExperimentsInHonesty]

@meetminji will update the disabled color, since it does not need to meet accessibility standards

• WCAG about inactive states https://www.w3.org/TR/WCAG21/#contrast-minimum

Once a new image with the updated colors has been added here, this issue can be closed. Dev has already signed off

[meetminji]

Updated Colors

• Eliminated Button Colors and Disabled color

Updated Microsite Color palettes
Only Name and Hex Code
Spacing between Name and Hex code based on the longest name possible for the color

Disabled:

• background is light gray
• text is dark gray
• pass through is 38% opacity

colors

colors microsite

input field

[mklmrgn]

Re-opening issue.

• This color system was created before switching to material design and needs more/different color tokens.
• Needs an accessibility check (especially for disabled states).
• Figma needs to be cleaned up (styles vs variables, naming conventions)

[mklmrgn]

Progress: Conducted Research on M3's color system, Still need to continue research on implementation such as State Layers.
Blockers: Dense amount of information on M3 color system and challenges implementing in Figma.
Availability: 4 hours
ETA: 2 weeks

--RESEARCH--

Use of Color Roles

Surface (backgrounds) vs. Surface Containers

States Layers - Independent of the color system, but related

Opacities for different states

Implementation in Figma

[mklmrgn]

Progress:

• Implemented Color Styles and Color Variants using new M3 Palettes and Color Roles

• Added Styles for State Layers with different opacities for each Color Role
  

Blockers: Need to assess for best/fastest way to change all components over to new color system before deleting old styles.
Availability: 6 hours
ETA: 1 week

[mklmrgn]

Progress: Color Styles / State Layers created and in Figma
Blockers: Accessibility issues with state layers and color contrast accessibility using current color system

Availability: 4 hours
ETA: 1 week

[mklmrgn]

Progress:
Updated Primary color to address issues with accessibility when used in the M3 system.
Used M3's Theme Builder to create a color theme.
Created Styles for all colors in Figma

Blockers:
Need to slightly modify Hack for LA accent colors (Green, Purple, Orange, etc) to harmonize better.
Get approval from the multidisciplinary team

Availability: 4 hours
ETA: 1 week

[mklmrgn]

Progress:
Adjusted accent colors to harmonize better with current Theme

Created color editable versions of logo, illustration, and favicon

Created a frame to test primary UI elements with accent illustrations, logo, etc.

Blockers:
Get approval from the multidisciplinary team

Availability: 4 hours

ETA: 1 week