Consumer software

Build everyday experiences for discovery, ordering, listening, watching, and staying connected.

Working rules

Keep discovery, selection, and the next action close together. Show the details people need before they commit.
Preserve progress, selections, and playback when moving between views. Make it easy to go back and change a choice.
Build for one-handed use with readable content, reachable controls, and clear feedback for each action.

Card. Groups related content as a label, title, and body. No outline.
Input. Collects one line of text. 1px border, 2px focus ring, 12px label above.
Tabs. Switches between related panels. Text labels in one row; active tab has a 1px underline.
Number field. Edits a numeric value with native validation, units, and bounded 44px increase and decrease actions.
Playback controls. Groups named play, pause, previous, next, and stop controls with 44px targets.
Media scrubber. Seeks through media in seconds with elapsed time, buffering, chapters, and optional previews.
Toast. Reports a brief status in the bottom-right corner. Polite live region; pauses on hover and closes on demand.

Food ordering. A food marketplace with search, filters, menus, and an order bag.
Music player. A personal music library with a selected playlist, artwork and working playback controls.
Video player. A screening room for three selected music videos with a focused playlist and playback controls.
Social feed. An image-led studio feed with comments and contributor profiles.
Transit app. A local transit planner with sample routes, saved travel days, and a responsive workspace.

Install Vlak or inspect the linked pages for React, CSS, registry, keyboard, and accessibility details.