Borders are used as a stylistic way to emphasize elements. Borders can call attention to, contain, or separate content.

We use a flexible color palette that places emphasis on important elements.

Elevation is the distance between any two elements along the z-axis.

The complete Sprout logo system–comprised of a horizontal lockup, an icon and a word mark

Guidelines and tokens for easing, duration, and motion principles

Values, tokens and guidelines for using Space (margin, padding, position x and y)

Use typography to create hierarchies, organize information, and guide users through an experience.

Guidelines to enable people with disabilities and impairments

Standardized language for telling a consistent story through data

UI guidelines for selecting and comparing ranges of dates

Guidelines for inputting data and configuring options

Usage guidelines, documentation and searchable list of icons

Standards for picking items using an item picker

Onboarding helps users discover, understand, and use the value that Sprout provides as quickly as possible.

Settings page specific guidelines for using tables

Best practices for displaying raw data in tables

A guide to using our combination button/dropdown pattern

Standards for displaying tabular data for adjacent charts

How to use tab layouts in our products