Mobile App UI/UX Design Skill

This skill guides the creation of professional, polished mobile app interfaces that follow proven design principles used by top-tier apps like Airbnb, Duolingo, Spotify, Revolut, and Phantom.

Core Philosophy

Great mobile UI isn't about flashiness — it's about intentionality. Every pixel, every spacing value, every color choice should serve the user. The goal is to create interfaces that feel smooth, personal, and alive — not just functional.

Before designing anything, understand three things:

What is the user trying to accomplish?

(reduce friction to that goal)

How should this make the user feel?

(trust, delight, confidence, calm)

What's the one thing they should notice first?

(visual hierarchy)

Design Process

Follow this sequence for any mobile screen:

Step 1: Understand the Context

What type of app? (fitness, finance, social, productivity, health, crypto, etc.)

Who is the user? (new, returning, power user — adapt the experience)

What's the primary action on this screen?

What industry design conventions apply? (See

references/industry-conventions.md

)

Step 2: Structure First (UX Lens)

Map the user flow: what screen comes before and after?

Identify the MVP elements — only what's essential for this screen

Place primary actions in the

thumb zone

(bottom 1/3 of screen)

Follow the

F-pattern

reading order for content layout

Reduce interaction cost: expose content directly instead of hiding behind taps

Turn empty states into opportunities with guidance, illustration, and a CTA

Choose the right input method: sliders/scroll wheels for one-time setup, text fields for repeated/precise entry

Step 3: Apply Visual Design (UI Lens)

Follow these rules in order:

Typography

Use

one font family

(two max, with clear hierarchy purpose)

Maximum

4 font sizes

and

2 font weights

Use monospace variants for large numbers (prices, stats, metrics)

Keep text containers under 600px wide for readability

Create hierarchy with size, weight, and opacity — not just bold everything

Color System (60/30/10 Rule)

60%

— neutral base (white, light gray, or dark background)

30%

— complementary color (black text, dark elements)

10%

— brand/accent color (CTAs, key indicators, icons)

Use

opacity variations

of the neutral color for text hierarchy: 100% for headings, 80% for body, 60-70% for secondary text

Use the accent color at 5% opacity for secondary buttons and subtle card highlights

Match shadow colors to the background (tint shadows, never pure gray/black on colored backgrounds)

Save strong colors (like red) for meaningful moments — overuse kills hierarchy

Spacing (8-Point Grid System)

All spacing values must be divisible by

8 or 4

(8, 12, 16, 24, 32, 48, 64, 80, 96)

Use

relationship-based spacing

related elements closer together, unrelated further apart

Multiplier rule: if related text elements are 16px apart, the gap to the next group should be 2× (32px)

Section vertical padding: at least 80-96px (160px for major sections on larger screens)

Card internal padding: 24-32px baseline

Larger text = larger spacing needed

Shadows

Always use

soft shadows

— never harsh/distinct

Match shadow color to the background with a tinted hue

Use subtle white inner shadows on buttons to add dimension

Add faded drop shadows for depth without heaviness

Visual Cues & Imagery

Use icons, emojis, illustrations, and images to make information digestible

User avatars/photos > initials > generic icons (for representing people)

Color-coded categories with soft solid backgrounds + clean isolated images

Keep visual style consistent across the entire app — no random stock photo mix

Use AI-generated or curated visuals with matching color palettes

Step 4: Design for Emotion (Peak-End Rule)

The user will remember two moments: the

peak

(most intense) and the

end

(last impression).

Identify your peak moment

completing a core task, hitting a milestone, finding what they want

Design the peak

micro-animations, celebratory feedback, sparkles, badges, encouraging copy

Design the ending

summary card, progress affirmation, gentle nudge to return

Add

emotional feedback loops

success states should feel rewarding (bounce, glow, sparkle)

Celebrate small wins — success states don't need to be huge, but they should feel intentional

Use motion and animation as trust signals, especially in high-stakes domains (finance, crypto, health)

Step 5: Polish & Details

Add subtle glow effects behind key elements (blur + opacity)

Use tiny white inner shadows on primary buttons

Add 5% opacity primary-color borders on secondary elements

Consider micro-animations for state changes

Ensure all tap targets are at least 44×44pt

Check contrast ratios for accessibility

Design error states, empty states, loading states, and success states

Smart Patterns to Apply

Personalization by User Stage

New users

simple welcome, guided setup, minimal options

Returning users

personalized content, routine-focused, progress indicators

Power users

advanced stats, optimization tools, dense information Smarter Search Never show a blank search screen. Include: Recent searches Popular/trending items Personalized recommendations Order/Status Tracking Open with a confident status message Humanize with photos, names, quick-action buttons Use visual timelines instead of text-based date lists Category Screens Use color-coded cards with soft backgrounds and clean isolated images Ensure visual consistency across all category items Create rhythm in the layout for effortless scanning Selection Over Manual Input Offer tappable selections for common options (job titles, preferences, etc.) Include icons/emojis alongside options for personality Provide an "Other" option with manual input as fallback Anti-Patterns to Avoid Overusing flashy gradients and blur effects (unless you can truly pull it off) More than 4 font sizes or 3 font weights Random spacing values (use the 8-point grid!) Hiding key content behind banners or extra taps Placing CTAs outside the thumb zone Generic empty states with no guidance Using sliders for frequent/precise data entry Making all information the same visual weight (no hierarchy) Emphasizing labels over values (e.g., making "Sales" bigger than "591") Pure gray/black shadows on colored backgrounds Implementation Notes When building these designs as React artifacts or HTML: Use Tailwind CSS utility classes for spacing, colors, and typography Import Lucide React for clean, consistent iconography Use Recharts for any data visualization Apply CSS transitions for micro-interactions and state changes Use CSS variables for the color system Mobile-first: design for 375px width (iPhone SE) as baseline Use rounded-2xl or rounded-3xl for modern card aesthetics Apply backdrop-blur for glassmorphism effects where appropriate For deeper guidance on industry-specific conventions and emotional design patterns, read references/industry-conventions.md .