Charles Schwab Design System

Overview

Charles Schwab's marketing surface is the rare brand in this directory that the deterministic extractor could not reach. Defended chrome. The site runs an aggressive bot-fight wall that intercepts headless-browser requests well before the marketing chrome renders, returning a Times-serif apology message on a near-white error page in its place. Where every other US bank in the directory (Chase, Capital One, Ally, Wells Fargo) extracts cleanly, Schwab's wall is uncommonly assertive — the captured screenshot is a single line of error text, and the structural extract is a single hex ({colors.ink} — #000000) at 10 captured occurrences, all on the error page. The brand voltage, typeface, and component dimensions are not directly observable through automated capture.

This file is therefore a scaffold rather than a deterministic capture. The token values declared in the frontmatter — Schwab Blue ({colors.primary} — #00a0df) as the documented brand voltage, the deeper navy {colors.primary-dark} as the secondary tier, the conservative ink-on-white structural tier — are drawn from publicly-documented Schwab brand identity (corporate materials, press kits, cached previews) rather than from a measured live capture. The frequencies, exact component dimensions, and the proprietary display sans Schwab ships externally are not represented here. The file is honest about the gap.

The chrome register is conservative wealth-management editorial. Where Capital One paints lifestyle photography under weight-300 display, and where Chase fills the hero band with saturated blue and stacks dense cash-bonus offer cards, Schwab's external brand identity carries calmer ink-on-white composition, smaller display tiers, and white-space-driven rhythm. The visual register communicates wealth-management gravitas — conservative for a generation of retired investors — rather than transactional consumer banking. The exact dimensions and rhythm patterns are not captured here.

Key Characteristics:

• Bot-fight wall blocked the deterministic extraction — the captured screenshot is a single-line authorization error page rather than the live marketing surface.
• The captured structural ink is {colors.ink} (#000000) at 10 occurrences (5 text, 5 border), all on the error page.
• The captured typography is Times serif at 16px / 400 — the browser default font on the error page, not a legitimate brand typeface choice.
• Documented Schwab Blue voltage ({colors.primary} — #00a0df) and deeper navy ({colors.primary-dark} — #0033a0) are drawn from public Schwab brand materials, not from the live page extraction.
• Conservative editorial register inferred from public Schwab brand identity — calmer than the transactional consumer-banking register Chase and Capital One ship.
• System-sans fallback typography in this scaffold — Schwab's actual marketing surface ships a proprietary sans for display tiers that is not captured here.
• 4-step radius scale (4 / 6 / 8 / 9999px) — conservative banking radius without committing to the pill-fintech convention or the sub-pill 2px banking-standard.
• This file is a starting point for AI tooling; a team building against the live Schwab marketing surface should re-run extraction after dismissing the bot-fight challenge.

Colors

Brand

• Schwab Blue ({colors.primary} — #00a0df): frequency not captured. The documented brand voltage from Schwab's external corporate brand identity — a deep saturated cyan that carries primary CTAs and link text on the live marketing surface. Not observable in the captured extraction because the extractor was blocked at the bot-fight wall.
• Schwab Navy ({colors.primary-dark} — #0033a0): frequency not captured. The deeper navy secondary voltage — carries secondary CTAs, active link states, and emphasis blocks on the live marketing surface. Inferred from public Schwab brand materials.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency not captured. The expected page floor — pure white. Inferred from the conservative wealth-management register Schwab ships externally.
• Surface-1 ({colors.surface-1} — #f5f5f5): frequency not captured. The expected off-white emphasis surface for feature cards and footer band. Inferred from Schwab's public brand materials.

Text

• Ink ({colors.ink} — #000000): frequency 10 — used as text (5), border (5). The single captured token from the extraction. All 10 occurrences appear on the bot-fight error page rather than on the live marketing surface. Pure black is also the expected dominant text color on the live page.
• Ink Soft ({colors.ink-soft} — #262626): frequency not captured. The expected secondary text color for body paragraphs, inferred from the conservative editorial register.
• Muted ({colors.muted} — #666666): frequency not captured. The expected tertiary text color for secondary nav labels and footer captions.

Hairline

• Hairline ({colors.hairline} — #e5e5e5): frequency not captured. The expected border tone for card outlines and the top-nav bottom rule. Inferred from the conservative chrome register.

Typography

Font Family

The captured extraction returned only Times serif at 16px / 400 — the browser default font rendered on the bot-fight error page. This is not a legitimate brand typeface choice; it is what the browser falls back to when the error page does not load a custom font.

Schwab's actual marketing surface ships a proprietary sans-serif display family alongside a system-sans body fallback. The display sans is not observable through the blocked extraction; this scaffold uses a system-ui fallback stack across every tier to document the typographic ladder Schwab's external brand identity carries.

Hierarchy

Principles

The captured page shows only the fallback-serif token in actual use — Times at 16px / 400 on the bot-fight error message. Every other token in the hierarchy is inferred from Schwab's external brand identity rather than measured from the live page.

The inferred display register sits at weight 700 — heavier than Capital One's editorial weight 300, in line with Chase's transactional weight 700. The conservative wealth-management positioning suggests display tiers stay below 48px on the live surface, with most marketing headlines landing in the 32-40px range rather than the 56px+ heroic tier some consumer brands ship.

Note on Font Substitutes

Without a captured proprietary font name to substitute against, the substitute question is open. Inter at weights 400 and 700, or Source Sans 3 at the same weights, are conservative open-source substitutes that fit the wealth-management register. The system-ui stack declared in this scaffold falls back to whatever the operating system ships — San Francisco on Apple, Segoe UI on Windows, Roboto on Android.

Layout

Spacing System

• Base unit: 8px (inferred from the conservative wealth-management register; not directly captured).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 64px.
• Section padding (vertical): the captured extraction shows only one spacing value at 16px (2 occurrences) and one at 8px (1 occurrence) — both from the bot-fight error page. The actual live rhythm is not captured.
• Card internal padding: the inferred value for a conservative wealth-management surface is 24-32px on feature cards.

Grid & Container

• Max content width: inferred at ~1200px on the editorial sections and ~720px on centered prose bands. Not directly captured.
• Hero block: inferred as an ink-on-white composition with a 48px h1 and a primary CTA below — without the saturated-blue hero band Chase ships or the lifestyle-photography hero band Capital One ships.
• Below-fold sections: inferred as a 3-up feature row with conservative ink-on-white cards, followed by editorial prose bands and a footer disclosure section.

Rhythm

The expected rhythm for a conservative wealth-management marketing surface is paragraph-led rather than CTA-led. Where Chase stacks dense offer cards with dollar-amount emphasis below the fold, Schwab's external brand identity carries longer-form editorial paragraphs aimed at higher-net-worth investors who want to read rather than to click. The exact band-by-band rhythm is not captured here.

Elevation

The expected elevation tier for a conservative wealth-management marketing surface is flat with hairline outlines. Schwab's external brand identity does not appear to use a layered-shadow elevation system; cards are expected to sit on the page floor with 1px {colors.hairline} borders doing the elevation work. The exact shadow values are not captured.

• Flat (no shadow): expected for all surfaces on the live marketing page.
• Hairline: {colors.hairline} (#e5e5e5) is expected to carry card outlines, input field borders, and the top-nav bottom rule.

Shapes

The expected radius scale is conservative banking: small-step rounding without committing to either the sub-pill 2px banking-standard or the fully-rounded pill-fintech convention.

• {rounded.none} 0px — section bands and full-bleed surfaces.
• {rounded.sm} 4px — text inputs and small chips.
• {rounded.md} 6px — primary buttons.
• {rounded.lg} 8px — cards and feature panels.
• {rounded.full} 9999px — circular avatars and icon containers.

The captured extraction returned zero radius values from the live page; this scale is inferred from Schwab's external brand identity. A live re-run after dismissing the bot-fight challenge would refine these values.

Components

hero-section — Inferred as a white {colors.canvas} canvas, ink text, no border-radius, 64×32px padding. Holds the inferred hero h1 at {typography.display-xl} (48px / 700) and a primary CTA. Without the saturated-blue hero band Chase ships.

hero-heading — Inferred as ink {colors.ink} text, 48px / 700. Not directly captured.

section-heading — Inferred as ink text, 32px / 700. Used for the below-fold section heads.

body-paragraph — Inferred as ink-soft {colors.ink-soft} running-text at {typography.body-lg} (18px / 400). The expected workhorse paragraph style on a wealth-management editorial surface.

body-paragraph-muted — Muted {colors.muted} variant for secondary copy and metadata.

button-primary — Inferred as Schwab Blue {colors.primary} fill, white text, {rounded.sm} 4px radius, 12×24px padding, 44px height. The expected canonical primary CTA.

button-secondary — Inferred as white fill, navy text, 1px navy border, 4px radius, 44px height. The expected canonical secondary CTA.

top-nav — Inferred as white {colors.canvas} surface, ink labels, 64px height, 1px bottom hairline. Carries the Schwab wordmark flush left and product links center.

nav-link — Inferred as transparent background, ink-soft text in {typography.body-md} (16px / 400), 8×12px padding.

card — Inferred as white fill, 1px hairline border, {rounded.lg} 8px radius, 24px internal padding. The expected default feature card.

surface-card — Inferred as {colors.surface-1} (#f5f5f5) fill, ink text, 8px radius, 32px padding. The expected emphasis surface.

text-input — Inferred as white fill, ink text, 1px hairline border, 4px radius, 10×12px padding, 44px height.

footer — Inferred as {colors.surface-1} canvas, muted caption text at 14px / 400, 48×32px padding.

Do's and Don'ts

Do treat this file as a starting scaffold rather than as a ground-truth specification. The bot-fight wall blocked the deterministic extraction; every value below the ink-on-white structural tier is inferred from public Schwab brand materials.

Do anchor the brand voltage on Schwab Blue ({colors.primary} — #00a0df) with the deeper navy ({colors.primary-dark} — #0033a0) as the secondary tier. Both are documented in Schwab's external corporate brand identity.

Do keep the editorial register conservative. Schwab's wealth-management positioning calls for longer-form paragraphs and calmer ink-on-white composition rather than the photographic-lifestyle hero bands Capital One and Chase ship.

Do re-run extraction against the live Schwab marketing surface before treating any token here as authoritative. The bot-fight wall is the dominant capture failure mode; a fresh capture after the wall is dismissed would refine every value in this file.

Don't treat the Times serif font ({typography.fallback-serif}) as a legitimate Schwab brand typeface. It is the browser default font that rendered on the bot-fight error page; the live marketing surface ships a proprietary sans display family that is not captured here.

Don't fill the hero band with saturated brand blue the way Chase does. Schwab's external brand identity holds the blue at moderate frequency on CTAs and links rather than as the canvas voltage Chase ships.

Don't stack dense dollar-amount offer cards below the fold the way Chase does. The wealth-management register calls for paragraph-led editorial content aimed at higher-net-worth investors, not transactional consumer-banking cash-bonus tiles.

Don't assume the frequencies, exact dimensions, or component proportions in this file match the live Schwab marketing surface. Every value below the captured structural ink at {colors.ink} is inferred rather than measured.

Known Gaps

• Bot-fight wall blocked the deterministic extraction. The captured page is a single-line Times-serif authorization error page rather than the live marketing surface. The structural extract is one hex ({colors.ink} — #000000) at 10 occurrences, all on the error page.
• Brand voltage frequencies not captured. Schwab Blue ({colors.primary} — #00a0df) and the deeper navy ({colors.primary-dark} — #0033a0) are documented from Schwab's external brand identity, not measured from the live page. The exact usage-count, text vs. border vs. background distribution is not represented.
• Proprietary display sans not captured. Schwab's actual marketing surface ships a custom sans-serif display family that is not observable through the blocked extraction. This scaffold uses a system-ui fallback stack across every tier.
• Component dimensions inferred, not measured. Every padding, height, border-radius, and font-size in the components map is inferred from Schwab's public brand identity and from the conservative wealth-management register. A live re-run after dismissing the bot-fight challenge would refine each value.
• Hover, focus, and error states not captured. None of the interactive state matrices are observable through the blocked extraction.
• Dark mode, motion, photography treatments not captured. Any visual treatments Schwab ships on the live surface (lifestyle imagery, animation easing, scroll-driven transitions) are not represented in this file.
• Recommendation for a team using this file. Re-run bun run design:extract after dismissing the Schwab bot-fight challenge (manually open the URL once, accept cookies, and capture the live page with --force or with a non-headless browser flag). The result will refine every token in this file from inferred to measured.