Design system · v1.0

Kinetic.

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 aware
01 · Principles

Five rules everything follows

When a decision isn't covered by a token, these decide.

01

Content is loud, chrome is quiet

Clips and video carry the color. The interface is near-black glass that steps back.

02

Motion explains

Things rise in, presses squash, toggles spring. Nothing animates for more than half a second.

03

One accent per product

Hypt is Blaze → Coral (#FF4500 → #FF6F59). Vyu is Amethyst → Lilac with white. Gradients are spice, not sauce.

04

Native and light

System fonts and icons, no web view, layers that stop drawing the moment they're hidden.

05

Respect the player

Never steal focus from a game, never show up in a clip, honour “animations off”, keep text ≥ 4.5:1.

02 · Color

Surfaces, text, accents

Five steps of charcoal built around the Hypt brand colour #1E1E24. Click any swatch to copy it.

Product accents
Accent1 #FF4500 → Accent2 #FF6F59 · on #1E1E24Hypt · Blaze → Coral
Accent1 #7C3AED → Accent2 #B07CFF · with whiteVyu · Amethyst → Lilac
Semantic
03 · Type

Segoe UI Variable, two optical sizes

Display for headings, Text for interface copy, Cascadia Mono for timecodes. (Shown here in Inter if your system doesn't have Segoe.)

Display · 46 / 800
Clip that.
H1 · 26 / 600
Your clips, on your phone.
H2 · 20 / 600
Create your vault
H3 · 16 / 600
Replay buffer length
Body · 14 / 400
Hypt is holding the last 2:00 of your screen.
Caption · 12.5 / 400
Neon Drift · Today · 9:14 PM
Overline · 11 / 700
Quick lengths
Mono · 13 / 600
0:12 / 1:04:30
04 · Space, shape, depth

A 4-point grid and soft corners

Spacing

Radius

XS · 6
S · 10
M · 14
L · 20
XL · 28
Pill
Shadow1 · 14 / 2 / 35 %
Shadow2 · 32 / 8 / 50 %
Glow · primary action only
05 · Motion

Fast start, long soft landing

Five durations, three curves. The Out curve does nearly all the work; Spring is for things you touch.

Out

Exponential ease-out · cubic-bezier(.16, 1, .3, 1)

Spring

Back ease-out, amplitude 0.35 · cubic-bezier(.34, 1.56, .64, 1)

InOut

Cubic · cubic-bezier(.65, 0, .35, 1) — loops & HUD fades

Patterns — press the buttons

Rise · lists stagger 35 ms

Pop · toasts, QR, stars

Durations side by side

Press & live pulse

Buttons squash to 95 % in 90 ms and spring back in 360 ms. The live dot pulses every 1.6 s.

Live · 2:00 buffered
06 · Components

The parts, working

Every component here exists 1:1 in Controls.xaml.

Buttons

Toggle · segmented · chips

Voice commands
Hype detector
Quality
Filters
All 8StarredNeon DriftPixel Siege

Inputs

Replay buffer length
2:00
Search
Microphone

Clip card · hover to scrub

0:30
Neon Drift 2026-10-25 20-05-44Neon Drift · Today · 8:05 PM

Seek bar · preview on hover

0:39
0:24 / 1:04Seahorse Valley

Toast · ring

Clipped by voice!Neon Drift · 0:30 · 18.4 MB
0:00
IN BUFFER
07 · Icons

Segoe Fluent Icons

The Windows 11 icon font — consistent with the OS, zero bytes to ship. On other systems the glyphs below may not render.

08 · Brand

Two marks, one family

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.

✓ Do

Keep a quarter of the mark as clear space. Use on dark surfaces. Minimum 16 px.

✕ Don't

Recolor the glyph, swap the two gradients, stretch the squircle or add outlines.

Names

Hypt reads “hyped”. Vyu reads “view”. Always one word, capital first letter.

09 · Tokens

Take them with you

Same values everywhere. Copy the format you need.

Copied