Frankli Hero Section

Frankli Hero Section, dark-mode, illustrated, dark

Preview image. Unlock full-res

Teal hero with a centered serif headline over a wide white line-illustration mural of arched scenes and a single ghost CTA.

Summary

A teal full-bleed hero where a wide white line-drawn mural of arched vignettes runs behind a centered serif headline and one ghost CTA.

Visual description

Deep teal background spans the full width. A top navbar carries a small multicolor logo mark on the left, center links ("How it works", "Who it benefits", "Why us", "Resources", "Pricing"), a "Log in" link, and a ghost "Book a demo" pill on the right. Behind the headline runs a continuous white outline illustration: arched panels containing figures at laptops, lounging people, a plant, books, a cat, charts, and a dotted paper-plane path, with a few flat color blocks (orange, green, purple, pink) breaking the monochrome. Centered over the lower mural sits a two-line serif headline in white ("Performance management made easy.") with a short sans-serif sub-line and a second ghost "Book a demo" pill below.

Key takeaway

The wide continuous line-illustration mural built from repeating arches that stitches a single scene across the full hero width, with sparse color blocks keeping it from feeling like a coloring book. Centering serif type directly over the artwork keeps the focus on the message.

Reuse notes

Great for a human, approachable SaaS or HR brand that wants illustration-led warmth instead of a product screenshot. Needs a custom illustration system to pull off; the line work must stay light enough not to fight the headline. Dark teal is doing heavy lifting, so the palette is hard to swap to light mode.

More hero sections

See all

More like this