What is Fidelity's primary brand color?

Fidelity's public brand identity uses green as its primary voltage — the iconic green gradient header bar on fidelity.com and the green in the Fidelity Investments logo. However, the extraction landing on the International Usage Agreement gate page did not resolve the gradient to a single hex; the green bar appears as a diagonal CSS gradient not captured in the color-clustering output. The only chromatic token extracted from the page surface is steel blue (#0f57c2), which appears as link text and borders (6 total occurrences) for the 'I Accept' and 'I Decline' interactive links. Fidelity's full website, if extracted from the authenticated marketing homepage, would likely surface a green primary (estimated Pantone 355 range) and a richer interactive blue system.

What typefaces does Fidelity use on the captured surface?

The gate page runs two typefaces in strict content-layer division. Cambria (falling back to Georgia serif) carries all legal and editorial prose at 15px / weight 400 with natural line-height — a traditional serif choice for dense regulatory text that maximizes readability at small sizes. Arial (falling back to Helvetica) carries navigation labels, the page h1 heading, and button-style links at 11-32px. The h1 'Fidelity International Usage Agreement' runs in Helvetica/Arial at 32.5px / weight 400 with a 35px line height — notably at weight 400, not 700, signaling a functional heading rather than a brand headline. The Fidelity wordmark in the header bar uses what appears to be the proprietary Fidelity font from the logo asset, not a web-loaded typeface.

What is the layout of the Fidelity gate page?

The gate page uses a two-column layout: a wide left column (~727px) carrying the legal agreement prose and the 'I Decline' / 'I Accept' action links, and a narrower right column (~200px) carrying the Fidelity Investments logo mark and a brief company description in Arial. The columns are separated by a hairline rule. The Fidelity wordmark header sits above both columns in a full-width green gradient bar approximately 50px tall. Below the two columns, a footer row carries a cookie notice in Arial 11px and a version number (1146792.1.0). The page is a pure document layout — no sticky nav, no hero imagery, no carousel.

Why did the extraction land on a usage agreement page instead of the Fidelity homepage?

Fidelity.com serves the International Usage Agreement interstitial to non-US IP addresses before allowing access to the main site. The extraction ran from a server outside the United States, triggering the geographic gate. The gate page is specifically designed to block access to the main marketing experience until the agreement is acknowledged — clicking 'I Accept' would redirect to fidelity.com's actual homepage with its full design system. This DESIGN.md therefore captures Fidelity's minimum brand expression — the gate layer — rather than the full marketing system. The Known Gaps section documents what is absent.

Can I use this DESIGN.md to build a fintech or investment management interface?

This file is useful as a signal of Fidelity's brand floor — the foundational document-design layer the brand uses when stripping everything back to regulatory-grade communication. The two-typeface split (Cambria serif for prose, Arial for labels) and the near-monochrome palette with a single blue link accent are transferable patterns for any context where institutional legibility matters more than visual distinction. However, for a full Fidelity-styled marketing interface, this file is incomplete — the green primary, the navigation chrome, the product cards, and the data-visualization surfaces are all outside the gate-page capture. Use the token values here as a floor and supplement with brand-guide research for the full system.

Fidelity Design System

Fidelity Investments' design system as DESIGN.md — extracted from the public marketing gate page.

About Fidelity DESIGN.md

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

Banking & Payments
Fintech & Crypto

Fidelity's captured public URL resolves to the International Usage Agreement gate page — an interstitial that greets non-US visitors before the main Fidelity.com experience. What it reveals is the brand's utility layer stripped of marketing chrome: a two-column layout with Cambria serif prose on the left (the legal agreement text), the Fidelity Investments logo and a brief company description in Arial on the right, and a green gradient header bar carrying the Fidelity wordmark in white. The page has no CSS custom properties, no JavaScript-driven components, and no decorative surface fills — it is institutional document design from an era when that was the highest-signal approach for a financial firm communicating across regulatory jurisdictions. Where Barclays and Morgan Stanley both deploy large-format photography and brand-voltage color to assert presence, Fidelity's gate page asserts presence through text density and the absence of distraction.

The DESIGN.md file packages the system elements observable from this surface. Inside: 5 color tokens covering ink black, mid gray, steel blue for link text, white canvas, and a light gray form surface. Seven typography tokens map Cambria/Georgia at 15px and Helvetica/Arial at 11-32px across body, heading, navigation, and label roles. No border-radius values were captured on the gate surface — every element renders with square corners. The green gradient header bar, visible in the screenshot as a diagonal green sweep behind the Fidelity wordmark, does not resolve to a single hex in the extraction; it is rendered as a CSS gradient not captured in the color-clustering output. Six spacing tokens reflect the page's modest internal padding.

Feed this file to Claude or Cursor to reproduce the Fidelity gate-page aesthetic: serif prose in Cambria for legal and editorial copy, Arial for navigation labels and headings, pure ink-on-white with a single blue link accent, and zero decorative surface treatments. One important caveat: this DESIGN.md represents the gate page only. The full Fidelity.com authenticated experience, including the investment dashboard, research tools, and account management surfaces, runs a substantially richer design system that this page does not expose. Treat these tokens as a signal of Fidelity's brand floor — the minimum expression — rather than a complete surface specification.

What makes it distinct

Serif-for-prose, sans-for-labelsCambria/Georgia runs legal and editorial copy; Arial/Helvetica carries navigation and headings
Near-monochrome paletteink black (#000000) as the dominant structural token; blue (#0f57c2) appears only as link text and borders
Green gradient header barthe Fidelity wordmark sits on a diagonal green-to-dark-green gradient, the only chromatic brand signal on the page
No CSS custom propertiesno design-token system is exposed on the captured surface; all values are hardcoded per-element
Two-column gate layoutlegal prose on the left, Fidelity Investments logo and brand statement on the right, separated by a hairline

Live at fidelity.com

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

fidelity.com

Explore Fidelity

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.

Fidelity design system FAQ

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

Fidelity — official site

Fidelity Investments' 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.