Design
Hierarchy
How import and element appears in relation to one another
Highlighting import information while de-emphasizing secondary and tertiary information
Text hierarchy
Don't rely solely on font size
Use heavier font weights or softer colors to emphasize or de-emphasize
Colors
Two to three shades of gray
Font weights
A normal weight
400 or 500
A heavier weight
600 or 700
Don't use anything below 400
Contrast
Reducing contrast between background and foreground to de-emphasize
Find a lighter color with the same H but different S and L
Reducing opacity would lead to dull and see-through text
De-emphasizing
De-emphasizing competing content to make important content stand out
Labels
Using the label: value format hinders presenting a hierarchy
Skips labels
Known formats
Can be understood from the context
Combining labels and values
12 left in stock
Email addresses
A department under a name
De-emphasized labels
Labels as supporting content
Emphasized data
Emphasized labels
When the user is going to look for the label
Information dense pages