Design

UX flows & screens

Premium dark cosmic mobile experience, inspired by Airbnb's clarity, Strava's data density, and Instagram's tap-rhythm — adapted to a constellation visual language.

Design system

Color palette

Cosmos

Nebula

Aurora

Stardust

Void

Typography

Aa · Display

Aa · Body — Inter / SF

Aa · Eyebrow

Motion guidelines

60fps target; spring physics (stiffness 220, damping 26).
Map flyTo: 600ms cubic-bezier(0.22, 1, 0.36, 1).
Sheet open: 320ms with subtle scale on background.
Reduce-motion respected globally.

Components

MarkerCard, ScoreRing, MetricBar, MoodGlyph
FilterChip, BottomSheet, TabBar
AvatarStack, BadgePill, TimelineNode
GPSPinPreview, CategoryGrid

Screen specifications

Onboarding (3 slides)

Layout: Full-bleed cosmic gradient background, centered constellation art, animated star field.

Components: Slide pager, Page indicator, CTA: Begin

Interactions: Swipe between slides · Skip → straight to auth

Empty: n/a

Error: n/a

Layout: Centered logo (60% above fold), email field, password field, Apple/Google primary buttons.

Components: Input, Primary button (Apple), Secondary button (Google), Text link: Forgot password

Interactions: Native auth sheets · Inline validation · Haptic on submit

Empty: First-time visual prompt to create account.

Error: Inline error under field; toast for server errors.

Home Feed

Layout: Top app bar (avatar, search, notifications). Horizontal scroll rails: Trending, Nearby, Hidden Gems.

Components: MarkerCard, RailHeader, Pull-to-refresh

Interactions: Tap card → Marker Detail · Long-press → Save

Empty: Cosmic illustration + 'No markers yet — drop the first one'.

Error: Inline retry banner; cached content if offline.

Global Energy Map

Layout: Full-screen Mapbox; floating filter bar top, FAB bottom-right for 'Drop marker'.

Components: FilterChip row, Cluster pin, Single pin, Preview sheet

Interactions: Pinch zoom triggers de-clustering · Tap cluster → fly to bounds · Bottom sheet drag → full detail

Empty: Map shows starfield overlay with prompt to zoom out.

Error: Mapbox tile failure → friendly retry banner.

Marker Detail

Layout: Hero photo carousel (60vh), energy score badge, rating breakdown, recent reviews.

Components: PhotoCarousel, ScoreRing, MetricBar (6×), ReviewItem, Sticky action bar

Interactions: Scroll-to-blur hero · Tap rating → open rating modal

Empty: If no reviews: 'Be the first to share your experience.'

Error: Photo load fallback to placeholder gradient.

Create Marker

Layout: Modal sheet; map snippet top showing GPS pin, form below.

Components: GPSPinPreview, TitleInput, CategoryGrid, IntensitySlider, MoodChips, PhotoPicker

Interactions: GPS verification before submit · Live character count · Photo reorder via drag

Empty: If GPS denied → permission rationale screen.

Error: Not at location → 'Get closer to drop here (you're 240m away).'

Layout: Full-screen search; recent searches, suggested categories.

Components: SearchInput, ResultRow, FilterSheet

Interactions: Debounced autocomplete · Recent searches persist locally

Empty: Show curated categories + 'Try: "sunset spots near me"'.

Error: Geocode failure → fallback to category search.

Profile

Layout: Header with avatar + stats (markers, visits, followers). Tabs: Markers · Saved · Journal.

Components: AvatarBlock, StatGrid, TabBar, MarkerGrid

Interactions: Tap stat → expanded list · Edit profile sheet

Empty: Per tab: motivational empty state with CTA.

Error: Sync failure → cached profile shown with stale badge.

Energy Journal

Layout: Vertical timeline; month dividers; entries with photo, mood, location chip.

Components: TimelineNode, JournalCard, MoodGlyph

Interactions: Tap entry → full read view · Long press → delete/edit

Empty: First-entry guided prompt with mood selector.

Error: Sync conflict → keep local + show merge banner.

Notifications

Layout: Grouped by Today / Earlier / Older.

Components: NotificationRow, GroupHeader

Interactions: Swipe to dismiss · Tap to deep link

Empty: Constellation illustration + 'You're all caught up'.

Error: Inline retry button.

Settings

Layout: Grouped list: Account, Privacy, Notifications, Subscription, About.

Components: SettingRow, Toggle, Disclosure

Interactions: Tap row → detail page · Toggle haptic

Empty: n/a

Error: Server error toast.

Saved Locations

Layout: Grid of saved markers grouped into user-created lists.

Components: ListChip, MarkerCard

Interactions: Drag between lists · Create new list FAB

Empty: Illustration + 'Bookmark places that move you.'

Error: Sync error → cached + retry chip.

Leaderboard

Layout: Tabs: Global · Country · Friends. Rank list with avatars + XP.

Components: RankRow, TabBar

Interactions: Tap user → profile

Empty: Show top 10 placeholders with 'Be the first to climb.'

Error: Inline retry.

AI Recommendations (Phase 2)

Layout: Curated stack of swipeable cards with reasoning chips.

Components: RecCard, ReasonChip, FeedbackButton

Interactions: Swipe right = save, left = dismiss

Empty: Needs ≥ 3 visits — coach toward action.

Error: Model unavailable → fallback to trending.