Antoine Quote Eames Quote Hoffmann Quote Lee Quote Mingus Quote

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.

Changelog

September 7th Release
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
August 31th Release
Bitbucket Repo styles Fixed postinstall in deploy process
August 24th Release
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
August 17th Release
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
July 20th Release
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
July 13th 2017
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
July 6th 2017
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
June 22nd Release
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]
June 15th Release
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
June 1st Release
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
May 25th 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
May 18th Release
Toasts styles Add toasts
May 11th Release
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
May 5th Release
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.
April 27th Release
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
April 6th Release
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.
March 30th Release
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
March 23rd Release
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
March 15th Release
Buttons and Links style Remove background color from outline buttons
Universal Messaging style Universal messaging no longer requires a heading element
February 14th Release
- documentation Added font switcher
Buttons and Links documentation Added text links. hover, visited, active
- documentation Updated the design styles
- documentation New navigation
February 7th Release
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
January 20th Release
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
January 1st Release
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