Trailmap — Travel & Booking App UI Kit

A UI kit for travel and booking app: a connected screen flow plus the tokens and components those screens are built from, so the design stays consistent as it is extended.

Light and dark treatments are derived from the same token set instead of being maintained as separate files.

• Product teams designing travel and booking 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

• 60 mobile screens
• Map-card & filter sheet components
• Trip timeline layout
• Booking confirmation flow
• 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.