Dev: Style Guide

Guiding Design Principles

Proximity of visualizations should be inline with the normal instructional workflows
Avoid non-standard or complex visualizations that add cognitive load and ambiguity
Only display visualizations that have the potential for students to act upon
Give students agency in making choices
Defaults should nudge students towards desirable behaviors
Content should be reactive, accessible, and universal

Steel Blue used to indicate a viewed state (e.g. resource has been viewed or an assignment has been returned)
Grey (#777) used to indicate an unviewed state (e.g. that a resource has not been viewed or Assignment has not been returned)
Length of histogram bar is proportionate to score/points received (relative length is easier for users to estimate than area)

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
Default font-weight: 100
Header title (e.g. My Learning Analytics)
- use <H1>
- font-size: 1.25rem
- font-weight: 500
Tool title (e.g. Files Viewed)
- use <H2>
- font-size: 1.25rem
- font-weight: 200
Table headings
- font-size: 1.0rem
- font-weight: 200
Errata:
- Currently the MyLearning Analytics title is an H5 and the Tool Name (e.g. Resources Accessed) is a H6

8px of padding should be maintained between text and containing border
16px of margin should be maintained between course and tool cards (8px around each card)
All cards should be centered and wrap
Card grid layout
- display: flex
- flex-wrap: wrap
- justify-content: center
- flex-grow: 0;
- max-width: 100%
- flex-basis: 100%
- flex-direction: row
- justify-content: flex-start

Header
- background-color: #40658F
- box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
- text color: #FFF
Course Card
- box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12);
- text color: #FFF
- border-radius: 4px;
- background-color: #FFF

Selected checkbox background-color: #40658F
Alerts (e.g. “Please select a resource type to display data”)
- opacity: 90;
- color: #004085;
- background-color: #cce5ff;
- border-color: #b8daff;
- box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
- text-align: center
- width:100%
Tooltip
- font-size: 0.875rem
- text-overflow: ellipsis
- Background-color: #FFF
- opacity: 90;
- max-width: 300px;
- text-align: center
- box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
Error Messages
- color: #856404;
- background-color: #fff3cd;
- border-color: #ffeeba;
- opacity: 90;
- text-align: center
- box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px
- width:100%
Eratta
- Tooltips on Files Viewed page and Assignment Planning are currently inconsistent