Fidelity Design System

Overview

Fidelity's captured marketing surface is not the homepage — it is the International Usage Agreement gate page that fidelity.com serves to non-US visitors before allowing access to the main site. Document authority: the page strips every decorative element and presents the brand through two typefaces, near-monochrome ink, and a two-column legal layout that signals institutional trust through document-design discipline rather than marketing surface investment. Unlike Barclays, which asserts presence through an 80px display headline on a photography hero, or Morgan Stanley, which holds its display in a semi-serif editorial font at measured weight, Fidelity's gate-layer asserts presence through density and informational clarity.

The chromatic vocabulary of the gate surface reduces to three signals. First, a green gradient banner — the Fidelity wordmark sits on a diagonal green sweep in the header; the gradient is the brand's primary voltage, the only chromatic surface on an otherwise ink-on-white page, but it does not resolve to a single hex in the extraction. Second, a steel blue (#0f57c2) at 6 occurrences as link text and borders — the interactive layer for the "I Accept" and "I Decline" action links. Third, everything else is pure black ink on white canvas. Where Barclays concentrates its brand blue into 37 CSS custom properties across every interactive surface, Fidelity's gate page uses hardcoded link-color defaults with no CSS custom-property architecture at all.

Typography runs in two strict voices. Cambria (falling back to Georgia) carries the legal prose at 15px / weight 400 — a deliberate serif choice that signals regulatory-grade document legibility. Arial (Helvetica fallback) carries the heading, navigation labels, and the "I Accept" / "I Decline" action links at 11-32px. No CSS variables, no design-token system — this is direct-hardcoded institutional document design from Fidelity's pre-design-system era.

Key Characteristics:

• Near-monochrome palette — ink black (#000000) as the structural dominant; no chromatic fills beyond the header gradient and 6 blue link occurrences.
• Two-typeface split — Cambria/Georgia serif for prose, Arial/Helvetica sans for labels and navigation.
• No CSS custom properties — the gate page exposes no token-based theming; all values are hardcoded.
• Zero border-radius — every element renders with square corners; no rounded surfaces captured.
• Green gradient header bar — the Fidelity wordmark floats over the brand's primary voltage, a diagonal green sweep not resolved to a single extractable hex.
• Two-column gate layout — legal prose (left, ~727px) + brand statement (right, ~200px) separated by a hairline.
• Steel blue (#0f57c2) as the interactive layer — link text and borders for the "I Accept" / "I Decline" actions only.
• No shadow tier — flat document with hairline borders only.

Colors

Ink

• Ink ({colors.ink} — #000000): frequency 53. Used as text (28), border (25). The page's structural dominant — heading text, body prose headings, form labels, and all borders. Near-monochrome pages in the pre-CSS-variables era default to this value for almost everything non-interactive.
• Ink Muted ({colors.ink-muted} — #666666): frequency 10. Used as text (5), border (5). The secondary body copy tone — used on the cookie-notice paragraph and smaller footnote rows.

Interactive

• Primary ({colors.primary} — #0f57c2): frequency 6. Used as text (3), border (3). The interactive layer — the "I Accept" and "I Decline" link labels, styled in steel blue as conventional hyperlinks. The only chromatic surface on the page outside the header gradient.

Canvas

• Canvas ({colors.canvas} — #ffffff): frequency 1, background only. The page floor for the legal content area and the right-column logo panel.
• Surface-1 ({colors.surface-1} — #eeeeee): frequency 1, background only. Used as the background for the cookie-notice strip below the main content — the single tonal surface variation on the page.

Typography

Font Families

The system runs Cambria / Georgia serif for legal and editorial prose and Arial / Helvetica sans-serif for navigation, headings, and labels. The division is absolute and role-based: legal copy is always serif; wayfinding and action text is always sans. This two-family pattern was the dominant convention for financial-institution document design through the 2000s and 2010s; it remains on the gate page as a stable, browser-safe type system that does not require font-loading infrastructure.

Hierarchy

Principles

The h1 at 32.5px / weight 400 is a functional heading — not a brand headline. Weight 400 at this size says "section label" rather than "editorial statement." The choice makes sense for a gate page where the reader needs to find and process the legal text quickly, not be impressed by the brand voice. The bold weight (700) appears only on the action labels ("I Accept," "I Decline") — the only typographic moment that carries interactive urgency.

Note on Font Substitutes

Both Cambria and Arial are system-level fonts available on Windows and macOS without loading. Cambria is a Windows-native serif with excellent screen legibility at small sizes. For a current open-source replacement, Georgia is the direct fallback already in the stack; Lora or Merriweather are open-source alternatives for the serif prose voice. For Arial, Inter is the standard sans-serif substitute.

Layout

Spacing System

• Base unit: approximately 8-10px — the smallest padding values applied to content insets and form rows.
• Tokens: {spacing.xs} 5px · {spacing.sm} 8px · {spacing.base} 10px · {spacing.md} 15px · {spacing.lg} 21px · {spacing.xl} 45px.
• Content inset: the h1 heading carries a 12px bottom padding and 7px left inset, placing it slightly inside the left content column.
• Cookie notice: 15×10px top and bottom padding, 8px left inset.
• Vertical rhythm: no declared section padding; the layout is document-flow with natural paragraph spacing driven by the serif body's 21px line height.

Grid & Container

• Max content width: approximately 960px for the two-column layout; the left column is ~727px, the right column is ~200px.
• Two-column structure: the left column holds the legal prose and action links; the right column holds the Fidelity Investments logo mark and the brand description paragraph.
• Header: full-width green gradient bar at approximately 50px height carrying the Fidelity wordmark in white Fidelity-brand lettering.
• Footer: full-width strip with copyright ("© 1998 – 2024 FMR LLC. All rights reserved.") right-aligned in Arial 11px, plus a "Feedback" sidebar tab floating at the right edge of the viewport.

Rhythm

The page has a single reading tempo — document linear, top to bottom. There are no visual bands or section breaks beyond the horizontal hairlines separating the header, two-column content, cookie notice, and footer. The rhythm is dictated by the prose itself rather than by layout geometry.

Elevation

The page has no shadow tier and no elevation signals beyond the 1px black border separating the two-column content area from the surrounding white canvas. The cookie notice strip uses the surface-1 gray (#eeeeee) fill as a tonal lift — the only depth signal on the page.

The header green gradient is the single surface that carries visual weight; its diagonal sweep reads as depth-by-color rather than depth-by-elevation.

Shapes

The radius scale is zero-only. No border-radius values were captured in the extraction — every surface (the content box, the action links, the cookie notice) renders with square corners. This is consistent with browser-default rendering for un-styled block elements: Fidelity's gate page applies minimal CSS and lets the browser's default document layout handle the visual structure.

• {rounded.none} 0px — all surfaces, all elements.

Components

button-primary — Rendered as an unstyled anchor link in steel blue ({colors.primary}) at 18px / weight 700. "I Accept" is the primary action. No fill, no border-radius, no explicit padding — the link reads as a conventional browser hyperlink elevated to heading size.

button-secondary — "I Decline" — same rendering as the primary link. The two actions are visually equivalent; their distinction is semantic only.

top-nav — The green gradient header bar, approximately 50px tall. The Fidelity wordmark sits white on the gradient. The visual entry point to the brand.

nav-link — The Fidelity.com text link in the header if present; uses white text on the green surface.

hero-heading — The h1 "Fidelity International Usage Agreement" — Helvetica/Arial 32.5px / weight 400, 35px line height, 12px bottom padding, 7px left inset. Ink black on white.

body-paragraph — The legal agreement prose — Cambria 15px / weight 400, 21px line height. The dominant typographic mass on the page, running approximately 250 words.

body-paragraph-muted — The cookie notice text — Arial 11px / weight 400, medium gray (#666666). Below the action links in a light gray strip.

card — The two-column content box outlined by a hairline black border. No radius, no surface fill — a pure document container.

link-text — Steel blue (#0f57c2) inline links for the "I Accept" and "I Decline" action headings.

section-divider — The light gray (#eeeeee) cookie-notice strip — 15×10px padding, ink-muted text, Arial 11px.

logo-mark — The Fidelity Investments eagle logo and wordmark in the right column, accompanied by the brand description paragraph in Arial at approximately 14px.

footer — White canvas, ink-muted copyright text right-aligned, Arial 11px / weight 400.

Do's and Don'ts

Do use Cambria (or Georgia as a fallback) for legal, regulatory, and compliance prose. The serif body at 15px gives financial-document density legitimacy — sans-serif at the same size reads as a tech product, not a financial institution.

Do keep the action links ("I Accept," "I Decline") visually equivalent — no fill hierarchy between them. The gate-page pattern treats the two actions as a balanced choice rather than a primary/secondary CTA split, which is the correct framing for a consent gate.

Do treat the green gradient header as the brand's primary chromatic moment. On the gate page it is the only chromatic surface; any competing fill color elsewhere would dilute the brand signal.

Don't add border-radius to the content containers. The square geometry of the document layout is the gate page's institutional signal — rounded cards would import product-UI vocabulary into a regulatory-document context.

Don't render the prose heading ("Fidelity International Usage Agreement") at weight 700. The 32px h1 at weight 400 signals a functional section label, not a marketing headline — bumping to 700 creates a false sense of brand emphasis in a legal-document context.

Don't introduce a CSS custom-property architecture based on this extraction alone. The gate page has no token system — inferring a full design-token architecture from 5 color values and 7 typography signatures would over-extrapolate from a minimal utility page into a false system specification.

Don't assume this palette represents Fidelity's full brand. Steel blue (#0f57c2) here is the browser-default hyperlink blue applied to anchor elements, not a deliberately chosen brand interactive accent. The full Fidelity.com system uses green as its primary voltage — none of the green gradient infrastructure resolved to a hex in this extraction.

Known Gaps

• Gate-page limitation: the entire extraction represents the International Usage Agreement interstitial, not Fidelity's marketing homepage or product surfaces. The authenticated homepage, investment research tools, account management dashboard, and product marketing pages run a substantially different and richer design system.
• Green brand color: the Fidelity green gradient header bar — the brand's primary chromatic voltage — did not resolve to a single hex in the color extraction. The gradient is likely rendered as background: linear-gradient(...) with multiple stops that the extractor's single-hex clustering cannot capture.
• No CSS custom properties: the gate page uses hardcoded values with no CSS variable infrastructure. Fidelity's main site and authenticated product surfaces likely use a token-based theming system, but it is not visible from the gate layer.
• Navigation system: the primary Fidelity.com navigation (Research / Planning / Customer Service / Open an Account) is not present on the gate page. All navigation tokens here are inferred from the minimal header.
• Interactive states: no hover, focus, or active states were captured for the action links. The full main-site interactive layer is absent.
• Responsive behavior: no responsive breakpoint tokens were extracted; the gate page appears to use a fixed-width layout targeting desktop only.
• Brand font: the Fidelity Investments wordmark uses what appears to be a proprietary brand typeface in the header bar, but this did not appear as a loaded web font in the extraction — it may be rendered as an SVG or image asset.