A dark-first, motion-first design system for Hypt and Vyu. One set of tokens, one motion language, two accents. Everything on this page is live — hover it, press it, switch the product above.
Implemented in WPF (Tokens.xaml · Controls.xaml · Motion.cs) Windows 11 native type & icons Reduced-motion awareWhen a decision isn't covered by a token, these decide.
Clips and video carry the color. The interface is near-black glass that steps back.
Things rise in, presses squash, toggles spring. Nothing animates for more than half a second.
Hypt is Blaze → Coral (#FF4500 → #FF6F59). Vyu is Amethyst → Lilac with white. Gradients are spice, not sauce.
System fonts and icons, no web view, layers that stop drawing the moment they're hidden.
Never steal focus from a game, never show up in a clip, honour “animations off”, keep text ≥ 4.5:1.
Five steps of charcoal built around the Hypt brand colour #1E1E24. Click any swatch to copy it.
Accent1 #FF4500 → Accent2 #FF6F59 · on #1E1E24Hypt · Blaze → CoralAccent1 #7C3AED → Accent2 #B07CFF · with whiteVyu · Amethyst → LilacDisplay for headings, Text for interface copy, Cascadia Mono for timecodes. (Shown here in Inter if your system doesn't have Segoe.)
Five durations, three curves. The Out curve does nearly all the work; Spring is for things you touch.
Exponential ease-out · cubic-bezier(.16, 1, .3, 1)
Back ease-out, amplitude 0.35 · cubic-bezier(.34, 1.56, .64, 1)
Cubic · cubic-bezier(.65, 0, .35, 1) — loops & HUD fades
Buttons squash to 95 % in 90 ms and spring back in 360 ms. The live dot pulses every 1.6 s.
Every component here exists 1:1 in Controls.xaml.
The Windows 11 icon font — consistent with the OS, zero bytes to ship. On other systems the glyphs below may not render.
Hypt's mark comes from the brand artwork (design/brand-from-art.ps1 keys it out of its background and builds every icon size). Vyu's mark is drawn in code (design/make-icons.ps1): a purple squircle with a white glyph.

An H inside a recording frame — a player leaps off the crossbar and the right stem turns into a camera. Blaze → Coral on charcoal.

An eye whose pupil is a play button — watching, simply. Amethyst → Lilac with white.
Keep a quarter of the mark as clear space. Use on dark surfaces. Minimum 16 px.
Recolor the glyph, swap the two gradients, stretch the squircle or add outlines.
Hypt reads “hyped”. Vyu reads “view”. Always one word, capital first letter.
Same values everywhere. Copy the format you need.