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.