# Strukata Design Patterns Extracted from https://strukata.com (June 2026) — a premium B2B SaaS landing page for the TGA/HKLS industry. These patterns proved highly effective when applied to the AgentTrust prototype redesign. ## Core Patterns ### 1. Snap Scrolling Full-viewport sections with mandatory snap — creates app-like vertical navigation. ```css html { scroll-snap-type: y mandatory; scroll-behavior: smooth; } section { min-height: 100svh; scroll-snap-align: start; } ``` Use `100svh` (not `100vh`) for mobile browser chrome compatibility. ### 2. Scroll-Triggered Reveal Animations Elements start hidden and fade up when entering viewport. Use Intersection Observer (vanilla JS, no libraries). ```css .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .revealed { opacity: 1; transform: translateY(0); } ``` Stagger children via CSS custom property `--i`: ```css .reveal { transition-delay: calc(var(--i, 0) * 50ms); } ``` JS: `observer = new IntersectionObserver(callback, { threshold: 0.2 })` ### 3. Fixed Header with mix-blend-mode: difference Header text auto-inverts over light/dark backgrounds — no JS needed. ```css header { position: fixed; inset: 0 0 auto 0; z-index: 50; mix-blend-mode: difference; color: white; } ``` Keep header minimal: logo/text left, one CTA link right. ### 4. Alternating Dark Section Backgrounds Don't use all-dark or all-light. Alternate between two dark tones for rhythm: - Primary: `#060b14` (deep void) - Alternate: `#0a0f1a` (slightly lifted) This creates visual pacing without breaking the dark theme. ### 5. Ultra-Tight Hero Typography ```css .hero-headline { font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 600; /* semibold, NOT bold */ line-height: 1.04; /* ultra-tight */ letter-spacing: -0.02em; /* compressed tracking */ text-wrap: balance; } ``` ### 6. Eyebrow Labels Tiny uppercase labels above section headlines: ```css .eyebrow { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.35); /* muted */ } ``` ### 7. Mono Step Numbers Use monospace font for numbered steps (01, 02, 03, 04): ```css font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; ``` ### 8. Scroll Indicators Small "scroll" text + chevron SVG at bottom of each section (except last): ```html
scroll
``` ### 9. Thin Borders Over Heavy Shadows ```css border-top: 1px solid rgba(255,255,255,0.06); ``` No box-shadows. Depth comes from color contrast and whitespace. ### 10. SVG Draw Animation For logo/icons on load: ```css .draw-path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.5s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } ``` ## When To Use - Premium B2B SaaS landing pages - Dark-theme prototypes needing editorial rhythm - Any page where "scroll experience" matters as much as static layout - When user provides a reference URL and says "make it look/feel like this" ## Pitfalls - `scroll-snap-type: y mandatory` on `` can conflict with some browsers' default overscroll behavior. Test on mobile. - `mix-blend-mode: difference` on header means header text MUST be white — it inverts to black over white sections. - Intersection Observer needs a `prefers-reduced-motion` fallback: set all `.reveal` to `opacity: 1; transform: none` when motion is reduced. - `100svh` is well-supported in 2026 but test on older iOS Safari if targeting broad audiences.