Design, simply elegant.

The E*TRADE Design Language is a design system that provides a seamless experience from end to end.

Bitbucket Styles

Inline textfield (updated).

The update improves accessibility and look of the focus state.

Bitbucket Styles

nav-tabs-centered (bug fix).

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 universal-message-transparent

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 b and the strong tags (update).

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 $background-accent-color. #f1ecff.

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 (.th-sort) that controls the sort order of a table column.

April 5th release (2019.5.3)
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.