Elevation and Shadows Levels 0 - 5 Offline discussion to happen re: hover states on cards that have multiple actions JW: So there’s no objection to using shadow change as a focus indicator? GW: For a card, we handle that on the card level, but how we handle focus is up to individual components. If it’s entirely clickable, it may also need something else to indicate a focus state. JW: I encourage you not to “move” the element when changing the shadow on it (to lift it off the page), because it’s grating for some people. GW: I don’t love the way that looks anyway, so doesn’t seem to fit what we’re doing brand-wise.
The edges of controls must be 3:1 contrast. Discernability requirement of buttons is satisfied by the text in a button borders on button don’t need to be 3:1 contrast
Eugene Kang Check that we need Warning border. if so make sure it is 3:1 contrast
Fills: Semantic background should always be paired with icon or a 3:1 border
Should we use the word that conveys the icon?
If we don’t use text, warning icon needs to be higher contrast For color blind people (and others) yellow-500 is more readable as a warning than our yellow-700
Questions about Alerts (we need to revisit next week).
It should be obvious that it’s something that needs attention. Maybe a black exclamation point for the warning, to make it pop more.
Eugene Kang Follow up with warning icon color. It’s not 3:1 contrast, how can we pair with black or some other solution.
Radiuses: large, medium, and small
BW: Small is no radius, which feels weird AB: One of the thoughts around naming is that if you wanted a theme, you could theme it, where our buttons are square, they’d use this MM: Maybe we have documentation that explains this BW: There may be people who want no radius, though MM: Maybe we do 2 border radiuses and see if someone wants a third? AB: Maybe we have for our purposes buttons have no border radius, and we have radius-1 radius-2 radius-3 BW: If someone wants to add r3 that would EK: I can make that update
A new metric for benchmarking our product over time. May evolve and be tweaked over time. GW: In four different locations, we’re showing this survey. Getting an idea of what learners think about these affirmative statements over time. We may reveal areas we want to focus deeper on or pivots in design. We’ll see these over time as a stacked bar graph either globally or per page. BW: I like that it integrates with the experience. I think we’ll get better info that way. (This idea meets with general approval) GW: You can step through or tell it not to bother you again. Picks up our branding, etc. There are deeper things we can do, ask individual people to do deeper dives or 1:1s. There’s lots of possibilities. BW: I’d love for that drawer to be more obvious. If there’s a way to make it pop a bit more (maybe an icon), that would be great.
This group will continue to meet until we’ve finished the design of everything we’ve got in Paragon, and then we’ll move new components and further discussion to Paragon Working Group.