Lu.ma is designed as a minimal, distraction-free event platform that guides users through a single, linear task flow—whether that task is creating an event or registering for one. Its visual language and interaction patterns are all tuned to that goal.

Visual Identity

• Soft, pastel brand colors (sky-blues, lavenders, warm pinks) used sparingly—almost everything else sits on pure white to keep attention on the primary action.
• Rounded 12-16 px corners on every card, input and button, giving the interface a friendly “pillowy” feel.
• Micro-drop shadows at 5–10 % opacity add depth without visible borders.
• Plenty of negative space; most screens show a single card floating in the center with generous padding around it.

Layout & Structure

• One-column, center-aligned layout on both desktop and mobile. On large screens the main card never widens beyond ~560 px, so content always feels compact.
• Navigation header is ultra-light: logo at left, 1-to-3 text links at right, then collapses into a hamburger on mobile.
• Inside an event flow every step is its own “page”—there is no multitasking or side panel clutter.

Interaction Patterns

• Primary buttons use a vivid accent color; all secondary buttons and links are muted gray (#6B7280-ish).
• When a button is clicked a 400–600 ms shimmer or spinning-dot loader appears inside the button itself—users never wonder whether the click registered.
• Form inputs show inline validation hints in soft red or green, and error text is written in plain language (“Please enter a valid e-mail”).
• Progression is always forward; back navigation is handled by the browser’s back arrow rather than in-app controls.

Micro-UX Touches

• Subtle entrance animations: cards fade-up + slide 10 px on load (duration ≈ 250 ms, easing “ease-out”).
• Calendar selectors snap to the local time zone and preview how the listing will appear to guests.
• When a ticket price is zero, the “Pay” button automatically transforms to “Register”—removing a cognitive step.
• Confirmation screens include a confetti burst SVG and a single CTA (“View your ticket”)—no dead-end pages.

Accessibility & Device Support

• Text never drops below 16 px; headline hierarchy = 24 px / 20 px / 18 px.
• All interactive elements meet WCAG AA color-contrast ratios.
• Mobile-first CSS: media queries only expand layouts for tablet/desktop; the core flow is built for a 375 px viewport.

Overall UX Philosophy

1. Show one task per screen.
2. Remove every optional field until it’s absolutely necessary.
3. Always confirm success with positive micro-copy and a clear next action.

That combination—tight focus, airy visuals, and micro-delighters—makes Lu.ma feel fast, friendly and friction-free, especially on mobile devices.

Make with this UI and UX information