Style Guide/Style Viewer

This page is a work in progress. It is somewhat of a mashup of brand guidelines and website style guide, but not a comprehensive version of either.
The UI is built with Material UI and this guide shows the UI components in use with our brand colors, typography, customizations, and usage guidelines.

Colors

Typography

Buttons

Button Colors

Button Styles

• Text buttons are typically used for less-pronounced actions, including those located: in dialogs, in body text, in cards. They are usually read by the user in line with other text in the UI. This prevents diversion of the user's eyes and helps maintain an emphasis on content.

• Outlined buttons are medium-emphasis buttons. They contain actions that are important but aren't the primary action in view.

• Contained buttons are high-emphasis buttons. They contain actions that are important and are the primary action in view. Try to only allow one contained button to be visible on the screen at any given time.

Icon Buttons

Icon buttons are commonly found in app bars and toolbars. They are used to trigger a single action that is clearly represented by the icon. They can be used as a toggle such as to add or remove a star to an item or sometimes to a short popover or dropdown menu of choices. They should not be links to another view.

Cards

Cards are used to display a small amount of content for a single item or topic. They should be small enough to be grouped in a grid or list and never be too large to fit the entire card in view on a mobile screen.

United 644SF HIGH IMPACT PLUS Living Bacteria and Enzyme Implant for Waste Digestion

Packaged for use with United’s SureFlo Dosing System, HIGH IMPACT PLUS provides regular treatment for drains or traps. Formulated with multiple strains of Facultative Bacillus bacteria, it provides added impact with its enzyme catalysts to break down and digest grease, oil, fats and other waste.