Page Comparison

10

Decide: Spacing & Grid

Eugene Kang

Using 4 and 8px spacing. It’s important to use even numbers so we don’t end up with half pixels in some situations. 4px is useful for more granularity on mobile.

Baseline grid is 4px baseline.

Lael: As a dev, I would like very clear usage guidelines. I’d love user guidelines. What should I start with? 12 or 16? How do I decide what spacing to use where?

Ben: As a dev, I want less of that information. I like that UX to be responsible. These are things the UX person should be making decisions on.

Lael: Agrees, but also I want CSS variables for all of these spacings (and line heights!)

Alasdair/Adam: These will map to bootstrap spacing utilities.

Jeff: Variable font sizes (“grow the text a little bit”) Does anything containing the text flex in side with the containing text? Can we have the ability to control these spacings in relation to the user defined font size. Can you grow the containers when you nneed to, or is it just a media query thing.
A: It makes sense to use rems and ems when things are going to scale
J: Usability rule, you can make it ugly as long as it’s useable
A: The preference that I have is to scale all of the elements, rather than having them start to look crowded in their containers. The key thing to learn is do we have any idea of the different context of how users are increasing font size
J: Let’s drill into this as a separate meeting.

10

Feedback: Card-like components

Eugene Kang

Alerts, Banners, Cards

Ben: Alerts are we using elevation instead of border? Shadow is better than not having it.

Gabe: How many actions do we think alerts will have? What if there are two primary actions

Ben: fwiw 2 primary actions it might be better to have some custom solution. Do we want different icons for warning and error or just rely on color? E: We will nont rely on color alone, will have multiple icons. Bullhorn for warning and exclamation for danger.

15

Decide: Elevation

Gabriel Weinberg

https://www.figma.com/file/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=231%3A1346
Cards: Level 1 elevation, shows interactable components
Dropdowns: Level 2 elevation, helps pull the eye to the active component
Menus (context overlay, drawers, etc): Level 3, looks like it’s closer to you in space, use directional shadows
Modal & blocking overlay: Page takeover requires user to take action, Level 4. Shadow below, gives extra focus to the overlay.
Toast (Application generated overlays): Level 5 Messaging about the app you don’t want to obscure.
Ben: Would like to see more of the stacking when other people put these together but what’s here looks reasonable right now.
G: When items are layered, the ones contained with in an elevated component will be elevated relative to it’s parent’s elevation

Lael: when we’re walking elevation, both z-index and shading. wondering what we’re thinking for z-indexes. In order to leave the most flexibility is to use an order of magnitude between each one.
A: Bootstrap has kind of taken care of it thus far; but yes, we will want to leave a lot of room in between z-indices.

Jeff: Today we use hover shadows was for course cards, I want to sanity check that that’s still out intention. G: Depends on if the whole container is clickable, if the whole card is clickable then it would have the hover/focus shadow but if it had more than one control inside it it wouldn’t. Jeff: You could do both, CSS has the ability to do it.

There were no blocking concerns with this approach.

10

Feedback: Color system tweaks

Adam Butterworth (Deactivated)

A: Should limestones be “secondary” in bootstrap, or “grey” in bootstrap?
L: Are we using limestone as an actual secondary color? If no, I think we should call it grey
A: Because Bootstrap uses grey for secondary colors, that’s why we’re thinking of going this way.
J: We need shades that are accessible, we should check the 300 and 500 colors. Also, garnet on limestone doesn’t work for accessibility, although the threshold for 24px and bold is 3:1.
B: This looks great from a colorblind perspective, except the danger/warning difference. For developers, we want to look at the variables and not worry about exactly what they’re pointing to.