Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
Source Sans 3| Mono:Source Code Pro- Font stack (CSS):font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600&family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
Stripe's website is the gold standard of fintech design -- a system that manages to feel simultaneously technical and luxurious, precise and warm. The page opens on a clean white canvas (#ffffff) with deep navy headings (#061b31) and a signature purple (#533afd) that functions as both brand anchor and interactive accent. This isn't the cold, clinical purple of enterprise software; it's a rich, saturated violet that reads as confident and premium. The overall impression is of a financial institution redesigned by a world-class type foundry.
The custom sohne-var variable font is the defining element of Stripe's visual identity. Every text element enables the OpenType "ss01" stylistic set, which modifies character shapes for a distinctly geometric, modern feel. At display sizes (48px-56px), sohne-var runs at weight 300 -- an extraordinarily light weight for headlines that creates an ethereal, almost whispered authority. This is the opposite of the "bold hero headline" convention; Stripe's headlines feel like they don't need to shout. The negative letter-spacing (-1.4px at 56px, -0.96px at 48px) tightens the text into dense, engineered blocks. At smaller sizes, the system also uses weight 300 with proportionally reduced tracking, and tabular numerals via "tnum" for financial data display.
What truly distinguishes Stripe is its shadow system. Rather than the flat or single-layer approach of most sites, Stripe uses multi-layer, blue-tinted shadows: the signature rgba(50,50,93,0.25) combined with rgba(0,0,0,0.1) creates shadows with a cool, almost atmospheric depth -- like elements are floating in a twilight sky. The blue-gray undertone of the primary shadow color (50,50,93) ties directly to the navy-purple brand palette, making even elevation feel on-brand.
Key Characteristics:
- sohne-var with OpenType "ss01" on all text -- a custom stylistic set that defines the brand's letterforms
- Weight 300 as the signature headline weight -- light, confident, anti-convention
- Negative letter-spacing at display sizes (-1.4px at 56px, progressive relaxation downward)
- Blue-tinted multi-layer shadows using rgba(50,50,93,0.25) -- elevation that feels brand-colored
- Deep navy (#061b31) headings instead of black -- warm, premium, financial-grade
- Conservative border-radius (4px-8px) -- nothing pill-shaped, nothing harsh
- Ruby (#ea2261) and magenta (#f96bee) accents for gradient and decorative elements
- SourceCodePro as the monospace companion for code and technical labels
#533afd): Primary brand color, CTA backgrounds, link text, interactive highlights. A saturated blue-violet that anchors the entire system.#061b31): --hds-color-heading-solid. Primary heading color. Not black, not gray -- a very dark blue that adds warmth and depth to text.#ffffff): Page background, card surfaces, button text on dark backgrounds.#1c1e54): --hds-color-util-brand-900. Deep indigo for dark sections, footer backgrounds, and immersive brand moments.#0d253d): --hds-color-core-neutral-975. The darkest neutral -- almost-black with a blue undertone for maximum depth without harshness.#ea2261): --hds-color-accentColorMode-ruby-icon-solid. Warm red-pink for icons, alerts, and accent elements.#f96bee): --hds-color-accentColorMode-magenta-icon-gradientMiddle. Vivid pink-purple for gradients and decorative highlights.#ffd7ef): --hds-color-util-accent-magenta-100. Tinted surface for magenta-themed cards and badges.#533afd): Primary link color, active states, selected elements.#4434d4): Darker purple for hover states on primary elements.#2e2b8c): --hds-color-button-ui-iconHover. Dark purple for icon hover states.#b9b9f9): --hds-color-action-bg-subduedHover. Soft lavender for subdued hover backgrounds.#665efd): --hds-color-input-selector-text-range. Range selector and input highlight color.#061b31): Primary headings, nav text, strong labels.#273951): --hds-color-input-text-label. Form labels, secondary headings.#64748d): Secondary text, descriptions, captions.#15be53): Status badges, success indicators (with 0.2-0.4 alpha for backgrounds/borders).#108c3d): Success badge text color.#9b6829): --hds-color-core-lemon-500. Warning and highlight accent.#e5edf5): Standard border color for cards, dividers, and containers.#b9b9f9): Active/selected state borders on buttons and inputs.#d6d9fc): Subtle purple-tinted borders for secondary elements.#ffd7ef): Pink-tinted borders for magenta-themed elements.#362baa): Dashed borders for drop zones and placeholder elements.rgba(50,50,93,0.25)): The signature -- blue-tinted primary shadow color.rgba(3,3,39,0.25)): Deeper blue shadow for elevated elements.rgba(0,0,0,0.1)): Secondary shadow layer for depth reinforcement.rgba(23,23,23,0.08)): Soft ambient shadow for subtle elevation.rgba(23,23,23,0.06)): Minimal ambient shadow for light lift.sohne-var, with fallback: SF Pro DisplaySourceCodePro, with fallback: SFMono-Regular"ss01" enabled globally on all sohne-var text; "tnum" for tabular numbers on financial data and captions.| Role | Font | Size | Weight | Line Height | Letter Spacing | Features | Notes |
|---|---|---|---|---|---|---|---|
| Display Hero | sohne-var | 56px (3.50rem) | 300 | 1.03 (tight) | -1.4px | ss01 | Maximum size, whisper-weight authority |
| Display Large | sohne-var | 48px (3.00rem) | 300 | 1.15 (tight) | -0.96px | ss01 | Secondary hero headlines |
| Section Heading | sohne-var | 32px (2.00rem) | 300 | 1.10 (tight) | -0.64px | ss01 | Feature section titles |
| Sub-heading Large | sohne-var | 26px (1.63rem) | 300 | 1.12 (tight) | -0.26px | ss01 | Card headings, sub-sections |
| Sub-heading | sohne-var | 22px (1.38rem) | 300 | 1.10 (tight) | -0.22px | ss01 | Smaller section heads |
| Body Large | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | Feature descriptions, intro text |
| Body | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | normal | ss01 | Standard reading text |
| Button | sohne-var | 16px (1.00rem) | 400 | 1.00 (tight) | normal | ss01 | Primary button text |
| Button Small | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | Secondary/compact buttons |
| Link | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | Navigation links |
| Caption | sohne-var | 13px (0.81rem) | 400 | normal | normal | ss01 | Small labels, metadata |
| Caption Small | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | normal | ss01 | Fine print, timestamps |
| Caption Tabular | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | Financial data, numbers |
| Micro | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | 0.1px | ss01 | Tiny labels, axis markers |
| Micro Tabular | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | -0.3px | tnum | Chart data, small numbers |
| Nano | sohne-var | 8px (0.50rem) | 300 | 1.07 (tight) | normal | ss01 | Smallest labels |
| Code Body | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | -- | Code blocks, syntax |
| Code Bold | SourceCodePro | 12px (0.75rem) | 700 | 2.00 (relaxed) | normal | -- | Bold code, keywords |
| Code Label | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | uppercase | Technical labels |
| Code Micro | SourceCodePro | 9px (0.56rem) | 500 | 1.00 (tight) | normal | ss01 | Tiny code annotations |
"ss01" stylistic set is non-negotiable. It modifies specific glyphs (likely alternate a, g, l forms) to create a more geometric, contemporary feel across all sohne-var text."ss01" for display/body text, "tnum" for tabular numerals in financial data. These never overlap -- a number in a paragraph uses ss01, a number in a data table uses tnum.Primary Purple
- Background: #533afd
- Text: #ffffff
- Padding: 8px 16px
- Radius: 4px
- Font: 16px sohne-var weight 400, "ss01"
- Hover: #4434d4 background
- Use: Primary CTA ("Start now", "Contact sales")
Ghost / Outlined
- Background: transparent
- Text: #533afd
- Padding: 8px 16px
- Radius: 4px
- Border: 1px solid #b9b9f9
- Font: 16px sohne-var weight 400, "ss01"
- Hover: background shifts to rgba(83,58,253,0.05)
- Use: Secondary actions
Transparent Info
- Background: transparent
- Text: #2874ad
- Padding: 8px 16px
- Radius: 4px
- Border: 1px solid rgba(43,145,223,0.2)
- Use: Tertiary/info-level actions
Neutral Ghost
- Background: transparent (rgba(255,255,255,0))
- Text: rgba(16,16,16,0.3)
- Padding: 8px 16px
- Radius: 4px
- Outline: 1px solid rgb(212,222,233)
- Use: Disabled or muted actions
#ffffff1px solid #e5edf5 (standard) or 1px solid #061b31 (dark accent)rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18pxrgba(23,23,23,0.08) 0px 15px 35px 0pxNeutral Pill
- Background: #ffffff
- Text: #000000
- Padding: 0px 6px
- Radius: 4px
- Border: 1px solid #f6f9fc
- Font: 11px weight 400
Success Badge
- Background: rgba(21,190,83,0.2)
- Text: #108c3d
- Padding: 1px 6px
- Radius: 4px
- Border: 1px solid rgba(21,190,83,0.4)
- Font: 10px weight 300
1px solid #e5edf51px solid #533afd or purple ring#273951, 14px sohne-var#061b31#64748d#061b31 text with "ss01"Dashed Borders
- 1px dashed #362baa (purple) for placeholder/drop zones
- 1px dashed #ffd7ef (magenta) for magenta-themed decorative borders
Gradient Accents
- Ruby-to-magenta gradients (#ea2261 to #f96bee) for hero decorations
- Brand dark sections use #1c1e54 backgrounds with white text
#1c1e54 background for brand immersion#1c1e54), creating a dramatic light/dark cadence that prevents monotony without introducing arbitrary color.0px 0px 6px 6px for bottom-rounded containers (tab panels, dropdown footers)| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, inline text |
| Ambient (Level 1) | rgba(23,23,23,0.06) 0px 3px 6px |
Subtle card lift, hover hints |
| Standard (Level 2) | rgba(23,23,23,0.08) 0px 15px 35px |
Standard cards, content panels |
| Elevated (Level 3) | rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px |
Featured cards, dropdowns, popovers |
| Deep (Level 4) | rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px |
Modals, floating panels |
| Ring (Accessibility) | 2px solid #533afd outline |
Keyboard focus ring |
Shadow Philosophy: Stripe's shadow system is built on a principle of chromatic depth. Where most design systems use neutral gray or black shadows, Stripe's primary shadow color (rgba(50,50,93,0.25)) is a deep blue-gray that echoes the brand's navy palette. This creates shadows that don't just add depth -- they add brand atmosphere. The multi-layer approach pairs this blue-tinted shadow with a pure black secondary layer (rgba(0,0,0,0.1)) at a different offset, creating a parallax-like depth where the branded shadow sits farther from the element and the neutral shadow sits closer. The negative spread values (-30px, -18px) ensure shadows don't extend beyond the element's footprint horizontally, keeping elevation vertical and controlled.
#1c1e54) create immersive depth through background color contrastrgba(0,55,112,0.08) (--hds-color-shadow-sm-top) for top-edge shadows on sticky elements"ss01" on every text element -- the stylistic set IS the brandrgba(50,50,93,0.25)) for all elevated elements#061b31 (deep navy) for headings instead of #000000 -- the warmth matters"tnum" for any tabular/financial number display#533afd purple as the primary interactive/CTA colorrgba(50,50,93,...))"ss01" on any sohne-var text -- the alternate glyphs define the personality#000000) for headings -- always #061b31 deep navy| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column, reduced heading sizes, stacked cards |
| Tablet | 640-1024px | 2-column grids, moderate padding |
| Desktop | 1024-1280px | Full layout, 3-column feature grids |
| Large Desktop | >1280px | Centered content with generous margins |
SourceCodePro treatment, may horizontally scroll#533afd)#4434d4)#ffffff)#061b31)#64748d)#273951)#e5edf5)#533afd)#1c1e54)#15be53)#ea2261), Magenta (#f96bee)font-feature-settings: "ss01" on sohne-var text -- this is the brand's typographic DNArgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2 where Y1/B1 are larger (far shadow) and Y2/B2 are smaller (near shadow)#061b31 (deep navy), body is #64748d (slate), labels are #273951 (dark slate)"tnum" for any numbers in tables, charts, or financial displays#1c1e54 -- not black, not gray, but a deep branded indigo