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
Release notes
| 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 |
| Design Language NPM Package | npm | Updated Design Language npm package to reflect latest release |
| Storybook | React library | Updated Design Language React package to reflect latest release |
| Design Language Inspector | Browser extension | Improve vertical-offset overlay to mimic design specs |
| Design Language Inspector | Browser extension | Add update notification when new versions are available |
| Storybook | React library | Buttons/Links added |
| Storybook | React library | Cards added |
| Storybook | React library | Dropdowns added |
| Buttons/Links | styles | Link color changed to purple |
| Definition Lists | styles | Updated definition list to reflect visual enhancements |
| Cards | styles | Card accent colors now allow for brand green and brand purple |
| Cards | styles | Card full width buttons match intended designs |
| Colors | styles | Fixed error state showing wrong negative red color |
| Buttons/Links | styles | Button updates to remove Bootstrap as a dependency |
| Form Elements | styles | Bug fix: IE dropdown bug - missing arrow |
| Filters | styles | New component: filters |
| Iconography | styles | New illustrative icons: chat, transaction, school, search, drop-pin, video-laptop, smartphone-landscape |
| Cards | styles | New to cards: full width button added to footer |
| Cards | styles | New to cards: added accent variation |
| Styles | styles | Deprecated: removed deprecated code in buttons, tabs, iconography, and global typography |
| Errors | styles | New to errors: new error patterns |
| Form elements | styles | Updated focus states for inputs |
| Grid | styles | New to the grid: addition of a min-width |
| Styles | styles | Enhancement: zip assets added |
| Styles | styles | Optimization: build files, dependencies, xeon updates |
| Typography | styles | New to list: change to padding |
| Footer | documentation | Update: removed tm from logo |
| Flyouts | documentation | Bug fix: popovers only one visible at a time |
| Browser Targeting | documentation | Addition: documentation on targeting browsers |
| Home | documentation | LTS/Latest switcher in the navigation |
| Form elements | styles | Dropdowns have a white background |
| Universal messaging | styles | fixed overlapping line height on mobile success message |
| Modals | documentation | fixed modal buttons not displaying properly |
| Iconography | toolkit | info icon added to the craft library |
| Cards | styles | fixed cards focus state on clickable cards |
| Form elements | styles | fixed radio button centering to text and responsive radio button |
| Form elements | documentation | fixed snippets for checkboxes and radio buttons |
| Tables | styles | fixed button alignment in table |
| Typography | styles | deprecating mobile font stacks |
| Cards | styles | deprecating card alignment in favor for card group alignment |
| Styles | styles | removed padding on horizontal rule element |
| Styles | styles | removed forced background color on dark elements |
| Code Guidelines | documentation | SCSS Code guidelines page available for reference |
| Form Elements | styles | Textfield with icon bugfixes. New HTML structure required. |
| Cards | styles | Compact card variation available |
| Cards | styles | Cards have non-breaking markup enhancements including footers sticking to the bottom of the card |
| Flyouts | styles | Flyouts fixed on documentation |
| Tables | styles | Tables added |
| Tags | styles | Tags component added |
| Icons | Styles | Updated IRA Selector icon, deprecated and moved to compass |
| Footer | styles | Fixed footer quick links unordered list |
| Typography | styles | Updated customer font stack line heights |
| Typography | styles | Updated prospect font stack line heights |
| Slider | styles | Slider enhancements |
| Scaffold | styles | Unordered list styling |
| Icons | styles and documentation | Added new IRA Selector icon |
| Form Elements | styles | Fixed disabled state of dropdowns |
| Sliders | styles | Added new variation for value to follow slider thumb |
| Errors | styles | Fixed .has-error helper class for universal error states |
| Bitbucket Repo | styles | Improved IE targeted mixins |
| Definition Lists | styles and documentation | Added definition lists component for non-data/numberic heavy data |
| Iconography | Toolkit | Calendar icon added to craft |
| Buttons and Links | Documentation | Buttons and links overflowing on mobile fixed |
| Typography | Documentation | Typography type styles fixed |
| Form Elements | Documentation | Form elements text fields on mobile fixed |
| Form Elements | Documentation | Form elements radio buttons/checkboxes updated to reflect enhancements |
| Modals | Documentation | Modal page enhancements |
| Segmented Progress Bar | Documentation | Segmented progress bar page enhancements |
| Toats | Documentation | Toasts on mobile fixed |
| Footer | Documenttion | Footer disclaimer logos display properly on mobile |
| Layout | Styles | 5 column grid system |
| Form Elements | Styles | Textfields with icons |
| Code | Styles | Versioning for deprecation increased, this removes secondary buttons entirely. You must update any references to secondary buttons to our primary buttons. |
| Flyouts | Styles | Shadows added to flyouts |
| Flyouts | Styles | Flyouts deprecated, renamed to popovers |
| Flyouts | Styles | Popover sizes deprecated |
| Flyouts | Styles | Tooltips are styled as popovers |
| Form Elements | Styles | Fixed inline radios additional padding |
| Buttons and Links | Styles | Fixed disabled links clickable |
| Form Elements | Styles | Fixed inline dropdown not inheriting font sizes |
| Buttons and Links | Styles | Fixed button in active state shows gray border |
| Layout | Styles | Code enhancements to the centered columns |
| Typography | Styles | iOS and Android typography updated to reflect new headings |
| Code | Styles | Added support to gruntfile to prepare for LTS and Latest builds of the Design Language |
| Toasts | Styles | Fixed toasts not sticking to the left of the page |
| Minimal Navigation | Styles | Added minimal navigation pattern |
| Form Elements | Styles | Fixed checkboxes are not vertically centered to text |
| Iconography | Styles | Fixed material icons not inheriting font size |
| Flyouts | Styles | Deprecated dismissible flyout/popover |
| Buttons and Links | Styles | Fixed button in active state shows gray border on hover IE only |
| Toasts | Styles | Fixed toast icon spacing |
| Form Elements | Styles | Fixed select dropdown text not vertically centered on IE |
| Code | Styles | Fixed IE JavaScript issues on the playground |
| Buttons and Links | Styles | Fixed split dropdown button alignment on IE |
| Form Elements | Styles | Read only attribute on inputs style as disabled |
| Form Elements | Styles | Fixed dropdown arrow alignment |
| Form Elements | Styles | Fixed dropdown alignment on mobile |
| Form Elements | Styles | Fixed radio button text not centered in IE |
| Footer | Styles | Fixed footer top margin causing undesirable behavior |
| Form Elements | Styles | Fixed input text and placeholders vertically centered in IE |
| Slider | Styles | Slider component added (beta) |
| Copy Usage | Documentation | Copy usage guidelines page |
| Toasts | styles | IE 11 Toast container fix |
| Cards | styles | Card component added |
| Buttons and Links | styles | Mobile scaffold update - larger elements on mobile breakpoint |
| Form Elements | styles | Inline dropdown component added |
| Footer | styles | Footer update |
| Buttons and Links | styles | Removed visited link states |
| Typography | styles | Updated bold disclaimer text on iOS/Android |
| Iconography | styles | Icon sizing helper for both Illustrative Icons and Material Icons |
| Segmented Progress Bar | styles | Segmented progress bar can be partially filled by percentage |
| Bitbucket Repo | styles | Fixed postinstall in deploy process |
| Colors | styles | Updated chart colors |
| Form Elements | styles | Fixed dropdown buttons |
| Iconography | styles | Fixed iconography font file reference |
| Bitbucket Repo | styles | Dark theme updates |
| Bitbucket Repo | styles | Build improvements |
| Form Elements | styles | Fixed dark dropdown bug on Windows and Firefox |
| Invision App | toolkit | Added progress bars |
| Colors | documentation | Updated colors page |
| Bitbucket Repo | styles | Mobile container gutter is now corrected |
| Bitbucket Repo | styles | Icon sizes fixed |
| Bitbucket Repo | styles | Icons updated to use a webfont |
| Bitbucket Repo | styles | iOS font sizes corrected |
| Bitbucket Repo | styles | Release process documented in repository |
| Bitbucket Repo | styles | Select dropdown's dark variation disabled state fixed |
| Bitbucket Repo | styles | Dropdown button menu styled |
| Bitbucket Repo | styles | Updated Xeon build file |
| Bitbucket Repo | styles | Checkbox label font size corrected |
| Bitbucket Repo | styles | Tabs with border Safari bug fixed, tabs distribute evenly, underline on mobile adjusted, animations enhanced |
| Bitbucket Repo | styles | Positive and negative text color helper classes |
| Bitbucket Repo | styles | Container on mobile fix |
| Bitbucket Repo | styles | Updated iOS font sizes |
| Bitbucket Repo | styles | Disabled select dropdown dark variation |
| Bitbucket Repo | styles | Dropdown menu |
| Bitbucket Repo | styles | Dark buttons |
| Toasts | documentation | Toast page redesign |
| Iconography | documentation | Searchable iconography |
| Colors | documentation | Copy snippet on colors page fixed |
| Toolkit | toolkit | Mobile scaffolding updates- checkboxes, buttons, radios, form fields and dropdowns are now larger on mobile |
| Login | toolkit | Mobile scaffolding updates are now reflected in Craft |
| Buttons and Links | toolkit | Links for dark backgrounds |
| Form Elements | toolkit | Checkbox in a checked and disabled state has been updated |
| File Upload | toolkit | File upload component added |
| Bitbucket Repo | styles | Beta dark components |
| Buttons and Links | toolkit | Added button dropdown menu style |
| Colors | styles | Added positive and negative colors for dark variations |
| Toasts | styles | Toast notifications now support multiple lines |
| Iconography | documentation | Iconography hover state updated |
| Buttons and Links | documentatin | Deprecation of secondary buttons has been noted |
| Documentation | documentation | Font stack choice is remembered throughout your browsing experience |
| Colors | documentation | Color page has an updated hover experience |
| Buttons and Links | documentation | .btn-block is explained in detail as it has become a vital part of our Design Langauge |
| Typography | styles | Large and small labels fix |
| Buttons and Links | styles | Deprecating secondary button |
| Progress Bar | styles | Progress bars |
| Global | documentation | Spacing between headers |
| File Upload | documentation | Drag and drop page with snippet and functionality |
| Resources | documentation | Renamed Downloads to Resources |
| Universal Messaging | documentation | Universal messaging font for prospect fix |
| Iconography | documentation | Iconography copying |
| Spacing | documentation | Spacing explanation moved |
| Tabs | documentation | Tabs page redesign |
| Global | documentation | Copy snippets to clipboard |
| Iconography | documentation | Iconography hover animation |
| Layout | documentation | Layout page fixes |
| Spacing | documentation | Added vertical offset clear to spacing |
| Sketch Toolkit | documentation | Sketch toolkit URL update |
| Global | documentation | Font stack switcher only switches fonts for components |
| Global | documentation | Sticky font switcher on component pages |
| Buttons and Links | styles | Fixed button dropdown |
| Styles | styles | Minified CSS |
| Typography | styles | Typography line height code cleanup |
| Spacing | styles | Vertical Offset Clear variation |
| Typography | styles | Customer small label |
| Typography | styles | Customer large label |
| Typography | styles | Fixed subhead color |
| Flyout | styles | Flyouts font fix |
| Styles | styles | SASSLint indentation turned to a warning |
| Login | documentation | Login for downloads |
| Sketch Utilities | documentation | Craft Library page |
| Release notes | documentation | Release notes on homepage reduced |
| Home | documentation | Join us on Slack removed [RIP Slack] |
| Styles | styles | Tabs have an inverse variation (for use on dark backgrounds) |
| Tabs | styles | New tabs animation |
| Segmented Progress | styles | Segmented progress bar half active state fixes |
| Styles | styles | Dropdown buttons |
| Styles | styles | File upload beta |
| Typography | styles | Customer font stack updates |
| Styles | styles | Visual regression testing beta |
| Styles | styles | Typography code cleanup |
| layout | documentation | Layout page fixes |
| Buttons and Links | documentation | Buttons page mobile fixes |
| Form Elements | documentation | Textarea element renders properly, snippet fix |
| Buttons and Links | documentation | Dropdown buttons fixes |
| Home Page | documentation | ETrade Fort download |
| Site Wide | documentation | Navigation fixes on Safari |
| Iconography | documentation | Iconography page |
| Spacing | documentation | Spacing page |
| Typography | documentation | Typography Variable updates |
| Spacing | documentation | Typography page |
| Tabs | documentation | Added information for all tab variations |
| Spinners | documentation | Spinner snippet fixes |
| Centering | documentation | Centering helper class updates |
| Form Elements | documentation | Fixed disabled radio button not displaying properly |
| Flyouts | documentation | Flyouts page redesign |
| Modals | documentation | Modals page redesign |
| Form Elements | documentation | Form elements redesign |
| Buttons and Link | documentation | Button sizes measurements |
| Toolkit | toolkit | Craft Library beta release |
| Toolkit | toolkit | Sketch Customer template beta release |
| Toolkit | toolkit | Inverse tabs |
| Release Notes | documentation | Fixed release notes dead links |
| Components | documentation | Updated font changer for components |
| Spacing | documentation | Spacing page enhancements |
| Color Scheme | documentation | Adjusted color scheme animation |
| Color Scheme | documentation | Adjusted color scheme, chart colors text colors |
| Modals | documentation | Updated modal examples |
| Layout | documentation | Enhancements to the layout page |
| Inspiration | documentation | Fixed Inspiration page loading issues |
| Documentation | documentation | Removed third party dependencies |
| Buttons and Links | styles | Button size enhancements |
| Buttons and Links | styles | Button disabled enhancements |
| Buttons and Links | styles | Button border enhancements |
| Universal Messaging | styles | Universal Message icon updates |
| Toolkit | toolkit | Alpha Craft Library Release |
| Documentation | documentation | External links open in new tabs |
| Documentation | documentation | Generate Timestamp button hidden from the home page |
| Documentation | documentation | Added toast demo functionality |
| Documentation | documentation | Mobile navigation alignment |
| Documentation | documentation | Mobile navigation is now accessible |
| Release Notes | documentation | Changelog renamed to Release Notes |
| Documentation | documentation | Updated URL scheme |
| Inspirational | documentation | Added more images to the inspirational page |
| Color Scheme | documentation | Centered the copy text on the color scheme |
| Buttons and Links | styles | Fixed button border bug |
| Iconography | styles | Removed duplicate iconography |
| Form Elements | styles | Adjusted checkbox and radio button animations |
| Universal Messaging | styles | Updated universal message look and feel |
| Toasts | styles | Add toasts |
| Form Elements | styles | Fixed form status labels on Internet Explorer. |
| Form Elements | styles | Fixed fields not centered vertically in Internet Explorer. |
| Nav Tabs | documentation | Fixed tabs jumping to the top of the page on click. |
| Buttons & Links | documentation | Fixed Buttons and Links page layout on mobile. |
| Form Elements | documentation | Fixed form elements not rendering correctly. |
| Buttons & Links | styles | Fixed button size difference in outline variations. |
| Typography | documentation | Updated Typography interior page. |
| Iconography | documentation | Updated Iconography interior page. |
| Spacing | documentation | Updated Interior Spacing page. |
| Modals | documentation | Fixed modal rendering. |
| Site Wide | documentation | Logo in the nav is now clickable to get back home. |
| Site Wide | documentation | "Aesthetics" changed to "Foundation". |
| Typography | styles | Updated subhead line height on prospect font stack. |
| Spacing | styles | Added additional spacing option. |
| styles | Spinner component. | |
| Color | documentation | Fixed chart color scheme naming. |
| Layout | styles | Reverted .container padding on mobile |
| Modals | styles | Fix modal blur bug |
| Spinners | styles | Add spinners to the documentation |
| Variables List | documentation | Added Helper Classes for reference. |
| Navigation | documentation | You can join us on slack simply by clicking the "Join Us on Slack" link in the navigation. |
| Typography | documentation | Included font weight variables for styles as reference. |
| Inspiration | documentation | Added Mood Board to Inspirations section. |
| Typography | styles | Fixed Customer font stack. |
| Layout | styles | Added easy centering for column grid options. |
| Etrade Repo | styles | Fixed code element. |
| Layout | styles | Reverted container to use the same gutter throughout. |
| Form Elements | styles | Added Toggle element. |
| Segmented Progress | toolkit | Added partially filled segmented progress bar variation. |
| Typography | styles | Fixed Android headers font |
| Form Elements | styles | Fixed misaligned checkmark |
| Form Elements | styles | Fixed glitch in radio button |
| Typography | styles | Deprecating .text-light in favor of .text-muted |
| Etrade Repo | styles | Added <code> and <pre> elements styling |
| Color Scheme | styles | Chart color updates |
| Layout | documentation | Updated layout section |
| Color Scheme | documentation | Updated chart color section |
| Home | documentation | Updated home landing page |
| Home | documentation | Updated navigation structure |
| Typography | styles | Updated customer font stack |
| Invision Board | styles | Added toggles component |
| Layout | styles | Added sections |
| Form Elements | styles | Fixed label padding when using the .label class |
| Etrade Repo | styles | XEON setup guide has been updated in the README.MD file of the project |
| Etrade Repo | styles | Material Icon's font path is now respecting the $font-path variable |
| Layout | styles | Container on mobile now has a 20 pixel left and right padding. |
| Univresal Messaging | toolkit | Universal Messaging variation color update |
| Typography | toolkit | Green text helper class, .text-brand-green can be used. |
| Typography | toolkit | Updated font weights and a sizes for Prospect mobile type stack |
| Typography | toolkit | Updated font weights for Prospect desktop font stack |
| Typography | toolkit | Added extra-extra large type size for Prospect |
| Typography | toolkit | Upped size of large header to 32px |
| Typography | toolkit | Larger headers for Prospect now display in Extralight weight |
| Typography | toolkit | Prospect text can now appear on navy background as white |
| Typography | toolkit | Body and Subhead now have set back styles |
| Typography | styles | Strong tag now properly styles depending on font stack |
| Typography | styles | Prospect typography updated |
| Tabs | toolkit | Updated tabs |
| Tabs | styles | Nav tabs fixed in IE 11 |
| Segmented Progress | toolkit | Updated progress bar |
| Etrade Repo | styles | Added print media queries |
| Etrade Repo | styles | Removed thicker horizontal rule (deprecated, removing next release) |
| Form elements | styles | Checkbox and radio button animations |
| Etrade Repo | styles | Added Firefox media query mixin |
| Modals | styles | Modal now centers horizontally and vertically on breakpoints sm, md, and lg |
| Form Elements | styles | Select dropdown switched to an SVG image, now has a disabed arrow state |
| Typography | styles | Added Extralight font weight for prospect font stack |
| Typography | styles | Removed thin font weight from prospect font stack |
| Flyouts | styles | Added flyouts and popovers |
| Color Scheme | toolkit | Removed purple from charting colors |
| Buttons and Links | style | Remove background color from outline buttons |
| Universal Messaging | style | Universal messaging no longer requires a heading element |
| Typography | toolkit | Added mobile type styles for Prospect system |
| Spacing | toolkit | Added mobile spacing styles |
| Form Elemnts | toolkit | Documented inactive dropdown state |
| Iconography | toolkit | Added umbrella icon |
| Buttons and Links | toolkit | Removed visited link state |
| Form Elements | toolkit | Specified default bottom margins for form fields |
| Iconography | toolkit | Removed arrows from icons |
| Universal Message | toolkit | Added universal message with no headline |
| Invision Board | toolkit | Added horizontal rules |
| Tabs | toolkit | Added mobile tab convention (longer border below tabs) |
| Changelog | toolkit | Switched to dates for release naming convention |
| Iconography | styles | Iconography arrows removed |
| Iconography | styles | Iconography available in white (.et-inverse) |
| Typography | styles | iOS/Android fonts adjusted |
| Typography | styles | Subhead adjusted |
| Typography | styles | Customer fonts adjusted |
| Modals | styles | Modals |
| Buttons and Links | styles | Icon/link combination color adjusted |
| Form Elements | styles | Added label class for styling |
| Typography | styles | Fixed Android font weights |
| Spacing | styles | Added universal spacing to components |
| Buttons and Links | styles | Button when link fixes |
| Form elements | documentation | Form elements error field corrected |
| Buttons and Links | style | Remove background color from outline buttons |
| Universal Messaging | style | Universal messaging no longer requires a heading element |
| - | documentation | Added font switcher |
| Buttons and Links | documentation | Added text links. hover, visited, active |
| - | documentation | Updated the design styles |
| - | documentation | New navigation |
| Iconography | toolkit | Updated E*TRADE icons sizes |
| Spacing | toolkit | Clarified vertical spacing |
| Layout | toolkit | Corrected grid padding to reflect our design pattern |
| Form Elements | toolkit | Checkboxes have a focused state |
| Form Elements | toolkit | Textfields and dropdowns have a green focus state even when there is an error |
| Color Scheme | toolkit | Color variables have a few more minor changes |
| Buttons and Links | toolkit | Added back disabled link state |
| Form Elements | toolkit | added disabled selected checkbox state |
| Segmented Progress | toolkit | added progress bars |
| Typography | toolkit | Clarified font use |
| Typography | toolkit | Synchronized font stacks to have similar names across platforms |
| Form Elements | toolkit | Refined ghost text style, disabled style, border width on text fields |
| Layout | toolkit | Changed grid system to base 10 |
| Color Scheme | toolkit | Refined color system, removed some colors |
| - | toolkit | Added toggles |
| - | toolkit | Added mobile radio convention |
| Tabs | toolkit | Added tabs |
| - | toolkit | Added tables |
| - | toolkit | Added time toggle |
| Buttons and Links | toolkit | Refined disabled states for buttons |
| Form Elements | toolkit | Added correct disabled and disabled selected states for radio buttons |