Grid / product
UI Layouts hero pattern
hero-ai-value-proposition
Great for SaaS and AI tools that need fast comprehension, low-friction scanning, and practical CTA entry points.
Double exposure / duotone / posterized portrait treatment
This version presents the product like a technical explainer: clear grids, clean modules, scannable text, and code-like surfaces that emphasize structure over decoration.
block_1
Source brief
block_1
Mode rules
block_1
Token map
block_2
Section logic
block_2
Type system
block_2
Motion preset
block_3
Route preview
block_3
CTA states
block_3
Mobile collapse
Structured technical explainer
Data, systems, and flow are presented like an explainer for a technical product, so the sense of trust comes from modular composition rather than cinematic styling.
architecture.map
capability
The same message set is restructured through layout, type scale, surface treatment, and narrative rhythm that change from one family and style to another.
capability
Under the catalog sits a renderer-family system, so multiple styles can reuse a skeleton while still feeling clearly different in visual language.
capability
Each route makes the trade-offs between clarity, materiality, density, novelty, and conversion feel explicit instead of merely swapping palettes.
route.config
avoid.list
Style intelligence
A layered image treatment that combines double exposure with duotone color, producing a mood-heavy, high-impact look suited to campaign heroes, digital posters, and attention-grabbing landings.
Compare against
Art Deco
Double exposure duotone prioritizes "layered imagery with two-tone contrast"; Art Deco gives a different read within the same family.
Best fit
Campaign pages, music or event visuals, creative launches, media brands, and poster-led landings
Structural signature
Avoid
Practical takeaway
This route demonstrates how the same product can be art directed in radically different directions by changing layout, hierarchy, materiality, and density with intention.