Walkthrough
The site in motion.
Hover-led interactions and subtle fades carry the experience. Scroll effects are kept minimal — the payoff is usability, accessibility, and clean SEO.
The entire prototype was built using Claude Code and the Figma MCP — design tokens and components pulled straight from Figma into working code.
Visit live siteThe Approach
Built on the 5P narrative.
The page leads the reader through a single argument rather than a list of features. Each section answers the next obvious question, so the visitor never loses the thread.
01PromiseThe headline outcome — what the ecosystem delivers, stated plainly above the fold.
02ProblemThe hiring friction each audience feels today, named in their own words.
03ProductProduct-first displays that show, not tell — the interface does the talking.
04ProofQuiet credibility markers that earn trust without shouting.
05PushA single, clear call to action that closes each audience's path.
Sitemap
A sitemap built from the interviews.
The structure came directly out of stakeholder interviews on what the website needed to do. It was deliberately designed to scale — new pages can slot in without re-architecting the navigation.
Design Language
Gradient-accented minimalism.
Premium and professional, with a playful, innovative edge — product-first, hover-led, and light on scroll effects for accessibility and SEO.
Product-first displays
The interface is the hero, not decorative illustration.
Hover-led interaction
Detail lives in hover states; the resting page stays calm.
Subtle fades
Gentle transitions guide attention without slowing the read.
Minimal scroll effects
Restraint protects usability, accessibility, and SEO.
Mood and structure drew from leading AI product sites — confident type, generous whitespace, one restrained gradient visual per screen.
Typography
Two families, one token scale.
Instrument Sans for display, Inter for everything else. Weights kept to regular (400), medium (500), and semibold (600).
font/family/display
Instrument Sans
Aa Gg Rr 0123
Display scale (D1–D4). Geometric with enough character to feel premium and friendly at large sizes.
font/family/default
Inter
Aa Gg Rr 0123
Headings, body, and captions. Chosen for legibility across long passages and small sizes.
Token
Family
Size / LH
Weight
Display · Instrument Sans
D1
display
64 / 72
Regular
D2
display
48 / 56
Regular
D3
display
40 / 48
Regular
D4
display
32 / 40
Regular
Heading · Inter
H1
default
32 / 40
Regular · Medium
H2
default
28 / 36
Regular · Medium
H3
default
24 / 32
Regular · Medium
H4
default
20 / 28
Regular · Medium
Body & Caption · Inter
B1
default
16 / 24
Regular · Medium
B2
default
14 / 20
Regular · Medium
Caption
default
12 / 16
Medium
Color System
One color per audience.
Color does real work here. Each of the three user types gets its own gradient, so the marketing and UX copy for that audience is instantly recognizable — visitors know which path is theirs before they read a word.
