Get to know our system foundations, work with our patterns, and build with our components. Get access to our color palettes, icon sets, and sticker sheets in Figma.

Install packages, check out interactive playgrounds of our React components and patterns, and see how the system looks in practice with our coded demos.

A dashboard page presents at-a-glance information about service and resource status. Users can monitor this information and act upon it quickly.

The table view pattern is a collection of resources in a tabular format. It's effective for quickly identifying categories or comparing values in a large text and numerical data set.

The density settings pattern uses local storage to remember the user's preferred density setting. This pattern is for switching between comfortable and compact mode at the service level.

Use single page create if you want your users to create a resource on a single page. This component is optimized for simple to medium-complex forms.

Use the multipage create, which employs the wizard component, when you want users to create resources by completing a set of interrelated tasks. We recommend multipage create for long or complex configurations.

An example of comparing key resource details within the split panel on a split view.