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
| Bitbucket | Styles | Inline textfield (updated). The update improves accessibility and look of the focus state. |
| Bitbucket | Styles |
This solves an issue at our extra small breakpoints where the active tab was not showing up correctly. |
| Bitbucket | Styles | Universal messages (new). We now have transparent/inline universal messages |
| Bitbucket | Styles | Auto-suggest/Auto-complete (new). We now have auto-suggest/auto-complete styles for search. |
| Bitbucket | Styles | Datepicker (update). The icon in date picker select text field is now purple. |
| Bitbucket | Styles | The The font-weight was set to 600 for better readability. |
| Bitbucket | Styles | Body text (update). We updated the body text to #242424 for better readability. |
| Bitbucket | Styles | Stacked tables (update). The data points on the extra-small breakpoint are now left align. |
| Bitbucket | Styles | Flex grid [experimental] (update). a. Updated the order. "first" and "last" are not valid properties. |
| Text fields | etrade.design | Text fields (update). The left aligned icon is now purple. |
| Colors | etrade.design | Colors (new). A new color was added |
| Formatting | etrade.design | Formatting (update). The CTA patterns were update to be more accurate. |
| Formatting | etrade.design | Formatting (new) Added guidance for formatting a phone number. |
| Formatting | etrade.design | Formatting (update). We created a functional example of the expand-collapse component. |
| Buttons | etrade.design | Buttons (update). The buttons page variations section was updated to be clearer. |
| React | React | Auto-suggest/Auto-complete (new). We now have auto-suggest/auto-complete component for search. |
| React | React | TableSort (new). We now have a button ( |
| Snackbar | etrade.edesign, Styles, React | We added the Snackbar to our React component and styles as well as adding usage guidelines and examples on etrade.edesign. |
| Typography | etrade.edesign | Updates to the typography page. Add more helper classes and clarified text colors. |
| Footer | etrade.edesign | Updated the footer examples to use our granular text helper classes (.text-body instead of .text-disclaimer). |
| All sections | etrade.design | the chat bot was removed from etrade.design |
| Buttons | etrade.design | Added visual clarification to the small and extra small buttons. The extra small button was move into the button variation sections. |
| Toasts | etrade.edesign | Fixed a bug where the images on the static toast messages were not show up on some browsers. |
| Cards | etrade.edesign | Fixed a bug where the “cards with images” example showed the image incorrectly. |
| Bitbucket | Styles | We removed margin-bottom from `.list-inline`, this will improve alignment with other inline elements. |
| Bitbucket | Styles | As part of our migration to the Graphik font stack, the font EtradeFort was removed from the repo. |
| Bitbucket | Styles | Updated the Graphik letter spacing (kerning) on our larger heading styles. |
| Bitbucket | Styles | Updated .btn-link to inherit font-weight if doesn't have the .btn class. |
| Bitbucket | Styles | We have updated our table hover color. |
| Bitbucket | Styles | The shaky button animation is now available to use. Adding the class name .btn-error will trigger the “shaky” animation. |
| Bitbucket | Styles | We now have styling for the caption tag. This is useful in giving context to tables. |
| Bitbucket | Styles | We now have styles for the legend tag. Useful in giving more context to forms. |
| Bitbucket | Styles | We added a button for tables - .th-sort - that can be used to sort a table and indicate if a column is ascending or descending. |
| Bitbucket | Styles | Updated the table body content to be normal weight. |
| Bitbucket | Styles | We have added some functionality to our experimental flex row enhancements. We can now use justify-content on a row, add background or chart colors. |
| Bitbucket | Styles | Updated the table body content to be normal weight. |
| Bitbucket | Styles | Add !important to the new text helper classes. |
| Bitbucket | Styles | Fixed an issue where the large modal was too big on small breakpoint, causing the modal to drop out of view. |
| Bitbucket | Styles | Updated the “Material icons within links” so they no longer have their colors and focus-rings set globally. |
| React | React | The nested dropdown button is now availabe as a React component. |