Design references that run with the product
Working component catalogs, semantic tokens, and customer-flow checks in the public sites for IYU Labs and Aviune.
I built design references alongside the public sites for IYU Labs and Aviune. I wanted to inspect the actual components as the sites changed, including their type, color, and motion.
IYU Labs is the home for my software products and consulting work. Aviune is a game hosting company preparing to start with Minecraft. Each has its own identity. Both sites need to work beyond a desktop screenshot, through the pages people read and the customer communications they open on a phone.
Use the working components
With the site's real components and fonts in the gallery, you can try a disabled button or a field's error state, then use the keyboard to inspect focus on a navigation item and see those states together on the page.
The IYU Labs reference has a searchable catalog, typography specimens, contrast checks, and motion controls. Its editable sandbox is isolated from the customer pages. Trying a setting there leaves the public site's appearance alone.
Aviune's reference covers its brand, color, type, components, motion, and foundations. Both references run in light and dark themes, so the colors can be checked on working components as well as in swatches.
Carry decisions through tokens
Semantic tokens name a color's role in the interface. A muted label needs a foreground color that's readable on its background. Keeping that role in the token name tells me where a value belongs when I change it.
IYU Labs exports its tokens to CSS and JSON. The freshness check catches generated files that have fallen behind their source.
That keeps the reference and customer pages on the same values.
I can review a changed token in the reference, then see it on the pages that use it. The catalog stays useful during the next change.
Follow the customer beyond the page
Aviune's launch site includes contact messages and waitlist confirmations, with consent records and unsubscribe paths. That flow continues into email. The receiving client and its image-loading settings affect what someone sees there.
The site closeout checks keyboard navigation, narrow-screen reflow, enlarged text, metadata, and social previews. A screenshot covers composition, but checking whether focus returns correctly takes interaction, and checking where a contact request goes takes a request through the handler.
Describe the milestone honestly
IYU Labs' public site is live. Aviune's public site, contact flow, and waitlist are live too. The hosting service is still in preparation: provisioning and checkout are planned work.
The Aviune copy and project description keep that distinction explicit, so someone joining the waitlist knows which part has launched.