Fidelity Investments

Overview

Fidelity's design system embodies 'Institutional Warmth'—a philosophy that marries the gravitas of financial stewardship with the approachability of a trusted advisor. The brand serves individuals and institutions navigating complex financial decisions, and the UI transforms that complexity into clarity through a confident, measured aesthetic. The color palette anchors on a deep forest green (#368727) that signals growth, stability, and forward momentum, paired with warm neutral surfaces (rgb(249, 247, 245)) that feel human and inviting rather than cold or corporate. The typography hierarchy uses Fidelity Slab—a custom serif with a light 300 weight—for headlines to convey authority and timelessness, while Fidelity Sans carries body copy with precision and legibility. The emotional response is one of quiet confidence: users feel guided, not overwhelmed.

The brand voice is expert yet conversational—never jargon-heavy, always action-oriented. Fidelity speaks in complete sentences with clear intent: 'Invest today and plan for tomorrow' (not 'Optimize your portfolio trajectory'). The vocabulary favors concrete nouns (account, plan, guidance) over abstractions. Personality traits: reliable, forward-thinking, accessible, grounded. Example sentence in brand voice: 'We can help you get started—open an account in minutes, or talk to an advisor who knows your goals.'

Colors

The color system is built on a warm, neutral foundation (surface: #f9f7f5, on-surface: #141414) that creates a calm, professional canvas. Primary (#368727) is the signature action color—used exclusively on CTAs ('Open an account'), focus states, and key interactive elements. It reads as a confident, natural green that suggests growth without aggression. Secondary (#1373b4) provides a cool accent for informational elements, links, and secondary navigation, creating visual rhythm against the warm neutrals. Tertiary (#de8001) is reserved for alerts, warnings, and accent highlights—a warm amber that draws attention without alarming. The surface stack progresses from bright (#ffffff) for inputs and elevated cards, through container (#e6e4e1) for standard cards, to dim (#e6e4e1) for recessed or

Typography

The type system uses a two-font pairing: Fidelity Slab (light weight 300) for display and headline scales, and Fidelity Sans (weights 400, 600, 700) for body and label scales. This combination signals both heritage and modernity—the serif headlines convey institutional credibility and timelessness, while the sans-serif body ensures digital legibility and contemporary feel. Display (60px, 300 weight, -0.04em letter-spacing) is reserved for hero statements and major page titles; headline-lg (48px, 300 weight) for section headers; headline-md (32px, 300 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory copy and prominent body text; body-md (16px, 400 weight, 24px line-height) for standard paragraph text. Label-md (14px, 600 weight, 0.01em letter-sp

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a 24px gutter between columns on desktop and 12px on mobile. The spacing scale is semantic: xs (4px) for micro-adjustments within components, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. White-space is generous but purposeful—the design avoids cramping content, allowing each section to breathe. Container max-width is enforced at 1280px to prevent line-length from exceeding ~70 characters on body text, maintaining readability. Hero sections use full-width backgrounds (images, gradients) with content cards overlaid at 50-75% width to create visual interest and hierarchy. Cards and containers use 24px pad

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than aggressive layering. Level 1 (Base): the warm neutral background (rgb(249, 247, 245)) with no shadow, establishing the canvas. Level 2 (Standard Cards): background-color: #e6e4e1, box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), creating a barely-perceptible lift. Level 3 (Elevated/Modals): background-color: #ffffff, box-shadow: 0 4px 8px rgba(20, 20, 20, 0.08), signaling modal or overlay prominence. Level 4 (Floating Elements): background-color: #ffffff, box-shadow: 0 16px 40px rgba(20, 20, 20, 0.

Shapes

The shape philosophy is 'Refined Pragmatism'—corners are softened but not rounded to the point of playfulness. Buttons use a full-round radius (border-radius: 24px, or {rounded.xl}) to signal action and approachability, making CTAs feel inviting rather than corporate. Cards and containers use a moderate radius (border-radius: 24px) to soften edges without sacrificing formality. Input fields use a full-round radius (border-radius: 50px) to create a distinct visual language for interactive form elements and distinguish them from static content. Smaller UI elements (badges, tags, toggles) use sm

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary (background: #368727, color: #ffffff, padding: 12px 24px, height: 48px, border-radius: 24px, font-weight: 700, font-size: 14px) is used for primary CTAs ('Open an account', 'Submit'). On hover, the background transitions to #2e7d32 (200ms ease) with no shadow change, maintaining flatness. On focus, a 2px solid outline in #929292 appears 2px outside the button boundary. Button-secondary (background: transparent, color: #141414, border: 2px solid #141414, padding: 12px 24px, height: 48px, border-radius: 24px, font-weight: 600) is used for secondary actions ('I need guidance', 'Learn more'). On hover, background becomes #ddd9d6 (200ms ease). Disabled state for both buttons: opacity 50%, cursor not-allowed, no ho

Do's and Don'ts

**Do**

• Do use primary green (#368727) exclusively for CTAs and interactive focus states—it's the signature brand accent and must remain distinctive and high-contrast.
• Do apply the full-round radius (24px) to all buttons and input fields to create a clear visual language for interactive elements.
• Do maintain the warm neutral background (#f9f7f5) as the default canvas; it's foundational to the brand's approachable, human aesthetic.
• Do use Fidelity Slab (light weight 300) for all headlines and display text to convey institutional authority and timelessness.
• Do apply subtle shadows (0 1px 2px rgba(20, 20, 20, 0.05) for standard cards) to create depth without visual noise.
• Do use 200ms ease transitions on all hover and focus state changes to signal interactivity smoothly.
• Do maintain a 24px gutter and md (24px) spacing between major sections to ensure generous white-space and readability.

**Don't**

• Don't use the primary green for body text, backgrounds, or non-interactive elements—reserve it for CTAs and focus states only.
• Don't apply sharp corners (0px border-radius) to any UI element; the brand aesthetic requires softened edges throughout.
• Don't use glassmorphism, blur effects, or transparency overlays; the design system is grounded and print-like, not trendy.
• Don't exceed 1280px container max-width; this ensures line-length remains readable and the layout feels intentional.
• Don't use sans-serif fonts for headlines; Fidelity Slab is the brand's serif and must be used for all display and headline scales.
• Don't apply heavy shadows (anything beyond 0 16px 40px rgba(20, 20, 20, 0.12)) as they introduce visual clutter and reduce clarity.
• Don't use secondary or tertiary colors for primary CTAs; primary green is the only acceptable color for 'Open an account' and equivalent actions.