What is Ally's primary brand color?

Ally runs a two-tier purple voltage. The primary CTA fill is saturated purple #852ef2 — a high-chroma violet (oklch lightness 54, chroma 0.26) that appears as the Open Account button fill and as a structural accent. The deeper text-color plum #954293 (lightness 52, chroma 0.15) carries 87 occurrences across the captured page — 42 as text, 43 as border, 2 as background — and sits behind the dark-purple feature panel that runs near the bottom of the page. The two purples are functionally different: the saturated one is the action signal, the deeper plum is the structural-type signal. Together they replace what traditional US banks would render in two shades of blue.

What typeface does Ally use, and what should I use as a substitute?

Ally runs TruthSans for every spoken surface — wired in CSS as --truth-sans = TruthSans, arial, helvetica, sans-serif. The system tops out at 80px / 700 on the hero h1 (Spend on Tacos. Save for Tulum.), drops to 40px / 700 on the deep-plum panel headline (You've got an Ally in every corner), 30px / 700 on section h2, 24px / 700 on h3, and runs body at 16px / 400. Weights 400 and 700 are dominant; weight 600 appears on emphasis spans and primary CTA labels. A small amount of Poppins shows up in legal-copy fallback. The closest open-source substitute for TruthSans is Inter at the same weights; the proportions transfer cleanly and Inter's slightly looser counters read close to TruthSans at the body sizes.

Why does Ally use purple instead of the traditional banking blue?

The purple choice is positional. Chase, Bank of America, Citi, Capital One, and US Bank all run variations of blue as their primary brand color — the convention is so universal it has become invisible. Ally's purple #852ef2 reads instantly as not-a-traditional-bank, which aligns with the brand's online-only, no-physical-branch positioning. The deeper plum #954293 carries the editorial type and the feature-panel surface, so the system has chromatic depth even though it stays inside a single hue family. The result is a banking site that reads more like a contemporary fintech (Robinhood, SoFi) than like a heritage commercial bank.

What corner-radius scale does Ally use?

The scale steps cleanly through 8 / 16 / 20 / 24 / 40px with no fully-rounded pill at the top. The dominant value is 24px (10 captured occurrences) — every CTA, every segmented-control tab, and every photo-tile container uses 24px corners. Larger cards step up to 40px on the bottom CTA panel; smaller chips drop to 8px on the secondary surfaces. There is no 9999px pill anywhere on the marketing surface, which differentiates Ally from neobanks (Monzo, Nubank, Revolut) whose primary CTAs are fully rounded. The 24px-on-CTA choice reads as deliberately sub-pill — softer than a typical 8px banking radius but stopping short of the neobank pill convention.

Can I use this DESIGN.md to build my own online-bank 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 Ally's specific moves: two-tier purple voltage instead of banking blue, photography-led hero with 80px TruthSans display in weight 700, deep-plum feature panels with white headings, 24px-rounded CTA geometry, and the editorial photo-tile grid. The tokens resolve cleanly — every hex and font name in the file matches the live CSS Ally ships. One caveat: the 80px hero display only works on full-bleed photography; without a lifestyle photograph behind it, the type weight reads as shouting and the system loses its editorial tone.

Ally Design System

Ally Bank's marketing system as a DESIGN.md file.

About Ally DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source ally.com

Banking & Payments
Fintech & Crypto

Ally's marketing site refuses the trust-blue convention every traditional US bank runs (Chase navy, Bank of America blue, Wells Fargo red-on-cream) and commits instead to a two-tier purple voltage. The primary CTA fill is saturated purple #852ef2 — a high-chroma violet that reads more like a tech-brand accent than a banking color. The text-color voltage is a deeper plum #954293, which carries 87 captured occurrences as text and border across feature panels and the deep-purple co-brand band at the bottom of the page. The two purples sit at different roles: the saturated one fills CTAs and feature accents, the deeper plum carries longer-form structural type and the dark band. Together they replace what most banks would do with one or two shades of blue.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 11 color tokens drawn from the two-tier purple voltage, the structural ink-on-canvas tier, and the dark-plum feature-panel surface; 14 typography tokens running TruthSans at 80, 40, 30, 24, 16, and 14px in weights 400, 600, and 700 (the system has no third typeface beyond an occasional Poppins fallback in legal copy); 5 radius tokens centered on a 24px CTA radius with no fully-rounded pill at the top; an 8px base spacing scale; and 16 component definitions covering the purple CTA pill, the dark-plum feature panel, the photographic hero, the segmented account-type control, the editorial photo-tile grid, and the bottom co-brand CTA panel.

Feed this file to Claude or Cursor and it reproduces Ally's specific moves: two-tier purple voltage instead of banking blue, photography-led hero with 80px TruthSans display in weight 700, deep-plum feature panels that flip contrast to white-on-purple, 24px-rounded CTA geometry without escalating to a pill, and the editorial photo-tile grid below the fold. The one move worth borrowing only if you have an actual co-brand partnership: the dark-plum CTA panel that pairs your wordmark with a partner's wordmark inline. Ally's "Tonal x Ally" treatment is the page's most distinctive structural device.

What makes it distinct

Two-tier purple voltage#852ef2 for primary CTAs, #954293 as a deeper plum that carries 87 occurrences as text and border across feature panels
Departs from banking blueAlly rejects the trust-blue convention every traditional bank runs and commits to a saturated purple as the brand voltage
Photography-led hero with 80px displayTruthSans at weight 700 on a full-bleed lifestyle photograph (a woman eating tacos), white type, purple pill CTA
Tonal-partnership CTA panela deep-purple band at the bottom pairs the Ally logo with a third-party (Tonal) wordmark inline as a co-brand statement
24px rounded geometryevery CTA and segmented control sits at 24px rounding, sub-pill on a scale that runs 8 / 16 / 20 / 24 / 40px with no fully-rounded pill

Live at ally.com

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

ally.com

Explore Ally

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.

Ally design system FAQ

Common questions about Ally'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.

Ally — official site

Ally Bank'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.