step5 property

Color step5

For UI component backgrounds.

Step 5 is for pressed or selected states

For call-to-action components that you want to draw particular attention to, you can bump the color one step higher to step 6

For complex components where you need many subtle colors to communicate different meanings, you can get creative and do something like:

  • Step 3 for hovered backgrounds.

  • Step 4 for selected / pressed backgrounds.

  • Step 5 for "unread" backgrounds.

  • Step 6 for hovered "unread" backgrounds.

Steps 11 and 12—which are designed for text—are guaranteed to pass 4.5:1 contrast ratio on top of a step 3 background from the same scale.

Implementation

Color get step5 => this[5]!;