Return to your tempo
CONCEPT · AI WORKFLOW · BRAND EXPERIENCE
"The experience is the product. Design for trust, conversions follow."
Carlos Roldan
THE CONCEPT
The travel industry has spent decades asking people where they want to go. The question tempo asks is different: how do you want to feel?
A feeling-first AI travel planning assistant, tempo opens not with a search bar but with a mood. Recharged, Reconnected, At Peace, Renewed. The AI uses that emotional signal as its starting point and builds a complete journey around it. Not a ranked list of destinations. An experience designed to deliver the feeling the traveler is actually seeking.
This is TX, Trustability Experience, the philosophy I coined at Celebrity Cruises. When a guest lands on a brand digital experience and encounters luxury, craft, and warmth, they subconsciously trust the brand before they decide. That trust is the conversion mechanism, and tempo makes it visible as a product.
The design reference was Condé Nast. Editorial authority, full-bleed cinematic photography, restrained serif typography, UI that gets out of the way of the aspiration. Cormorant Garamond for headlines. DM Sans for body. A palette of warm neutrals and gold, used sparingly enough to feel like a signal rather than a decoration.
THE BUILD
Stage 1 - Figma Make. Gemini 2.5 Pro running inside Figma with the Tempo design system connected. Twenty-five design versions across all sections, generated through prompts with the Untitled UI Pro component library and Tempo Variables as the constraint. The design system was not a guardrail. It was the foundation every AI-generated output built from. All sections locked in Figma Make before a single line of code was written.
Stage 2 - Cursor. Figma Make exports the project as a React zip. Opening that zip in Cursor and deploying it to Vercel is a two-command workflow. Every edit proposed by the AI was reviewed and approved before it landed in the code. The equalizer menu animation, chip active states, video crossfade logic, modal system, and email capture confirmation were all built in Cursor through conversation, not by writing code directly.
Stage 3 - Cinematic Assets. Generated in Adobe Firefly Pro. Firefly Image 5 for stills, Runway Gen-4.5 for video. Five feeling category backgrounds, an Iberian Pilgrimage journey film, and a 55-second brand film. Each film was produced and edited in Adobe Express, with closing animations and cinematic audio tracks sourced from Pixabay. Compressed via HandBrake for web delivery. Claude AI was the strategic co-pilot throughout every stage. Every prompt, every copy decision, every deployment fix ran through Claude AI first.
The concept is live. Explore tempo.
THE TOOL STACK
Platform | Model | Purpose | Cost |
|---|---|---|---|
Claude AI (claude.ai) | claude-sonnet-4 | Strategic co-pilot, planning, copy, prompts, design review, deployment | $20/mo + usage |
Figma | - | Design system, Variables, component library | $20/mo |
Figma Make | Gemini 2.5 Pro | Section design via AI prompts, 25 versions | Included with Figma |
Untitled UI Pro | - | Base component library and Variables v8.0 | $129 one-time |
Cursor Pro | - | Visual IDE, code review, deployment, terminal | $20/mo |
Adobe Firefly Pro | Firefly Image 5 | Cinematic stills, all five feeling category images | $19.99/mo |
Adobe Firefly Pro | Runway Gen-4.5 | Cinematic video, hero backgrounds and Iberian path | 400 credits/video |
Adobe Express | - | Brand film and Iberian journey film production and editing | Included with Firefly |
Pixabay | - | Cinematic audio tracks for brand film and journey film | Free |
HandBrake | - | Video compression for web delivery | Free |
GitHub | - | Version control | Free |
Vercel | - | Hosting and auto-deployment | Free |