UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

Landing Page First-Viewport Signal

A landing first viewport must clearly show what the brand, product, person, or place is and hint at the next section.

landingherofirst-viewport

Design Principle

The first viewport should not only create atmosphere; it should show identity, value, and the next exploration path.

Principle The first viewport should not only create atmosphere; it should show identity, value, and the next exploration path.

Design action Landing H1 should be the brand, product, object name, or clear offer; use a real or generated image to carry the subject and keep a hint of the next section visible.

Examples Positive example: Brand pages, product pages, portfolios, and event pages. Counterexample: The H1 is an abstract slogan rather than the object name.

Apply when Brand pages, product pages, portfolios, and event pages. Users need to understand the object quickly.

Source notes Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Landing H1 should be the brand, product, object name, or clear offer; use a real or generated image to carry the subject and keep a hint of the next section visible.

Apply When

  • Brand pages, product pages, portfolios, and event pages.
  • Users need to understand the object quickly.

Avoid

  • The H1 is an abstract slogan rather than the object name.
  • The hero uses only gradients and decorative graphics.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
82%
Version
v1
Published
6/6/2026