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
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 |