Light UI: forms, payments and pricing screens

Overview

These screens use a white surface, plenty of space and one accent colour for the main action, so each form or page has a clear next step.

They are shown as examples of the visual style, not as full case studies.

Booking and payment

A booking summary and a payment form share one card, shown over a photo. The total is the largest number, the payment method is a simple choice and one button completes the booking. The two versions use different colours for the same layout.

• Payment summary over a night photo
• Payment summary, warm colour variant

Pricing and web content

A pricing page with two plans side by side, each with a price, a short description, a feature list and one button. Next to it, an about section with values, numbers and work examples.

• Pricing page with two plans
• About section

Billing and wallet

Forms for card details and for adding money to a wallet. Fields are grouped, labels sit above the inputs and one button saves or confirms.

• Billing and payment form
• Add money dialog

Dialogs

Dialogs for inviting a user, editing a user and writing a new message, each with one primary button.

• Invite user
• Edit user
• New message