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 For our smaller breakpoints, we've documented our breakpoint specific vertical offset style.
Error 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 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 Fixes an issue on where the auto complete in search patterns was not displaying
Buttons Documentation update to the split button and xs button.
Tables 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