Color
- Use color and weight to create hierarchy instead of size.
- Never use black. Combine a palette based on a color, from lightest to darkest. I like generate palette colors using palx.
- Don’t use grey text on colored backgrounds. Satinate or opacity are better options. Monochrome is a good tool for do that.
- Use accent colors (for example, at the border) to add color to a bland design.
Motion
- Transitions should be clear, simple, and coherent. Quick. They should avoid doing too much at once.
- On mobile, a transition occur over 300ms. On desktop the value should be around 200ms.
- Transitions that exceed 400ms may feel too slow.
Typography
- Choose your typography based on legibility and context.
- Two font families are enough for distinguish between heading and body. A common pattern is use Sans Serif and Sans respectively. You can use fontpair for do that.
- Two font weights is usually enough: A normal font weight (400 or 500) and bold (600 or 700) for text you want to emphasize.
- Font weights under 400 are hard to read.
Shadows
- Instead of using large blur and spread values to make box shadows more noticeable, use subtle and accomplish the same goal without being as distracting.
- If you need to use a bright background color, and white text on it, you can put the text a nice subtle shadow to make it more readable.
- Use balance shadows, this means, it looks more natural. Material Design has grateful guidelines.
Buttons
- Not every button needs a background color.
-
Primary actions should be obvious. Solid, high contrast background colors work great here.
-
Secondary actions should be clear but not prominent. Outline styles or lower contrast background colors are great options.
-
Tertiary actions should be discoverable but unobtrusive. Styling these actions like links is usually the best approach.
