Stay up to Date

Design systems

Upcoming workScopeStatus
Message streamsDocumentationIn progress
Nectar landing pageDocumentationIn progress
  • Changelog

  • January 6, 2020

    Sprout UI refresh documentation updates

    Visual and pattern documentation has been updated to reflect the changes in Sprout's new UI refresh.

    Navigation is the primary method of accessing different sections of our app. Refer to this pattern when creating, adjusting, or implementing navigation.

    Our app's layout pattern provides users with consistent structure and behavior, as well as access to frequently used tools.

    Typography styles have been split out into two pages — Brand Typography and Product Typography. Product styles have also been updated to reflect Sprout's UI refresh.

    Border styles have been updated to reflect Sprout's UI refresh.

    Color styles have been updated to reflect Sprout's UI refresh.

  • Guidelines for designing and using the EmptyState component in the web app

  • Reference these docs for proper usage of "my" and "your" for in-app copy

  • We now offer documentation on how to format dates and times across our products.

  • The collapsible component is a utility for creating regions of content that can expand/collapse with a simple animation.

  • Numeral is a primitive component used to format numbers according to our number formatting guidelines.

  • The Checkbox and Radio components now have a prop to add a text label.

  • You can now explore and track existing, new and proposed Racine components in Seeds.

  • Drawer component is now available

  • Tooltip component is now available

  • Popout component is now available

  • Documentation for creating message feeds app wide

  • Documentation on the right way to filter.

  • April 16, 2019

    Racine components in Seeds

    Seeds is now the new home for Racine components, the reusable building blocks for Sprout products.

    The new components landing page lets you dive into our component library, with links to a getting started guide and a search feature for all of our components.

    The Box component is a new, low-level primitive for building user interfaces. Learn how to take advantage of this new tool by reading its documentation in Seeds.

    Search through every icon on our library and find the one that's just right for you.

  • Onboarding helps users discover, understand, and use the value that Sprout provides as quickly as possible. Now you can learn how to build an onboarding experience of your own in Sprout apps.

  • Illustration is used to tell a story, convey a mood, or utilize metaphor to make a complex idea clear and concise. New guidelines make sure your illustrations are as effective and on-brand as possible.

  • January 8, 2019

    Improvements to Border, Elevation, and Space

    It's now easier than ever to understand how to use core styles like border, elevation, and space in your work.

    We took the time to freshen up the Border page to make it easier to understand which values to use for border widths and border radii.

    The product design team used Nectar as an opportunity to re-evaluate our elevation principles, and we've put together a new page so that you can use our new guidelines today.

    The Space page also got refreshed with a new visualization to understand how our spacing values relate to one another.

  • The Motion documentation has been updated with new values for easing and duration, new interactive visualizations, and new brand guidelines.

  • How the brand and marketing teams make complex numerical data clear and concise.

  • Learn the techniques and specifications the video team uses to create compelling live action videos.

  • November 15, 2018

    Design token documentation

    Take advantage of Seeds' core styles in your code, no matter that technologies you use.

    Learn how to install Seeds packages into your project, and see what files are available for each package.

    Each package has a change log so that you always know what is changing from version to version.

  • We've added animation documentation for actionable icons!

  • The accessibility guidelines have been updated to reflect the evolution of the practice at Sprout.

  • We now have documentation on how to add "sparkle" to your designs!

  • Entries in the changelog can now be linked to individually.

  • The hero image now has a nice animation.

  • October 3, 2018

    New brand assets and changelog pages

    Easily find and download the assets you need to express Sprout's brand, and discover what's changing on Seeds with these updates.

    You can express Sprout's brand in your work more accurately by using our official logo, colors, and imagery. The new brand assets page is your one stop shop for all of these.

    Seeds is rapidly evolving because of contributions from all over the organization. Now, you can see what's changing (and when) using the timeline on the Seeds changelog page.