Give Figma a stiffness and a mass, and it works out the duration

Build a design-system documentation page for a motion foundations section: the page that documents a team's spring tokens. Treat it as a real docs page a studio hands over with a component library, not a poster.

Structure, top to bottom:
1. A slim site bar: wordmark left, three text links right.
2. A full-bleed hero image (a painted still life of three brass coil springs on a bottle-green table against a dusty rose wall, subjects on the right). Lay a horizontal scrim in the page ground colour over the left half, 97 percent opaque at the edge fading to clear by 64 percent. On it: a nameplate made of a huge condensed numeral (the section number, about 130px, bottle green) beside a two-line mono caption (section name in raspberry caps, then date and read time), the headline, a two-sentence deck, one solid green button and one text link.
3. A sticky tab bar of real anchor links, one per section. Each tab has a 4px bottom bar in its section's key colour; the tab for the section in view fills with that colour (IntersectionObserver).
4. Full-width colour-zoned bands, one per section, each opened by a solid zone label (mono caps, white on the key colour) and a condensed uppercase h2, over a docs body grid of a 150px meta column (source and date), a 640px reading column and a side column for facts, figures and diagrams. Bands in order: rose overview, mint main topic, white changes, deep green design rule, pale brass prompt, rose-ground sources.
5. In the mint band, a spring bench card: preset token buttons (settle, snap, bloom, drift) with aria-pressed, three range inputs for stiffness, damping and mass with live outputs, an SVG plot of position over a fixed 2.4 second axis with the target line and a settle marker, a ball on a track that plays the spring on a Play button, a readout of settle time in ms, damping ratio and overshoot, and a dark code block printing transition-duration and a 17-point CSS linear() curve. Simulate the spring for real (m x'' + c x' + k(x - 1) = 0, 1ms steps, settled when within 0.001 of the target and nearly still).
6. A deep green band holding the design rule as numbered rules beside a code card of tokens.
7. A three-tile pager and a short colophon.

Palette: ground #F2E4E8 cool rose with a faint noise grain; bands #E8C7CF rose, #D5E6DB mint, #FCF8F9 white, #123A2C deep green, #EFE5CF pale brass; ink #13291F; accent #1D5E43 bottle green; raspberry #9E4F65 and plum #6A3A4E for labels; brass #A9853A only for the settle marker.
Type: Big Shoulders Display 800 uppercase for the numeral, headline and h2s; Libre Caslon Text for body at 19px, line-height 1.7; IBM Plex Mono for labels, tabs, controls and code.

Guardrails: body at least 18px with line-height 1.6 or more and 60 to 75 characters per line; every label passes WCAG AA on the surface it sits on; check headline contrast over the scrim at desktop and on mobile, where the image moves above the copy at 4:3. No readable text inside the image. No neon, no glow, no gradient text, no purple-blue gradients, no pill-shaped everything (8px buttons, 14px cards), no accent stripes on cards. Hover and focus states at 150ms on every control, one shadow on the bench only, and a prefers-reduced-motion rule that turns the Play animation into an instant jump.