Wealthfront Design System

Wealthfront's marketing site does something most US robo-advisors avoid: it commits to a deep night-violet voltage instead of the fintech-green or cool-blue that Betterment, Robinhood, SoFi, and Chime all reach for. The above-fold is a 32px-rounded card carrying a violet-to-night gradient — deep night #230b59 at the lower-left through saturated indigo #4840bb in the upper-right — with a 62px Calibre weight-700 headline "Earn up to 4.20% APY" in near-white, three bullet rows beneath, a single indigo CTA pill labeled "Get started", and a phone mockup tilted at 12 degrees on the right showing the Wealthfront iOS dashboard. The card floats inside the page rather than running full-bleed; cream is visible at the edges, and the violet gradient reads as a panel rather than as the page canvas itself.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 12 color tokens drawn from a 200+ CSS custom-property system wired with `--tk-*` design-token prefixes, organized around the violet voltage `#4840bb` (`--tk-content-interactive-default`), the night-base `#230b59` (`--tk-night-start`), the near-black ink `#18172b` (`--tk-content-primary`), the soft hairline `#e5e7eb` (`--tk-content-divider`), and a small set of chart-categorical accents reserved for the financial diagrams. 14 typography tokens cover Calibre at 11px through 62px in weights 400–700; an uppercase eyebrow tier at 11px / 500 / 0.55px tracking sits above every section heading. A radius scale of 6 / 8 / 16 / 9999px. 16 components covering the gradient hero card, the saturated indigo CTA pill, the cream feature panels, the phone-mockup frame, the underlined nav-link cluster, and the data-table row.

Feed this file to Claude or Cursor and it reproduces Wealthfront's specific moves: a 32px-rounded gradient hero card instead of a flat full-bleed surface, deep night-violet instead of fintech-green or cool-blue, Calibre across every tier from 11px eyebrow up to 62px hero, hairline-everything chrome with a single `#e5e7eb` border tone, and tilted-charcoal phone mockups for every product surface. The token references resolve cleanly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The one move worth borrowing only if your fintech wants to break category convention: the willingness to skip green entirely and commit to a violet voltage that signals trust through tonal depth rather than through the predictable financial-product chromatic vocabulary.