Light appearance
A quieter background for whatever is playing.
primary
#1D1D1F16.83:1AAA textsecondary
#5050578.00:1AAA textmuted
#5050578.00:1AAA textThe WolfWave system
Every detail.
On the same wavelength.
A shared visual language for a small Mac app with a big presence. Clear type, quiet surfaces, and motion that keeps up with your music.
01 / Typography
A familiar voice. Room to read.
Drawn from the MrDemonWolf website: Montserrat for headings, Roboto for reading, and JetBrains Mono for code. Web body text starts at 16px with generous line spacing.
Montserrat / Display
Made for
your next set.
Medium and semibold. Balanced lines, deliberate spacing.
Roboto / Body
Your music belongs in the moment. Keep the current song in view, let chat join the queue, and carry on with your stream.
JetBrains Mono / !song
14pxSmall16pxBody48pxSection74pxHero
Headlines scale down to fit smaller screens. Native app controls retain their macOS type scale; web sizes are separate tokens.
02 / Color & contrast
Bright personality. Clear information.
System blue anchors the product. Primary, secondary, and muted text tokens meet 7:1 contrast on the three solid surfaces in each theme. Color always has a text label.
Dark appearance
A quieter background for whatever is playing.
primary
#F5F5F719.29:1AAA textsecondary
#C0C0C611.60:1AAA textmuted
#B0B0B89.75:1AAA textThese are measured token pairs, not a blanket accessibility certification. Interactive text targets AA (4.5:1); large text and meaningful UI boundaries target 3:1. Transparent overlays must be checked against the actual scene.
03 / Components
Small pieces. One clear rhythm.
Flat cards, simple hierarchy, and actions you can reach with a keyboard. These examples use the same components and styles as the website.
Ready when you are.
One next step, with help close by.
All in sync
State is spelled out, with an icon to reinforce it. Focus rings show where you are when navigating by keyboard.
Explore the overlay04 / Motion
Feel the change. Keep your focus.
Short transitions explain what changed. Transform and opacity carry entrances; reduced motion keeps the same information without movement.
Hover or focus the motion samples to compare timing. Overlay progress pauses while hidden; preview colors come from the same tokens as the shipped widget.