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
| Bitbucket | Styles | New helper class for localization - Right to Left support |
| Bitbucket | Styles | Add Instagram icon to styles |
| Cards | Styles | Cards with an image (not a background) stretch in IE 11 |
| Bitbucket | Styles | _list.scss is imported twice in design language |
| Expand collapse | Styles | Added an expand collapse helper class |
| Deffinition lists | Styles | Fixes an issue with definition list were the dd did not render correctly |
| Colors | Styles | New primary purple (Donatello Purple) sass value ($primary-color) |
| Colors | Styles | The $link-color will switch to new $primary-purple |
| Colors | Styles | The chart color 1 is now our new $primary-purple. $chart-color-2 replaces chart-color-7. Other chart colors move down 1. |
| Colors | Styles | Create $dark-background-color (plum) sass value to be used as colors for UI |
| Colors | Styles | Create a new "Accent Colors" section on the colors page on etrade.design |
| Styles | Bitbucket | Text field updates to form elements |
| Styles | Bitbucket | New blockquote styles added |
| Styles | Bitbucket | Restore "text-disclaimer" style |
| Bitbucket | Styles | Fix to the table footer (tfoot) which adjusts spacing and adds text-bold |
| Buttons and links | Styles | Fix outline around btn-link |
| Bitbucket | Styles | Removed Ruby as a dependency of design language |
| Tabs | Styles | Update tabs (nav-tabs) with transparent border gradient |
| Tabs | Styles | Update tabs with a .nav-list-center helper class |
| Definition lists | Styles | Fix for a definition list alignment issue, where text was overflowing |
| Form elements | Styles | bug fix for text field with icon group left pushes text when in focus |
| Toggles | Styles | update to toggle making it more readable |
| Form elements | Styles | add transparent background on inline dropdowns and update to disabled state |
| Datepicker | Styles | added Datepicker page |
| Tabs | Styles | nav-tabs-border fix |
| Buttons and links | styles | fix to the dropdown-right helper class - removes padding right |
| Universal message | Styles | Fix for universal message icons not rendering properly |
| Button and links | Styles | Add new helper class .dropdown-right for .dropdown and .btn-group |
| Cards | Styles | Fix for cards with an image (not a background) stretch in IE 11 |
| Definition list | Styles | Create .definition-list-condensed |
| Bitbucket | print.scss | Print page has unwanted border boxing for certain spans |
| package.json | Styles | Namespace CSS as both edesign and design in build process |
| Storybook | React library | Datepicker React component |
| 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 |