Introduction
Design PrinciplesAccessibility
Foundation
ColorGridIconographyIllustrationsShadowsTypography
Product Writing Guide
OverviewProduct's PersonalityBest PracticesInclusive LanguageWriting AccessiblyWriting GloballyGrammar RulesGlossaries
Components
ACTIONS
ButtonDropdownDropdown FlyoutToggle ButtonSegmented Controller
DISPLAY
AvatarAvatar StackContact ItemFile ListPillTokenThumbnail
INPUT
CheckboxDate SelectDropzoneFile SelectGroup SelectMenuMulti SelectNumber/Currency InputPill SelectRadio ButtonSelectSliderSwitchText AreaText Editor (RTF)Text InputTiered Select
LOADING
Progress BarSpinner
MESSAGING
BannerEmpty StateToastTooltip
navigation
BreadcrumbsLinkPaginationSearchTabsTree
overlays & surfaces
CardModalPanelPopoverTearsheet
Layouts
DetailDockEmailPage TemplateRelated Items
Patterns
Content FlowFormForm Empty StateIn-Line Error ValidationOverlay UsageTitle LockupEmail Notifications
Views
Data Table
Data TableCells & RowsLocation Filter
ListLists vs TablesTile
DST Resources
ContributeCurrent InitiativesDevelopmentFigma LibrariesSpotlightUser TestingFeedback
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