Roomtone — Music & Podcast App UI Kit

This kit covers music and podcast app. Rather than isolated screens, it provides a flow that holds together, backed by a documented component set.

Spacing follows a single scale, which is what keeps screens looking related once other people start adding to them.

• Product teams designing music and podcast app
• Designers who need a defensible starting structure rather than a blank canvas
• Developers who want a documented spec to build against
• Founders preparing a prototype for user testing

• 48 mobile screens
• Now-playing & mini-player components
• Waveform visualizer states
• Dark-first design system
• Connected screen flow rather than isolated mockups
• Design tokens for colour, spacing and type scale
• Component set with states documented
• Light and dark treatments from one token source
• Consistent grid and spacing rhythm
• Form, list and navigation patterns
• Empty and error state designs
• Typography scale with defined usage

The UI kit itself, supplied as Figma, together with the licence tier you select at checkout and any future revisions to this product.

Package contents are listed under What's included on this page. Product updates are available from your DistroSource library at no additional cost.

Figma (current version)

• A design tool that supports components and shared styles

• Step 1. Open the kit and review the token definitions first.
• Step 2. Adjust colour, type and spacing tokens to your brand.
• Step 3. Assemble new screens from the existing components.
• Step 4. Share the component spec with developers for handoff.

• Retheme every screen by editing the token set
• Extend the component library following the documented conventions
• Adjust the type scale without breaking layout rhythm
• Add screens using the existing grid and spacing rules

• Personal — for your own private, non-commercial projects. Not for client work or anything that generates revenue.
• Commercial — for one commercial project or one client project. A separate licence is needed for each additional project.
• Agency — for multiple client projects, up to the limits stated on this page and recorded on your order.

No tier permits reselling or redistributing the files themselves, and none grants resale of source files.

Questions about this UI kit are handled through your DistroSource account — open a support ticket from the order and include your order number. Licensing questions are answered on the Licenses page.