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.
Application of the color palette brings a unified and recognizable consistency to MX's products and interfaces. This consistency is grounded by a set of well-defined rules on how to work with the Kyper component library in the context of dark and light themes.
The brand family serves as the primary action color across all MX products. Brand colors can be overriden by our clients in some products. If you are working on a product that allows for client overriding it is important to consider what your product will look like with other colors.
Use success colors to communicate success states or other positive messaging.
Use warning colors to draw attention to important elements or encourage the user to act with caution. Note, special care needs to be taken when using warning colors to ensure contrast reqirements are met.
Use error colors to communicate error states or destructive actions. Error colors should be used sparingly because they strongly pull the users attention.
Neutral colors are dominant in the light and dark themes, making use of subtle shifts in value to help organize content into distinct zones. MX has carefully selected the neutral colors to help designers achieve an accessible design in light and dark theme.
Typically on light theme default to 300 level colors. For example use the 300 variant of success, error, and brand as a default. On dark theme use 200 level colors. This helps achieve a AA accessibility rating.
| Name | Light | Dark |
|---|---|---|
| Brand 100 | Active state background | None |
| Brand 200 | None | Link and transparent button text |
| Brand 300 | Primary actions and clickable elements | Primary button background |
| Brand 400 | Hover color for links and primary buttons | Hover color for primary buttons |
| Brand 500 | None | Primary tag background |
| Name | Light | Dark |
|---|---|---|
| Neutral white | Card background | Text |
| Neutral 100 | Alternate card background | None |
| Neutral 200 | Disabled background | None |
| Neutral 300 | Card stroke and HR | None |
| Neutral 400 | Secondary disabled background | Secondary text |
| Neutral 500 | Disabled text | Input stroke |
| Neutral 600 | Secondary text and input stroke | Disabled text |
| Neutral 700 | None | Card stroke, HR, disabled background |
| Neutral 800 | None | Card background |
| Neutral 900 | Text | Alternate card background |