Interactive states
beta

We apply hover, active and disabled states programatically, so that no matter what the starting color is, states can be found uning an easy formula. This takes the guesswork out of designing these states.

Hover and active states

Hover states are 20% brighter than the normal state. Active states are 30% darker. Every element with at hover state should also have an active state.

Disabled states

Disabled states are 70% brighter than the normal state color (or 30% opacity). Disabled states do not need to be WCAG compliant.

Example: utility links

Here are all the states for an interactive utility link. Below each state is a screenshot that shows how designers can accomplish this result in Sketch.

Example: Sass

For developers, these states are easily achieved using the Design Language Sass mixin color mix.


  @function color-mix($color, $color-2, $percentage) {
      @return mix($color, $color-2,  100 - $percentage );
  }

  $white: #FFFFFF;
  $black: #000000;
  $[component-name]-color: #5627d8;
  $[component-name]-hover-color: color-mix($[component-name]-color, $white, 20);
  $[component-name]-active-color: color-mix($[component-name]-color, $black, 30);
  $[component-name]-focus-color: color-mix($[component-name]-color, $black, 30);
  $[component-name]-disabled-color: color-mix($[component-name]-color, $white, 70);

  .[component-name] {
    color: [component-name]-color;
    text-color: none;
    &:hover {
      color: [component-name]-color-hover;
      text-decoration: underline;
    }
    &:active {
      color: [component-name]-color-active;
      text-decoration: underline;
    }
    &:focus {
      color: [component-name]-color-focus;
      text-decoration: underline;
    }
    &[disabled] {
      color: [component-name]-color-disabled;
    }
  }