Simple Elegance, revisited by E*TRADE
A unified aesthetic plays a key role in making E*TRADE a connected, engaging and meaningful experience. By drawing inspiration from the world of finance where speed is paramount, our design language supports the perception of speed, by being efficient and minimalist.
Through the Design Language, we've created an aesthetic that applies the abstract principles of simple elegance so our experiences are differentiated, easy to use and easy to comprehend.
Download the Sketch file
Download the Inspector
React Component Documentation
| Buttons | Styles | Fixed button sizes not working |
| Storybook | React library | Added inline props to Dropdown component |
| Storybook | React library | Added ToggleButton component |
| Storybook | React library | Added Error component |
| Storybook | React library | Stacked prop added to Table component |
| Storybook | React library | Title prop added to Button component |
| Storybook | React library | Lodash dependency refactor |
| Pagination | Styles | Pagination component added |
| Tables | Styles | Stacked table component |
| Buttons/Links | Styles | Fixed an issue where anchor links were not inheriting font weight |
| Tables | Styles | Fixed an issue where the hover state on tables was not working properly |
| Definition Lists | Styles | Fixed an issue where empty definition list items caused mis-alignments |
| Buttons/Links | Styles | Fixed an bug in which button links were not resizing on breakpoints as expected |
| Tables | Styles | Added styling for table footers |
| Storybook | React library | Universal Message component added |
| Storybook | React library | Text field component added |
| Storybook | React library | Text area component added |
| Storybook | React library | Text field prefix and suffix support |
| Storybook | React library | Text field with icons support |
| Buttons/Links | Styles | Fixed sizing of small button |
| Cards | Styles | Fixed dismissible compact card |
| Storybook | React library | Hotfix to remove error messages for Button component href and "inline-link" Buttons |
| Design Language Inspector | Browser extension | Add ability to preview / inject latest Design Language in page |
| Design Language Inspector | Browser extension | Add Wireframe Mode |
| Typography | Styles | DEPRECATION NOTICE: iOS and Android font stacks have been removed. They will revert back to the customer type stack sizing. |
| Typography | styles | Customer typography updated to Fort font family. |
| Typography | styles | Updated font stacks to medium font weights for headers |
| Typography | styles | Added responsive text alignment helper classes |
| Typography | styles | Updated font stacks to medium font weights for headers |
| Definition Lists | Styles | Column support for definition lists |
| Tags | Styles | Fixed tags overflowing on mobile and wrapping text |
| Toggles | Styles | Toggles component added |
| Spacing | Styles | Fixed vertical offset XXXL using wrong spacing |
| Cards | Styles | Fixed compact cards with images |
| Typography | Styles | Added line height reset helper class |
| Sliders | Styles | Updated slider's initial value to reflect change to new link color |
| Toasts | Styles | Toasts can live outside of the toast container |
| Buttons and Links | Styles | Updated disabled treatment for primary and primary outline buttons |
| Buttons and Links | Styles | Dropdown buttons now support buttons stlyed as links dropdowns |
| Form elements | Styles | Inline dropdowns show an arrow indicating it will invoke a dropdown menu |
| Design Language Inspector | Browser extension | Improve Design Language version detection |
| Design Language Inspector | Browser extension | Improve extention update feature |