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
| Text Fields | Styles | Fix to text input fields with only one input group |
| Tables | Styles | Update table striping |
| Universal messaging | Styles | Universal message h4 now increases in size at the smallest breakpoint |
| Bitbucket | Styles | Add sticky header css to styles |
| Bitbucket | Styles | $border-color updated to #e4e4e4 |
| Bitbucket | Styles | Remove border-radius from cards |
| Bitbucket | Styles | Add Graphik for testing |
| Tabs | Styles | Add new tabs variations |
| Pagination | Styles | Updates to pagination documentation |
| Colors | Styles | Add copy classname to colors page |
| Storybook | React | React: deprecate secondary card style |
| Storybook | React | React: update to the expand collapse component |
| Storybook | React | React: add progress bar |
| Storybook | React | React: add minimal navigation |
| Footer | Documentation | Clean up markup in the footer legal text. |
| Text input | Documentation | Add usage for text fields with icons. They do not support illustrative icons. |
| Buttons | Documentation | Large mobile button size is specced as 49px on the buttons page, should be 45px |
| Formatting | Documentation | Replaced the replay icon on the real time quotes example to the refresh icon on the formatting page. |
| Toolkit | Color update: Change green ui to purple in DSM | |
| Bitbucket | Styles | Color update: All UI using $brand-green will switch to new purple |
| Bitbucket | Styles | Color update: Create accent CLASSES based on current $variables |
| Cards | Documentation | Color update: Accent colors on the documentation cards page - replace chart classes with accent classes |
| Bitbucket | Styles | Nav tabs: Add a feature tab variation to tabs |
| Bitbucket | Styles | Nav tabs: Active tab text in tabs should be purple color |
| Bitbucket | Styles | Nav tabs: Nav tabs should support multiple lines of content, filling available width |
| Bitbucket | Styles | Tables: Table row needs a vertical-align:top helper class to handle form error states |
| Bitbucket | Styles | Tables: Enhance table-stacked to support any content in headers |
| Bitbucket | Styles | Minimal navigation: Link + icon pair on minimal navigation should be link color, not grey |
| Bitbucket | Styles | Cards: Change card border color to $border-color |
| Bitbucket | Styles | Cards: Deprecate secondary card style |
| Bitbucket | Styles | Toggles: Toggles with inline variation are not toggleable when clicking on the toggle |
| Bitbucket | Styles | Text: Refactor text helper classes to create a text-small class |
| Bitbucket | Styles | Text: Small label should be 13px on mobile |
| Bitbucket | Styles | Lists: Remove padding-bottom from list-inline |
| Bitbucket | Styles | Sticky header: Custom CSS for sticky/stacked header |
| Storybook | React Library | Expand collapse: Correct markup in Expand Collapse component |
| Bitbucket | Styles | Expand collapse: Fix the collapse div on the expand-collapse from shifting during animation |
| Storybook | React Library | Text input: Update TextInput type field |
| Bitbucket | Styles | Repo inhancements: Add grunt-babel @babel/core to package.json |
| Storybook | React Library | Add VerticalOffset component |
| Storybook | React Library | Add ExpandCollapse component |
| Storybook | React Library | Add sticky header to Table component |
| Storybook | React Library | Add ClassNameDecorator component |
| Storybook | React Library | Add mousenter and mouseout events to Button component |
| 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 |