Tokens for handoff
Derived from the logo: navy gear, cobalt flask, leaf green globe. Warm paper ground, editorial asymmetry, no card borders — depth comes from shadow, fill, and bleed.
Color
Type scale
Layout rules
no fixed container — sections span full width, 40px guttersasymmetric column ratios: 1.35/0.9/0.75, 1.15/0.85, 1.2/0.9/0.9vertical stagger: sibling cards offset 24–130px via margin-topbleeds: media rounds one side only (0 32px 32px 0) and runs off-canvasrotation: ±2–3deg on photo slots, never on textno card borders — separation via fill, shadow, and whitespacesection rhythm: 90–150pxshadow: 0 30px 70px rgba(23,36,92,0.10–0.16)
Glass buttons
Refractive pills for high-emphasis calls to action. They need something behind them to bend, so they belong on a gradient or photo — never on flat paper.
Strands
Additive glow, so it only reads on a dark ground — never on paper. In use on the home page's mission panel, where it replaced a blurred circle. Colours are cobalt, leaf, and navy.
Science that gets kids outside.
Circular gallery
A 3D carousel that maps page scroll onto Y rotation and idles with a slow drift. Not in use yet — it wants a page with real photography and a lot of scroll height behind it, and the fixed 300×400 frames mean every image has to be croppable to 3:4. Both motions stop under reduced-motion.
Let's Learn workshop
ProgramsScience and Beyond
Conservation field day
ConservationScience and Beyond
SDG hackathon
HackathonsScience and Beyond
Species survey
BiodiversityScience and Beyond
Outdoor classroom
ConservationScience and Beyond
Python boot camp
ProgramsScience and Beyond
Marquee
Continuously scrolling track, horizontal or vertical. Speed and spacing are CSS variables (--duration, --gap), so a caller tunes it with a bracket utility. Shown here in the tilted four-column arrangement; it also works flat for a logo or photo strip. Animation stops under reduced-motion. Copy below is placeholder.
She came home muddy and talking about macroinvertebrates.
The rubric made judging feel fair for once.
A full week of Python and nobody dropped out.
First class where he asked to stay late.
Thirty kids, one creek, zero chaos.
The outdoor classroom gets used every weekend.
She came home muddy and talking about macroinvertebrates.
The rubric made judging feel fair for once.
A full week of Python and nobody dropped out.
First class where he asked to stay late.
Thirty kids, one creek, zero chaos.
The outdoor classroom gets used every weekend.
She came home muddy and talking about macroinvertebrates.
The rubric made judging feel fair for once.
A full week of Python and nobody dropped out.
First class where he asked to stay late.
Thirty kids, one creek, zero chaos.
The outdoor classroom gets used every weekend.
She came home muddy and talking about macroinvertebrates.
The rubric made judging feel fair for once.
A full week of Python and nobody dropped out.
First class where he asked to stay late.
Thirty kids, one creek, zero chaos.
The outdoor classroom gets used every weekend.
Drift wall
Full-bleed parallax wall of programme photography, in use at the foot of the About page. Geometry is held to tilt 7° / turn −6° so it obeys the ±2–3° rotation rule rather than the component's much steeper defaults. Drifting stops under reduced-motion and every tile stays keyboard-reachable.