Discover Design System

Overview

Discover's marketing site spends two oranges where most card brands hold one in reserve. Two-orange voltage. The primary CTA — the Log In pill at the top-right of the nav, the Apply Now buttons scattered through the body, the View Card affordances — is rendered in saturated tangerine {colors.primary} (#ea6a28) at 20px radius. The wide rotating hero banner at the top of the page and the cashback-rewards illustration block mid-page use a warmer mustard-gold {colors.primary-accent} (#fcb116) as their background fill — same chromatic family, lower saturation, higher luminance. The split lets the page carry editorial warmth on its promotional bands while reserving the most saturated tone for the one decision the visitor should make. 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 without ever needing a third color.

Ink is navy-purple, not black. {colors.ink} (#23233f) carries 645 captured occurrences — 326 as text, 319 as border — making it the load-bearing structural color of the system. The slight chroma toward warm purple sits between a true neutral and a cool indigo; it gives the page warmth without competing with the orange voltage. Pure black ({colors.shadow} — #000000) shows up only twice in the captured page. This is the inverse of fintech-canonical text discipline at Stripe (which holds body text on a deep navy) and Square (which holds it on true black) — Discover lets the text itself carry chromatic warmth instead of relying on accent colors to add it back.

A secondary blue tier handles utility work. {colors.link-blue} (#2477ab) at 116 occurrences runs across the inline-link tier, the utility strip above the primary nav, and the footer category links — a cooler accent that signals "navigation" rather than "action." A deeper {colors.link-blue-deep} (#3057b9) appears as the hover state on inline links. The two blues stay out of the action tier; orange always wins for clickable CTAs.

Key Characteristics:

• Two-orange voltage — tangerine {colors.primary} carries CTAs and apply-now actions; mustard {colors.primary-accent} carries the rotating hero and cashback-rewards illustration. Action vs. ambient warmth.
• Navy-purple ink {colors.ink} (#23233f) at 645 occurrences carries every heading, body paragraph, and border on the page. Never pure black.
• DiscoverSans across every tier — display at 48px / weight 400, sub-section h3 at 19px / weight 700, body at 15px / weight 400. The weight split is the move.
• Generous radius scale — 20 / 25 / 80 / 135px, no small-step tier. The smallest rounded surface is the CTA pill at 20px.
• Secondary blue {colors.link-blue} (#2477ab) handles inline links, the utility strip above the primary nav, and the footer category labels — a navigation color, never an action color.
• 16 face DiscoverSans family wired into CSS as --DiscoverSans-Thin through --DiscoverSans-ExtraboldItalic — Discover ships a full optical-size foundry-style family.
• Source Sans 12.8px italic appears only inside the legal-disclaimer footnote — the one place the proprietary family is not used.
• 10px base spacing module with cluster at 8 / 13 / 18 / 24px and 25px on outer card padding.

Colors

Brand

• Tangerine Primary ({colors.primary} — #ea6a28): frequency 3. Used as background (2), border (1). The action voltage — fills the primary CTA pill (Log In, Apply Now, View Card), wired as the explicit backgroundColor on every primary button. The only saturated tangerine in the system; reserved for clickable CTAs.
• Mustard Accent ({colors.primary-accent} — #fcb116): frequency 4 as background. The ambient brand warmth — fills the wide rotating hero banner at the top of the page, the cashback-rewards illustration block mid-page, the credit-card calculator promotional band. Same chromatic family as the tangerine, lower saturation. Reserved for editorial backdrop, never for CTAs.

Link

• Link Blue ({colors.link-blue} — #2477ab): frequency 116 — 58 as text, 58 as border. The secondary blue tier — runs across inline links in body copy, the utility strip above the primary nav, the footer category labels. A cooler accent that signals navigation rather than action. The dominant link color in the system.
• Link Blue Deep ({colors.link-blue-deep} — #3057b9): frequency 4. The hover / press state on inline links — a step darker and slightly more saturated than the resting link blue.

Text

• Ink ({colors.ink} — #23233f): frequency 645 — 326 as text, 319 as border. The dominant structural color of the system. Navy-purple, not black — the slight chroma toward warm purple gives the page warmth without competing with the orange brand voltage. Carries every heading, body paragraph, and primary border on the page.
• Ink Secondary ({colors.ink-secondary} — #293033): frequency 4 — 2 as text, 2 as border. A second-tier neutral used for smaller utility text and disclaimer subheads — slightly darker, slightly less purple.
• Ink on Orange ({colors.ink-on-orange} — #ffffff): frequency 15. White text used on the tangerine CTA pill and on imagery overlays. The only place white appears as a text color in the captured page.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 15 — 10 as background, 3 as text, 2 as border. The body floor and card-tile fill. Pure white.
• Surface-1 ({colors.surface-1} — #f8f8f8): the very-pale neutral used for the utility strip above the primary nav, the legal-footnote band, and the footer canvas. Wired as a slight tint off the canvas so the utility strip reads as a separate band without forcing a border.
• Surface Divider ({colors.surface-divider} — #e9e9ec): frequency 2 as background. The mid-tone neutral used for section dividers and the FAQ-collapse interior fill.

Hairline

• Hairline ({colors.hairline} — #dbdbdb): frequency 1 as border. A pale neutral hairline used on card outlines. Far less dominant than the navy-purple ink, which carries most of the structural border work.

Shadow

• Shadow ({colors.shadow} — #000000): frequency 2 — 1 as text, 1 as border. Pure black appears only twice in the entire captured page, both as decorative micro-elements in illustration. The system does not use shadows for elevation.

Typography

Font Family

The system runs DiscoverSans for everything — a commissioned proprietary sans wired into 16 separate face files exposed as CSS variables (--DiscoverSans-Thin through --DiscoverSans-ExtraboldItalic, including italic variants for every weight). The family ships with foundry-style optical sizing: Thin, Light, Book, Medium, Semibold, Bold, Extrabold across both roman and italic, giving Discover a full editorial range. Fallbacks walk to sans-serif. Source Sans 12.8px italic appears only inside the legal-disclaimer footnote at the bottom of the page — the one place the proprietary family is not used.

Hierarchy

Principles

The weight system splits work between display and h3. Display sits at 48px in Semibold weight 400 — the editorial-magazine treatment with -0.40px tracking; sub-section h3s sit at 19px in Bold weight 700 — the dense-headline treatment that pulls the eye through a long-scroll page of feature blocks. Where Stripe holds every tier at weight 300 and Cloudflare holds at weight 500, Discover runs both — 400 on the loud display and 700 on the dense sub-section. The result reads more "consumer-finance editorial" than "fintech minimal."

Note on Font Substitutes

DiscoverSans is a commissioned proprietary family. Inter at the same weights is the closest open-source substitute; Source Sans 3 (already used in the legal footnote) is closer in feel and is the lighter cousin of the same humanist style. For the bold tier (h3s at weight 700), Inter Bold transfers cleanly. The weight split — display at 400, h3 at 700 — is the move to preserve regardless of which family you swap in.

Layout

Spacing System

• Base unit: 10px — the dominant gap module, with secondary clusters at 8 / 13 / 18 / 24px.
• Tokens: {spacing.xs} 8px · {spacing.sm} 9px · {spacing.base} 10px · {spacing.md} 13px · {spacing.lg} 18px · {spacing.xl} 20px · {spacing.2xl} 24px.
• Section padding (vertical): ~80px between major bands on the body; the rotating-hero and rewards-illustration blocks sit edge-to-edge with their orange fills.
• Card internal padding: {spacing.xl} (20px) for {component.card-tile}; {spacing.2xl} (24px) for {component.rewards-illustration} and {component.calculator-band}.
• Top-nav padding: {spacing.md} (13px) vertical, {spacing.lg} (18px) horizontal.

Grid & Container

• Max content width: ~1100px on display headlines and editorial blocks, ~1280px on the cashback-illustration and footer bands.
• Rotating hero: full-bleed mustard {colors.primary-accent} block with photographic content overlay; 24x20 padding, 20px outer radius.
• 3-up promotional row: three side-by-side card tiles (Find cash back rewards / Earn rewards on every purchase / Rates to fit your needs) on a white canvas, each at 25px radius.
• Rewards illustration: 2-column block pairing a 50/50 mustard fill on the left with a rendered Discover card floating over it on the right.
• Calculator promotional band: full-width mustard band reading "Credit Card Calculators" with a tangerine CTA pill centered beneath.
• Footer: 5-column site-map block with category headings in navy-purple and links in {colors.link-blue} on the {colors.surface-1} canvas.

Rhythm

The page alternates between promotional bands (full-bleed mustard with display copy) and editorial bands (white-canvas card grids with body copy). The rotating hero is promotional, the 3-up cashback row is editorial, the rewards illustration is promotional, the "Making Your Finances Work Harder" block is editorial, and so on. Mustard signals "promotional brand moment," white signals "editorial information." The page never lets two promotional bands stack — the editorial bands carry the visual breath.

Elevation

The system has essentially no shadow tier. Pure black {colors.shadow} (#000000) appears only twice in the entire captured page, both as decorative micro-elements in illustration rather than as ambient shadow ink. Depth comes from {colors.ink} (#23233f) 1px borders on card tiles (319 captured border occurrences) and from the surface-color contrast between {colors.canvas} (pure white) and {colors.surface-1} (#f8f8f8) on the utility strip and footer.

• Flat (no shadow): rotating hero, body bands, card tiles, calculator band, footer — 100% of surfaces.
• Card outline: {colors.ink} (#23233f) at 1px on card-tile borders carries the depth work.
• Surface contrast: the {colors.surface-1} (#f8f8f8) utility strip and footer canvas read as separate bands against the pure-white body without needing a border or shadow.

Shapes

The radius scale is generously rounded — the smallest surface is at 20px, and the system skips the 4–12px tier that most fintech brands use:

• {rounded.none} 0px — only on full-bleed editorial bands and image overlays.
• {rounded.md} 20px (2 occurrences) — the primary CTA pill {component.button-primary}. Fully rounded at the button height; reads as a soft-edge pill.
• {rounded.lg} 25px (4 occurrences) — card tiles, the cashback-rewards illustration block, the 3-up promotional row. The dominant card radius.
• {rounded.xl} 80px (1 occurrence) — the rotating-hero outer corner masking.
• {rounded.full} 135px (1 occurrence) — large promotional banner masking on the calculator-band illustration.

There is no 4 / 8 / 12px tier. The smallest rounded surface is 20px. The result is a friendly bank-app silhouette across every card and CTA — distinct from Stripe's 4px tight radius or Mastercard's 8px standard.

Components

button-primary — The signature CTA. Tangerine {colors.primary} fill, white text, {rounded.md} (20px), 9px padding, 38px height, weight 700. The Log In pill at the top-right of the nav and the Apply Now / View Card buttons throughout the body. The only saturated-tangerine background-fill instance in the system.

button-secondary — White canvas fill, {colors.link-blue} text, 1px link-blue border, {rounded.md} 20px radius. The "Learn more" / "Continue" alternative used inside cards.

utility-strip — Pale neutral {colors.surface-1} (#f8f8f8) fill, {colors.link-blue} text, 8x24 padding, 32px height. The thin utility band above the primary nav holding the customer-service phone, login, account-management links. Sits as a separate band against the white nav without needing a border.

top-nav — White {colors.canvas} surface, 60px height, navy-purple text. Discover wordmark flush left, primary nav links (Credit Cards / Banking / Loans / Investing / About) center, right-aligned Log In tangerine CTA. The wordmark is the only place the brand voltage appears as a background fill in the nav band.

nav-link — Transparent background, navy-purple text in {typography.body-xs} (13.125px / 400), 0x10 padding.

rotating-hero — Full-bleed mustard {colors.primary-accent} (#fcb116) block holding the rotating promotional carousel, 24x20 padding, 20px outer radius. Holds a display headline, lead paragraph, and centered CTA pill.

hero-heading — Navy-purple text on the white canvas, {typography.display-xl} (48px / 400, -0.40px tracking). The editorial-magazine display tier. Padding offset 0x0x0x10 — the headline indents 10px from the left grid line.

section-heading — Navy-purple text, {typography.heading-md} (24px / 400). The "How can we help?" / "We've got your financial needs covered" tier.

body-paragraph — Default navy-purple running text at {typography.body-md} (15px / 400).

rewards-illustration — Mustard {colors.primary-accent} fill, navy-purple text, {rounded.lg} 25px radius, 24px padding. The "Find great cash back rewards" block pairs a mustard fill on the left with a rendered Discover card on the right at 50/50.

calculator-band — Mustard fill, navy-purple text, edge-to-edge with no radius, 24px padding. The "Credit Card Calculators" promotional band — full-width canvas reading the headline above a tangerine CTA.

card-tile — White canvas fill, navy-purple text, 1px hairline {colors.hairline} border, {rounded.lg} 25px radius, 20px padding. The default content card used in the 3-up promotional row and footer feature cells.

feature-cell — White canvas, navy-purple text, 20px padding, no border. The 5-column footer feature row holds a small heading and 3-4 link rows per cell.

inline-link — Inline text in {colors.link-blue} (#2477ab) at {typography.body-md}. Links in body copy and FAQ entries. The link voltage; never tangerine.

legal-footnote — Pale neutral {colors.surface-1} fill, navy-purple text, {typography.legal-italic} (12.8px Source Sans Italic), 24px padding. The legal-disclaimer band at the bottom of the body, just above the footer. The one place the proprietary DiscoverSans family is not used.

footer — Pale neutral {colors.surface-1} (#f8f8f8) canvas, link-blue category labels, 24px padding. Multi-column site map with category headings in navy-purple and links in the secondary link-blue tier.

Do's and Don'ts

Do spend two oranges, not one. Reserve {colors.primary} (tangerine #ea6a28) for the CTA pill and {colors.primary-accent} (mustard #fcb116) for the rotating hero and cashback-illustration bands. Painting both surfaces in the saturated tangerine collapses the action-vs-ambient distinction the page depends on.

Do use {colors.ink} (#23233f) — never pure {colors.shadow} (#000000) — for body text and card borders. The navy-purple chroma adds warmth without competing with the orange voltage; pure black would read cold and would clash with the warm orange editorial bands.

Do keep card radius at {rounded.lg} (25px) or larger. The system is deliberately generous — even the smallest surface (the CTA pill) sits at 20px. Adding a 4–12px middle tier softens the friendly bank-app silhouette.

Do reserve {colors.link-blue} (#2477ab) for inline links, utility-strip text, and footer category labels — never for the primary CTA. The system splits the action voltage (tangerine) from the navigation voltage (link blue); using blue on a CTA breaks the cross-page convention.

Don't use {colors.primary-accent} (mustard #fcb116) as a button background. The mustard reads as ambient brand warmth, not as a clickable surface — the page consistently overlays a separate tangerine CTA on top of mustard fields rather than letting the mustard itself act as the affordance.

Don't introduce a small-step radius tier (4 / 8 / 12px). The system skips this entirely — the smallest rounded surface in the captured page is 20px. Dropping below would shift the silhouette from "consumer bank app" to "fintech tool" and break the visual rhythm of the page.

Don't render {typography.heading-sm} (h3 sub-sections) at weight 400. The weight split — display at 400, h3 at 700 — is the page's vertical-hierarchy device. Flattening the h3 to display weight loses the dense-headline pull that carries the long-scroll feature blocks.

Don't reach for pure white {colors.canvas} inside the legal-footnote band. The footnote sits on {colors.surface-1} (#f8f8f8) and is rendered in Source Sans Italic — the surface tint and italic typeface together signal "secondary editorial / legal context," and dropping the tint loses the band's affordance.

Known Gaps

• Hover and focus states: the captured page renders resting-state values only; focus rings, active press, and disabled tints on the primary CTA are not exposed in the marketing surface.
• Form input states: the page captures no form-input components — the apply-now flow lives behind the CTA and is not represented here. Discover ships full form chrome in the application portal that is not in scope.
• Dark mode: the marketing surface is light-only. No --theme-* dark variants are exposed in the captured CSS.
• Motion: the rotating-hero carousel animates on a timed loop; transition timing, easing, and stagger live in the runtime JavaScript and are not captured as CSS tokens.
• Product surfaces: this DESIGN.md captures the marketing site only. The Discover online-banking portal, the credit-card-account dashboard, and the loan-application flows carry their own token systems that are not represented here.
• Card-art catalog: the rotating-hero and rewards-illustration blocks render specific Discover card art (it gets it Card, Cashback Debit, Student Card, etc.) — the card-art SVG palette and styling are not included as tokens in this spec.
• Multi-italic legal tier: the captured page exposes only Source Sans 400 italic at 12.8px for legal copy, but the --Source-Sans-400-normal CSS variable is also declared — its roman variant is reserved for legal-copy roman text but doesn't render on the homepage.