Your address will show here +12 34 56 78

Much like bricks and mortar are used to build a physical structure, this Style Guide serves as the ‘building blocks’ to deliver content, actions, and styling within a User Interface (UI).

Grid

Anatomy

Form field width is dynamic based on context. They will left align to a column on our standard grid. grid

Colors

colors

Typography

typography

Buttons

Anatomy

Buttons are used to navigate around the dashboard. With the proper hierarchy and consideration of context, the user should not have to search for them or be confused by their function main-buttons

 
 
 

Labels

Button labels should be 1-3 words long. They should be clear and concise to the action they represent. button-labels

 
 
 

Big Buttons

Anatomy

Big buttons are one of the main elements used to navigate through the guided flows. With the proper hierarchy and consideration of context, the user should not have to search for them or be confused by their function. Their height is fixed, but their width is dynamic based on the context and content.

 
Labels
Big button labels can be short or long, allowing for ultimate flexibility in the framework. They should be clear and concise to the action they represent.
big-button
 

Icons

Anatomy

Icons are simple and graphic in form. Their line weight should be consistent throughout, and should adhere to a more “linear” style rather than “filled in”.

 icons

Form Fields

Anatomy

Form field width is dynamic based on context. They will left align to a column on our standard grid. form-field

 
 

Labels
Form field labels can be used above, to the left, or inside the form field, depending on the context and other elements on the page.

Dropdowns

Anatomy

The width of a dropdown is dynamic based on context. Dropdowns will left align to a column on our standard grid. dropdown

 

Labels
Dropdown labels can be used above, to the left, or inside the form field, depending on the context and other elements on the page.

Extended Content and Window
Dropdown labels can be used above, to the left, or inside the form field, depending on the context and other elements on the page.

Extended Content and Truncation
If content does not fit into the dropdown menu, it can be truncated to fit.

Radio and Check Boxes

radios-and-checks

Toggles

Toggles are used when turning functions on and off. toggles

Cards

Anatomy

Cards are the foundation for content on the dashboard. They organize and combine information allowing the user to easily scan the page. Their height and width can be dynamic based on the context and content.

 card

Lines

Anatomy

Graphic rule lines create separation between content that may not be different enough to put on its own card.

lines