Design, simply elegant.
The E*TRADE Design Language is a design system that provides a seamless experience from end to end.
Download the Sketch file
Download the Inspector
React Component Documentation
September 20th release (2019.9.20)
| Bitbucket | Styles | Right to Left support for input groups |
| Bitbucket | Styles | Updated the universal message CTA with small button |
| Bitbucket | Styles | Added new helper class create vertical lines on tables |
| Bitbucket | Styles | Automation of styles final release process |
| Colors | etrade.design | Added class names to the color swatches |
| Tabs | react.etrade.design | Added skeleton loading state |
| Card | react.etrade.design | Added skeleton loading state |
| Table | react.etrade.design | Added skeleton loading state |
| Slider | react.etrade.design | Added slider component |
September 6th release (2019.9.6)
| Footer | etrade.design | Footer page restructured |
| Bitbucket | Styles | Universal messages A11y-compliant |
| Bitbucket | Styles | Updated visual style of tags. Also added dismissible tag. |
| Form Elements | etrade.design | Error state to radios and checkboxes updated |
| Bitbucket | Styles | Right to Left support on progress bar and blockquote |
| Bitbucket | Styles | Trade dropdown alignment updated |
| Bitbucket | Styles | Focus ring added to close buttons on modals |
| Bitbucket | Styles | Automation of Publishing styles to NPM |