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
Single 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
Development
Figma Libraries
Spotlight
User Testing
Feedback
The CORE Design System:
helping you build the tools that build the world.
Get Started
Want to Contribute?
Contributing to our design system makes your work easier and helps our users.
Learn More
Components
Use our components to build out your specific use cases.
Patterns
Patterns help build out consistent experiences.
Layouts
Use layouts as a starting point for your page.
Foundation
Start here to learn about our basic UI styles.
Colors
Color helps guide a user through data rich content.
Typography
Learn how our typography enhances legibility.
Iconography
Our icons need to be clear, intuitive, and consistent.
Development
Check out our front end solutions!
Core Dev Guides
Explore the Core React front end component library.
Core Labs
Contribute to our repository for evolving web components.
More Packages
Other patterns that align with DST front end solutions.
Content
Learn about how we use language in our product.
Personality
Our product’s voice is human, helpful, and clear.
Best Practices
Focus on i18n, consistency, and writing with empathy.
Glossaries
How to use add vs. create, markup vs. mark up, and more.
Resources
Figma Web Library
Figma Foundation Library
Figma Data Table Library
Figma Wireframe Library
Current Initiatives
Submit Feedback