Skip to content
Skip to search
Paste
Paste
UX Platform
Change the site theme
Star
information:
The responsive layout is in early preview. Please report any bugs.link takes you to an external page
  • 2021.12.28
  • 2022.02.08 Candidate
  • 2022.03.22 Candidate
  • 2022.05.03 Candidate
  • 2022.06.14 Candidate
  • 2022.07.26 Candidate
  • 2022.09.06 Candidate
  • 2022.10.18 Candidate
  • Backlog

Roadmap

Here's a glimpse of what is coming up in future releases of Paste. Unless explicitly mentioned, all release candidates are tentative and subject to change.

Release - 2021.12.282021.12.28 page anchor

FeatureDescriptionStatus
Component page rebuildBuild one component page using the new design.
Complete
Design Foundations - ColorsCreate guidelines for using colors and color tokens within Twilio products.
Complete
EOL Console Components Sketch libraryAccess to the Console Components Sketch library will be removed, and the library will be unsupported.
Complete
Send H2 2021 CSATSend a customer satisfaction survey to understand where and why our customers are spending the most time and effort to get support with Paste
Complete
Start deprecation process for Console themeSet in motion the deprecation and removal of the legacy Twilio Console theme, that was used to support the legacy Twilio design language.
Complete
Build WebVitals tracking of Paste componentsCreate a simple mechanism for tracking component performance degradation using Web Vitals as baseline metrics.
In progress
Data visualization tokensCreate a color palette to be used in data visualizations and distribute them as Design Tokens.
In progress
Filter patternDocument and publish a design pattern for handling common data filtering needs within Twilio products.
In progress
Improved website test coverageImprove Website test coverage with Cypress end 2 end testing improvement.
In progress
Privacy patternDocument and publish a design pattern for clearly denoting sensitive or personally identifiable information that is handled within Twilio products.
In progress
Redesign Tokens pageMake improvements to the Tokens list page to be more easily navigable and understandable for the tokens’ intended uses.
In progress
Build Design Foundations - Colors usage Build the newly designed and created color guidelines as part of the new Design Foundations series.
To do
Build new IAUpdate the Paste website information architecture to help scale the website and increase discoverability.
To do
Deprecate SendGrid StyleguideSet in motion a process to deprecate the SendGrid Styleguide, in favour of using Paste as the Design System for SendGrid products.
To do
Publish migration guidePublish a migration guide for old, legacy design languages at Twilio that are not yet using Paste.
To do

Release - 2022.02.08 Candidate2022.02.08 Candidate page anchor

FeatureDescriptionStatus
Build Design Foundations - Layout/Spacing
To do
Build Design Foundations - Typography
To do
Build new design and engineering getting started pages
To do
Charting guidelines
To do
Create spot illustrations for 38 components
To do
Design Multiselect Combobox componentA combobox that can be used to select multiple items.
To do
Design Tokens page rebuildRebuild the newly redesigned Design Tokens page.
To do
EOL Console themeEnd of Life: Console theme. Everyone should be using the Default theme as a replacement by now.
To do
Form Key
To do
Improve SVG to React Documentation
To do
Make Dark theme WCAG AA conformant
To do
Multiselect Combobox componentA combobox that can be used to select multiple items.
To do
Overview page redesign
To do
Pattern page redesignRedesign pattern pages to improve hierarchy and consistency. Create live examples for all patterns (and remove codesandbox examples and/or screenshots).
To do
Publish Filter Pattern
To do
Rebuild 9 component primitive pages
To do
Rebuild remaining 37 component pages
To do
Review process definitionDefine standard for when Design systems work goes through UX & Blueprint review
To do
Rewrite Design Getting Started pages
To do
Stage 2 release for BadgeA small chunk of information that describes an object in a visually highlighted way.
To do
Upgrade Emotion versionUpgrading core dependency, Emotion, to latest major version 11.
To do

Release - 2022.03.22 Candidate2022.03.22 Candidate page anchor

FeatureDescriptionStatus
Build new overview page template
To do
Build new pattern page template
To do
Button GroupA group of connected Buttons
To do
Copy to Clipboard patternA pattern for copying text to clipboard.
To do
Create spot illustrations for 8 patterns
To do
Documentation for dark theme components in Figma
To do
Illustration component
To do
Journey map research
To do
Radio ButtonA radio button that looks like a Button
To do
Radio Button GroupA group of radio buttons that look like a Button Group
To do
Rebuild 5 layout component pages
To do
Rebuild 8 pattern pagesRebuild pattern pages to improve hierarchy and consistency. Create live examples for all patterns (and remove codesandbox examples and/or screenshots).
To do
Rebuild overview pages
To do
Stage 2 release for PopoverA Popover is used to display some content on top of another. It is typically invoked by a click action.
To do
Toggle ButtonA Button that supports two states, pressed and unpressed similar to a like button
To do

Release - 2022.05.03 Candidate2022.05.03 Candidate page anchor

FeatureDescriptionStatus
Checkbox ButtonA checkbox that looks like a Button
To do
Checkbox Button GroupA group of checkboxes that look like a Button Group
To do
Create spot illustrations for 5 layout components
To do
Create spot illustrations for 9 component primitives
To do
Deprecate Console React Components
To do
Design Button Group and Radio Button Group componentsA group of connected Buttons
To do
Design Toggle Button componentA Button that supports two states, pressed and unpressed similar to a like button
To do
EOL SendGrid Styleguide
To do
Loading
To do
Ordered List, stylized
To do
Progress Stepper
To do
Stage 2 release for ComboboxA Popover is used to display some content on top of another. It is typically invoked by a click action.
To do
Stage 2 release for PillA representation of a selection that is typically used in multi-select UI controls such as comboboxes.
To do
Toggle SwitchUsed to toggle a feature on or off
To do

Release - 2022.06.14 Candidate2022.06.14 Candidate page anchor

FeatureDescriptionStatus
TBD
To do

Release - 2022.07.26 Candidate2022.07.26 Candidate page anchor

FeatureDescriptionStatus
TBD
To do

Release - 2022.09.06 Candidate2022.09.06 Candidate page anchor

FeatureDescriptionStatus
TBD
To do

Release - 2022.10.18 Candidate2022.10.18 Candidate page anchor

FeatureDescriptionStatus
EOL Console React Components
To do
EOL Twilio UI Components
To do

Release - BacklogBacklog page anchor

FeatureDescriptionStatus
AccordionUsed to expand and collapse a collection of grouped sections of content
To do
Accordion PrimitiveAn unstyled functional primitive that is used for the Accordion component, or to roll your own implementation.
To do
Add interactivity to 10 Figma componentsStart making our Figma component library interactive, now that Interactive Components are out of beta.
To do
Add interactivity to 10 more Figma componentsContinue making our Figma component library interactive, now that Interactive Components are out of beta.
To do
Alert / Status Primitive
To do
Avatar with presence indicator variant
To do
Badge, counter variantStylized number often representing a count
To do
Blockquote component
To do
Button Group componentA group of connected Buttons
To do
Button Primitve
To do
Button, round variant
To do
Callout component
To do
Card actions group
To do
Card layout pattern
To do
Carousel Component
To do
Charts, Maps Pattern
To do
Chat log component
To do
Code Block ComponentNon-editable block of text, formatted in the code text style and with syntax highlighting.
To do
Code Editor / Code Editor Theme
To do
Color Picker
To do
Combobox, with clear action
To do
Composite PrimitiveAn unstyled functional primitive used to build accessible grids and listboxes
To do
Customization research plan / UX platform
To do
Data Grid sort
To do
Data Grid table actions
To do
Data Grid with fixed/locked column
To do
Data upload patternHow to move a file or dataset out of Twilio
To do
Data visualization pattern
To do
Date Range picker
To do
Date and Time Picker componentA component that allows users to pick a single date and time from a calendar
To do
Date and Time Range Picker
To do
Description List
To do
Design Foundations - Layout/SpacingCreate guidelines for using spacing and creating layouts within Twilio products.
To do
Design Foundations - TypographyCreate guidelines for using typography and creating hierarchy within Twilio products.
To do
Design Toggle Switch componentUsed to toggle a feature on or off
To do
Design Toolbar Component
To do
Directional Modal Component
To do
Drag and Drop Pattern
To do
Dropzone
To do
Edit pattern
To do
Emoji Component
To do
Errors, error states and warning states patternCan be used in situations where data is empty error states
To do
Feed primitive
To do
Field Checkbox
To do
Field Combobox
To do
Field InputAn input component with sensible defaults so you can use the component a with minimal effort
To do
Field Radio
To do
Field Select
To do
Field TextareaA textarea component with sensible defaults
To do
File InputInput component used to upload or attach files
To do
Form LayoutsA group of components with sensible defaults used to quickly layout forms in a consistent manor
To do
Form fields, connected
To do
Form fields, small
To do
Hyphenate component
To do
Icons, country flags
To do
Image Component
To do
Inline Code, IDs, SIDS, and Keys component
To do
Inline Edit Pattern
To do
Keyboard shortcut componentA component use to represent a keyboard key
To do
Kickoff Prototyping Kit refinement
To do
Listbox Primitive
To do
Live Region Primitive
To do
Loading patternDefine Spinner vs. Skeleton Loader
To do
Media player component
To do
Meter componentA component used a to show a unit of measure between two defined values
To do
Modal, full screenModal Dialog that covers then entire screen
To do
Modal, side variantModal Dialog that covers one side of screen
To do
Motion system
To do
Number input with stylized buttons component
To do
Onboarding pattern
To do
Page headerCompositional examples of headings, breadcrumbs, and page level actions
To do
Permissions pattern
To do
Portal component
To do
Positioner library
To do
Progress bar component
To do
Radio Button Group componentA group of radio buttons that look like a Button Group
To do
Search Pattern
To do
Slider component
To do
Small / Detail / Caption text component
To do
Stage 2 release for AvatarAvatar is a pictorial representation of a user or object 👩‍🎤. It can accept an image or initials.
To do
Summary Detail component
To do
Tabs, nested / scopedA set of tabs that can be used inside of another tabset that can create distinct visual hierarchy of that tabbed content
To do
Timeline Component
To do
Toggle Button and Toggle Button Group componentA Button that supports two states, pressed and unpressed similar to a like button
To do
Toggle Switch componentUsed to toggle a feature on or off
To do
Tokens for React Native
To do
Toolbar Component
To do
Toolbar Primitive
To do
Toolbar Primitive
To do
Tree Grid Primitive
To do
Tree Grid component
To do
Tree component
To do
Treeview Primitive
To do
UDL reportingAdd reporting for UDL adoption
To do
Unstyled List component
To do
Visual Picker
To do
Wireframe kit
To do
Wizard Pattern
To do

Black lives matter.