cro-visual-hierarchy

name	cro-visual-hierarchy
description	CRO lens — does the eye land on the most important element first? Surveyed by the Analyst.
license	Apache-2.0
metadata	{"version":"1.1.0"}

Visual Hierarchy

Lens question: Does the visual weight of the block match the importance of its elements — does attention flow headline → value → action, or is it flat/competing?

Signal of the gap (DOM/RUM):

• DOM: inside the block's decorated DOM, the action (a.button) has the same weight as decoration; the authored heading is the same size as fine print; no clear focal point; contrast too low between primary and secondary elements. In an auto-blocked hero, the picture can dominate while the heading + CTA read as an afterthought.
• RUM: engagement spread thin; the objective element under-clicked relative to its intended prominence.

Variant kind it implies: CSS-only, almost always — type scale, weight, color, spacing, and z-order, scoped to the block (body.variant-<name> .<block> …). The archetypal cheap, safe code experiment. Must set the variant class eagerly so re-weighting an above-the-fold element doesn't cause CLS — this is why variant-selector.js runs in the eager phase, before the block decorates (three-phase loading: eager/lazy/delayed).

Related Skills

• building-blocks: how sections and .block wrappers are decorated, and the CSS standards (custom properties, mobile-first) a re-weighting variant must follow.