DietStation Design Lab
Living prototypes of every feature in the works — open a flow to try it on any device, or expand its handoff for the specs developers need.
Living prototypes of every feature in the works — open a flow to try it on any device, or scan the lab as a list.
The shared materials every prototype builds on — dial them once here and every flow on every device follows.
The Figma file’s token tree mapped 1:1 into the lab — brand ramps (roots) → alias roles (trunk) → mapped tokens (leaves), plus the responsive collection and all 95 text styles with a live bindings audit. Flip Light/Dark and watch every chain re-resolve.
The doctrine, paired: every material and behavior as native-primary → React-fallback — Liquid Glass recipes, the chrome handshake, haptics, sheet physics and tokens in both notations, extracted from the shipping code.
The ground everything sits on — the full color palette, the spacing grid, corner radii and the elevation ramp, every value pulled straight from the shipping prototypes. Tap any color to copy it.
Four voices: Urbane Rounded speaks, Proxima Nova explains, Avenir Next World carries the Arabic experience, and DietStation Dot performs. The responsive scale from the Figma tokens, applied per typeface.
The dot-matrix brand font — Latin from the animation’s typewriter grid, Arabic traced onto the same grid with full contextual shaping. Weight is dot size: heavier cuts fuse the dots into strokes.
The working parts — buttons, pills, cards, bottom sheets, and the three tiers of glass with the one law that binds them (adaptive contrast). Every specimen on the page is live.
The one structure for every surface that presents over a screen: bottom slide-in over a dissolving scrim, two interaction modes (static / expanding-to-fullscreen), the right-side action-bar law, and the opt-in drag-to-close trait — with live draggable demos.
The refraction recipe behind every glass button in every flow, on every device. Open the lab to dial blur, frost, rim and ripple with a live WebGL preview — then publish the recipe globally so all devices follow.
Seven named curves cover every animation in the lab, from the .15s press to the .88s brand bounce — plus the choreography patterns that combine them. Tap a curve to replay it.
Native glass over web content — the boundary where most of this lab’s trouble happens. The contract for who draws what, and the catalogue of every way it has actually broken, with the rule that prevents each one.
One big number and a row of smaller parts — currency, decimals, the struck old price, /day — every one of them a switch. Every price in the product is this component. Build one and take the markup.
One plan-card design for every plan list, home and checkout alike: meal rows, the nutrition chip, a Price slot in the plan’s gradient, the deal chip and the plan pill. One source file that each flow copies, so the lists can’t drift apart.
The living brand pieces, running live — the shapeshift dot-field (875 scripted dots morphing between the four health features, steerable by state) and the cold-start splash, straight from the shipped .riv files.
The few things that don’t bend: the two reds and where each lives, white icons in motion, the Apple-light canvas, and the unicase wordmark. Five laws with the do / don’t to match.