source

---
name: Stripe
description:
  Fintech gold standard — weight-300 sohne-var headlines with ss01, deep navy
  heads, saturated purple accent, and signature blue-tinted layered shadows.
originalFonts:
  primary: "sohne-var"
  mono: "SourceCodePro"
  fallbacks:
    - "SF Pro Display"
colors:
  background: "#FFFFFF"
  surface: "#FAF9F5"
  ink: "#061B31"
  accent: "#533AFD"
  stripe-purple: "#533AFD"
  deep-navy: "#061B31"
  pure-white: "#FFFFFF"
  brand-dark: "#1C1E54"
  dark-navy: "#0D253D"
  ruby: "#EA2261"
  magenta: "#F96BEE"
  magenta-light: "#FFD7EF"
  purple-hover: "#4434D4"
  purple-deep: "#2E2B8C"
  purple-light: "#B9B9F9"
  purple-mid: "#665EFD"
  heading: "#061B31"
  label: "#273951"
  body: "#64748D"
  success-green: "#15BE53"
  success-text: "#108C3D"
  lemon: "#9B6829"
  border: "#E5EDF5"
  border-default: "#E5EDF5"
  border-purple: "#B9B9F9"
  border-soft-purple: "#D6D9FC"
  border-magenta: "#FFD7EF"
  border-dashed: "#362BAA"
typography:
  h1:
    family: "Inter"
    size: "3.5rem"
    weight: 300
    lineHeight: 1.03
  body:
    family: "Inter"
    size: "1rem"
    lineHeight: 1.4
  code:
    family: "JetBrains Mono"
    size: "0.75rem"
    lineHeight: 2
spacing:
  xs: "0.25rem"
  sm: "0.5rem"
  md: "0.75rem"
  lg: "1rem"
  xl: "1.25rem"
rounded:
  sm: "1px"
  md: "4px"
  lg: "6px"
  xl: "8px"
shadows:
  sm: "rgba(23,23,23,0.06) 0px 3px 6px"
  md: "rgba(23,23,23,0.08) 0px 15px 35px 0px"
  lg:
    "rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px
    -18px"
components:
  button-primary:
    background: "{colors.accent}"
    color: "#FFFFFF"
    border: "1px solid {colors.accent}"
    radius: "{rounded.md}"
    padding: "0.5rem 1rem"
  button-secondary:
    background: "transparent"
    color: "{colors.accent}"
    border: "1px solid {colors.purple-light}"
    radius: "{rounded.md}"
    padding: "0.5rem 1rem"
  card:
    background: "#FFFFFF"
    border: "1px solid {colors.border}"
    radius: "{rounded.lg}"
    padding: "1.5rem"
  input:
    background: "#FFFFFF"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "0.5rem 0.75rem"
---

<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->

# Design System Inspiration of Stripe

## 1. Visual Theme & Atmosphere

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

## 2. Color Palette & Roles

### Primary

- **Stripe Purple** (`#533afd`): Primary brand color, CTA backgrounds, link
  text, interactive highlights. A saturated blue-violet that anchors the entire
  system.
- **Deep Navy** (`#061b31`): `--hds-color-heading-solid`. Primary heading color.
  Not black, not gray -- a very dark blue that adds warmth and depth to text.
- **Pure White** (`#ffffff`): Page background, card surfaces, button text on
  dark backgrounds.

### Brand & Dark

- **Brand Dark** (`#1c1e54`): `--hds-color-util-brand-900`. Deep indigo for dark
  sections, footer backgrounds, and immersive brand moments.
- **Dark Navy** (`#0d253d`): `--hds-color-core-neutral-975`. The darkest neutral
  -- almost-black with a blue undertone for maximum depth without harshness.

### Accent Colors

- **Ruby** (`#ea2261`): `--hds-color-accentColorMode-ruby-icon-solid`. Warm
  red-pink for icons, alerts, and accent elements.
- **Magenta** (`#f96bee`):
  `--hds-color-accentColorMode-magenta-icon-gradientMiddle`. Vivid pink-purple
  for gradients and decorative highlights.
- **Magenta Light** (`#ffd7ef`): `--hds-color-util-accent-magenta-100`. Tinted
  surface for magenta-themed cards and badges.

### Interactive

- **Primary Purple** (`#533afd`): Primary link color, active states, selected
  elements.
- **Purple Hover** (`#4434d4`): Darker purple for hover states on primary
  elements.
- **Purple Deep** (`#2e2b8c`): `--hds-color-button-ui-iconHover`. Dark purple
  for icon hover states.
- **Purple Light** (`#b9b9f9`): `--hds-color-action-bg-subduedHover`. Soft
  lavender for subdued hover backgrounds.
- **Purple Mid** (`#665efd`): `--hds-color-input-selector-text-range`. Range
  selector and input highlight color.

### Neutral Scale

- **Heading** (`#061b31`): Primary headings, nav text, strong labels.
- **Label** (`#273951`): `--hds-color-input-text-label`. Form labels, secondary
  headings.
- **Body** (`#64748d`): Secondary text, descriptions, captions.
- **Success Green** (`#15be53`): Status badges, success indicators (with 0.2-0.4
  alpha for backgrounds/borders).
- **Success Text** (`#108c3d`): Success badge text color.
- **Lemon** (`#9b6829`): `--hds-color-core-lemon-500`. Warning and highlight
  accent.

### Surface & Borders

- **Border Default** (`#e5edf5`): Standard border color for cards, dividers, and
  containers.
- **Border Purple** (`#b9b9f9`): Active/selected state borders on buttons and
  inputs.
- **Border Soft Purple** (`#d6d9fc`): Subtle purple-tinted borders for secondary
  elements.
- **Border Magenta** (`#ffd7ef`): Pink-tinted borders for magenta-themed
  elements.
- **Border Dashed** (`#362baa`): Dashed borders for drop zones and placeholder
  elements.

### Shadow Colors

- **Shadow Blue** (`rgba(50,50,93,0.25)`): The signature -- blue-tinted primary
  shadow color.
- **Shadow Dark Blue** (`rgba(3,3,39,0.25)`): Deeper blue shadow for elevated
  elements.
- **Shadow Black** (`rgba(0,0,0,0.1)`): Secondary shadow layer for depth
  reinforcement.
- **Shadow Ambient** (`rgba(23,23,23,0.08)`): Soft ambient shadow for subtle
  elevation.
- **Shadow Soft** (`rgba(23,23,23,0.06)`): Minimal ambient shadow for light
  lift.

## 3. Typography Rules

### Font Family

- **Primary**: `sohne-var`, with fallback: `SF Pro Display`
- **Monospace**: `SourceCodePro`, with fallback: `SFMono-Regular`
- **OpenType Features**: `"ss01"` enabled globally on all sohne-var text;
  `"tnum"` for tabular numbers on financial data and captions.

### Hierarchy

| 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                  |

### Principles

- **Light weight as signature**: Weight 300 at display sizes is Stripe's most
  distinctive typographic choice. Where others use 600-700 to command attention,
  Stripe uses lightness as luxury -- the text is so confident it doesn't need
  weight to be authoritative.
- **ss01 everywhere**: The `"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.
- **Two OpenType modes**: `"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.
- **Progressive tracking**: Letter-spacing tightens proportionally with size:
  -1.4px at 56px, -0.96px at 48px, -0.64px at 32px, -0.26px at 26px, normal at
  16px and below.
- **Two-weight simplicity**: Primarily 300 (body and headings) and 400
  (UI/buttons). No bold (700) in the primary font -- SourceCodePro uses 500/700
  for code contrast.

## 4. Component Stylings

### Buttons

**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

### Cards & Containers

- Background: `#ffffff`
- Border: `1px solid #e5edf5` (standard) or `1px solid #061b31` (dark accent)
- Radius: 4px (tight), 5px (standard), 6px (comfortable), 8px (featured)
- Shadow (standard):
  `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`
- Shadow (ambient): `rgba(23,23,23,0.08) 0px 15px 35px 0px`
- Hover: shadow intensifies, often adding the blue-tinted layer

### Badges / Tags / Pills

**Neutral 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

### Inputs & Forms

- Border: `1px solid #e5edf5`
- Radius: 4px
- Focus: `1px solid #533afd` or purple ring
- Label: `#273951`, 14px sohne-var
- Text: `#061b31`
- Placeholder: `#64748d`

### Navigation

- Clean horizontal nav on white, sticky with blur backdrop
- Brand logotype left-aligned
- Links: sohne-var 14px weight 400, `#061b31` text with `"ss01"`
- Radius: 6px on nav container
- CTA: purple button right-aligned ("Sign in", "Start now")
- Mobile: hamburger toggle with 6px radius

### Decorative Elements

**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

## 5. Layout Principles

### Spacing System

- Base unit: 8px
- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
- Notable: The scale is dense at the small end (every 2px from 4-12), reflecting
  Stripe's precision-oriented UI for financial data

### Grid & Container

- Max content width: approximately 1080px
- Hero: centered single-column with generous padding, lightweight headlines
- Feature sections: 2-3 column grids for feature cards
- Full-width dark sections with `#1c1e54` background for brand immersion
- Code/dashboard previews as contained cards with blue-tinted shadows

### Whitespace Philosophy

- **Precision spacing**: Unlike the vast emptiness of minimalist systems, Stripe
  uses measured, purposeful whitespace. Every gap is a deliberate typographic
  choice.
- **Dense data, generous chrome**: Financial data displays (tables, charts) are
  tightly packed, but the UI chrome around them is generously spaced. This
  creates a sense of controlled density -- like a well-organized spreadsheet in
  a beautiful frame.
- **Section rhythm**: White sections alternate with dark brand sections
  (`#1c1e54`), creating a dramatic light/dark cadence that prevents monotony
  without introducing arbitrary color.

### Border Radius Scale

- Micro (1px): Fine-grained elements, subtle rounding
- Standard (4px): Buttons, inputs, badges, cards -- the workhorse
- Comfortable (5px): Standard card containers
- Relaxed (6px): Navigation, larger interactive elements
- Large (8px): Featured cards, hero elements
- Compound: `0px 0px 6px 6px` for bottom-rounded containers (tab panels,
  dropdown footers)

## 6. Depth & Elevation

| 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.

### Decorative Depth

- Dark brand sections (`#1c1e54`) create immersive depth through background
  color contrast
- Gradient overlays with ruby-to-magenta transitions for hero decorations
- Shadow color `rgba(0,55,112,0.08)` (`--hds-color-shadow-sm-top`) for top-edge
  shadows on sticky elements

## 7. Do's and Don'ts

### Do

- Use sohne-var with `"ss01"` on every text element -- the stylistic set IS the
  brand
- Use weight 300 for all headlines and body text -- lightness is the signature
- Apply blue-tinted shadows (`rgba(50,50,93,0.25)`) for all elevated elements
- Use `#061b31` (deep navy) for headings instead of `#000000` -- the warmth
  matters
- Keep border-radius between 4px-8px -- conservative rounding is intentional
- Use `"tnum"` for any tabular/financial number display
- Layer shadows: blue-tinted far + neutral close for depth parallax
- Use `#533afd` purple as the primary interactive/CTA color

### Don't

- Don't use weight 600-700 for sohne-var headlines -- weight 300 is the brand
  voice
- Don't use large border-radius (12px+, pill shapes) on cards or buttons --
  Stripe is conservative
- Don't use neutral gray shadows -- always tint with blue (`rgba(50,50,93,...)`)
- Don't skip `"ss01"` on any sohne-var text -- the alternate glyphs define the
  personality
- Don't use pure black (`#000000`) for headings -- always `#061b31` deep navy
- Don't use warm accent colors (orange, yellow) for interactive elements --
  purple is primary
- Don't apply positive letter-spacing at display sizes -- Stripe tracks tight
- Don't use the magenta/ruby accents for buttons or links -- they're
  decorative/gradient only

## 8. Responsive Behavior

### Breakpoints

| 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              |

### Touch Targets

- Buttons use comfortable padding (8px-16px vertical)
- Navigation links at 14px with adequate spacing
- Badges have 6px horizontal padding minimum for tap targets
- Mobile nav toggle with 6px radius button

### Collapsing Strategy

- Hero: 56px display -> 32px on mobile, weight 300 maintained
- Navigation: horizontal links + CTAs -> hamburger toggle
- Feature cards: 3-column -> 2-column -> single column stacked
- Dark brand sections: maintain full-width treatment, reduce internal padding
- Financial data tables: horizontal scroll on mobile
- Section spacing: 64px+ -> 40px on mobile
- Typography scale compresses: 56px -> 48px -> 32px hero sizes across
  breakpoints

### Image Behavior

- Dashboard/product screenshots maintain blue-tinted shadow at all sizes
- Hero gradient decorations simplify on mobile
- Code blocks maintain `SourceCodePro` treatment, may horizontally scroll
- Card images maintain consistent 4px-6px border-radius

## 9. Agent Prompt Guide

### Quick Color Reference

- Primary CTA: Stripe Purple (`#533afd`)
- CTA Hover: Purple Dark (`#4434d4`)
- Background: Pure White (`#ffffff`)
- Heading text: Deep Navy (`#061b31`)
- Body text: Slate (`#64748d`)
- Label text: Dark Slate (`#273951`)
- Border: Soft Blue (`#e5edf5`)
- Link: Stripe Purple (`#533afd`)
- Dark section: Brand Dark (`#1c1e54`)
- Success: Green (`#15be53`)
- Accent decorative: Ruby (`#ea2261`), Magenta (`#f96bee`)

### Example Component Prompts

- "Create a hero section on white background. Headline at 48px sohne-var weight
  300, line-height 1.15, letter-spacing -0.96px, color #061b31,
  font-feature-settings 'ss01'. Subtitle at 18px weight 300, line-height 1.40,
  color #64748d. Purple CTA button (#533afd, 4px radius, 8px 16px padding, white
  text) and ghost button (transparent, 1px solid #b9b9f9, #533afd text, 4px
  radius)."
- "Design a card: white background, 1px solid #e5edf5 border, 6px radius.
  Shadow: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px
  -18px. Title at 22px sohne-var weight 300, letter-spacing -0.22px, color
  #061b31, 'ss01'. Body at 16px weight 300, #64748d."
- "Build a success badge: rgba(21,190,83,0.2) background, #108c3d text, 4px
  radius, 1px 6px padding, 10px sohne-var weight 300, border 1px solid
  rgba(21,190,83,0.4)."
- "Create navigation: white sticky header with backdrop-filter blur(12px).
  sohne-var 14px weight 400 for links, #061b31 text, 'ss01'. Purple CTA 'Start
  now' right-aligned (#533afd bg, white text, 4px radius). Nav container 6px
  radius."
- "Design a dark brand section: #1c1e54 background, white text. Headline 32px
  sohne-var weight 300, letter-spacing -0.64px, 'ss01'. Body 16px weight 300,
  rgba(255,255,255,0.7). Cards inside use rgba(255,255,255,0.1) border with 6px
  radius."

### Iteration Guide

1. Always enable `font-feature-settings: "ss01"` on sohne-var text -- this is
   the brand's typographic DNA
2. Weight 300 is the default; use 400 only for buttons/links/navigation
3. Shadow formula:
   `rgba(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)
4. Heading color is `#061b31` (deep navy), body is `#64748d` (slate), labels are
   `#273951` (dark slate)
5. Border-radius stays in the 4px-8px range -- never use pill shapes or large
   rounding
6. Use `"tnum"` for any numbers in tables, charts, or financial displays
7. Dark sections use `#1c1e54` -- not black, not gray, but a deep branded indigo
8. SourceCodePro for code at 12px/500 with 2.00 line-height (very generous for
   readability)