# Design Fusion Technique — Case Study: AgentTrust

How to combine multiple design systems into one cohesive product page without creating
visual chaos. Based on the AgentTrust prototype session (2026-06-18).

## The Problem

No single design system covers all needs for a dark-mode cybersecurity product:
- Linear has the best dark-mode-native approach but no cinematic scrolling
- Stripe has the best shadow system but is light-mode
- Vercel has shadow-as-border but no snap-scrolling
- Strukata has snap-scrolling and reveals but no dark-mode depth system
- Superhuman has typographic compression but is mostly white

## The Solution: DNA Extraction

Pick ONE primary DNA and layer secondary DNAs for specific subsystems:

| Layer | Source | What to take |
|---|---|---|
| **Primary (canvas + depth)** | Linear | Dark backgrounds (`#08090a`/`#0d1117`/`#161b22`), luminance stacking, semi-transparent borders, ghost buttons, single chromatic accent |
| **Shadows** | Stripe | Multi-layer shadow stacks with brand-tinted color (cyan instead of Stripe's blue-purple), conservative radii (6/8/12px) |
| **Borders + badges** | Vercel | Shadow-as-border technique (`0px 0px 0px 1px`), workflow colors for semantic states, pill badges (9999px) |
| **Motion** | Strukata | Snap-scrolling, IntersectionObserver reveals with stagger, mix-blend-mode header, SVG draw animation, scroll indicators |
| **Typography** | Superhuman + Linear | Compressed display (line-height 1.00, tracking -0.04em), system fonts, mono for technical labels |

## Rules for Fusion

1. **One chromatic accent only** — Linear's rule. All color comes from ONE brand color. Everything else is grayscale.
2. **Shadows get the brand tint** — Stripe's rule. The primary shadow color carries the brand hue at low opacity.
3. **Borders are shadows** — Vercel's rule. Use `box-shadow: 0 0 0 1px` instead of `border`. This keeps the box model clean.
4. **Elevation = luminance, not shadow darkness** — Linear's rule. On dark backgrounds, traditional shadows are invisible. Step background opacity instead.
5. **Text is never pure white** — Linear + Stripe rule. Use `#e6edf3` (near-white with blue undertone) for primary text.
6. **Snap-scrolling + reveals = premium feel** — Strukata's rule. Full-viewport sections with scroll-snap and staggered fade-up animations.

## When to Use This Fusion

- Dark-mode cybersecurity / trust infrastructure / developer tool products
- Pages that need to feel both technically precise AND cinematically premium
- Single-page prototypes where snap-scrolling creates an app-like navigation

## Anti-Patterns

- Don't mix light-mode and dark-mode systems (Stripe shadows on Linear dark = invisible)
- Don't use multiple chromatic accents (Linear's single-accent rule)
- Don't apply glassmorphism everywhere (reserve for ONE hero element — the passport card)
- Don't use heavy borders on dark backgrounds (whisper-level only: `rgba(255,255,255,0.06-0.08)`)