Design, simply elegant.

The E*TRADE Design Language is a design system that provides a seamless experience from end to end.

April 18th release (2019.4.18)
Spacing etrade.design For our smaller breakpoints, we've documented our breakpoint specific vertical offset style.
Error etrade.design We have updated the errors patterns page. It now has examples of specific error, a server error/data unavailable, toast, and form error patterns
Error animation etrade.design An animated shaky button error state has also been add to our errors pattern page. Add the class .btn-error to trigger the animation.
Search patterns etrade.design Fixes an issue on etrade.design where the auto complete in search patterns was not displaying
Buttons etrade.design Documentation update to the split button and xs button.
Tables etrade.design Add toggles to table stacked documentation
Typeography Styles Add more granular typography helper classes. .text-body, .text-header. We also updated the color on the .text-disclaimer class.
Form dropdown Styles Fix a bug on iOS where text was wrapping on the select element.
Buttons Styles Fix bug where .btn-link was defaulting to center alignment. The button link now inherits alignment.
Universal messages Styles Update to the universal message info icon to utilize Design Language .accent-color-2 (a different shade of blue).
Modals Styles Fixes a bug on the modal close button. Where the close button was offset if modal was conatin inside of a .card class.
Snackbar Styles Updated Snackbar to have a wider variety of buttons styles.
- NPM Setup workflow to publish and consume the Design Language on NPM. @etrade/design-language
April 5th release (2019.4.5)
Universal Messaging Styles Add Transparent and Inline Universal Messages
Buttons and Links Styles Add Nested Dropdown Button
Universal Messaging Styles Fix Universal Message icon position
Tabs Styles Center Icons in all Tabs
Tables Styles Fix Checkbox alignment in Table Stacked
All sections Documentation Add more padding to code examples