Introduction

Design Principles Accessibility

Foundation

Color Grid Iconography Illustrations Shadows Typography

Product Writing Guide

Overview Product's Personality Best Practices Inclusive Language Writing Accessibly Writing Globally Grammar Rules Glossaries

Components

ACTIONS

Button Dropdown Dropdown Flyout Toggle Button Segmented Controller

DISPLAY

Avatar Avatar Stack Contact Item File List Pill Token Thumbnail

INPUT

Checkbox Date Select Dropzone File Select Group Select Menu Multi Select Number/Currency Input Pill Select Radio Button Select Slider Switch Text Area Text Editor (RTF)Text Input Tiered Select

LOADING

Progress Bar Spinner

MESSAGING

Banner Empty State Toast Tooltip

navigation

Breadcrumbs Link Pagination Search Tabs Tree

overlays & surfaces

Card Modal Panel Popover Tearsheet

Layouts

Detail Dock Email Page Template Related Items

Patterns

Content Flow Form Form Empty State In-Line Error Validation Overlay Usage Title Lockup Email Notifications

Views

Data Table

Data Table Cells & Rows Location Filter

List Lists vs Tables Tile

DST Resources

Contribute Current Initiatives Development Figma Libraries Spotlight User Testing Feedback

Development Resources

Core Dev Guides

Explore the Core React front end component library.

Contribute to our repository for evolving web components.

Other patterns that align with DST front end solutions.