Back to recipes

landing recipe

Integration-led landing

A platform-oriented landing composition for products whose value depends on the surrounding tools, workflow, or partner ecosystem.

Theme contract

light-dark

Variance / motion / density

variance
6/10
motion
2/10
density
4/10

Composition sequence

Role order the AI can adapt

01 · hero · required

Asymmetric split hero

View contract
Live source render · fixture content

Source-reviewed hero block

Make the next workflow obvious.

A split value proposition with one real media boundary and a clear first-viewport action.

02 · proof

Trust logo rail

View contract
Live source render · fixture content

A proof rail beside a meaningful claim

  • Source-readyreviewed
  • Data-awarestructured
  • Composablerole-based
  • Low motionreduced

03 · integration · required

Featured integration grid

View contract
Live source render · fixture content

The ecosystem is part of the product

Give the first connection more space, then let the rest become scannable.

Build

API surface

Connect the source that already owns the workflow.

Automate

Event stream

Move useful changes into the next system.

Store

Data layer

Keep context attached to the operation.

Extend

Runtime hooks

Leave room for the team’s own tools.

04 · steps · required

Process steps

View contract
Live source render · fixture content

A short path to a concrete outcome

Four milestones are enough to explain a workflow without inventing motion.

  1. 1

    01

    Capture

    Collect the input that starts the journey.

  2. 2

    02

    Shape

    Turn raw material into a usable structure.

  3. 3

    03

    Review

    Give people a clear place to make decisions.

  4. 04

    Ship

    End with an outcome someone can act on.

05 · feature

Bento feature grid

View contract
Live source render · fixture content

One product, several useful angles

Vary the grid span and content slot so the feature story has a visual rhythm.

Workflow clarity

Keep the main promise legible before the details arrive.

Useful signals

Give each supporting claim a place to breathe.

Clean handoff

Use a bounded slot for a real screenshot or live preview.

A precise detail

Add one small proof point without flattening the layout.

06 · cta · required

Asymmetric CTA panel

View contract
Live source render · fixture content

Closing action

Give the page one clear way to continue.

A closing CTA should complete the narrative instead of repeating the hero.

  • One action
  • A concrete outcome
  • No duplicate hero copy