What is E*TRADE's primary brand color?

E*TRADE's brand voltage is electric violet — hex 5627d8 — wired into CSS as the variable family --color-interactive-primary-default, --color-status-info-branded, --color-border-window-active, and --temp-legacy-snackbar-btn-border. The voltage appears 71 times in the captured page (33 as text, 31 as border, 7 as background) and carries the primary CTA, the info-status badges, the active-window border ring, and the accent strokes on dark-band cards. The deep indigo near-black hex 241056 carries the hero canvas, the top-nav background, and the testimonial band — wired as --color-background-hero and --color-background-primary-navigation. A lighter violet hex 6e3df5 appears 74 times but only as secondary border and accent text.

What typeface does E*TRADE use, and what should I use as a substitute?

E*TRADE's marketing site runs GraphikETRADE — a licensed cut of Commercial Type's Graphik, customized for the brand. Fallbacks walk Helvetica Neue, Helvetica, Arial, sans-serif. Display sits at 48-64px in weight 600 with -1px tracking on the hero h1; section h2 at 36px / 600 with -0.4px; body at 12-16px in weight 400 with -0.21px tracking, with weight 500 reserved for nav and button labels. The closest open-source substitute is Inter at the same weights, though Graphik's slightly narrower x-height and tighter aperture make Inter feel marginally wider at 13-14px body. For the 64px display tier, General Sans is closer in proportion.

Why does E*TRADE pair violet with indigo instead of standard fintech navy?

The violet-indigo pairing is the Morgan Stanley-era brand evolution. After Morgan Stanley acquired E*TRADE in 2020, the brand identity shifted from the legacy green-and-purple to a violet-forward palette that signals continuity with Morgan Stanley's purple-blue heritage while keeping E*TRADE's distinctive chromatic position. The deep indigo hex 241056 reads as luxury-finance rather than discount-broker, and the electric violet hex 5627d8 holds the brand's tech-forward voice. Schwab and Fidelity both anchor on corporate navy; Robinhood anchors on matte black. The violet-indigo pairing is unique among major US brokerages and reads as deliberate category positioning.

What corner-radius scale does E*TRADE use?

The radius scale is multi-tier: 16px dominates the system with 20 occurrences on cards and editorial tiles; 2px is reserved for the primary CTA pill (with 8 occurrences elsewhere on small chips and inputs); 30px appears 5 times on pricing-emphasis pills; 8px on icon buttons; 40px on the rare large rounded card; and 9999px on a single status badge. The tight 2px CTA radius is the unusual move — most fintech systems use 8-16px rounding on primary buttons. The 2px reads as broker-statement chrome, closer to a Bloomberg terminal than to a SaaS marketing page.

Can I use this DESIGN.md to build my own broker marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce E*TRADE's specific moves: electric violet voltage on a deep indigo hero canvas, GraphikETRADE display at weight 600 with -1px tracking, the 2px tight CTA radius against 16px-dominant body radius, and the alternating dark-light editorial banding. You can also reference the tokens directly — every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the Campfire design-system token set ships 36 categorical chart accents that the marketing surface never renders. If you fork the tokens, prune them — those accents belong to the trading dashboard.

E*TRADE Design System

E*TRADE's marketing system as a DESIGN.md file — electric violet voltage on deep indigo, GraphikETRADE display at weight 600, and a 16px-dominant radius scale.

About E*TRADE DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source us.etrade.com

Fintech & Crypto
Banking & Payments

E*TRADE's marketing site sits in an unusual chromatic neighborhood for a broker. The brand voltage is electric violet — hex 5627d8 — wired into CSS as `--color-interactive-primary-default`, `--color-status-info-branded`, and `--color-border-window-active`, appearing 71 times in the captured page across the primary CTA, info-status badges, and accent borders. The above-fold hero canvas is a deep indigo near-black (hex 241056, wired as `--color-background-hero` and `--color-background-primary-navigation`), with a photographic hero ("Meet the IPO moment") showing a trader's silhouette at a multi-monitor setup. Where Vanguard fills its hero with a saturated crimson, Schwab leans on corporate navy, and Robinhood goes matte black with a green-orange split, E*TRADE picks a chromatic position that reads as "broker-fintech with a violet edge" — closer to the Morgan Stanley parent brand than to a discount-broker peer.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 18 color tokens drawn from a Campfire design-system token set, organized into a brand-voltage tier (violet primary, violet hover, secondary cyan), a structural near-black indigo for hero surfaces, a structural ink-and-grayscale tier for editorial chrome, plus a separate categorical chart palette that ships 36 declared accents but renders zero of them on the marketing surface. 11 typography tokens span GraphikETRADE in display, heading, body, and button tiers, with a Material Icons mono companion for iconography labels. 18 components cover the violet primary CTA, the dark-band testimonial card, the white pricing strip with weight-600 numerals, the awards-and-recognition footer row, and the indigo top-nav with white wordmark.

Feed this file to Claude or Cursor and it will reproduce E*TRADE's specific moves: electric violet voltage on a deep indigo hero canvas, GraphikETRADE display at weight 600 with -1px tracking, the 2px tight CTA radius against a 16px-dominant body radius, and the alternating dark-light editorial banding. The one thing worth borrowing carefully: the proprietary Campfire token set ships an enormous categorical chart palette wired to CSS custom properties, but the marketing chrome only renders the four brand-tier values. If you fork the tokens, prune the categorical accents — they belong to the dashboard product, not the marketing surface.

What makes it distinct

Electric violet voltagehex 5627d8 carries the primary CTA, info-status badges, and accent borders across the page, with deep indigo near-black at hex 241056 doing the hero-canvas work
GraphikETRADE proprietary sansdisplay sits at 48-64px in weight 600 with -1px tracking, body at 12-16px in weight 400 with -0.21px tracking
Tight 2px CTA radiusthe primary button breaks the system's 16px-dominant rounding with a deliberately small-step corner that reads as broker-form chrome
Banded editorial rhythmdark indigo hero, white pricing strip, dark testimonial band, white awards row, alternating chromatic statements rather than gradient atmosphere
Categorical chart palette36 declared categorical color tokens cover the dashboard chart family but never bleed into marketing chrome

Live at us.etrade.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

us.etrade.com

Explore E*TRADE

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

E*TRADE design system FAQ

Common questions about E*TRADE's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

E*TRADE — official site

E*TRADE's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.