Usage

The full-bleed hero. A gradient blob in the theme's primary palette anchors the page, with eyebrow + heading + description + CTA on the left and an optional product image on the right. Use as the page's top block.

Content length

Eyebrow renders as an h1 for SEO — the page's primary landmark. 2–4 words. Reads in the theme primary at weakest tone, uppercased and letter-spaced.

Heading renders as an h2 at display weight in white. The font-size uses a viewport-clamp so it scales smoothly between mobile (~2.25rem) and desktop (~4rem).

Description is 1–2 sentences in white at body weight.

Primary CTA is required for the hero to feel complete. Uses the expressive (warm earth) button variant. Secondary CTA is optional — outlined button.

Variations

variant="shapeA" (default) and "shapeB" — two decorative gradient blob shapes. shapeA is more horizontal; shapeB curves up from the bottom-left.

background_color — section backdrop. The gradient blob sits in front; the backdrop fills around it.

Color cascade

The gradient blob picks up the active theme's primary.stronger / strongest tones — so a green-themed page renders a green hero, magenta-themed renders magenta, and so on. Text inside the hero stays white (foreground inverse) regardless of theme. The eyebrow uses the theme primary at weaker grade.