UI/UX case study · Mobile app & design system · 2026

Stay somewhere unrepeatable.

Aurel is a members-only app for boutique stays: an editorial booking experience for hand-picked hotels and retreats, from first inspiration to the concierge who greets you at the door.

Role: Concept, UI/UX design, design system, prototyping, film
Tools: Figma variables & modes, components, prototyping, motion
Scope: iOS, 14 screens at 393 × 852, light and dark
Context: Self-initiated concept. Aurel is not a real company

14screens
25components
60tokens · light & dark
40custom icons

The product film, 57 seconds, animated in Figma. Sound on. The 9 : 16 cut is made for Reels and Stories.

01 · The idea

Some places can’t be found on a map. They have to be chosen.

Booking apps are built for volume: thousands of listings, endless filters, prices shouting for attention. Aurel goes the other way. It is a private collection of 214 stays, and every one has been visited by an editor before it joins.

The app reads like a travel magazine. Editorial collections, honest photography and a map that shows only what matters lead into a booking that takes three taps, and a concierge who knows you are coming.

Curated, not crowded.Collections like “Slow coastlines” and “Weekend escapes” instead of an endless list.
Three taps to book.Dates and guests, confirm and pay, done. Member rate and taxes shown before you commit.
A person, not a ticket.After booking, the concierge chat plans the stay: late checkout, a boat, a table.

02 · Three flows

From first inspiration to the door.

The 14 screens are organised as three flows, each one wired as its own path in the prototype, plus a fourth for dark mode.

Flow A · Screens 01–03

Onboarding

A welcome that sells the promise, three travel moods to shape the collection, and a calm sign-in. Nothing asks for more than it needs.

Welcome screen: a private collection of 214 stays, Stay somewhere unrepeatable, Become a member — 01 Welcome

Onboarding: what does a good trip feel like? Six travel mood tiles, three selected — 02 Travel moods

Sign in screen with email, password, Apple and Google — 03 Sign in

Flow B · Screens 04–09

Browse & book

Discover by mood, search on a quiet map, read the stay like an article, then book in three taps. The price is broken down before you pay, with the member rate applied.

€640 × 4 nights€2,560
Aurel member rate −10 %−€256
Taxes & service€184
Total (EUR)€2,488

Discover: Good evening, Amelia, mood chips and Editor's choice, Masseria Cielo — 04 Discover

Dates and guests: November 2026 calendar, 12 to 16 November selected, 2 guests — 07 Dates & guests

Booking confirmed: See you in Puglia, Amelia, ticket-style summary, 4 nights, paid €2,488 — 09 Confirmed

Flow C · Screens 10–13

After booking & account

Trips as a day-by-day timeline, a concierge chat with Giulia from Masseria Cielo, saved collections, and a membership card that feels worth carrying.

Trips: your journeys, an upcoming stay in 35 days with a day-by-day timeline — 10 Trips

Concierge chat with Giulia arranging a late checkout and a private boat to Polignano — 11 Concierge

13 Profile

03 · The design system

Paper, ink & olive.

A palette borrowed from linen, letterpress and Mediterranean groves. Colour is used sparingly; hierarchy comes from type and space. Instrument Serif carries the voice, Hanken Grotesk does the work, and Geist Mono labels dates and prices like a ticket stub.

Three variable collections: Primitives, Color with Light and Dark modes, and Spacing. Every colour variable carries web code syntax, like var(--color-bg-canvas), which is what this page’s CSS uses. Switch Light and Dark at the top to see it.

TokenLightDark

bg/canvas#F4F0E8#16130F

bg/surface#FBF9F4#24211D

bg/accent#3A422B#A7AE8A

text/primary#16130F#F4F0E8

text/secondary#5A5348#A39A8A

text/warm#A65A3A#D49A7C

text/brass#B08A4A#D6BE8C

Contrast, key text pairs

Pair	Light	Dark
text/primary on bg/canvas	16.3	16.3
text/secondary on bg/canvas	6.7	6.7
text/accent on bg/canvas	9.3	8.0
text/on-accent on bg/accent	10.0	8.0

Ratios computed from the resolved token values (WCAG 2.1).

Masseria Cielo

Instrument Serif · the voice

Where to next?

Hanken Grotesk · the work

12 NOV · €2,488

Geist Mono · the data

Foundations, colour: light and dark mode surfaces, text, borders and the primitive ramps

Foundations, typography: the full type scale from Display XL to Numeric

Foundations, space: a 4 pt spacing scale, radii and three elevation levels

Stay cards in three densities: feature, compact and row

Pill buttons: primary ink, accent olive, outline and ghost, in two sizes

Booking bar: total €2,560, 12 to 16 November, 2 guests, Reserve

Concierge message bubbles for guest and concierge

Tab bar with five destinations, active and inactive

Search bar with a two-line summary of the query

04 · The screens

Fourteen screens, light and dark.

Every screen at 393 × 852. Scroll sideways to see them all. Screen 14 is Discover in dark mode, built from the same tokens.

Two full-length pages. Scroll inside.

Discover and the stay detail page at their full height, as a guest would scroll them.

Full-length Discover: greeting, search, mood chips, editor's choice, curated collections, the journal and weekend escapes — 04 Discover · full length

Full-length stay detail for Masseria Cielo: gallery, facts, hosts, rooms, amenities, reviews and booking bar — 06 Stay detail · full length

05 · Try it

Book a stay in the real prototype.

104 interactions in four flows: onboarding, browse and book, trips and account, and dark mode. It runs inside Figma, right here on the page.

See the Figma file ↗

Loads Figma’s player (about 5 MB).

06 · Design principles

Restraint over decoration.Colour is rare, so the olive accent always means “this is the moment to commit”.
Type sets the tone.A serif for places and moments, a grotesk for doing, a mono for dates and prices like a ticket stub.
One system, two moods.Light for planning by day, dark for dreaming at night, both from the same 20 colour tokens.

Thanks for reading.

See all projects