Career SaaS · Light

Trailhead

A page that is a mountain descent: the scroll takes the camera from the sunny summit down to the lake, a blue-pen Trailhead draws itself along the way and the content appears as frosted-glass cards perched on the landscape, with an editor cursor playing with the title.

Palette

--sky#5994E0
top sky, initial background
--accent#3D5FE0
primary button, trail dots, editor selection
--grass#6E8A3A
dominant tone of the landscape (reference for overlays)
--text-light#FFFFFF
titles over the sky and the landscape
--text#1D2230
text inside the cards
--text-2#555B69
descriptions and metadata in the cards (≥ 5:1 on the glass)

Typography

Display: neo grotesque, 400, normal case, tracking -2%, clamp(36px, 4vw, 64px), white with a soft shadow, titles on 2–3 lines with a staggered indent (2nd line shifted to the right) — suggestions: Inter Tight / Hanken Grotesk
Body: same family 400, 12–14px
Support/labels: 10–11px 500, small pills; prices in large 500 inside the card
Treatments: blue text selection with a name tag (collaborative cursor); titles over the image with a diffuse text-shadow; staggered-indent lines.

Sections

Loader — the logo draws itself (stroke) and opens onto the sky.
Nav — logo on the left; small links and a white "sign in" button on the right, transparent over the sky.
Hero — blue sky with clouds; 2-line title at the top left; person working at a desk on the summit; Trailhead descending; short text and two buttons (solid blue and white) in the bottom-right corner.
Steps — the camera descends the hill; 3-line title on the left; glass cards with the steps on the right, each linked by a blue dot on the drawn Trailhead.
Portfolios — title at the top left and a grid of glass cards with images of work over the hillside.
Jobs — large title on the left; list card with jobs (colored icon, role, company, metadata).
Testimonials — quote cards scattered at the top; centered title below over the lake.
Pricing — 2 cards (free and paid), the paid one with a blue button.
Final CTA — centered title on 3 lines at the base of the Trailhead, two buttons.
Footer — wide white card resting on the ground with a phrase and link columns.

Motion and interaction

Logo loader: load → logo SVG draws (dashoffset) over 900 ms, screen fades.
Editor cursor: load/hover on the title → a cursor with a name tag enters, selects two words (blue highlight grows letter by letter) and releases; repeats on mouse-over.
World on scroll: scroll → the landscape is a very tall image (or layers) that translates in y; foreground layers (rocks, bushes) move faster (1.3× parallax), sky slower (0.4×).
Blue-pen trail: scroll scrub → blue (dashed) SVG path draws itself following the image's path; blue dots appear when the stroke reaches them.
Glass cards: enter with blur 12px → 0, y 30px, and exit blurring as they pass the top.
Titles: fade with blur per line.

Components

Blue button: #3D5FE0 background, white 11px text, 6px radius, small icon on the left.
White button: #FFFFFF background, dark 11px text, 6px radius.
Glass card: --glass + backdrop-filter blur(14px), 10px radius, 1px white border at 60%.
Trail dot: 12px blue circle with a 3px white ring.
Job row: 18px colored square icon, 11px role, gray company, value on the right.
Quote card: quotation marks, 11px text, 10px 500 name.
Plan card: 90% white, 28px price, list with checks, full-width button.
Cursor tag: 9px blue pill with a name, cursor arrow.