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
November (2019.11.16)
| Colors | etrade.design | Updated the Color page so the swatch is more readable in IE 11. |
| Spacing | etrade.design | Update the spacing page so it looks the same in IE 11. |
| Release Notes | etrade.design | Fixed the active link so it now shows up on the release notes page. |
| Charts | etrade.design | Move chart colors from the colors page to the chart documentation page. |
| All | etrade.design | Created a breakpoint selector for the iFrames. |
| All | etrade.design | Add CodeMirror plugin for React to be used for formatting CodeSnippet. |
| All | etrade.design | Add a React copy icon functionality to CodeSnippet |
| Storybooks | react.etrade.design | Added a text field phone number formatting input. |
| Storybooks | react.etrade.design | Refactored to the Text field, so live formatting is accessible. |
| Storybooks | react.etrade.design | Refactored the Flyout component. Added ability to open and reposition/resize based on the relationship with the browser window. |
| Storybooks | react.etrade.design | Fixed a bug where the React Universal Message was throwing an error when descendants were used. |
| Bitbucket | Design Language Styles | Fixed a bug in the grouping right border, where is was misalign on some monitors. |
November release (2019.11.1)
| Bitbucket | design-language | Fixed instances where double focus rings were showing on links. |
| Bitbucket | design-language | Updates to copy build script. |
| Bitbucket | design-language | Added the ability to style text as italic using the `.text-italic` class. |
| Typography | etrade.design | Added documentation for the `.text-italic` class. |
| CardGroup | design-language-react | Created CardGroup component. |
| All | etrade.design | Removed jQuery from Google Tag Managment analytics tags. |
| All | etrade.design | Fixed issue where the search field icon was misaligned. |
| Colors | etrade.design | Fixed issue where the color page was showing incorrect border-color hex value. |
| ExpandCollapse | design-language-react | Enhancements made to the ExpandCollapse component icon including adding the ability to pass a class to the ExpandCollapse icon, adding the ability to disable rotation of the ExpandCollapse icon, and adding the ability to change the placement of icon to the right. |
| All | etrade.design | Fixed an issue where styles were not loading on Internet Explorer 11 in some cases. |
| etrade.design | Added print styles page. | |
| Cards | etrade.design | Fixed layout issues on cards page on Internet Explorer 11. |
| TextInput | design-language-react | Fixed issue where TextInput component does not add correct classes for icon rendering. |
| Spacing | etrade.design | Fixed layout issues on spacing page on Internet Explorer 11. |
| Copy Usage | etrade.design | Fixed issue where copy usage page underline is offset on Internet Explorer 11. |
| All | etrade.design | Fixed an issue where the sticky nav scroll goes to the wrong position on Internet Explorer 11. |
| All | etrade.design | Fixed an issue where the sticky nav scroll goes to the wrong position on Internet Explorer 11. |