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
June 14th release (2019.6.14)
| Bitbucket git repo | Styles | Material icons now have a xxs size (20px) |
| Bitbucket git repo | Styles | Repo refactor: removed most grunt task in favor of npm |
| Bitbucket git repo | Styles | Repo refactor: remove material icons as dependency |
| Bitbucket git repo | Styles | Add the flex grow option to the flex columns |
| Bitbucket git repo | Styles | Updated browser font rendering to align with Graphik |
| Bitbucket git repo | Styles | Updated the spinner so IE browser show purple instead of green |
| Bitbucket git repo | Styles | Added the table caption bottom helper class .caption-bottom |
| Bitbucket git repo | Styles | Updated the color of the dropdown to align with our new purple |
| Tabs | etrade.design | Add clearer guidance on etrade.design for our responsive overflow tab |
| Mobile device | etrade.design | Fix a scroll issue with the etrade.design mobile menu |
May 31st realease (2019.5.31)
| Bitbucket | Styles | We added a minified CSS file to improve load performance. |
| Bitbucket | Styles | The `accent-color-` variable is now available to use globally. |
| Bitbucket | Styles | We now have breakpoint specific screen-reader-only helper classes. These classes are used to visually hide elements, while still leaving them accessible to screen readers. The new classes are .sr-only-sm, .sr-only-md, and .sr-only-lg. |
| Bitbucket | Styles | On the stacked tables, the padding below the labels has been removed. |
| Bitbucket | Styles | We updated swipe-able cards. There was a bug on Firefox that prevented the swipe from scrolling smoothly. |
| Bitbucket | Styles | We updated the universal messages CTA. The CTA now aligns to the right no matter how much copy there is. It also fixes alignment issues when using the a tag instead of the button tag. |
| Layout | Documentation (etrade.design) | We update guidance on the Grid Breakpoints Mixins to match the current Design Language standard. |
| Tables | Documentation (etrade.design) | We now have documentation on Table Captions usage. |
| Form elements | Documentation (etrade.design) | We now have documentation on Fieldset usage. |
| Colors | Documentation (etrade.design) | We added the .body-text-color helper class to the colors page. |
| Toasts | Documentation (etrade.design) | Fixed a bug with the Toasts and File Upload where the click event was disabled. |
| Colors | Documentation (etrade.design) | Updated the colors to match the latest updates in the Design Language styles. $label-color is now #444444 and $body-text-color is now #242424. We removed the $header-text-color, since that and $body-text-color are both the same. |
| Changelog | Documentation (etrade.design) | We added Deep-linking to the changelog. This will allow us to search the log faster. |