What is Discover's primary brand color?

Discover runs two oranges rather than one. The primary CTA — Log In, Apply Now, View Card — fills with saturated tangerine #ea6a28 at 20px radius, white text inside. The wide rotating hero banner and the cashback-rewards block mid-page use a warmer mustard-gold #fcb116 as their background fill — same chromatic family, lower saturation, higher luminance. The split lets the page carry brand warmth on the editorial bands while reserving the most saturated tone for the one decision the visitor should make. The body sits on near-white #f8f8f8 with navy-purple #23233f ink — never pure black.

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

Discover's marketing site runs the proprietary DiscoverSans family across every display, heading, body, and button surface — the CSS exposes 16 separate face files spanning Thin, Light, Book, Medium, Semibold, Bold, Extrabold and their italic variants. Display headlines sit at 48px in Semibold weight 400 with -0.40px tracking; sub-section h3s at 19px in Bold weight 700; body at 15px in Semibold weight 400; nav and small labels at 13.125px / 400. Source-Sans-400-italic at 12.8px appears only inside the legal-disclaimer footnote at the bottom of the page. Inter at the same weights is the closest open-source substitute; the proportions transfer cleanly. The weight split — display at 400, h3 at 700 — is the move to preserve.

Why does Discover's text look navy-purple instead of black?

Discover's text color is a navy-purple #23233f wired across the page at 645 occurrences (326 as text, 319 as border) — the dominant ink tone in the system. It is not pure black (#000000 appears only twice in the captured page) and not a true gray; the slight chroma toward warm purple sits between #20203a and #25253f across renders. The choice carries warmth and trust without competing with the orange brand voltage; pure black would read colder and would clash with the warm-orange editorial bands. Wired alongside it: a secondary darker neutral #293033 at 4 occurrences for smaller utility text.

What corner-radius scale does Discover use?

The radius scale is unusually generous for a payments brand. 25px appears 4 times (cashback illustration block, promotional card surfaces). 20px appears twice — the primary CTA pill at 20px gives the button a fully-rounded soft-edge silhouette rather than the 4-8px tight radius that most fintech brands use. 80px and 135px appear once each on the rotating-hero corner masking and the calculator-band rounded panel. There is no small-step tier — the system skips 4 / 8 / 12px entirely, giving every surface a friendly bank-app silhouette. The smallest surface still starts at 20px.

Can I use this DESIGN.md to build my own US consumer-finance 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 Discover's specific moves: two-orange voltage split between action (tangerine) and ambient warmth (mustard), navy-purple ink rather than charcoal, DiscoverSans-equivalent typography at modest weights, fully-rounded 25px card chrome, and the secondary teal utility-strip pattern above the primary nav. 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 move worth borrowing only for friendly consumer brands: the willingness to spend brand color on a 25px-radius promotional band rather than holding it for the CTA — most B2B brands cannot afford that warmth without looking saccharine.

Discover Design System

Discover's marketing-site design system as a DESIGN.md file.

About Discover DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source discover.com

Banking & Payments

Discover's marketing site spends two oranges where most card brands hold one in reserve. The primary CTA pill — the Log In button at the top-right of the nav and the apply-now CTAs scattered through the page — is rendered in saturated tangerine #ea6a28; meanwhile the wide rotating hero banner sits on a warmer mustard-gold #fcb116, and the cashback-rewards illustration mid-page uses the same mustard tone as its background block with a rendered Discover card floating across it. The split is deliberate: the saturated tangerine carries actions, the warmer mustard carries ambient brand warmth. Where Chase paints its hero in cobalt and Capital One leans on red, Discover trusts the orange-family voice to do both the action work and the editorial backdrop work without ever needing a third color.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 10 color tokens drawn from the 14 raw values rendered on the captured page, organized into a brand-voltage tier (tangerine for actions, mustard for ambient warmth), a structural tier dominated by a single navy-purple ink #23233f at 645 occurrences that carries every heading, body paragraph, and border on the page, plus a secondary teal #2477ab that colors the utility strip above the primary nav; 14 typography tokens running DiscoverSans across every step — display at 48px / weight 400, sub-section headings at 19px / weight 700, body at 15px / weight 400 — with a brief Source Sans 12.8px italic appearance reserved for legal-disclaimer footnotes; a 4-step radius scale of 20 / 25 / 80 / 135px (no small-step tier — everything is generous); and 16 component definitions covering the tangerine CTA pill, the mustard rotating hero, the cashback illustration block, the credit-card-calculator promotional band, and the 5-column feature footer.

Feed this file to Claude or Cursor and it reproduces Discover's specific moves: two-orange voltage split between action and ambient, navy-purple ink instead of charcoal or pure black, DiscoverSans across every tier with bold-700 reserved for sub-section h3s only, fully-rounded card chrome at 25px (not 8 or 12), and a secondary teal utility strip above the primary nav. The one move worth borrowing for any consumer-finance brand: the willingness to spend the brand color on a 25px-radius promotional-band background rather than holding it back for the CTA — Discover gives the page chromatic warmth above the action, instead of saving every drop for the click target.

What makes it distinct

Two-orange voltagetangerine #ea6a28 carries the CTA pill while mustard-gold #fcb116 colors the rotating promotional hero and the cashback-card illustration, splitting orange between action and ambient warmth
Navy-purple ink as the canvas voiceDiscoverSans #23233f at 645 captured occurrences carries every heading, body paragraph, and border on the page; never pure black
DiscoverSans-Semibold across every tierdisplay at 48px / weight 400 lives next to bold-700 sub-section headlines, splitting display authority between size and weight
Fully-rounded card chrome25px corner radius (4 of 8 captured radii) gives every promotional tile and cashback illustration a friendly bank-app silhouette, never sharp
Top-strip teal #2477aba secondary blue that carries the help-and-account utility band above the primary nav, distinct from any of the orange or navy brand voltages

Live at discover.com

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

discover.com

Explore Discover

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.

Other

Specialty colors.

Discover design system FAQ

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

Discover — official site

Discover'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.