Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography

Layout
Modals
Modals / Confirmation
Panels
Tabs

Actions & Inputs
Buttons
Checkboxs
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields

Status & Feedback
Badges
Progress Indicators
Tooltips

Our product is not consumer facing, and we do not aspire to a Mobile First experience.

However, the user expectation is that a modern software platform should function on any device.

With that in mind, our experiences should be usable on mobile devices and optimized whenever possible. 

◢

Responsive Breakpoints 

Our system targets 3 screen sizes: Mobile, Tablet, and Desktop.

All user experiences, actions, and behaviors need to function across these screen sizes.

Columns + Page Layout

Our product and use cases are diverse and wide ranging. As such, we do not have set recommendations on specific page layouts. Instead we provide guidelines and guardrails that allow designers to decide how best to display their content, while still adhering to our overall system. 

The number of columns should reduce in conjuction with available screen real estate. Margins and gutters remain constant while the width of content scales within each viewport 

(eg: A 4 column Desktop layout, should reduce to a 2 column Tablet layout, and a 1 column Mobile layout) 

Notes + Specifications

--------
Mobile

Page Margins: 0px 
Gutters: 8px

--------
Tablet

Page Margins: 16px 
Gutters: 8px

--------
Desktop

Page Margins: 32px 
Gutters: 16px