Variant 01 — Planar Hero 01 (198:12495)

Editorial label hero with no media. Icon companion tile + a single display-size category word ("Growth"), a two-tone h5 paragraph (bold lede + muted continuation), and a primary md CTA. Left-aligned stack with section-lg top padding so the hero reads as the page's editorial opener.

Variant 02 — Planar Hero 02 (198:12493)

Bento hero. Single rounded container hosts the gradient strip, a CTA row ("Meet Journey" h2 + Get started CTA + muted right-aligned tagline), and a 2-cell media bento (tile cluster on a fill backdrop + wide media cell). No surrounding section padding above the columns — the rounded container IS the hero.

Variant 03 — Planar Hero 03 (198:12490)

Title + proof + bento. Three stacks separated by bento-hero-gap (72px): h1 headline + primary CTA on top, a customer-logo proof row with horizontal scrim fade in the middle, and a 2-cell media bento at the bottom (calendar tile on motif bg + wide media cell).

Variant 04 — Planar Hero 04 (198:12492)

Centered title-led hero with 2-cell media bento. Two-line h1 ("Meet Journey" + muted "The compensation OS") + centered primary CTA, then a Bento Large 07: tile cluster (dark debit-style tile stacked on a balance tile) + segmented tabs row on the left, portrait/fill image on the right (436px wide cell).

Variant 04B — Planar Hero 04 alt (527:13728)

Same shell as Hero 04 — the left bento swaps the debit-card + balance tile cluster for an "AI orb" tile: a green circular badge with motif texture + sparkle glyph + centered "Hi Chris, here's your summary for today" greeting. Pair with Hero 04 to compare left-cell tile patterns side by side.

Variant 05 — Planar Hero 05 (470:13941)

Centered title (same stack as Hero 04) over a 3-cell Bento Large 08: square cells of equal width. Left cell is a bg-image only; middle holds the "New Supplier" tile with inner brand row; right wraps the Tile Control 20 cluster (30 units + automation checklist) on the motif background.

Variant 06 — Planar Hero 06 (198:12491)

Bento Large 09 hero: 2-column. Left half stacks a CTA box (2-line h2 title + primary CTA, justify-between) above a motif cell carrying a single horizontal row of frosted-glass chips with icons (marquee scroll lands in the motion pass). Right half is a square media cell with a centered white play-button circle (72×72). The bento IS the hero — no section padding above/below the rounded container.

Variant 07 — Planar Hero 07 (198:12469)

Full-bleed image hero in a single wide rounded card (aspect 1422/558). Image at 90% opacity with a dark vertical scrim for white-text contrast. 2-line white h1 title justified to the center-left; a frosted-glass-dark download chip pinned bottom-right with brand-mark thumbnail + 2-line label stack.

Variant 08 — Planar Hero 08 (198:12489)

Sibling of Hero 07 with a taller aspect (1422/711) and a primary CTA in place of the download chip. White 2-line title sits bottom-left over the image, dark scrim provides contrast, button anchors the bottom-left below the title.

Variant 08B — Planar Hero 08 alt (198:12777)

Same shell as Hero 08, without the CTA. White 2-line title ("About us" + muted second line) sits centered-left over the image card. Use as the top of secondary / about pages where the title alone carries the page.

Variant 09 — Planar Hero 09 (198:12494)

Centered title + tabs + bento + support row. 2-line h1 ("Build with Journey" + muted) and primary CTA above a centered tab pill (Pay cycle / Equity / Reports). Below: Bento Large 07 with a 344px left cell carrying the Calendar tile on motif bg and a flex-1 right cell on portrait fill. Footer row: green status dot + "Need help?" line + secondary "Contact support" button. Tab → bento image switching lands in the interaction pass.

Variant 09B — Planar Hero 09 alt (219:14985)

Single-line section-divider hero. Just a centered h1 ("Frequently Asked Questions") with no subtitle, CTA, tabs, or bento. Same pt-section-lg / pb-section-md as Hero 10 — meant for /faq-style pages where the FAQ accordion sits right below.

Variant 10 — Planar Hero 10 (201:15100)

Minimal page-intro hero. Two-line h1 (title + muted subtitle) left-aligned with no CTA and no media. Section padding pt-section-lg + pb-section-sm so the title sits with a tall opener and a tight bottom edge — meant for secondary pages and section dividers.

Variant 10B — Planar Hero 10 alt (277:10763)

Customers / social-proof section-divider hero. Centered h1 ("Our customers") + a horizontal customer logo row with edge scrim fades. Same Planar customer placeholders as Hero 03 plus continuum.ai. Marquee scroll lands in the interaction pass.

Variant 10C — Planar Hero 10 alt (278:12099)

Breadcrumb-style page-intro hero. A single centered row at h1 size pairing a parent section label, an arrow glyph, and a muted current-view label (e.g. "Integrations → All"). Same outer padding as Hero 10 — pt-section-lg / pb-section-md — for nested page tops.

Variant 11 — Planar Hero 11 (219:13472)

Pricing-page hero. Centered display title ("Pricing") + billing-period tab toggle (Monthly active / Annually). Drives the pricing-grid below; tab → grid switching lands in the interaction pass.

Variant 12 — Planar Hero 12 (219:13867)

Careers / team hero. Centered h1 + primary CTA over a 3-cell horizontal bento gallery (300px portrait / flex-1 wide / 300px portrait, aspect 1080/424). Used as the top of /careers.

Variant A — Planar Hero 05 (470:13942)

Variant B — Email-first hero (Journey locked)