No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Color composition

This is our honest assessment of which color combinations are expected. We work from the background up: each possible background gets paired with its possible color layers.

NeutralBackground

Lorem ipsumAA
  • neutral/icon
  • neutral/text
  • neutral/border
Lorem ipsumAA
  • neutral/icon-weak
  • neutral/text-weak
  • neutral/border-weak
Lorem ipsumAA
  • neutral/icon
  • neutral/text
  • neutral/border-strong
Lorem ipsumAA
  • neutral/icon-weak
  • neutral/text-disabled
  • neutral/border-disabled
Lorem ipsumAA
  • accent/icon
  • accent/text
  • accent/border
On hoverAA
  • accent/icon-hover
  • accent/text-hover
  • accent/border-hover
While clickedAA
  • accent/icon-active
  • accent/text-active
  • accent/border-active
Lorem ipsumAA
  • danger/icon
  • danger/text
  • danger/border
On hoverAA
  • danger/icon-hover
  • danger/text-hover
  • danger/border-hover
While clickedAA
  • danger/icon-active
  • danger/text-active
  • danger/border-active
Lorem ipsumAA
  • warning/icon
  • warning/text
  • warning/border
On hoverAA
  • warning/icon-hover
  • warning/text-hover
  • warning/border-hover
While clickedAA
  • warning/icon-active
  • warning/text-active
  • warning/border-active
Lorem ipsumAA
  • success/icon
  • success/text
  • success/border
On hoverAA
  • success/icon-hover
  • success/text-hover
  • success/border-hover
While clickedAA
  • success/icon-active
  • success/text-active
  • success/border-active
Lorem ipsumAA
  • beta/icon
  • beta/text
  • beta/border
On hoverAA
  • beta/icon-hover
  • beta/text-hover
  • beta/border-hover
While clickedAA
  • beta/icon-active
  • beta/text-active
  • beta/border-active
Lorem ipsumAA
  • neutral/icon
  • neutral/text
  • assistive/border-focus

NeutralBackgroundMedium

Lorem ipsumAA
  • neutral/icon
  • neutral/text
  • neutral/border
Lorem ipsumAA
  • neutral/icon-weak
  • neutral/text-weak
  • neutral/border-weak
Lorem ipsumAA
  • neutral/icon
  • neutral/text
  • neutral/border-strong
Lorem ipsumAA
  • neutral/icon-weak
  • neutral/text-disabled
  • neutral/border-disabled
Lorem ipsumAA
  • accent/icon
  • accent/text
  • accent/border
On hoverAA
  • accent/icon-hover
  • accent/text-hover
  • accent/border-hover
While clickedAA
  • accent/icon-active
  • accent/text-active
  • accent/border-active
Lorem ipsumAA
  • danger/icon
  • danger/text
  • danger/border
On hoverAA
  • danger/icon-hover
  • danger/text-hover
  • danger/border-hover
While clickedAA
  • danger/icon-active
  • danger/text-active
  • danger/border-active
Lorem ipsumAA
  • warning/icon
  • warning/text
  • warning/border
On hoverAA
  • warning/icon-hover
  • warning/text-hover
  • warning/border-hover
While clickedAA
  • warning/icon-active
  • warning/text-active
  • warning/border-active
Lorem ipsumAA
  • success/icon
  • success/text
  • success/border
On hoverAA
  • success/icon-hover
  • success/text-hover
  • success/border-hover
While clickedAA
  • success/icon-active
  • success/text-active
  • success/border-active
Lorem ipsumAA
  • beta/icon
  • beta/text
  • beta/border
On hoverAA
  • beta/icon-hover
  • beta/text-hover
  • beta/border-hover
While clickedAA
  • beta/icon-active
  • beta/text-active
  • beta/border-active
Lorem ipsumAA
  • neutral/icon
  • neutral/text
  • assistive/border-focus

NeutralBackgroundStrong

Lorem ipsumAA
  • neutral/icon
  • neutral/text
  • neutral/border
Lorem ipsumAA
  • neutral/icon-weak
  • neutral/text-weak
  • neutral/border-weak
Lorem ipsumAA
  • neutral/icon
  • neutral/text
  • neutral/border-strong
Lorem ipsumAA
  • neutral/icon-weak
  • neutral/text-disabled
  • neutral/border-disabled
Lorem ipsumAA
  • accent/icon
  • accent/text-strong
  • accent/border
On hoverAA
  • accent/icon-hover
  • accent/text-strong-hover
  • accent/border-hover
While clickedAA
  • accent/icon-active
  • accent/text-strong-active
  • accent/border-active
Lorem ipsumAA
  • danger/icon
  • danger/text-strong
  • danger/border
On hoverAA
  • danger/icon-hover
  • danger/text-strong-hover
  • danger/border-hover
While clickedAA
  • danger/icon-active
  • danger/text-strong-active
  • danger/border-active
Lorem ipsumAA
  • warning/icon
  • warning/text-strong
  • warning/border
On hoverAA
  • warning/icon-hover
  • warning/text-strong-hover
  • warning/border-hover
While clickedAA
  • warning/icon-active
  • warning/text-strong-active
  • warning/border-active
Lorem ipsumAA
  • success/icon
  • success/text-strong
  • success/border
On hoverAA
  • success/icon-hover
  • success/text-strong-hover
  • success/border-hover
While clickedAA
  • success/icon-active
  • success/text-strong-active
  • success/border-active
Lorem ipsumAA
  • beta/icon
  • beta/text-strong
  • beta/border
On hoverAA
  • beta/icon-hover
  • beta/text-strong-hover
  • beta/border-hover
While clickedAA
  • beta/icon-active
  • beta/text-strong-active
  • beta/border-active
Lorem ipsumAA
  • neutral/icon
  • neutral/text
  • assistive/border-focus

NeutralBackgroundHeavy

Lorem ipsumAA
  • neutral/icon
  • neutral/text
  • neutral/border
Lorem ipsumAA
  • neutral/icon-weak
  • neutral/text-weak
  • neutral/border-weak
Lorem ipsumAA
  • neutral/icon
  • neutral/text
  • neutral/border-strong
Lorem ipsumAA
  • neutral/icon-weak
  • neutral/text-disabled
  • neutral/border-disabled

NeutralBackgroundDisabled

Lorem ipsumAA
  • neutral/icon-weak
  • neutral/text-disabled
  • neutral/border-disabled