LeverHub — trading academy
2026
LeverHub
A Swiss-structured academy site that runs a single family at a dramatic scale range instead of pairing a display face with a body face.
Delivered to
Retail education
LeverHub
Framework
Astro, static
Type: One family, dramatic scale
Techniques
2
4 constants, formulas and guards
The public site for a personal-finance and trading academy, built to a brand book whose premise is that the subject starts with the person rather than the charts. The design answer is a light Swiss foundation interrupted by three near-black anchor sections, an electric teal reserved for actions and data moments, and one typeface doing the entire hierarchy through size and weight rather than through a second family.
Offline
Marketing site for a trading academy, built to the brand's own book. Not linked from this page; claims are made against the source.
One typeface, one accent, and a darkened twin so small text can still be teal.
1.8:1
Fails text — actions only
Buttons and data moments, where it sits on a large shape.
4.9:1
Clears AA — small text
The darkened twin, for teal words at body size.
What was built, and for whom.
LeverHub
Retail education
en
Fifteen sections in a fixed narrative order, a video introduction, and a guided tour of the product's own hub.
Each one starts with something that was broken.
- 01
Two teals, because one cannot do both jobs
The failure
A mid-tone brand teal is perfect on a button and illegal in eleven-pixel body text. Most sites either use it anyway and fail contrast, or abandon it for grey and lose the brand at exactly the scale where most of the words live.
The decision
Split the accent by role. The bright teal owns calls to action and data moments where it sits on a large shape; a deliberately darkened variant exists purely so small text on light grounds can still be teal. The token carries the reason, so nobody has to re-derive it.
- constantsrc/styles/global.css
--teal-ink: #1b7568; /* darker teal for SMALL text on light (AA) */ - constantsrc/styles/global.css
--teal #2fae9b · --teal-bright #34d3ba · --teal-deep #208c7c
- 02
The motion engine is forty lines, not a dependency
The failure
Scroll reveals are the single most over-engineered thing on a marketing site. The usual answer is a scroll library, which arrives with a timeline system, a plugin architecture and a runtime, to fade eleven sections in.
The decision
Write it in the layout. One observer, one class, a stagger for grids and a count-up for numbers — and the reduced-motion branch checked once before any of it binds, so the preference is handled at the top rather than in each animation.
- guardsrc/layouts/Layout.astro
const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches — checked before targets are bound - guardsrc/layouts/Layout.astro
if (reduced || !("IntersectionObserver" in window)) — settle everything immediately
What it cost
No timeline, no scrubbing, no orchestration. If the site later wants choreography, this is not the engine for it — and forty lines is a cheap thing to throw away when that day comes.
Every animation, with what it does when asked for less.
The last column is the one worth reading. “Respects reduced motion” is easy to assert and easy to skip, so where it is not true here, it says so.
Section reveal
On intersection, once
Ease-out
Targets are settled immediately and the observer never binds.
Staggered grid
Per-child delay within a revealed grid
Ease-out
Settled with no stagger.
Count-up
On reveal
Ease-out
Final value rendered directly.
What it was built on, what is claimed, and what is not.
Framework
Astro, static
One section per component, composed in page order, so the page's narrative and the file list are the same list.
Type
One family, dramatic scale
Hierarchy comes from size and weight rather than from a display/body pairing — see the technique below.
Motion
A hand-written engine in the layout
Roughly forty lines handling reveals, staggered grids and count-up numbers, rather than a scroll library.
Claimed — and how to check it
A darkened accent exists solely for small text on light grounds
--teal-ink in global.css, with the reason in the token's own comment.
Reduced motion is checked once, before any observer binds
The guard at the top of the layout's motion script.
One typeface carries the whole hierarchy
The font stack in the layout.
Not claimed
- No enrolment, traffic or conversion figure.
- No claim over the brand book. It was supplied; the site was built to it.
- No claim over the academy's content, coaches or curriculum copy.
- No accessibility audit beyond the contrast decisions recorded in the token file.
Tokens and the motion engine read from the repository at the files named.