Using MUI components

Logic is built atop the Google Material UI design system and component library. That said, not every control and control variant is a part of Logic. These elements are still available via the MUI library, but we should avoid using them.

Composing Screens

Our design tool of choice is Figma and we have purchased use of the MUI kit for that platform. When laying out a screen:

• Use nested auto-layout frames. Avoid placing elements at precise locations, except pop-up components like snackbars, menus, and dialogs.
• Use controls defined in the FeatureBase Elements library and the MUI for Figma library. If you’re not certain which control best matches your need, check how we’ve solved the problem on other screens.
• If you feel you need to create a new control or pattern, think about how it can solve a general class of problems. Create the element as a control, place the parent control in its own frame, and add text calling out the existence of this new control.

Excluded Controls

The following MUI controls are not part of Logic. If you believe there is a place for them, make a case to the design team.

• Floating Action Button
• App Bar
• Bottom Navigation
• Pagination
• Speed Dial

Excluded Variants

The Material UI library includes a number of variants of certain controls. In some cases, we will leverage these variants to map to different semantic contexts. In other cases, we will standardize on a particular variant. If we have standardized on one variant, do not use the other variants in the product.

• Select: We use outlined only
• Text Field: We use outlined only
• Alert: We use outlined only
• Stepper: We use vertical only
• Card: We use outlined only
• Paper: We use outlined only

---