Adaline
www.adaline.aian AI-infra product site that swaps the genre's default dark-neon for a hand-built 3D Japanese-garden world, then runs warm earth tones, a grotesque/mono type pair and patient scroll-reveal motion over the top so a developer tool feels like a calm place.
Design tokens
- display
- akkurat
- body
- akkurat
- mono
- fragmentMono
Do / Don't
Reference it for
- Defying a category's visual defaults on purpose: a warm, natural-world build in a space that expects dark-neon. The single most borrowable idea here.
- A grotesque + mono type pairing where mono carries every label, button and number, giving "machine precision" without a dark theme.
- An earthy, low-chroma palette (forest ink #0A1D08 on paper #FBFDF6, with sage and espresso) that still passes as a serious B2B tool.
- Recurring art direction: the same illustrated world at the top and bottom of the page, bookending the scroll.
- Odometer number counters and a numbered, auto-advancing product tab sequence as proof-of-capability motion.
Do not copy
- The garden render itself. It is the brand. Borrow the *strategy* (build a coherent world that defies the category), not the imagery.
- akkurat and fragmentMono are licensed brand faces; map to a similar grotesque + mono pair, do not source these.
- The ~24,750px page length suits a venture-funded launch site with a lot to prove; most client briefs want a third of it.
Signature moves
category-defying world build
an AI-infra site swaps the genre's dark-neon default for a warm natural-world build on paper #FBFDF6 with forest ink #0A1D08, sage and espresso, proving a coherent world can defy the category.
mono-carries-every-label type pairing
a grotesque (akkurat) plus mono (fragmentMono) pairing where mono carries every label, button and number, giving machine precision without a dark theme.
world-bookended scroll with odometer proof motion
the same illustrated world appears at the top and bottom to bookend the scroll, with odometer number counters and a numbered auto-advancing product-tab sequence as proof-of-capability motion on ~300ms timing.
Related references
Dub
strongDeveloper Tool
The reference for open-source link-attribution platform — pure black/white monochrome with Satoshi + Inter, real dashboard hero, dotted-grid integration map, 48-keyframe motion library.
Homerun
strongHr Platform
The reference for friendly HR/recruiting platforms with chunky 70s-display typography — warm cream + brown text + saturated CTA, real product UI in hero, pink customer-love mode-flip.
Slack
flagshipSaas Product
a post-Salesforce-acquisition product flagship where the iconic aubergine `#611f69` survives as the primary CTA, Salesforce-Sans replaces Lato, and a 30-keyframe motion library powers the "workspace-people-bump" avatar animations that have always been Slack's brand signature.
Clerk
strongDeveloper Tool
The reference for auth-platform / dev-tools at peak monochrome restraint — pure black on white, Suisse + Geist Numbers + Söhne Mono, letter-reveal hero animation.