dynamisch barcode

.agents/pricing-strategy.md

@@ -0,0 +1,234 @@
+# QR Master — Pricing Strategy
+*Erstellt: April 2026 | Basiert auf Marktforschung, Competitor-Scraping & SaaS-Benchmarks*
+
+---
+
+## 1. Marktkontext
+
+### QR-Code-Markt 2025/2026
+| Metrik | Wert |
+|--------|------|
+| Globale Marktgröße | $15,3 Mrd. (2025) |
+| CAGR bis 2030 | 16,1% |
+| US-Smartphone-User die QR scannen | 100+ Mio. monatlich |
+| Business-Adoption | 50% der Unternehmen nutzen QR-Codes aktiv |
+
+**Fazit:** Wachstumsmarkt mit noch großem Potenzial, besonders im KMU-Segment.
+
+---
+
+## 2. Wettbewerbs-Pricing-Map
+
+### Vollständige Marktübersicht (aus Firecrawl-Recherche)
+
+| Tool | Preis/Monat | Analytics | Dynamic | Bulk | Branding | Positionierung |
+|------|------------|-----------|---------|------|----------|----------------|
+| TQRCG | $5 | ✅ | ✅ | ❌ | ✅ | Value-Leader |
+| QRStuff | $5 | ❌ | ❌ | ✅ | ❌ | Budget |
+| ViralQR | $1,49 | ✅ | ✅ | ❌ | ✅ | Ultra-Budget |
+| Beaconstac | $5–24 | ✅ | ✅ | ✅ | ✅ | SMB–Enterprise |
+| Bitly QR | $10 | ✅ | ✅ | ❌ | ✅ | Mid-Market |
+| Unitag | $10 | ❌ | ✅ | ✅ | ✅ | Mid-Market |
+| ZebraQR | $9 | ✅ | ✅ | ❌ | ✅ | Hospitality-Nische |
+| QR Tiger | $12–15 | ✅ | ✅ | ✅ | ✅ | Mid-Market+ |
+| Hovercode | $15 | ✅ | ✅ | ✅ | ✅ | Growth-Fokus |
+| Flowcode | $10–15 | ✅ | ✅ | ❌ | ✅ | Design-Fokus |
+| Scanova | $20 | ✅ | ✅ | ✅ | ✅ | Premium |
+| QR Code Chimp | $20 | ✅ | ✅ | ✅ | ✅ | Premium-Design |
+| Uniqode | $10–30 | ✅ | ✅ | ✅ | ✅ | Enterprise |
+| QRFY | $25 | ✅ | ✅ | ✅ | ✅ | Premium-Flat |
+| QR Code Generator Pro | $15–29 | ✅ | ✅ | ✅ | ✅ | Agency |
+
+### Marktlücke für QR Master
+> **Kein einziges Tool unter $12 bietet Analytics + Bulk + Custom Branding + DSGVO gleichzeitig.**
+> Das ist exakt QR Masters Sweet Spot.
+
+---
+
+## 3. SaaS-Benchmark-Daten (Industrie)
+
+| Metrik | Benchmark | Quelle |
+|--------|-----------|--------|
+| Median Entry-Level Preis (SaaS) | $29/mo | Monetizely 2025 |
+| Free-to-Paid Conversion | ~5% | RevenueCat 2026 |
+| Anteil Jahres-Abos (vs. Monatlich) | 68% annual / 32% monthly | RevenueCat 2026 |
+| ARPU (Subscription Apps) | ~$30 | RevenueCat 2026 |
+| Freemium-Anteil unter SaaS | 38% der Unternehmen | Monetizely 2025 |
+| Hybrid-Pricing-Adoption | 61% | Monetizely 2025 |
+| SaaS Churn (SMB) | 3–5%/Monat | Benchmark |
+
+**Key Insight:** 68% der Subscriber wählen Jahrestarife. Das ist der wichtigste Hebel für Cashflow und Churn-Reduktion.
+
+---
+
+## 4. Value Metric Empfehlung
+
+### Aktuelles Modell: Anzahl dynamischer QR-Codes
+**Bewertung: Gut, aber optimierbar.**
+
+Die Anzahl dynamischer Codes skaliert mit dem wahrgenommenen Wert (mehr Codes = mehr Kampagnen = mehr Wert). Jedoch:
+- Limit von 8 FREE / 50 PRO / 500 BUSINESS ist nicht intuitiv kommuniziert
+- Kunden denken in "Projekten" oder "Kampagnen", nicht in "Codes"
+
+### Empfehlung: Hybrid-Metric einführen
+Primär-Metric behalten (Dynamic Codes), aber mit Sekundär-Metriken ergänzen:
+
+| Tier | Primär-Metric | Sekundär-Metriken |
+|------|--------------|-------------------|
+| FREE | 8 Dynamic Codes | 1 User, Basic Analytics, 30 Tage History |
+| PRO | 50 Dynamic Codes | 1–3 User, Full Analytics, 1 Jahr History, Custom Domain |
+| BUSINESS | 500 Dynamic Codes | Unlimitierte User, Advanced Analytics, Bulk, API |
+
+---
+
+## 5. Empfohlene Pricing-Struktur
+
+### Tier-Empfehlung (Monatlich / Jährlich)
+
+#### FREE — Kostenlos, für immer
+- **8 dynamische QR-Codes** (klar kommuniziert als "8 Kampagnen")
+- Unlimitierte statische Codes
+- Basis-Analytics (Scans, Datum)
+- QR Master Branding (nicht entfernbar)
+- **Ziel:** Acquisition, Habit-Building, Virality durch Branding
+
+#### PRO — €9/Monat (monatlich) | **€7/Monat (jährlich = €84/Jahr)**
+*Empfohlen für: Restaurants, lokale Unternehmen, Marketing-Einsteiger*
+- **50 dynamische QR-Codes**
+- Custom Branding (kein QR Master Logo)
+- Vollständige Analytics (Device, Location, OS, UTM)
+- 1 Jahr Analytics-History
+- Custom Domain für Redirects
+- Prioritäts-Support
+- **Rationale:** $7–9 liegt im bewiesenen Sweet Spot ($5–$10) für diese Zielgruppe. Beaconstac Starter bei $5 hat nur 100 Scans — wir haben keine Scan-Limits.
+
+#### BUSINESS — €24/Monat (monatlich) | **€19/Monat (jährlich = €228/Jahr)**
+*Empfohlen für: Agenturen, Retail-Chains, Event-Organisatoren*
+- **500 dynamische QR-Codes**
+- Bulk-Upload (Excel/CSV bis 1.000 Zeilen)
+- API-Zugriff
+- Team-Management (bis 5 User)
+- Erweiterte Analytics + Export (CSV, PDF)
+- White-Label Option
+- DSGVO-Compliance-Report
+- **Rationale:** $19–24 ist der Bereich wo Scanova ($20), Hovercode ($15) und QR Code Chimp ($20) spielen — aber keiner hat DSGVO + Bulk + Analytics zusammen.
+
+#### ENTERPRISE — Auf Anfrage (ab €99/Monat)
+*Für: Corporations, Franchise-Ketten*
+- Unlimitierte Codes
+- Dedizierter Account Manager
+- Custom SLA
+- SSO / SAML
+- On-Premise Option (optional)
+
+---
+
+## 6. Psychologische Preisgestaltung
+
+### Anchoring-Strategie
+Reihenfolge auf Pricing-Page: **BUSINESS → PRO → FREE** (von teuer nach günstig)
+→ PRO wirkt dadurch als "vernünftiger Kompromiss"
+
+### Decoy-Effekt
+PRO muss der offensichtliche "Best Deal" sein:
+- BUSINESS ist 2,7× teurer als PRO aber hat 10× mehr Codes → Nur für Power-User
+- FREE hat 6× weniger Codes als PRO → Upgrade liegt nahe
+
+### Jahres-Pricing-Push
+- Monatlich: €9 / €24
+- Jährlich: €7 / €19 (sparst 22% / 21%)
+- **Wichtig:** Jahrespreis prominent anzeigen mit "Spare 2 Monate" statt Prozent
+- Default-Toggle: **Jährlich** (da 68% aller Subscriber Jahrestarife wählen)
+
+### Charm vs. Round Pricing
+- PRO: **€9** (nicht €10) → Charm Pricing für Conversion
+- BUSINESS: **€24** (nicht €25) → Knapp unter psychologischer Grenze
+- Jahrestarife: **€84/Jahr** und **€228/Jahr** (rund → Premium-Signal)
+
+---
+
+## 7. Jahres-Discount-Strategie
+
+| Tier | Monatlich | Jährlich | Ersparnis |
+|------|-----------|----------|-----------|
+| PRO | €9/Mo | €84/Jahr (€7/Mo) | 22% / 2 Monate gratis |
+| BUSINESS | €24/Mo | €228/Jahr (€19/Mo) | 21% / 2,5 Monate gratis |
+
+**Kommunikation:** "2 Monate kostenlos bei jährlicher Zahlung" schlägt "20% Rabatt" in A/B-Tests regelmäßig.
+
+---
+
+## 8. Free-Tier-Optimierung
+
+### Ziel des Free-Tiers
+Nicht monetarisieren — **qualifizieren und konvertieren**.
+
+### Empfohlene Trigger für Upgrade-Prompts
+1. **Code-Limit erreicht** → "Du hast 8/8 Codes verwendet. Upgrade auf PRO für 50 Codes."
+2. **Analytics-Feature geklickt** → "Detaillierte Location-Analytics nur in PRO."
+3. **Custom Branding versucht** → "Entferne das QR Master Logo — upgrade auf PRO."
+4. **Bulk-Upload versucht** → "Bulk-Upload ist nur in BUSINESS verfügbar."
+5. **Nach 7 Tagen aktive Nutzung** → In-App Prompt: "Du nutzt QR Master aktiv — hole mehr raus."
+
+### Virality-Mechanismus
+- FREE-Codes enthalten subtiles "Made with QR Master" in Metadaten
+- QR-Code-Landing-Pages (bei Dynamic Redirects) zeigen "Powered by QR Master" Footer
+- Jeder Scan ist eine potenzielle Akquisition
+
+---
+
+## 9. Positioning Statement je Tier
+
+**FREE:**
+> "Starte kostenlos mit 8 professionellen QR-Codes — keine Kreditkarte erforderlich."
+
+**PRO:**
+> "Für Restaurants, lokale Geschäfte und Marketer: Unbegrenzte Änderungen, echte Analytics, dein Branding — für weniger als ein Mittagessen pro Monat."
+
+**BUSINESS:**
+> "Für Agenturen und Retail-Chains: Erstelle 500 Codes auf einmal, per Excel-Upload — DSGVO-konform, skalierbar, professionell."
+
+---
+
+## 10. Pricing Page Struktur (Empfehlung)
+
+### Elemente above the fold
+1. **Toggle: Monatlich / Jährlich** (Default: Jährlich)
+2. **3 Tier-Karten** in Reihenfolge: FREE → PRO (highlighted "Beliebteste Wahl") → BUSINESS
+3. **CTA je Tier:** "Kostenlos starten" / "14 Tage gratis testen" / "Jetzt upgraden"
+4. **Trust-Signal:** "Keine Kreditkarte für Free • DSGVO-konform • Jederzeit kündbar"
+
+### Weitere Sektionen
+- Feature-Vergleichstabelle (vollständig)
+- ROI-Rechner: "Wie viel sparst du durch dynamische QR-Codes vs. Neudruck?"
+- FAQ (Objections aus Product-Marketing-Context)
+- Testimonials-Sektion (Platzhalter für spätere echte Reviews)
+- Enterprise-CTA am Ende
+
+---
+
+## 11. Kurzfristige Maßnahmen (Quick Wins)
+
+| Priorität | Maßnahme | Impact |
+|-----------|----------|--------|
+| 🔴 Hoch | Jahrestarif als Default auf Pricing-Page setzen | +20–30% ARPU sofort |
+| 🔴 Hoch | "2 Monate gratis" Kommunikation (statt %) | +Conversion |
+| 🟡 Mittel | Upgrade-Prompts bei Feature-Gates einbauen | +Free-to-Paid |
+| 🟡 Mittel | 14-Tage PRO Trial (kreditkartenlos) | +Trial Signups |
+| 🟢 Niedrig | BUSINESS Jahrespreis auf €228 festlegen | Cashflow |
+| 🟢 Niedrig | Enterprise-Kontaktformular ergänzen | Upmarket |
+
+---
+
+## 12. Risiken & Gegenmaßnahmen
+
+| Risiko | Wahrscheinlichkeit | Gegenmaßnahme |
+|--------|-------------------|---------------|
+| ViralQR mit $1,49 unterbietbar | Mittel | Auf Analytics + DSGVO differenzieren, nicht Preis |
+| FREE-User konvertieren nicht | Hoch | Smarte Feature-Gates + E-Mail-Nurturing |
+| BUSINESS-Preis zu hoch für KMU | Mittel | Jährlich-Preis betonen: €19/mo fühlt sich zugänglich an |
+| Konkurrenten senken Preise | Niedrig | Value-Story stärken, nicht mitziehen |
+
+---
+
+*Datenbasis: Firecrawl-Scraping von 5+ Competitor-Seiten, QR Marktstatistiken 2026, RevenueCat State of Subscription Apps 2026, Monetizely SaaS Benchmark 2025, Product Marketing Context QR Master.*

.codex-temp/awesome-design-md-SKILL.md

@@ -0,0 +1,60 @@
+---
+name: awesome-design-md
+description: Use VoltAgent's awesome-design-md collection when the user wants UI inspired by a specific brand or asks for a DESIGN.md reference, visual system, or brand-style implementation such as Stripe, Linear, Vercel, Claude, or Supabase. Resolve the brand slug from the installed `design-md/` folder, fetch the matching `getdesign.md` design document for that slug, and apply it as the design-system reference for implementation.
+---
+
+# Awesome DESIGN.md
+
+Use this skill to turn the installed `awesome-design-md` collection into a practical design reference workflow.
+
+The local `design-md/` directory is the index of supported brand slugs. Its per-brand `README.md` files are only pointers. The actual design-system document lives at:
+
+```text
+https://getdesign.md/<slug>/design-md
+```
+
+## Workflow
+
+1. Identify the target brand or closest visual reference.
+2. Resolve the brand slug from the local `design-md/` folder.
+3. Prefer exact folder names for dotted brands such as `linear.app`, `mistral.ai`, `opencode.ai`, `together.ai`, and `x.ai`.
+4. Fetch `https://getdesign.md/<slug>/design-md`.
+5. Use the fetched document in one of two ways:
+   - write or update the project's root `DESIGN.md`
+   - keep it as an external design reference while implementing UI
+6. Preserve the user's product semantics and content model. Borrow visual language, spacing, typography, motion, and component patterns, not product-specific copy.
+
+## Local Source Of Truth
+
+Use the installed folder below to confirm which slugs exist before fetching:
+
+```text
+C:\Users\a931627\.claude\skills\awesome-design-md\design-md
+```
+
+If needed, list the available slugs with:
+
+```powershell
+Get-ChildItem -Name C:\Users\a931627\.claude\skills\awesome-design-md\design-md
+```
+
+## Practical Rules
+
+- Treat `DESIGN.md` as a visual system reference, not as code to mirror verbatim.
+- If the user asks for "something like X, but lighter, warmer, or more minimal", adapt the reference instead of cloning it literally.
+- If multiple brands fit, choose the closest one and state the choice.
+- If a slug is missing locally or the remote fetch fails, pick the nearest available brand or ask the user for a replacement target.
+- When working inside an existing design system, merge the borrowed visual cues with the established component structure instead of replacing everything.
+
+## Common Slug Examples
+
+- `stripe`
+- `vercel`
+- `claude`
+- `cursor`
+- `supabase`
+- `linear.app`
+- `mistral.ai`
+- `opencode.ai`
+- `together.ai`
+- `x.ai`

DESIGN.md

@@ -0,0 +1,322 @@
+# Design System Inspired by 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)