@mindstudio-ai/remy 0.1.74 → 0.1.76

package/dist/subagents/designExpert/data/sources/ui_inspiration_compiled.json

@@ -323,6 +323,198 @@
     {
       "url": "https://i.mscdn.ai/remy-ui-inspo/v2/81.png",
       "analysis": "## Screen\nA multi-currency digital wallet home screen \u2014 fintech/money transfer app. This is the primary dashboard, the first screen after login. Layout flows top-to-bottom: header utility bar \u2192 horizontal wallet selector \u2192 action shortcuts \u2192 recently paid contacts \u2192 transaction history \u2192 bottom nav.\n\n## Layout & Spacing\nContent is divided into two clear visual zones separated by a subtle horizontal rule: the \"active/functional\" upper zone (wallets + actions) and the \"historical/informational\" lower zone (transactions). The wallet selector is a horizontally scrollable pill row \u2014 compact and non-intrusive. The action shortcuts use a horizontal card carousel with generous padding inside each tile. Section headers (\"Recently paid,\" \"Transactions\") use a consistent label + \"View all\" pill pattern. Transaction rows use comfortable vertical rhythm with clear left-icon / center-text / right-amount three-column structure.\n\n## Components\n- **Wallet selector pills**: Rounded rectangle chips with flag emoji + currency code + balance. Selected state appears as black filled circle (app logo). \"Add wallet\" uses a + icon chip at the end of the row.\n- **Action cards**: Square-ish rounded cards in bold distinct colors (green, yellow, purple). Each contains a 3D illustrative icon and a short label at the bottom-left. Partially visible third card signals horizontal scroll.\n- **Recently paid avatars**: Circular avatar thumbnails in a horizontal row \u2014 blurred/redacted here but clearly a contact scroll strip.\n- **Transaction rows**: Left-aligned icon (branded or avatar), merchant name + timestamp, right-aligned amount. Currency conversion transactions show two-line amounts (debit in black, converted credit in green).\n- **\"View all\" pill**: Small rounded rectangle with light gray fill, minimal label \u2014 consistent across both sections.\n- **Bottom nav**: 5-item tab bar with outline icons + labels. \"Pay\" uses a diagonal arrows icon suggesting transfer directionality.\n\n## Typography & Color\n- **Type hierarchy**: Section headers are bold ~18px; transaction merchant names are medium weight ~15px; timestamps and secondary info are light/regular ~13px in gray.\n- **Amounts**: Right-aligned, medium-bold. Negative amounts in near-black, positive amounts in green \u2014 classic debit/credit color coding.\n- **Palette**: White background, near-black text. Accent colors confined to the action cards (vivid green, yellow-green, purple). Green used functionally for positive transactions. Gray used for secondary text and UI chrome.\n- **Color is purposeful**: No decorative color in the transaction list \u2014 color only appears where it carries meaning (positive = green, action cards = category-coded).\n\n## Patterns\n- **Partial card reveal as scroll affordance**: The third action card is deliberately cropped, signaling horizontal scrollability without any explicit indicator \u2014 clean and implicit.\n- **Dual-amount transaction row**: Currency conversion shows both the deducted amount and the received amount in a different currency stacked \u2014 solves a genuinely complex data display problem elegantly in one row.\n- **Wallet selector as persistent context**: The currency pills stay visible above the fold, keeping the user oriented about which wallet is active without requiring a separate screen.\n- **3D illustration in action cards**: Using isometric/3D objects in the shortcut cards gives them visual weight and memorability compared to flat icon buttons \u2014 makes actions feel more tangible.\n- **Blurred \"Recently paid\" section**: Privacy-first pattern \u2014 contacts are obscured by default, reducing shoulder-surfing exposure without hiding the feature's existence.\n- **\"Get help\" as top-right text link**: Avoids burying support behind a hamburger menu \u2014 surfaces it at the header level, suggesting the app expects users may need help frequently (common in fintech onboarding contexts).\n\n## Notes\n- Dual-currency transaction row = killer pattern for any FX/conversion product\n- Partial card crop = free scroll affordance, no arrows needed\n- Keep action cards illustrative not iconographic \u2014 more tactile, more memorable\n- Wallet chips as persistent balance display = no need to navigate to see balance\n- Privacy blur on contacts = good default, consider toggle\n- \"View all\" pill is a great alternative to text links for section expansion \u2014 feels tappable\n- Color reserved for meaning only in data rows \u2014 restraint = clarity\n- 3-column transaction layout (icon / description+time / amount) is the gold standard for finance lists"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+08.56.51.png",
+      "analysis": "## Screen\nOnboarding checklist screen from a fitness/class-booking app. This is a post-signup activation screen designed to guide new users through key setup steps. Sits between initial account creation and first meaningful engagement. Single-column accordion list layout with a progress indicator at top and back navigation.\n\n## Layout & Spacing\nContent flows top-down: nav bar \u2192 progress track \u2192 divider \u2192 accordion list items. The expanded first item creates clear visual hierarchy \u2014 it gets noticeably more vertical real estate than collapsed items. Collapsed rows are uniform in height, creating a clean rhythm. Left-aligned circle checkboxes with consistent left margin across all rows. The CTA button is left-aligned (not full-width), which feels intentional and less aggressive.\n\n## Components\n- **Progress bar (segmented):** 5 discrete pill-shaped segments, first filled in red, rest in light gray. Communicates 1-of-5 completion visually without numbers.\n- **Accordion rows:** Circle checkbox (unfilled = incomplete) + label text + chevron right-aligned. Expanded state reveals description text + action button below label.\n- **Circle checkboxes:** Outlined, empty circles \u2014 no fill, no check. Simple incomplete state. No checked state visible.\n- **CTA button:** Rounded pill shape, solid red fill, white uppercase text, left-aligned, compact width. Not full-bleed.\n- **Chevrons:** Up chevron on expanded item, down on collapsed \u2014 standard but clean.\n- **Divider line:** Thin separator between progress bar and list.\n\n## Typography & Color\n- **Title:** Medium-weight, centered, ~17px \u2014 standard nav title treatment\n- **Row labels:** Regular weight, ~16px, dark gray/near-black\n- **Description text:** Smaller, ~14px, medium gray \u2014 clear secondary hierarchy\n- **Button label:** Bold, uppercase, small caps feel, white on red\n- **Color palette:** White background, near-black text, medium gray secondary text, light gray inactive segments, red (#E8394D-ish) as the single accent \u2014 used on progress fill and primary CTA only. Red is the sole action color, used sparingly and consistently.\n\n## Patterns\n- **Segmented progress over percentage:** Using discrete pill segments instead of a continuous bar maps 1:1 to checklist items \u2014 users can intuit \"5 steps total\" without reading anything.\n- **Auto-expand first incomplete item:** The first task opens by default, removing friction \u2014 user lands with immediate context and a clear next action.\n- **Contained CTA width:** The action button doesn't stretch full-width, which reduces visual weight and feels less coercive \u2014 appropriate for an optional setup step.\n- **Checklist as feature discovery:** Each item names a specific feature (\"class filter,\" \"bookmark\") \u2014 the checklist doubles as a product tour without feeling like a tutorial.\n- **Motivational microcopy in expanded state:** \"so we can celebrate your wins\" \u2014 emotional framing embedded in functional instruction, not a separate tooltip.\n- **Collapse-to-focus:** Keeping unstarted items collapsed reduces cognitive load \u2014 user sees the task list exists but isn't overwhelmed by all instructions at once.\n\n## Notes\n- Segmented progress pills = 1 pill per task, elegant pairing\n- Left-aligned pill button = softer CTA, worth testing vs full-width\n- Auto-open first item = remove one tap from the critical path\n- Checklist = stealth feature tour pattern\n- Emotional copy inside functional description \u2014 not a separate element\n- All accent color budget spent on progress + CTA only, nothing else\n- Empty circle checkbox = intentionally unfinished feeling, creates tension to complete"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+08.56.56.png",
+      "analysis": "## Screen\nAn educational/onboarding explainer screen within a payment app, explaining in-store payment options. Sits between account setup and active payment flows \u2014 likely accessed via a help or \"learn more\" entry point. Layout is a single scrollable column with a hero promotional card at top, two grouped accordion sections below, and a feedback banner anchored at the bottom.\n\n## Layout & Spacing\nContent is divided into three clear zones: (1) a contextual action card, (2) instructional accordions grouped under labeled sections, (3) a sticky feedback prompt. Generous white space between accordion rows creates visual breathing room. Section labels (\"How to pay,\" \"Additional info\") are left-aligned with no container, acting as lightweight dividers. The bottom feedback banner bleeds edge-to-edge, contrasting with the padded content above.\n\n## Components\n- **Hero card**: Rounded card with large bold headline left-aligned, a pill-shaped CTA button in black, and a collage of lifestyle images bleeding off the right edge \u2014 partially clipped for a dynamic, editorial feel. Dismissible via an \u2715 icon in the top-right corner.\n- **Accordion rows**: White rounded-rectangle cards, each with a leading icon (outlined, monochrome), label text, and a chevron-down on the right. Uniform height, no visible dividers between items \u2014 separation achieved purely through card gaps.\n- **Section headers**: Small, medium-weight labels on the background color \u2014 no lines or heavy treatment.\n- **Feedback banner**: Light blue tinted strip with a megaphone icon and inline text \u2014 low-hierarchy but persistent.\n\n## Typography & Color\nTwo-level type hierarchy: bold large headline in the hero card, regular body weight for accordion labels, small regular for section headers. No extreme size contrast \u2014 calm and readable. Color palette is near-monochrome: off-white/light gray background, white cards, black text and CTA button. The light blue feedback strip is the only chromatic accent, drawing the eye without competing. Icons are simple outlines in dark gray.\n\n## Patterns\n- **Clipped image collage on card**: Images intentionally overflow the card boundary on the right \u2014 creates depth and editorial energy without extra screen real estate.\n- **Dismissible promotional card within an informational screen**: Unusual to embed a store-selection CTA inside a \"how it works\" explainer \u2014 bridges education and action in one surface.\n- **Icon-led accordions as navigation metaphor**: Each payment method gets a distinct icon (card, QR, phone) making the list scannable before reading \u2014 reduces cognitive load for users who already know what they need.\n- **Dual section grouping**: Separating \"How to pay\" from \"Additional info\" signals priority without hiding content \u2014 users can ignore the second group on first pass.\n- **Persistent feedback prompt at bottom**: Anchored survey prompt that doesn't interrupt the content scroll \u2014 passive data collection embedded in the flow.\n- **Negative space as separator**: Accordions use gap-between-cards rather than dividers or borders \u2014 cleaner and more modern than traditional list separators.\n\n## Notes\n- Collage bleeding off card edge = cheap way to add visual richness, steal this\n- Black pill button on white card = high contrast CTA without color dependency\n- Accordion icons do double duty: visual scan aid + reinforce payment method concept\n- Blue feedback strip = non-modal survey, consider for post-action moments\n- Section label as sole divider (no line, no box) \u2014 works when BG color \u2260 card color\n- Dismissible card inside help screen = hybrid edu/action pattern worth exploring\n- All rounded corners, no hard edges anywhere \u2014 contributes to soft, trustworthy feel"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+08.57.03.png",
+      "analysis": "## Screen\nAn onboarding/education screen from a fintech or BNPL-style payment app explaining how the payment service works. Sits between account setup and active use \u2014 a \"how it works\" explainer that bridges discovery and action. Layout is a scrollable single column with a hero promo card at top, a section label, then expandable accordion-style payment method cards below.\n\n## Layout & Spacing\nTop hero card spans nearly full width with generous internal padding \u2014 left-heavy text layout with a collaged image cluster on the right. Section label \"How to pay\" sits flush left with comfortable breathing room above and below. Payment method cards are contained in a rounded white card with visible internal dividers. Content within expanded accordion uses a vertical step list with a supporting photo inset to the right. The overall background is a very light gray/off-white, making white cards lift slightly.\n\n## Components\n- **Hero promo card**: White rounded card, dismissible (\u00d7), bold left-aligned headline, pill CTA button (black, rounded-full), collaged lifestyle images overlapping the right edge \u2014 creates depth and visual interest\n- **Pill/badge tags**: Small outlined pills (\"3 min setup,\" \"Valid 24h\") in light gray with small text \u2014 metadata without visual weight\n- **Accordion rows**: Icon + label + chevron (up/down) pattern; expanded state reveals step content inline rather than navigating away\n- **Vertical step list**: Bullet dots connected by a vertical line \u2014 classic stepper pattern used inline within accordion\n- **Secondary row link**: \"View all cards\" with right chevron \u2014 tertiary navigation embedded within the card\n- **Inset photo**: Rounded rectangular photo thumbnail floated right within the expanded step content, grounding abstract steps in real-world context\n\n## Typography & Color\n- **Headline (hero)**: Large, bold, black \u2014 high contrast, commanding\n- **Section label**: Medium weight, left-aligned, slightly smaller \u2014 clear hierarchy marker\n- **Accordion titles**: Medium weight with icon, consistent sizing\n- **Step text**: Two-level \u2014 bold step name + lighter gray subtext description beneath\n- **Badge text**: Small, gray, low emphasis\n- Color palette: Near-white background (#F2F2F7 range), pure white cards, black for primary text and CTA, medium gray for secondary text, badges in light gray. Minimal color \u2014 functional and clean.\n\n## Patterns\n- **Dismissible promo card within an educational screen** \u2014 unusual to have a store-selection CTA embedded in a \"how it works\" flow; creates a shortcut for ready users without abandoning the explainer for explorers\n- **Accordion with inline step visualization** \u2014 rather than linking to separate detail pages, the steps expand in-place with a visual (photo) that shows the physical action, reducing cognitive load\n- **Metadata badges before steps** \u2014 \"3 min setup\" and \"Valid 24h\" appear before the steps, not after. This front-loads trust/reassurance before the user reads the effort required\n- **Stepper-within-accordion** \u2014 nesting a linear step flow inside a collapsible component is a compact way to show process without a full onboarding screen\n- **Collaged image as hero decoration** \u2014 images overlap the card boundary slightly, breaking the rigid grid and adding editorial quality to a utility screen\n- **Icon differentiation per payment method** \u2014 each accordion row has a distinct icon (card, QR) enabling fast scanning without reading labels\n\n## Notes\n- Hero card = dual purpose: education + conversion shortcut. Smart for users at different intent levels\n- \"Valid 24h\" badge = urgency/utility signal, not marketing fluff \u2014 worth noting for fintech contexts\n- Badges before steps = anxiety reduction before effort reveal\n- Inline photo in step list = show don't tell, keeps user in flow\n- Collage bleeding off card edge = easy way to add visual richness without full bleed imagery\n- Accordion in explainer screens = great for progressive disclosure when multiple methods exist\n- Off-white bg + white cards = subtle depth without shadows being heavy"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+08.57.27.png",
+      "analysis": "## Screen\nInterest/preference selection screen in what appears to be a social or dating app onboarding flow. Users pick lifestyle interests from categorized tag clouds. Sits mid-onboarding, after basic profile setup. Layout is a scrollable vertical list of collapsible category sections with a persistent selection counter at top and floating CTA button bottom-right.\n\n## Layout & Spacing\nTop area acts as a \"selection tray\" showing chosen items. Categories stack vertically with generous section padding. Tags within each section use natural flow/wrapping layout \u2014 no forced grid. \"See more\" links sit centered below each truncated category. Breathing room between sections feels intentional, roughly 24\u201332px. The floating button anchors to bottom-right rather than spanning full width.\n\n## Components\n- **Selection counter label** (\"My selection 1/10\") \u2014 small, muted, left-aligned above tray\n- **Selected tag in tray** \u2014 filled lavender/purple pill, bold text, larger than grid tags\n- **Category headers** \u2014 icon + large bold text + chevron, collapsible accordion pattern\n- **Unselected tags** \u2014 outlined pill/chip, light border, rounded rectangle, neutral background\n- **Selected tag (in-grid)** \u2014 same lavender fill as tray tag, bold text, visually matches tray item\n- **\"See more\" link** \u2014 centered, muted gray, minimal weight\n- **Floating CTA button** \u2014 dark rounded square, right-pointing chevron, bottom-right fixed\n\n## Typography & Color\nClear two-level hierarchy: category headers are large/heavy (~22px bold), tags are medium/regular (~14\u201315px). Counter label is small and subdued. \n\nColor palette is minimal: warm off-white background (#F5F0EB-ish), near-black text, soft lavender (#C9A8E8-ish) for selected state, medium gray for secondary text. Color is used functionally \u2014 lavender exclusively signals \"selected,\" creating instant visual feedback across both tray and grid simultaneously.\n\n## Patterns\n- **Mirrored selection state** \u2014 selected tag appears both in the tray AND highlighted in-place within its category grid. Dual-location feedback reinforces the action without removing the item from its context\n- **Quota-based selection** (\"1/10\") \u2014 gamifies completion, implies a maximum, creates mild urgency without pressure\n- **Progressive disclosure via \"See more\"** \u2014 keeps initial cognitive load low; categories feel manageable even if they contain 20+ options\n- **Accordion categories with icons** \u2014 chevron suggests collapsibility; icon adds scannability so users can skip irrelevant sections fast\n- **Floating directional CTA** \u2014 small, unobtrusive chevron button rather than a full-width \"Next\" bar keeps focus on content; doesn't interrupt the browsing flow\n- **Tray as living summary** \u2014 the top area acts as a lightweight cart/basket, giving users a persistent view of their choices without navigating away\n- **Playful tag copy** (\"Pasta or nothing,\" \"Wine and more wine\") \u2014 lowers the formality of onboarding, makes selection feel like self-expression rather than form-filling\n\n## Notes\n- Dual-state tag (tray + in-grid highlight) = clever \u2014 steal this for any multi-select scenario\n- Lavender as sole accent = very clean, one color does all the work\n- Floating chevron CTA > full-width button for browse-heavy screens\n- \"X/10\" counter = soft gamification, consider for any curation flow\n- Accordion + \"see more\" = two levels of progressive disclosure stacked\n- Warm off-white bg feels softer than pure white for preference/personality screens\n- Tag copy tone sets the whole app's personality \u2014 worth investing in microcopy here"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.00.26.png",
+      "analysis": "## Screen\nFinancial hub/wallet screen in a social or payments app. This is a secondary tab destination (money/finance section) rather than the primary home. Layout flows top-to-bottom: page title + avatar, primary balance card, action buttons, then a 2\u00d72 feature grid. Sits mid-funnel \u2014 accessible after onboarding, used for managing funds and discovering financial products.\n\n## Layout & Spacing\nWhite cards float on a light gray (#F2F2F2) background, creating clear visual separation without hard borders. The balance card spans full width; below it, two equal-width pill buttons sit side by side. The 2\u00d72 grid uses consistent card sizing with generous internal padding. The grid cards are slightly shorter than the hero balance card, creating a natural visual hierarchy through size alone. Gutters between grid cards are tight (~8px), while the section gap between the balance card and grid is larger (~16px).\n\n## Components\n- **Balance card**: White rounded rectangle, label + secondary link (\"Account & Routing >\") on one row, large dollar amount below, two pill buttons at bottom\n- **Pill buttons**: Light gray fill, no border, bold label, equal width \u2014 subdued but clearly tappable\n- **Feature cards**: White rounded corners, title + chevron top-left/right, illustrated asset bottom-right bleeding slightly, balance/subtext for active products\n- **Avatar**: Small circular photo top-right, acts as profile entry point\n- **Bottom nav**: 5 icons, minimal stroke style, no labels\n\n## Typography & Color\n- Page title: Large, heavy black (~24px)\n- Balance figure: Extra-large bold (~36px), dominant visual element\n- Card titles: Medium bold (~15px)\n- Secondary text: Small gray, used for subtext like \"Save for a goal\"\n- Chevron links: Gray, small \u2014 low visual weight\n- Color palette: Near-white background, white cards, black text, gray secondaries. Accent color lives entirely in illustrations \u2014 green (savings), blue (bitcoin), purple (stocks), yellow/gold (tax). Color is decorative and categorical, not functional UI color.\n\n## Patterns\n- **Illustration as product identity**: Each financial product gets a unique illustrated asset rather than an icon. The illustrations are 3D/isometric-leaning and thematic \u2014 stacked coins for crypto, layered waves for stocks, document stack for taxes. This makes abstract financial products feel tangible and distinct without using logos.\n- **Bleeding illustration layout**: Artwork extends to card edges and slightly overflows, creating depth and making cards feel less boxy \u2014 a deliberate break from strict padding rules.\n- **Zero-state as neutral, not empty**: $0.00 balance is displayed with full confidence \u2014 same large type, no empty state illustration or \"get started\" messaging. The UI trusts the user to act via the buttons.\n- **Feature discovery via grid**: Financial products (bitcoin, stocks, tax) are surfaced as peer-level cards alongside the active savings product. Discovery is baked into the home state rather than buried in a menu.\n- **Chevron placement signals navigation type**: \"Account & Routing >\" sits inline with the label as a text link; card titles have chevrons to their right \u2014 two different navigation affordances clearly differentiated by position and context.\n- **Subdued primary actions**: Add/Cash Out buttons use gray fill rather than a brand color CTA, keeping the visual hierarchy calm. The balance number itself is the hero, not the buttons.\n\n## Notes\n- Illustrations do the color work \u2014 keep UI chrome monochrome, let art carry personality\n- 2\u00d72 grid is a strong pattern for \"financial product shelf\" \u2014 feels like a store, not a dashboard\n- Bleed illustrations past card bounds = instant depth upgrade\n- Zero states don't need to apologize \u2014 show the real UI, trust user intent\n- Inline text links vs. card chevrons = two nav patterns coexisting cleanly\n- Gray pill buttons > colored CTAs when balance display is the real focus\n- Avatar top-right as sole profile entry \u2014 no \"Profile\" tab needed"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.00.35.png",
+      "analysis": "## Screen\nEvent discovery and calendar app \u2014 onboarding/authentication entry point. This is the first screen a new user sees, combining marketing illustration with a sign-up bottom sheet. The layout splits into two zones: an illustrated hero taking the top ~55% and a modal-style card anchored to the bottom.\n\n## Layout & Spacing\nThe bottom sheet uses generous internal padding (~24px sides) with clear vertical rhythm between headline, subtext, and CTAs. Buttons are stacked with consistent ~12px gaps. The two SSO buttons sit in a 50/50 grid row beneath the full-width options, creating a natural visual hierarchy of auth methods. The sheet has a large top-left logo mark and a dismissal X in the top-right \u2014 balanced anchoring at the corners.\n\n## Components\n- **Bottom sheet card**: White, rounded top corners (~20px radius), floats over the illustrated background with subtle shadow. Not full-screen \u2014 intentionally leaves hero visible above.\n- **Primary CTA button**: Full-width, black fill, white text, fully pill-shaped (~50px height). Maximum contrast, maximum weight.\n- **Secondary CTA button**: Full-width, light gray fill, dark text, same pill shape. Clearly secondary without being invisible.\n- **SSO buttons (2-up)**: Square-ish with same gray fill and rounded corners, icon-only. Compact and equal-weight.\n- **App icon / star mark**: 4-pointed star used as brand mark in top-left of sheet \u2014 doubles as identity anchor.\n- **Illustrated hero**: 3D floating elements (avatar bubbles, calendar, location pin, ticket) arranged on concentric circle guides suggesting a radar/orbit motif.\n\n## Typography & Color\n- **Headline**: ~24px, bold/black weight, near-black \u2014 immediate hierarchy\n- **Body**: ~14px, medium gray, 2-line description \u2014 minimal, functional\n- **Button text**: ~16px, medium weight, white on black / dark on light\n- Color palette: Soft gradient background (warm peach/lavender/gray), pure white sheet, black primary action, light gray secondary actions. The 4-pointed star in the hero uses a warm orange-to-purple gradient \u2014 the only brand color accent.\n\n## Patterns\n- **Peek-behind sheet**: The bottom sheet deliberately doesn't cover the full screen, letting the illustrated world \"peek\" above \u2014 creates curiosity and context without a separate splash screen\n- **Auth method hierarchy via shape+color**: Phone (black/primary) \u2192 Email (gray/secondary) \u2192 Apple/Google (icon-only gray) \u2014 three tiers of auth communicated purely through visual weight, no labels needed for the icons\n- **Orbit/radar diagram as value prop**: The concentric circles with floating avatars and event objects visually communicate \"events + people near you\" without a single word of explanation\n- **3D memoji-style avatars**: Using system-style avatar faces in the illustration creates immediate personal relatability and signals social features\n- **Dismissible onboarding**: The X button signals low pressure \u2014 user can explore before committing, reducing friction anxiety\n- **Brand mark repetition**: Same 4-pointed star appears both in the hero (large, gradient) and on the sheet (small, black) \u2014 subtle but effective brand anchoring across both zones\n\n## Notes\n- Split-zone layout (illustration top / action bottom) avoids full-screen modal coldness\n- Black pill button = strong but not aggressive; works well against white card\n- 2-up icon-only SSO row saves vertical space while keeping options present\n- Orbit diagram = zero-copy feature communication \u2014 steal this\n- Dismissible gate = trust signal, worth testing vs. forced flow\n- Star/sparkle mark as brand icon trending \u2014 versatile at small sizes\n- Gradient hero bg ties to brand accent color without overwhelming UI"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.01.33.png",
+      "analysis": "## Screen\nA subscription/plan selection screen within a fintech app. Sits in the upsell or onboarding-to-premium flow, presenting two tiered membership options side by side for comparison. Vertical scroll layout with two large plan cards stacked below a header section.\n\n## Layout & Spacing\nHeader zone uses generous top padding with left-aligned title + subtitle. A pill-shaped teaser element (\"Here's a 'lil overview\") floats between header and cards, acting as a soft CTA bridge. Cards consume most of the viewport \u2014 nearly full-width with rounded corners and visible padding. The two cards are differentiated by background color, creating implicit hierarchy without explicit \"recommended\" badges. Illustration occupies the right half of each card, text the left \u2014 consistent two-column internal layout within each card.\n\n## Components\n- **Page title**: All-caps, heavy weight, left-aligned \u2014 dominates the header zone\n- **Subtitle**: Regular weight, muted tone, 2-line description\n- **Teaser pill**: White rounded rectangle with conversational label \u2014 low-commitment entry point\n- **Plan cards**: Large rounded-rect containers with distinct background fills; each has a logo badge, plan name, description copy, illustrated mascot/object, and a CTA button\n- **CTA buttons**: Solid fill, rounded pill shape, white text with arrow icon \u2014 contained within each card\n- **Watermark text**: Large ghosted plan name repeated in background of each card as texture\n- **Bottom nav**: Icon + label tabs, active state uses filled icon variant\n\n## Typography & Color\n- Title: Bold/black weight, dark navy, all-caps \u2014 maximum visual weight\n- Plan names: Extra-bold, large size, dark navy\n- Body copy: Regular weight, medium size, slightly muted \u2014 readable against colored backgrounds\n- Color palette: Deep navy background, bright cobalt blue for top card, medium purple for bottom card, white for buttons and UI elements, yellow/gold for sparkle accents\n- Color is used functionally to tier the plans \u2014 blue feels premium/active, purple feels secondary\n\n## Patterns\n- **\"Choose Your Fighter\" framing**: Gamified language reframes a mundane plan comparison as an exciting choice \u2014 reduces decision anxiety through personality\n- **Watermark-as-texture**: The ghosted large plan name behind content adds depth and reinforces brand identity without adding UI clutter \u2014 purely decorative but purposeful\n- **Illustration as emotional differentiator**: Each plan gets a distinct illustrated object (parachuting credit card vs. donut) that communicates the plan's benefit metaphorically \u2014 the parachute implies safety/control, the donut implies indulgence/relief\n- **No feature comparison table**: Deliberately avoids the typical spec grid; instead uses short emotional benefit copy \u2014 reduces cognitive load, pushes to \"Learn More\" for detail\n- **Teaser pill as soft entry**: The overview pill is a lower-commitment action than jumping straight into a plan \u2014 acknowledges users who aren't ready to decide\n- **Card hierarchy without explicit labeling**: Blue card appears first and has a slightly more energetic illustration \u2014 implies it's the \"better\" option without saying \"recommended\"\n- **Conversational microcopy**: \"lil overview,\" \"crushing pain of overdraft fees\" \u2014 voice-forward copy that builds brand trust and reduces the sterile feel of financial product screens\n\n## Notes\n- Gamified plan naming (\"Choose Your Fighter\") \u2192 steal for any multi-option selection screen\n- Watermark plan name as card bg texture \u2014 great depth trick, zero extra components\n- Emotional illustration per tier > feature bullet lists\n- Teaser/overview pill = smart middle-ground CTA for undecided users\n- Two-column card layout: copy left, illustration right \u2014 consistent, scannable\n- Color alone differentiates tiers \u2014 no \"BEST VALUE\" badge needed\n- Conversational copy in fintech = trust signal, not unprofessional"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.01.39.png",
+      "analysis": "## Screen\nSubscription plan selection screen in a financial/trading app. Sits in the upgrade or paywall flow \u2014 likely triggered from a feature gate or settings. Full-screen layout with a hero image at top, scrollable plan cards in the middle, and a sticky CTA at the bottom.\n\n## Layout & Spacing\nThree distinct vertical zones: (1) full-bleed hero image with headline overlaid, (2) scrollable plan card stack, (3) fixed bottom action area. Cards have generous internal padding (~20px) and sit close together with minimal gap, reinforcing the idea of comparison. The bottom CTA floats above the background with clear breathing room from the cards.\n\n## Components\n- **Hero image header** \u2014 B&W photography with logo and large white headline overlaid directly on image. No separate header bar; the image IS the header.\n- **Plan cards** \u2014 Dark rounded-rectangle cards (~12\u201316px radius). Selected card has a vivid cyan-to-purple gradient border stroke. Unselected card has a subtle dark border. Radio-style selection indicator in top-left (checkmark circle vs. empty circle).\n- **Plan label pill** \u2014 Small white-fill pill with bold all-caps black text (\"ESSENTIAL\", \"PLUS\"). Acts as a tier badge.\n- **Price display** \u2014 Right-aligned within card, large weight for dollar amount, smaller \"/Mo\" suffix in lighter weight.\n- **\"See benefits\" accordion trigger** \u2014 Inline text link with chevron, suggesting expandable content within the card.\n- **Primary CTA button** \u2014 Full-width, tall (~56px), cyan-to-purple gradient fill with white bold text. High contrast, unmissable.\n- **Secondary action** \u2014 Plain white text \"Skip trial\" below CTA, no button chrome.\n\n## Typography & Color\n- Headline: Large, heavy white sans-serif on image \u2014 dominant hierarchy\n- Plan name pill: Small, bold, all-caps, black on white \u2014 badge-like\n- Price: Medium-large, white, semi-bold; \"/Mo\" visually subordinate\n- Description: Small, muted gray \u2014 supporting copy\n- Overall palette: Near-black backgrounds (#1a1a1a range), white text, gray secondary text, cyan-to-purple gradient as the brand accent. Gradient is used exclusively for selection state and primary CTA \u2014 creating strong visual consistency between \"chosen\" and \"act.\"\n\n## Patterns\n- **Gradient border as selection indicator** \u2014 Instead of a simple highlight or color fill, the selected card gets a full gradient stroke border. Elegant, premium-feeling, avoids heavy visual weight while still being unmistakable.\n- **B&W hero as emotional framing** \u2014 Aspirational imagery (rock climber) sets a striving, achievement tone before the user reads a single word of copy. Color is intentionally stripped to not compete with the gradient UI below.\n- **Benefit inheritance copy** \u2014 \"All the benefits of ESSENTIAL and more\" reduces cognitive load; user doesn't need to re-evaluate lower tier features when considering upgrade.\n- **CTA copy reduces friction** \u2014 \"Try free for 30 days\" reframes the action as risk-free. The skip option is present but visually de-emphasized (no button, plain text) \u2014 present for trust, not for encouragement.\n- **Partial card bleed** \u2014 The second card is partially cut off, signaling scrollability and implying more tiers exist \u2014 creates curiosity without cluttering.\n- **Sticky gradient CTA mirrors selection gradient** \u2014 The button gradient matches the selected card border exactly, subconsciously linking \"your selection\" to \"take action.\"\n\n## Notes\n- Gradient border = premium selection state worth stealing\n- B&W photo + color UI = clean separation of emotion vs. function zones\n- Badge pill inside card > card header label \u2014 feels more like a product tag\n- Skip trial as ghost text only \u2014 trust signal without visual competition\n- Price right-aligned, badge left-aligned = natural F-pattern scan across the card\n- \"See benefits\" accordion keeps cards compact without hiding value\n- Sticky CTA + ghost secondary = classic high-convert paywall pattern, but gradient execution elevates it"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.01.50.png",
+      "analysis": "## Screen\nContent creation hub / home screen for a social media design tool. This is the main dashboard \u2014 the entry point after onboarding. Layout flows vertically: top nav \u2192 content type selector \u2192 template carousel \u2192 tools section. Primary interactive elements are the FAB (+), content type pills, template cards, and bottom nav.\n\n---\n\n## Layout & Spacing\nTop nav uses a three-zone layout (hamburger / logo / PRO badge). Content type selector sits in a horizontal scroll row directly below. The template carousel dominates the mid-section with a large stacked card presentation. Generous white space between sections creates clear breathing room. Section label \"EXPLORE TEMPLATES\" uses wide letter-spacing to feel editorial rather than utilitarian. The tools section begins peeking at the bottom, implying scroll continuation.\n\n---\n\n## Components\n- **FAB (+ button):** Black rounded square, high contrast, breaks from the pill-shaped content type buttons intentionally\n- **Content type pills:** Light gray, rounded, icon + label pairs, horizontal scroll \u2014 selected state not visible but spacing implies equal weight\n- **Stacked card carousel:** Three overlapping cards at slight rotation angles, creating depth and a \"fanned deck\" effect \u2014 the front card is full-bleed photo with overlaid editorial typography\n- **CTA chip on card:** Dark pill button (\"YEAR IN REVIEW\") floats at the bottom of the front card \u2014 feels like a template label/action\n- **PRO badge:** Outlined rectangle with a blue notification dot \u2014 upgrade prompt that's subtle but persistent\n- **Bottom nav:** 5 items, icon + label, standard underline active state\n\n---\n\n## Typography & Color\n- Section labels: small caps, tracked out, neutral gray \u2014 editorial feel\n- Card typography: blackletter/gothic display font in yellow \u2014 high contrast, decorative, mimics the template style itself\n- UI chrome: clean sans-serif throughout, minimal weight variation\n- **Palette:** Near-white background, black FAB, muted gray pills, the card introduces the only saturated color (dusty blue, yellow type) \u2014 UI stays neutral so template content pops\n\n---\n\n## Patterns\n- **Stacked fanned cards as carousel:** Instead of a flat horizontal scroll, cards are layered with rotation offsets \u2014 communicates \"collection\" and invites interaction through implied physicality\n- **Template previews that demonstrate the product:** The card shown IS a finished design, so the template section doubles as social proof of output quality\n- **FAB shape contrast:** Using a rounded square instead of a circle differentiates it from iOS conventions \u2014 feels branded, not default\n- **PRO upgrade as notification dot:** Avoids a banner or modal; a single blue dot on the PRO badge is enough to draw attention without interrupting flow\n- **Content type as creation intent selector:** Placing Reel/Story/Post/etc. as the first decision point shapes the entire creation flow downstream \u2014 format-first mental model\n- **Card CTA as contextual label:** The pill button on the template card (\"YEAR IN REVIEW\") functions as both a category tag and a tap target \u2014 dual-purpose component\n\n---\n\n## Notes\n- Stacked rotated cards = great for \"browse mode\" before committing to scroll\n- FAB as rounded square \u2014 worth stealing for non-iOS-native feel\n- Let template previews do the selling \u2014 no need for descriptive copy\n- Blue dot on upgrade CTA = lowest friction upsell placement possible\n- Format-first creation flow (pick Reel/Story before anything else) \u2014 strong mental model anchor\n- Editorial spaced-caps section headers elevate perceived quality instantly\n- Keep chrome neutral/white so user content always wins visually"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.02.09.png",
+      "analysis": "## Screen\nPersonalized home/dashboard screen for a content or wellness app. Sits at the top of the main navigation flow \u2014 the first screen after login. Vertical scroll layout with a large featured content card dominating the upper portion, followed by a secondary suggestion card peeking at the bottom. Two-zone structure: greeting header + content feed.\n\n## Layout & Spacing\nGenerous top padding before the greeting creates breathing room. The greeting headline is large and left-aligned, taking up significant vertical real estate \u2014 intentional weight given to personalization. The featured card spans nearly full width with rounded corners (~20\u201324px radius). Content below the card image uses internal padding cleanly separating image from metadata. The second card is partially visible, signaling scrollability without explicit affordance. Vertical rhythm feels editorial rather than utilitarian.\n\n## Components\n- **Greeting headline**: Large serif-adjacent bold text, left-aligned, two lines\n- **Featured content card**: White card with full-bleed image top half, text metadata + CTA bottom half. Heavy corner radius. Subtle shadow or elevation implied\n- **Content type label**: Small icon + muted label text above the title \u2014 lightweight metadata row\n- **CTA button**: Black pill button with icon + label. High contrast, compact. Sits left-aligned rather than full-width\n- **Secondary suggestion card**: Horizontal layout \u2014 square image (rounded corners) left, text right. Partially cropped = scroll hint\n- **Dismiss button**: Floating circular X button overlaid on the secondary card \u2014 ghost/light style\n\n## Typography & Color\n- Headline: Very large, bold, dark \u2014 dominates the screen, feels warm and personal\n- Card title: Medium-large bold, dark\n- Metadata label: Small, muted gray, paired with icon\n- Background: Warm off-white/cream \u2014 not pure white, adds softness\n- Card backgrounds: Pure white, contrasting slightly against cream bg\n- CTA: Black fill with white text \u2014 only high-contrast element, draws eye immediately\n- Overall palette: Warm neutrals + colorful abstract art image as the only chromatic element\n\n## Patterns\n- **Personalized greeting as hero element** \u2014 name-first copy (\"Sam, it's great to see you\") used as emotional anchor, not just utility. Large type scale makes it feel like a billboard moment\n- **Image bleeds into card, fades to white** \u2014 the artwork transitions via a soft fog/gradient into the white card body below, creating seamless image-to-content merge without a hard edge\n- **Left-aligned pill CTA** \u2014 resists the urge to go full-width; feels more editorial and less form-like\n- **Icon reinforcement on CTA** \u2014 headphone icon repeated on both the metadata label and the button, creating visual continuity and reinforcing content type\n- **Partial card crop as implicit scroll invite** \u2014 no \"see more\" needed; the cut-off card bottom communicates feed depth naturally\n- **Dismissible suggestion card** \u2014 X button on secondary card treats it as a nudge/recommendation, not mandatory content. Respects user agency\n- **Artwork as mood-setter** \u2014 abstract painterly image sets emotional tone without literal content; aesthetic-first content preview\n\n## Notes\n- Cream bg > white bg for warmth \u2014 especially in wellness/lifestyle contexts\n- Gradient fade from image into card body = elegant alternative to image/text hard cut\n- Greeting at display size = high personalization signal, worth the space cost\n- Left-align pill button feels premium vs full-width\n- Repeat icon in label + button = subtle but cohesive\n- Partial bottom card = scroll affordance without dots/arrows\n- Floating X on cards = lightweight dismissal pattern, non-destructive feel\n- Abstract art as hero image = mood over information"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.03.39.png",
+      "analysis": "## Screen\nOnboarding questionnaire screen from a mental wellness / emotional health app. Step 2 of 9 in an initial setup flow asking users to select their primary motivation for using the app. Full-screen layout with large heading, radio list, and sticky CTA.\n\n## Layout & Spacing\nThree distinct zones: header (back nav + progress + headline), scrollable option list, and fixed bottom CTA. Generous top padding before the headline gives it room to breathe. List items use horizontal dividers rather than card containers \u2014 keeps the layout light and open. Each row has consistent vertical padding (~20px feel). The 3-column row structure (radio \u2192 label \u2192 illustration) uses space efficiently without feeling cramped.\n\n## Components\n- **Progress indicator**: Minimal single-line dash (not a full bar) centered in the nav row \u2014 understated, non-anxious pacing signal\n- **Step counter (2/9)**: Small numeric label, right-aligned \u2014 gives concrete context without emphasis\n- **Headline text block**: Large, bold, conversational serif-adjacent weight \u2014 dominates the top third\n- **Radio buttons**: Outlined circles, unselected state only shown \u2014 clean, no fill noise\n- **List rows**: Text-left, illustration-right, separated by thin hairline dividers on dark background\n- **Illustrations**: Small 3D/character-style icons unique to each option \u2014 colorful, emotionally expressive, distinct per item\n- **CTA button**: Full-width pill, muted dark gray fill \u2014 intentionally de-emphasized until a selection is made\n\n## Typography & Color\n- **Headline**: Large (~28\u201332pt), bold weight, white \u2014 conversational and direct tone\n- **Option labels**: Medium (~15pt), regular weight, white/light gray \u2014 readable but subordinate\n- **Step counter**: Small, muted gray\n- **Palette**: Pure black background, white text, hairline gray dividers, muted gray CTA. Color lives entirely in the illustrations \u2014 creates strong focal contrast on each option\n- Color is used functionally: grayscale UI = neutral/calm, illustration color = emotional warmth and differentiation\n\n## Patterns\n- **Illustration as emotional encoding**: Each answer option has a distinct character/object illustration that metaphorically represents the emotional theme \u2014 not decorative, but aids comprehension and memorability\n- **De-emphasized CTA until interaction**: The Continue button is gray/inactive-looking by default \u2014 subtly communicates \"make a selection first\" without disabling or adding helper text\n- **Conversational headline framing**: \"Before jumping in, let's explore why you're here\" \u2014 reframes a survey question as a collaborative moment, reducing clinical feel\n- **Hairline dividers on black**: Avoids card/container boxing which would feel heavy; dividers create separation with minimal visual weight\n- **No selected state shown**: Screenshot captures the zero-state \u2014 interesting choice to show the screen before any interaction, keeping it clean for reference\n- **Escape hatch option**: \"Another reason not listed here\" as final option \u2014 respects user autonomy and reduces drop-off from non-fitting answers\n\n## Notes\n- Illustrations do the emotional lifting \u2014 UI stays neutral/minimal\n- Black bg + colorful 3D chars = high contrast delight without loud UI\n- Progress as a single dash, not a bar \u2014 worth trying for low-anxiety flows\n- CTA muted gray = soft gate, not a hard disabled state\n- Conversational copy in headlines transforms surveys into conversations\n- Hairline dividers > cards on dark backgrounds for list items\n- Always include an \"other\" escape hatch in motivation/goal selection screens"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.03.47.png",
+      "analysis": "## Screen\nAccount setup/onboarding screen for a financial app. This is a pre-KYC (Know Your Customer) overview screen \u2014 sits between initial account creation and identity verification. Acts as a roadmap before the user commits to the full onboarding flow. Layout is single-column, top-to-bottom: icon cluster \u2192 headline \u2192 subtext \u2192 vertical stepper \u2192 legal checkbox \u2192 CTA.\n\n## Layout & Spacing\nContent uses generous left-aligned padding throughout. The stepper section has clear vertical breathing room between each step (~24\u201332px). The legal block is visually separated from the stepper with significant whitespace, creating a distinct zone. CTA is pinned near the bottom with enough margin to feel grounded without being a sticky bar. The abstract icon cluster at top-left is compact and decorative, not centered \u2014 feels editorial rather than illustrative.\n\n## Components\n- **Abstract icon mark**: Stacked geometric shapes (triangle, circle, square) in yellow/blue/gray \u2014 acts as a brand illustration, not a traditional app icon\n- **Vertical stepper**: Three steps connected by a thin vertical line. Step 1 uses a filled blue circle with checkmark (complete). Steps 2 and 3 use outlined circles with numbers. Each step has title, description, and either a \"Complete\" status label or a clock icon with time estimate\n- **Time estimate badge**: Small clock icon + \"Approx. X min\" in green \u2014 inline with step metadata\n- **Checkbox**: Square checkbox (checked, blue fill) with dense legal copy inline\n- **Primary CTA button**: Full-width, pill-shaped, solid blue with white label \u2014 high contrast, dominant\n\n## Typography & Color\n- **Headline**: Large, bold, black \u2014 2 lines, left-aligned, sets strong visual anchor\n- **Body/subtext**: Regular weight, medium gray \u2014 clearly secondary\n- **Step titles**: Semi-bold black for active/upcoming, slightly lighter for completed\n- **\"Complete\" label**: Bold blue \u2014 matches primary color, signals success state\n- **Time estimates**: Small, green \u2014 functional color coding distinct from primary blue\n- **Links**: Blue underline throughout (regulatory text, legal links)\n- **Palette**: White background, primary blue (#2D5BE3 approx.), green for time/status, near-black for type, mid-gray for secondary text\n\n## Patterns\n- **Time-to-complete transparency**: Each pending step shows an estimated duration (2 min, 5 min). Reduces anxiety about commitment before starting \u2014 rare and thoughtful in onboarding flows\n- **Progress as reassurance**: Showing step 1 already complete (with checkmark) gives the user a sense of momentum before they've done anything on this screen \u2014 psychological foot-in-the-door\n- **Regulatory link as trust signal**: \"Regulations\" is hyperlinked in the subtitle \u2014 externalizing the reason for data collection to a third party (the law) rather than the company. Shifts framing from \"we want your data\" to \"we're required to\"\n- **Legal copy integrated, not buried**: The certification checkbox is inline in the flow rather than hidden in a modal or footer \u2014 signals transparency\n- **Geometric illustration as tone-setter**: Abstract shapes instead of a literal illustration keeps the screen feeling sophisticated/financial rather than playful \u2014 deliberate brand register choice\n- **Stepper as commitment device**: Showing the full journey upfront lets users mentally pre-commit to the scope \u2014 reduces drop-off mid-flow\n\n## Notes\n- Time estimates on steps = underused pattern, steal this\n- \"Complete\" in brand blue doubles as progress indicator + positive reinforcement\n- Regulatory framing as trust-building, not just compliance boilerplate\n- Pill CTA at bottom but NOT sticky \u2014 intentional scroll-to-commit friction\n- Abstract icon cluster top-left breaks the \"centered hero illustration\" clich\u00e9\n- Green for time/duration creates a third functional color without feeling chaotic\n- Checkbox + dense legal inline = honest design, no dark pattern burial"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.04.29.png",
+      "analysis": "## Screen\nOnboarding survey screen from a financial or lifestyle app. Single-question attribution survey asking how the user discovered the product. Appears late in onboarding flow \u2014 post-signup, pre-dashboard. Full-screen layout with centered header, stacked list of options, and a fixed bottom CTA.\n\n## Layout & Spacing\nLight gray background creates a canvas that makes white option cards float. Header block (title + subtitle) sits in the upper third with generous breathing room before the list begins. Option cards are evenly spaced with consistent gaps \u2014 approximately equal vertical rhythm throughout. CTA button is centered at bottom, not edge-to-edge, giving it a pill-like standalone presence rather than a footer bar feel.\n\n## Components\n- **Header text block** \u2014 Large bold question title, smaller gray subtitle below. Centered alignment.\n- **Option cards** \u2014 White rounded-rectangle cards, full-width with horizontal padding. Label left-aligned, checkbox right-aligned. Subtle drop shadow or elevation implied by white-on-gray contrast.\n- **Checkboxes** \u2014 Square with rounded corners. Unselected: simple outline. Selected: filled blue with white checkmark icon.\n- **Selected card state** \u2014 Entire card gets a blue border stroke to reinforce selection at the container level, not just the checkbox.\n- **Continue button** \u2014 Pill-shaped (fully rounded), warm salmon/coral fill, white label. Centered, not full-width.\n\n## Typography & Color\n- **Title**: Large, bold, dark near-black \u2014 clear primary hierarchy\n- **Subtitle**: Small, medium-weight, muted gray \u2014 secondary/instructional\n- **Option labels**: Medium weight, dark \u2014 same visual level as each other, no hierarchy within list\n- **Color palette**: Off-white background (#f2f2f2 range), white cards, blue accent for selection (#2563EB range), coral/salmon CTA (~#F08070 range)\n- Color is used functionally: blue = selected state, coral = forward action \u2014 two distinct accent colors with clear semantic separation\n\n## Patterns\n- **Full-row selection target** \u2014 The entire card is the tap target, not just the checkbox. The blue border on the whole card confirms this \u2014 selection feedback spans the full component, reducing precision tapping anxiety.\n- **Dual selection indicator** \u2014 Both the checkbox AND the card border change on selection. Redundant feedback that makes state unmistakably clear without relying on a single small element.\n- **Warm CTA vs. cool selection color** \u2014 Deliberate use of two different accent hues: blue for data/selection, coral for action/progression. Prevents visual competition and creates clear affordance hierarchy.\n- **Subtitle transparency about purpose** \u2014 \"(multiple selection possible)\" is called out explicitly in the subtitle, reducing cognitive friction and setting expectations before the user interacts.\n- **Non-full-width CTA** \u2014 Pill button centered with space on sides feels less aggressive than edge-to-edge buttons; softer, more inviting interaction pattern appropriate for optional/survey context.\n\n## Notes\n- Card border highlight on select = underused pattern, very clean\n- Two accent colors (blue/coral) = smart semantic split, steal this\n- Subtitle that explains the UI behavior inline (\"multiple selection\") \u2014 consider for any non-obvious interaction\n- Pill CTA centered, not stretched \u2014 works well for low-stakes confirmations\n- Gray bg + white cards = effortless depth without shadows\n- Checkbox redundancy (icon + border) worth copying for accessibility + clarity\n- Survey screens don't need to feel clinical \u2014 rounded everything softens it considerably"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.04.57.png",
+      "analysis": "## Screen\nAudio content upload screen for a podcast creation app. This is a modal/sheet that appears mid-flow when a creator chooses to publish an episode via file upload. It sits between content type selection and the actual file picker. Single-purpose screen with one primary action. Layout is vertically centered with a floating contextual card anchored to the bottom.\n\n## Layout & Spacing\nTop-left dismiss (X) floats freely. Large hero illustration occupies the upper third. Text block centered below with generous breathing room. CTA button centered with substantial vertical margin above and below. Bottom contextual card is visually separated by a large whitespace gap \u2014 feels like a secondary zone entirely. The two-zone split (primary action vs. contextual help) is the key structural decision.\n\n## Components\n- **Hero illustration**: Layered concentric circles in soft lavender/periwinkle, audio waveform bars in white, overlaid with a solid deep purple circular upload button with upward arrow. Depth created through opacity layers.\n- **Title**: Large bold sans-serif, single word \"Upload\"\n- **Body copy**: Two-line centered description with supported formats inline\n- **Legal line**: Smaller gray text with two underlined inline text links (Platform Rules, Terms of Use)\n- **Primary CTA**: Pill/stadium button, medium purple fill, bold white label, generous padding, full-width feel but contained width\n- **Contextual card**: Rounded rectangle, light gray/off-white fill, subtle border, bold heading + body copy + external link icon top-right corner\n\n## Typography & Color\nClear three-level hierarchy: bold display title \u2192 regular body \u2192 small legal/secondary. All centered except the bottom card (left-aligned). Color palette is monochromatic purple \u2014 deep indigo for icon button, mid-purple for CTA, soft lavender for illustration background. Gray for secondary text. Inline links use underline rather than color differentiation. White background keeps everything clean. Purple is used exclusively for interactive/branded elements, creating strong functional signal.\n\n## Patterns\n- **Layered icon as illustration**: The upload arrow button is embedded inside the hero art \u2014 the functional metaphor (upload) doubles as decorative illustration. Efficient and reinforces the action before the user reads anything.\n- **Two-zone modal layout**: Hard separation between \"do the thing\" (top) and \"learn more / alternate path\" (bottom card) using whitespace alone \u2014 no divider line needed. The card feels like it belongs to a different layer.\n- **Contextual escape hatch**: The bottom card addresses the most likely reason someone might abandon this screen (\"I don't have a file yet\") and redirects rather than losing the user. It's not a secondary CTA competing with the primary \u2014 it's a support card.\n- **External link icon on card**: Signals the card leads out of the current flow without disrupting the primary path. Low visual weight but high utility signal.\n- **Format info inline with description**: Supported file types listed in the subtitle rather than as a separate label or tooltip \u2014 reduces cognitive overhead, answers the implicit question preemptively.\n- **Legal links as plain inline text**: Terms buried in a natural sentence rather than a separate legal row \u2014 reduces friction perception while maintaining compliance.\n\n## Notes\n- Hero icon = functional metaphor + illustration in one \u2014 steal this\n- Two-zone modal: action zone / support zone split by whitespace only\n- \"Escape hatch card\" pattern for users not ready to complete action\n- Concentric circle + opacity layering = cheap depth for audio/media iconography\n- Inline file format disclosure in subtitle \u2014 no extra UI needed\n- External link icon on card = lightweight signal, doesn't compete with CTA\n- Legal as sentence > legal as footer row\n- All purple = brand + interactive only, zero decorative use"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.05.12.png",
+      "analysis": "## Screen\nSocial content creation screen for a community/blog-style app. Users compose posts with photos, a title, and body text before publishing. Sits mid-flow after initiating a new post. Layout is a single scrollable column with a sticky bottom action bar.\n\n---\n\n## Layout & Spacing\nTop-to-bottom flow mirrors the post's reading order: media \u2192 title \u2192 body \u2192 metadata \u2192 publish. Each section is visually separated by generous white space rather than dividers. Photo row and text fields use card-style containers with rounded corners. Bottom action bar floats above content with a privacy notice sandwiched between content and CTAs \u2014 a smart placement for disclosure without interruption.\n\n---\n\n## Components\n- **Photo thumbnail** \u2014 Rounded square with a delete icon (trash) overlaid top-right in a dark pill/badge. Active state is clearly occupied.\n- **Add photo slot** \u2014 Dashed border container with icon + label + remaining count (\"8 left\"). Communicates capacity without a separate help tooltip.\n- **Title field** \u2014 Single-line card input with an AI sparkle icon flush right inside the field. Inline, non-intrusive AI trigger.\n- **Body text field** \u2014 Multi-line card with character counter (402/1000) bottom-right and a floating \"Improve for me\" AI button bottom-right inside the card. Counter and AI action coexist cleanly.\n- **\"Improve for me\" button** \u2014 Dark green pill with sparkle icon, floats inside the text area. Feels contextual rather than toolbar-based.\n- **Topic row** \u2014 Hash icon + label + chevron. Tappable list row pattern, marked optional inline.\n- **Suggested topics** \u2014 Partially visible chip row, signals scrollability.\n- **Dual CTA bar** \u2014 \"Save draft\" (outlined/active) + \"Post now\" (filled but grayed/disabled). Clear state differentiation.\n\n---\n\n## Typography & Color\n- **Hierarchy**: Bold nav title \u2192 field text (regular weight, readable size) \u2192 secondary labels (smaller, muted gray).\n- **Color palette**: Near-white background, dark near-black text, dark green (#1a5c3a-ish) as the brand/action accent used exclusively on AI features and active CTAs.\n- **Functional color use**: Green = AI-assisted actions + primary action. Gray = disabled state (\"Post now\"), helper text. The restraint keeps green meaningful.\n- **Character counter**: Small, right-aligned gray \u2014 present but not demanding attention.\n\n---\n\n## Patterns\n- **Capacity-aware upload slot**: \"8 left\" inside the add-photo placeholder eliminates a separate limit warning and sets expectations proactively.\n- **AI assistance embedded at point of need**: Sparkle triggers live inside the fields they affect \u2014 not in a toolbar or separate panel. Title gets a single icon; body gets a full labeled button because it's the heavier editing task. The escalation in affordance matches the complexity of the action.\n- **Disabled publish with active draft save**: Prevents premature publishing (possibly title/body required) while still letting users save progress. The visual contrast between the two buttons communicates state without an error message.\n- **Privacy disclosure between content and actions**: \"Your post will appear publicly\" sits just above the CTAs \u2014 read at the moment of decision, not buried in settings.\n- **Suggested topics peek**: Partial visibility of the chip row below the topic row creates a scroll invitation without a \"see more\" button.\n- **Trash icon on media as overlay badge**: Keeps the photo full-bleed while making deletion accessible \u2014 avoids shrinking the thumbnail to accommodate controls.\n\n---\n\n## Notes\n- AI triggers inside fields > AI in toolbar \u2014 proximity = discoverability\n- \"X left\" in upload slot = proactive constraint communication\n- Dual bottom CTAs: one always active (draft), one conditional (publish) \u2014 never block progress\n- Privacy notice placement: decision-moment disclosure pattern\n- Dashed border = \"empty slot\" convention, universally readable\n- Sparkle icon as AI shorthand \u2014 use consistently to train users\n- Partial chip row = implicit scroll affordance, no extra UI needed\n- Character count + AI improve = complementary, not competing"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.05.16.png",
+      "analysis": "## Screen\nEvent creation form in a social or community app. Mid-flow creation screen where users configure a new event. Layout is a single-column vertical scroll with a large media hero at top, followed by stacked input rows, then an options section below.\n\n## Layout & Spacing\nContent is divided into three clear zones: (1) hero image block, (2) core event fields, (3) secondary options. Each zone is visually separated by subtle spacing rather than hard dividers. Form fields are grouped into frosted/translucent card containers. The image takes up roughly 40% of visible screen height, giving it strong visual priority. Fields are generously tall for touch targets. \"Options\" section uses a left-aligned label above its card group \u2014 classic iOS settings-style grouping.\n\n## Components\n- **Hero image uploader** \u2014 large square card with rounded corners, white/light background, displays 3D generated art. Edit button sits as a small circular icon badge at bottom-right corner of the image.\n- **Event Name field** \u2014 full-width frosted input, large placeholder text, no border, blends into background.\n- **Date/Time row** \u2014 single card containing both Start and End rows. Connected visually with a dotted vertical line between the two dot indicators (filled circle for Start, hollow circle for End), mimicking a timeline/itinerary metaphor.\n- **Location field** \u2014 icon-left layout, single row card.\n- **Description field** \u2014 icon-left layout, single row card.\n- **Options rows** \u2014 stepper/picker rows with label on left, current value + chevron-up-down icon on right (indicating inline picker or dropdown).\n\n## Typography & Color\n- Overall palette: muted blue-grey, desaturated and cool. Background has a soft gradient or blur effect.\n- Text is white/light grey throughout \u2014 hierarchy achieved through size and opacity rather than color contrast.\n- \"Create Event\" title is medium weight, centered.\n- Field labels are slightly smaller and lower opacity than values.\n- \"Options\" section label is small, uppercase-adjacent, subdued \u2014 classic secondary label treatment.\n- The 3D iridescent artwork creates a vivid chromatic accent against the muted UI.\n\n## Patterns\n- **Timeline connector in date fields** \u2014 using a filled dot \u2192 dashed line \u2192 hollow dot to visually link Start and End times is a clever spatial metaphor borrowed from travel/itinerary UIs. Makes the time range feel like a duration, not two separate fields.\n- **Generative/AI art as default cover** \u2014 instead of a blank placeholder, the image slot is pre-filled with a high-quality 3D abstract image, reducing the empty-state anxiety of a blank form and suggesting the creative tone of the platform.\n- **Edit badge on image** \u2014 small circular button overlaid at corner rather than a separate \"change photo\" text link. Keeps the image area clean while remaining discoverable.\n- **Frosted glass form fields** \u2014 fields have no traditional border; they read as slightly lighter translucent surfaces against the background. Creates visual cohesion without hard UI chrome.\n- **Value-right pattern for options** \u2014 Visibility and Capacity show current value right-aligned with a sort/stepper chevron, communicating current state at a glance before interaction.\n- **Profile avatar + dropdown in nav** \u2014 suggests account-switching or context-switching is accessible from the creation flow itself, useful for multi-account or community-based apps.\n\n## Notes\n- Dotted line between start/end = steal this for any duration input\n- Pre-filled hero art = kills blank state problem elegantly\n- Frosted fields with no borders = form that doesn't feel like a form\n- Muted grey-blue + iridescent 3D art = strong visual identity contrast trick\n- Options section = settings-style grouping works well for secondary config\n- Edit icon badge on media = cleaner than text link below image\n- All placeholder text same low-opacity white = consistent ghost state language"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.05.29.png",
+      "analysis": "## Screen\nOnboarding step in a social/friend-network app \u2014 specifically the profile photo upload step. Sits mid-flow in account creation. Single-purpose screen with one clear action. Layout is top-to-bottom linear: logo \u2192 progress \u2192 headline \u2192 upload zone \u2192 privacy note \u2192 navigation.\n\n## Layout & Spacing\nGenerous vertical breathing room between each section. The upload zone takes up the majority of screen real estate \u2014 roughly 55% of the content area \u2014 making it the undeniable focal point. Headline and subhead are center-aligned and tightly grouped together, then separated from the upload zone with comfortable margin. Privacy note sits just below the card, visually attached to it rather than floating. Navigation arrow is bottom-right anchored, not a full-width button.\n\n## Components\n- **Progress bar**: Full-width, thin line just below the logo. Left portion is orange/red, right is light gray. No step numbers, no labels \u2014 purely visual.\n- **Upload zone**: Large rounded rectangle card in a slightly darker warm gray than the background. Centered image+plus icon in medium gray. No border/stroke \u2014 differentiated purely through fill contrast. Rounded corners ~16px.\n- **Privacy note**: Small caption with a lock icon inline. Muted gray, low visual weight. Attached spatially to the upload card.\n- **Navigation arrow button**: Circular, light gray fill, arrow icon. Floating bottom-right. Minimal, ghost-like presence.\n- **Wordmark**: Script/handwritten style logotype centered at top.\n\n## Typography & Color\n- **Headline**: Large, bold serif-adjacent sans (~28\u201330px), black. High contrast, commands attention.\n- **Subhead**: Regular weight, medium gray, ~15px. Centered, two lines. Warm and conversational tone.\n- **Privacy caption**: ~12px, light gray, minimal hierarchy weight.\n- **Palette**: Warm off-white background (#F2EDE8 range), orange-red accent for progress only, dark charcoal for headline, mid-grays for supporting text and UI elements. Single accent color used with extreme restraint.\n\n## Patterns\n- **Progress bar as sole wayfinding** \u2014 no \"Step 3 of 5\" label, trusting the visual fill ratio to communicate progress. Cleaner, less anxiety-inducing.\n- **Oversized upload target** \u2014 making the drop zone card large reduces tap hesitation and signals this step matters; it's not a small avatar circle.\n- **Privacy reassurance anchored to the action** \u2014 the lock + caption is placed directly under the upload zone, not in a footer or tooltip. Addresses the concern exactly where the user is thinking about it.\n- **Floating directional CTA instead of full-width button** \u2014 the arrow-only circle allows skipping/advancing without visually competing with the primary action. Implies \"you can move on, but the upload is what we want.\"\n- **Warm, human microcopy** \u2014 \"make your friends smile\" reframes a potentially friction-heavy step (uploading a photo) as a social, positive act rather than a requirement.\n- **Tone-matched empty state** \u2014 the upload icon uses a soft gray that matches the card fill closely, keeping the empty state calm rather than stark or demanding.\n\n## Notes\n- Single accent color (orange) used only for progress = strong signal value\n- Oversized upload card = commitment framing, makes action feel important\n- Privacy note placement = contextual trust-building, not buried in settings\n- Floating circle nav = \"soft skip\" pattern, reduces pressure without hiding the option\n- Warm background tint softens what could feel like a clinical form step\n- Handwritten logo in onboarding = personality injection at top of every step\n- No button label needed when direction is obvious \u2014 arrow alone sufficient"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.06.22.png",
+      "analysis": "## Screen\nShopping/fintech super-app home screen. Serves as a dashboard hub combining e-commerce discovery, order tracking, and financial tools. This is the post-login landing screen \u2014 the user's primary daily touchpoint. Layout flows vertically: branded header \u2192 search \u2192 quick-nav icons \u2192 promotional banner \u2192 financial/order card section \u2192 secondary nav icons \u2192 ad unit \u2192 bottom tab bar.\n\n## Layout & Spacing\nTwo distinct background zones create visual hierarchy: a soft pink-to-lavender gradient occupies the top ~40%, transitioning to a light warm gray for the content-heavy lower section. The white card panel floats over this transition, creating depth. Horizontal icon rows use equal-width columns with generous vertical padding. The main content card uses ~16px side margins with internal sections separated by subtle dividers. Spacing tightens slightly in the secondary icon row, fitting 6 items vs. 5 in the top row.\n\n## Components\n- **Search bar**: Full-width pill shape, white fill, soft shadow, left-aligned icon + placeholder text\n- **Quick-nav icons**: Circular pill/squircle containers with illustrated emoji-style icons, label below, equal spacing\n- **Dismissible banner**: Rounded rectangle with illustrated icon left, bold headline + body copy, \u00d7 dismiss button top-right\n- **Split info card**: Two-column card with rounded corners, each cell containing icon + label/value \u2014 used for spending power and balance at a glance\n- **Order filter tabs**: 4-column horizontal row with small illustrated icons above text labels, no explicit tab styling \u2014 relies purely on layout rhythm\n- **CTA row item**: \"Track all your orders\" uses a + icon in a circle, left-aligned, full-width tap target\n- **Secondary icon grid**: 6-up row, smaller squircle icons, tighter labels, scrollable implied\n- **Ad banner**: Full-bleed card with brand image right, text left, \"Ad\" pill badge top-right corner\n\n## Typography & Color\nClear 3-level hierarchy: bold display weight for headlines (\"Compare prices. Save money.\"), medium weight for card values (\"$0\"), regular small for labels beneath icons. Color palette: pink/rose gradient header, lavender mid-tone, warm off-white content area, white cards. Functional color use \u2014 gold/amber for rewards icon, green for loyalty, purple for saved/watch, maintaining icon-level color coding without overwhelming the neutral shell. Black used for primary text only; gray for secondary labels.\n\n## Patterns\n- **Zone-based background theming**: Using gradient-to-neutral background shift to signal transition from \"discovery/navigation\" zone to \"utility/account\" zone \u2014 teaches users where they are without explicit headers\n- **Dual-purpose card split**: The two-cell card (spending power + balance) packages two financial metrics in one glance without requiring separate sections \u2014 efficient trust-building real estate\n- **Icon row as shortcut navigation**: Two separate icon rows serve different intent depths \u2014 top row is primary app modes, bottom row is product/feature access \u2014 layering without cluttering\n- **Order status as passive filter tabs**: Order states (All, On its way, Delivered, Returns) presented as always-visible tabs rather than hidden filters, surfacing workflow state at a glance\n- **Illustrated micro-icons**: Custom emoji-adjacent icons per feature give personality while maintaining functional clarity \u2014 warmer than standard iconography\n- **Transparent ad labeling**: \"Ad\" pill badge is visually distinct but not aggressive \u2014 maintains trust while monetizing feed space\n\n## Notes\n- Gradient zone break = great trick for separating brand/nav from utility content without a hard line\n- Two-col stat card = compact financial snapshot pattern, steal for dashboards\n- Order status tabs always visible = reduces friction for repeat users, no hunting for filters\n- 5-col vs 6-col icon rows = intentional density shift signals feature hierarchy\n- Dismissible promo banner with illustration feels editorial, not interruptive\n- Bottom nav only 3 items = aggressive simplification for a complex app, forces prioritization"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.06.47.png",
+      "analysis": "## Screen\nTravel/accommodation booking app \u2014 date selection step in a multi-step search flow. Sits between destination input and guest/filter selection. Layout is a vertical stack: persistent top nav with category tabs, a summary card showing prior step's input, then a large content card housing the date configuration UI, and a fixed bottom action bar.\n\n## Layout & Spacing\nContent is organized in distinct horizontal bands separated by thin dividers. The main card uses generous internal padding (~20\u201324px). Three logical sub-sections stack vertically: trip type toggle \u2192 duration selector \u2192 month picker. Each section has a label + control pairing. The bottom action bar floats outside the card, keeping navigation chrome separate from content. The \"Where\" summary card above acts as a breadcrumb/context anchor with minimal height.\n\n## Components\n- **Segmented control (trip type):** Pill-shaped, full-width, three options \u2014 \"Flexible\" is selected with a white elevated pill on gray track. Smooth, rounded container.\n- **Chip group (duration):** Individual rounded-rectangle chips, outlined style. Selected state (\"Week\") uses a bold border (~2px black) with no fill change \u2014 border weight alone signals selection.\n- **Month tiles:** Square cards with rounded corners, icon + month name + year. Subtle border, light background. Horizontally scrollable (August partially visible = scroll affordance).\n- **Summary row:** Minimal two-column layout \u2014 muted label left, value right. Clean card with soft shadow.\n- **Reset / Next bar:** \"Reset\" as underlined text link (left), \"Next\" as full black pill CTA (right). High contrast pairing.\n\n## Typography & Color\nNear-monochromatic palette \u2014 white, light gray (#F5F5F5 range), and black. No accent colors. Type hierarchy: bold large heading (\"When's your trip?\") \u2192 medium section labels (\"Stay for a week,\" \"Go anytime\") \u2192 body/chip text. Selected states communicated entirely through weight and border, not color. Year rendered in smaller, lighter gray below month name \u2014 clear sub-label treatment.\n\n## Patterns\n- **Progressive disclosure via segmented mode switching** \u2014 three fundamentally different interaction paradigms (exact dates / month browsing / flexible) behind one toggle, avoiding UI clutter\n- **Selection state through border weight only** \u2014 the duration chips use stroke thickness as the sole selected indicator, no fill, no color change \u2014 elegant restraint\n- **Horizontal scroll peek** \u2014 the partially visible \"August\" tile teaches scrollability without any explicit indicator or arrow\n- **Contextual persistence** \u2014 the \"Where\" card above the main panel keeps prior search context visible, reducing cognitive load mid-flow\n- **Dual-register action bar** \u2014 pairing a destructive-light action (Reset as text link) with a primary CTA (filled pill) creates clear visual hierarchy without adding a third button style\n- **Sub-labels on tiles** \u2014 year shown beneath month name anticipates cross-year booking confusion proactively\n\n## Notes\n- Border-weight-only selection = great for monochrome design systems\n- Peek scroll on tile grids > scroll indicators\n- \"Flexible\" search UX: hide complexity behind mode toggle, not separate screens\n- Summary card as persistent breadcrumb \u2014 steal this for any multi-step flow\n- Reset as underlined link keeps it present but visually subordinate \u2014 better than ghost button here\n- Dividers between sub-sections work harder than headers alone for scanability\n- Black pill CTA on white bg = maximum contrast, no color dependency"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.07.04.png",
+      "analysis": "## Screen\nPost-workout effort rating screen in a fitness tracking app. Appears as a modal or sheet after completing an outdoor walk session. Sits in the post-activity logging flow. Layout is a single-column card with a centered content zone, a slider input, and a dual-action footer.\n\n## Layout & Spacing\nContent is vertically stacked with generous breathing room between zones: title block \u2192 emoji feedback \u2192 label + description \u2192 slider \u2192 utility action \u2192 education link \u2192 primary CTA \u2192 dismiss. The card sits inset from screen edges with rounded corners, creating a contained modal feel. The slider section has notably tighter vertical padding, making it feel like a distinct \"data input\" zone versus the expressive upper section.\n\n## Components\n- **Emoji indicator** \u2014 Large native emoji (~60px) used as the primary emotional feedback glyph. Changes dynamically with slider position. No border or container, floats freely.\n- **Gradient slider** \u2014 Custom track running cool blue \u2192 green \u2192 yellow \u2192 orange \u2192 red \u2192 purple. Represents the full exertion spectrum visually. Thumb is a white circle with blue fill. Tick marks along track suggest discrete steps.\n- **HR data annotation** \u2014 Small caps label (\"BASED ON AVAILABLE HR DATA\") with a vertical tick line above the slider, indicating a suggested position. Subtle but smart.\n- **\"Clear Entry\" link** \u2014 Terracotta/orange text-only button. Low visual weight, destructive-adjacent action kept understated.\n- **\"How To Self-Assess\" row** \u2014 Left-aligned text with a chevron. Inline educational link, styled like a table row.\n- **Save button** \u2014 Full-width, high-radius pill, terracotta fill, white bold label. Dominant CTA.\n- **Dismiss** \u2014 Text-only, same terracotta color, below Save. Creates a clear hierarchy: save > dismiss.\n\n## Typography & Color\n- **Title**: Large bold sans-serif, black \u2014 commands attention\n- **Subtitle/question**: Regular weight, medium gray \u2014 secondary prompt\n- **Effort label** (\"Extremely Light\"): Bold, slightly smaller than title \u2014 dynamic feedback text\n- **Description**: Small, light gray, centered \u2014 supporting context\n- **HR label**: All-caps, very small, gray \u2014 metadata/annotation tier\n- Color palette is near-monochrome (white card, black/gray type) with terracotta/burnt orange as the single accent color used across CTA, links, and interactive elements. The slider gradient is the only multi-color element, functioning as a data visualization rather than decoration.\n\n## Patterns\n- **Emoji as dynamic state indicator** \u2014 Using a native emoji instead of a custom icon or numeric scale adds warmth and immediate emotional legibility. It likely animates as the slider moves, making the interaction feel alive.\n- **Gradient-as-scale** \u2014 The color gradient on the slider encodes meaning (cool = easy, hot = hard, purple = max) so users can read effort level spatially and chromatically without reading labels.\n- **Data-suggested default** \u2014 The HR annotation with a tick mark above the slider pre-positions the thumb based on objective data while leaving subjective override to the user. Respects both data and personal perception.\n- **Three-tier description per state** \u2014 Emoji + bold label + plain-language description creates redundant encoding: visual, named, and experiential. Reduces ambiguity for a subjective metric.\n- **Education link embedded in action flow** \u2014 \"How To Self-Assess\" placed between the input and the CTA catches users who are uncertain before they commit, without interrupting confident users.\n- **Save/Dismiss pairing without modal chrome** \u2014 No cancel button in a traditional sense; \"Dismiss\" is soft and text-only, making abandonment feel low-stakes while \"Save\" is clearly the intended path.\n\n## Notes\n- Emoji-as-slider-feedback = steal this for any subjective rating input\n- HR-suggested position tick = great pattern for \"here's what the data says, but you decide\"\n- Gradient track doubles as legend \u2014 no separate key needed\n- Terracotta accent on both destructive (Clear) and primary (Save) \u2014 works because weight/size differentiates intent\n- \"How to self-assess\" inline edu link = reduce friction without a tooltip or modal\n- All-caps metadata annotation style for data-sourced context\n- Dismiss below Save = soft opt-out, not an escape hatch"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.07.23.png",
+      "analysis": "## Screen\nOnboarding goal-setting screen in a reading/learning app. Step 2 of a multi-step onboarding flow where the user selects a daily time commitment. Sits between initial preference capture and account creation. Layout is top-to-bottom linear: progress indicator \u2192 headline \u2192 scroll picker \u2192 CTA.\n\n## Layout & Spacing\nGenerous vertical whitespace between the headline and the picker creates a calm, uncluttered feel \u2014 the picker floats in the lower-middle third of the screen. The CTA is anchored to the bottom with comfortable padding. The contextual tooltip sits left of the picker, horizontally paired to create a two-column micro-layout within an otherwise single-column screen.\n\n## Components\n- **Step progress bar**: Horizontal line with filled/unfilled segments and a numbered dark circle node. Current step labeled below in small text (\"Aspiration\").\n- **Drum/scroll picker**: Vertical number scroll with strong center-selection emphasis. Numbers above and below fade in opacity and decrease in size, creating depth. Selected value (\"10\") is bold, large, and blue. Unit label (\"min\") sits inline to the right of the selected number only.\n- **Contextual tooltip/callout**: Soft blue rounded hexagonal badge to the left of the picker with a right-pointing tail. Contains translated meaning of the selected value (\"25 book summaries a month\"). Updates dynamically with scroll.\n- **CTA button**: Full-width, high-radius pill, solid blue, white label. Pinned to bottom.\n\n## Typography & Color\n- **Headline**: Large, bold, dark \u2014 clear primary hierarchy\n- **Subhead**: Small, medium-weight gray \u2014 reassuring micro-copy (\"You can change it later\")\n- **Picker selected**: Large bold blue \u2014 active state communicates selection clearly\n- **Picker unselected**: Progressively lighter blue, smaller \u2014 visual depth cue\n- **Palette**: Warm off-white background (#F5F0EC-ish), primary blue for interactive/selected elements, muted blue for secondary picker values and tooltip fill. Monochromatic blue system throughout interactive layer.\n\n## Patterns\n- **Value translation tooltip**: The most notable pattern \u2014 converts abstract numeric input (\"10 min\") into a meaningful real-world outcome (\"25 book summaries a month\"). Reduces cognitive load and motivates commitment by making the goal tangible.\n- **Drum picker over slider**: Deliberate choice \u2014 discrete values feel more intentional and committal than a continuous slider. Scrolling through numbers creates micro-engagement.\n- **Fading peripheral values**: Depth illusion on a flat picker \u2014 top/bottom numbers fade out, reinforcing the \"slot machine\" metaphor without 3D perspective tricks.\n- **Inline unit label**: \"min\" appears only next to the selected value, not repeated on every row \u2014 reduces noise while maintaining context.\n- **Step label below progress node**: Naming the current step (\"Aspiration\") reframes a functional progress bar as a narrative journey marker.\n- **Reassurance copy**: \"You can change it later\" directly below the headline \u2014 preemptively handles decision anxiety at a commitment moment.\n\n## Notes\n- Tooltip-as-value-translator = killer pattern for any goal/preference setting screen\n- Unit label only on selected row \u2192 clean\n- Warm background + blue accent = low anxiety, focused palette\n- Progress bar with named steps > numbered steps alone\n- Lots of dead vertical space \u2014 intentional breathing room, not wasted space\n- Consider: does tooltip animate/update live as user scrolls? Should.\n- Drum picker works well for small integer ranges; breaks down for large ranges"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.08.01.png",
+      "analysis": "## Screen\nA community content feed screen within a language-learning or conversation-practice app. This is a browse/discovery screen where users explore community-created conversation topics or rooms. Sits in the middle of a typical flow \u2014 post-onboarding, pre-session. Layout is a vertical scrolling card list with a segmented filter row at top and a persistent floating CTA at bottom.\n\n---\n\n## Layout & Spacing\nContent is organized in three clear horizontal bands: header/nav, filter chips, scrollable card list. Cards have generous internal padding (~16px) with consistent vertical gutters between them (~10\u201312px). The floating CTA button sits above the tab bar, overlapping the list slightly \u2014 creating a clear z-layer separation. Card content is left-aligned with the action (heart + count) pinned to the far right, creating a clean left-to-right scan path.\n\n---\n\n## Components\n- **Segmented filter pills**: Three options (Hot, New, Top today). \"Hot\" is selected \u2014 white fill with dark text and icon, elevated with subtle shadow. Unselected pills are gray/muted. \"Top today\" includes a dropdown chevron, suggesting sub-filtering.\n- **Content cards**: White rounded rectangles with emoji/illustration thumbnail on left, title + truncated description in center, heart icon + count on right. Cards with attributed content show a username handle above the title in smaller gray text.\n- **Floating CTA button**: Rounded pill, bold blue fill, white text with a wand/magic icon. Persistent across scroll.\n- **Header**: Large bold \"Community\" with a secondary muted \"Topics\" label \u2014 likely a tab toggle. History and favorites icons sit top-right.\n\n---\n\n## Typography & Color\n- **Title text**: Bold, ~18\u201320pt, black \u2014 high contrast, dominant\n- **Usernames**: Small, gray, ~11pt \u2014 clearly tertiary\n- **Descriptions**: Regular weight, ~13pt, medium gray \u2014 supporting role\n- **Heart counts**: Small, gray, right-aligned \u2014 unobtrusive but scannable\n- **Color palette**: Near-white background (#F2F2F7 system gray), white cards, blue CTA (#3B5BDB-ish), muted gray for inactive states. Color is used almost exclusively functionally \u2014 blue = primary action, gray = inactive/secondary, white = content surface.\n\n---\n\n## Patterns\n- **Dual-label header as implicit tab**: \"Community\" (bold/black) vs \"Topics\" (muted/gray) in the header suggests a tab toggle disguised as a title \u2014 avoids a full tab bar row while still offering navigation.\n- **Attribution hierarchy in cards**: Some cards show a creator handle above the title, others don't \u2014 implying official/curated content has no attribution while user-generated content does. Subtle trust signal baked into layout.\n- **Like count as social proof without engagement pressure**: Heart + number is read-only in list view \u2014 surfaces popularity without making the action feel mandatory at browse stage.\n- **Floating CTA overlapping scroll content**: The \"Create your own\" button floats above the list but below the tab bar, creating a persistent nudge without consuming layout space. The slight overlap with scrolling content reinforces its floating nature.\n- **Emoji/illustration thumbnails as content type signals**: Each topic uses a relevant emoji-style image (books, coffee cup, pencil, plate) \u2014 fast visual categorization without requiring text labels or category tags.\n- **Truncated descriptions with ellipsis**: Consistent two-line truncation creates uniform card height while teasing enough content to drive taps.\n\n---\n\n## Notes\n- Header-as-tab-toggle worth stealing \u2014 saves vertical space vs full tab row\n- Attribution only on UGC cards = implicit quality tiering\n- Floating pill CTA above tab bar = persistent but non-blocking creation nudge\n- Emoji thumbnails = zero-cost visual taxonomy\n- Heart count visible in list = social proof at browse, not just detail view\n- \"Top today\" with chevron = progressive disclosure on filter complexity\n- All cards same height via 2-line description clamp \u2014 uniformity without rigidity"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.08.15.png",
+      "analysis": "## Screen\nFitness/workout app \u2014 content browse/library screen. Sits one level deep from a home or dashboard, accessed via back-navigable drill-down. Layout is a vertical scrolling list with a horizontal filter row at top. Primary interactions are filter chips and tappable workout cards.\n\n---\n\n## Layout & Spacing\nThree distinct horizontal zones: nav bar, filter strip, card list. Cards use a left-anchored thumbnail with right-side text block \u2014 classic media list pattern. Generous card height (roughly 100\u2013110px) gives thumbnails enough real estate to read as preview imagery. Consistent vertical gap between cards (~10\u201312px). Cards have visible rounded corners and subtle shadow/elevation, floating slightly off the background. Filter strip has no visible container \u2014 chips sit directly on the page background.\n\n---\n\n## Components\n\n- **Filter chips (horizontal scroll):** Pill-shaped. Active state (\"All\") uses a soft lavender/periwinkle fill with bold text. Inactive states are plain text, no container \u2014 low visual weight until selected.\n- **Workout cards:** White rounded-rect cards with drop shadow. Left side: square thumbnail image with rounded left corners matching card radius. Right side: stacked metadata.\n- **Content type label:** Small running figure icon + \"Workout\" label in light gray \u2014 acts as a category/type badge inline with text.\n- **Title text:** Bold, medium-large, black.\n- **Duration text:** Small, gray, tertiary weight.\n- **Back nav:** Simple chevron left, no label. Page title centered in all-caps spaced tracking.\n\n---\n\n## Typography & Color\n\n- **Page title:** All-caps, wide letter-spacing, medium weight \u2014 formal/editorial feel\n- **Card title:** ~17\u201318px, semibold/bold, near-black\n- **Type label:** ~12px, gray, icon + text pairing\n- **Duration:** ~13px, medium gray\n- **Color palette:** Near-white background (#F5F5F5 range), white cards, black text, mid-gray secondary text, single accent \u2014 soft periwinkle/lavender for active filter state. Accent color is used *only* on the selected filter, making it highly intentional and scannable.\n\n---\n\n## Patterns\n\n- **Ghost inactive filters:** Inactive filter options have zero visual container \u2014 just text. This reduces chrome noise and lets the selected state feel more pronounced without needing strong contrast on inactives. The selected chip \"appears\" rather than others \"disappearing.\"\n- **Thumbnail as mood signal, not information:** Images are cropped to show instructor/person rather than any text or graphic overlay. No duration badge on image, no play button overlay \u2014 keeps cards clean and trusts the text metadata.\n- **Redundant content type label:** Every card says \"Workout\" with an icon \u2014 this seems redundant on a Workouts screen, but likely exists because this component is reused across contexts (classes, programs, challenges). Designing components for reuse rather than context-specific optimization.\n- **No explicit CTA on cards:** No \"Start,\" \"Play,\" or arrow \u2014 the entire card is the tap target, reducing visual noise while keeping affordance clear through card elevation.\n- **Duration as primary filter proxy:** Duration is the only metadata shown beyond title/type. No difficulty, instructor name, or equipment tags \u2014 deliberate constraint that keeps scanning fast.\n- **Floating cards on tinted background:** White cards on off-white/light gray background creates subtle depth without heavy shadows. Low-effort hierarchy.\n\n---\n\n## Notes\n\n- Active filter = filled pill, inactive = naked text \u2014 steal this for low-noise filter bars\n- Running figure icon as content-type label = reusable component pattern, not screen-specific design\n- No play button overlay on thumbnails = trust the card affordance\n- All-caps spaced nav title feels editorial/premium \u2014 works for fitness/lifestyle\n- Single accent color used *once* on screen = maximum impact for minimum palette\n- Card shadow is very subtle \u2014 almost more \"white card on gray bg\" than true elevation\n- Duration-only metadata = strong editorial restraint, forces content naming to do heavy lifting"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.08.28.png",
+      "analysis": "## Screen\nE-commerce checkout flow, Step 1 of 3 \u2014 delivery address entry. Sits at the beginning of a linear purchase funnel. Single-column scrollable form layout with a persistent step indicator at top. Primary interactions are text input fields, a dropdown selector, and a checkbox.\n\n---\n\n## Layout & Spacing\nContent flows top-down: security header \u2192 step progress \u2192 page title \u2192 form fields. Generous vertical spacing between each field group (~16\u201320px gaps) keeps the form breathable despite being data-dense. The title \"Add your delivery address\" uses extra top margin to create a clear section break from the nav. Fields are full-width, maximizing tap target size on mobile.\n\n---\n\n## Components\n- **Step progress bar**: Three labeled text steps with an underline indicator. Active step is black/bold with a solid underline; upcoming steps are gray with a lighter underline. Simple but communicates position clearly without icons.\n- **Text input fields**: Outlined with a light border, rounded corners, comfortable height. Validated fields show a green checkmark on the right \u2014 inline, not a separate message.\n- **Checkbox (opt-out)**: Small square checkbox with descriptive copy inline. Notably framed as opt-out rather than opt-in.\n- **Dropdown (Country/region)**: Full-width, matches input field styling, chevron icon right-aligned.\n- **Security indicator**: Lock icon + \"Secure checkout\" text in the header \u2014 small, non-intrusive trust signal.\n\n---\n\n## Typography & Color\n- **Hierarchy**: Bold large heading (~22px) for page title; medium-weight labels (~13px) above fields; regular body for input values; small gray text for helper copy.\n- **Color palette**: Near-black for active text and labels, mid-gray for inactive steps and placeholder text, green (#4CAF50-ish) for validation checkmarks, white backgrounds throughout.\n- **Color function**: Green is used exclusively for validation \u2014 no other decorative use, so it carries clear signal weight. Gray creates a visual hierarchy between completed/pending steps.\n\n---\n\n## Patterns\n- **Inline real-time validation**: Checkmarks appear inside the field on the right as each field is successfully completed \u2014 reduces cognitive load, gives immediate positive feedback without disrupting flow.\n- **Opt-out consent framing**: The marketing checkbox is pre-unchecked but framed as \"tick to opt-out\" \u2014 an unusual dark pattern worth noting; the copy implies ticking means you *don't* want updates, inverting typical checkbox logic.\n- **Predictive address search**: The last visible field uses \"Start typing to search your address\" \u2014 autocomplete pattern that reduces manual entry friction significantly.\n- **Step labels with progress underlines**: Instead of circles or numbered bubbles, underline bars beneath text labels are minimal and typographically clean \u2014 works well in a luxury/editorial context.\n- **Security trust signal placement**: Lock icon placed in the top nav bar rather than near the CTA button \u2014 establishes trust before the user even begins filling the form.\n\n---\n\n## Notes\n- Inline \u2713 validation > toast/error messages for form UX\n- Opt-out checkbox copy = dark pattern, worth flagging in audits\n- Step indicator using text + underline bar = elegant alternative to bubble steppers\n- Address autocomplete as last field = smart progressive disclosure (country first, then search)\n- Lock icon in header = trust-building before commitment, not just at CTA\n- Full-width inputs on mobile = always, no excuses\n- Gray step labels for future steps = low visual noise, keeps focus on current task"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.08.33.png",
+      "analysis": "## Screen\nAccount creation / registration screen for a financial/crypto app. This is step 1 of a multi-step onboarding flow. Layout is a single-column form with a header section, progress indicator, and three stacked input fields. Keyboard is active, focused on the first field.\n\n---\n\n## Layout & Spacing\nContent flows top-to-bottom: nav row \u2192 headline block \u2192 form fields. Generous vertical spacing between the incentive copy and the first field (~24px gap). Field labels sit tight above their inputs (~4\u20136px), creating clear label-input pairing. Fields are full-width with rounded corners and consistent height. The incentive block uses a two-line hierarchy with a \"See terms\" link below \u2014 all left-aligned, matching the form alignment.\n\n---\n\n## Components\n- **Progress indicator (top center):** Three pill/dash segments; first is filled blue, others are light gray. Thin and minimal \u2014 doesn't dominate the header.\n- **Close/X button (top left):** Plain icon, no container \u2014 low visual weight, keeps escape hatch available without competing with content.\n- **Input fields:** Outlined style with rounded rectangles. Active field has a vivid blue border; inactive fields use a subtle gray border. Labels are bold and positioned outside/above the field.\n- **Active field label:** Turns blue to match the active border \u2014 reinforces focus state at the label level, not just the border.\n- **\"See terms\" link:** Blue, inline, small \u2014 subordinate but accessible.\n\n---\n\n## Typography & Color\n- **Headline:** Large, bold, black \u2014 clear primary hierarchy\n- **Incentive subhead (\"Get up to $200\"):** Bold, slightly smaller \u2014 secondary emphasis\n- **Body copy:** Regular weight, gray \u2014 tertiary\n- **Link text:** Blue, same size as body \u2014 functional color use\n- **Active label:** Blue bold \u2014 mirrors field focus state\n- **Inactive labels:** Black bold \u2014 consistent weight across states, only color changes\n- **Palette:** White background, near-black text, mid-gray for inactive strokes and placeholder text, single brand blue for all interactive/active states\n\n---\n\n## Patterns\n- **Incentive copy embedded in form header:** Unusual placement \u2014 the reward hook (\"Get up to $200\") lives inside the form step itself, not just on a splash screen. Reduces drop-off at the friction point of data entry.\n- **Label color mirrors field focus state:** When a field is active, its label turns blue \u2014 the focus indicator spans both label and border, creating a larger visual \"active zone\" that's easier to track.\n- **Progress indicator as dots/dashes, not numbered steps:** Avoids communicating total step count explicitly, which can discourage users from starting if the number feels high.\n- **Keyboard \"next\" key visible:** The keyboard is shown with \"next\" as the return key \u2014 signals the designer considered keyboard flow explicitly, guiding users through fields without tapping.\n- **No submit button visible:** CTA is deferred \u2014 the keyboard's \"next\" key handles progression, keeping the screen uncluttered while keyboard is open.\n\n---\n\n## Notes\n- Blue label + blue border on focus = bigger active zone, try this\n- Incentive hook in form header, not just onboarding splash \u2014 retention tactic mid-funnel\n- Dash-style progress bar hides total step count intentionally\n- No CTA button while keyboard open \u2014 \"next\" key does the job\n- Label weight stays bold in both states; only hue changes (black \u2192 blue)\n- \"See terms\" as inline link under incentive = compliance without modal interruption"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.08.55.png",
+      "analysis": "## Screen\nSocial media app login screen. Entry point to the authentication flow. Classic single-column layout with logo at top, form fields in the middle third, and account creation anchored to the bottom. Minimal \u2014 no imagery, no marketing copy.\n\n## Layout & Spacing\nVertical rhythm divided into three clear zones: logo zone (top ~40%), form zone (middle), registration zone (bottom). Generous empty space between logo and form creates breathing room and draws focus downward. The \"Create new account\" button is visually separated from the login cluster by a large gap \u2014 intentional hierarchy that deprioritizes sign-up without hiding it. Form fields are flush-stacked with tight spacing between them, grouping them as a unit.\n\n## Components\n- **Input fields**: Large pill-adjacent rounded rectangles, white fill, no visible border stroke \u2014 rely on subtle shadow/contrast against background. Placeholder text in light gray.\n- **Primary CTA (Log in)**: Full-width, deeply rounded pill shape, solid blue fill, white bold label. High contrast, dominant.\n- **Secondary text link (Forgot password?)**: No button chrome, plain dark text, centered. Minimal visual weight.\n- **Secondary CTA (Create new account)**: Full-width pill, white fill, blue border stroke, blue label text \u2014 outlined ghost variant. Clearly subordinate to primary.\n- **Logo**: Rounded square icon, gradient fill (warm orange-to-purple), centered with significant top padding.\n- **Parent brand attribution**: Small icon + text at very bottom, low contrast gray. Purely informational.\n\n## Typography & Color\n- Type hierarchy: Logo (graphic) \u2192 Field labels (medium gray, regular weight) \u2192 Button label (white, semibold) \u2192 Forgot password (dark, regular) \u2192 Create account (blue, medium weight) \u2192 Attribution (small, gray)\n- Background: Soft lavender-to-white gradient, nearly imperceptible \u2014 adds warmth without distraction\n- Primary action color: Strong royal blue \u2014 used only on the primary button fill and secondary button's outline/text, creating visual consistency\n- No black text; darkest elements are near-black, keeping the screen feeling light\n\n## Patterns\n- **Intentional CTA weight gradient**: Three levels of button prominence (filled \u2192 text link \u2192 outlined) map perfectly to three levels of user intent (login \u2192 recovery \u2192 new user). Teaches hierarchy through form.\n- **Flexible identifier field**: Single field accepting username, email, or phone number reduces friction \u2014 no need to decide which field to use. Label text communicates all three options inline.\n- **Spatial separation as priority signal**: Large whitespace gap before \"Create new account\" acts as a soft divider without using a line or rule. The secondary action feels like a different section.\n- **Background gradient as brand echo**: The muted lavender gradient subtly mirrors the app's colorful identity without competing with content.\n- **Ghost button for secondary action**: Outlined button gives the sign-up path enough presence to be found but never competes with the primary flow.\n- **Parent attribution as trust signal**: Placing the parent company mark at the bottom functions as a quiet credibility cue for hesitant users.\n\n## Notes\n- Ghost button + filled button pairing = clean way to offer two paths without visual noise\n- Flexible identifier input = reduce cognitive load, don't force users to categorize themselves\n- Huge logo-to-form whitespace = confidence move, resists urge to fill space\n- Background gradient: almost nothing, but does a lot for warmth\n- Forgot password as plain text link = right call, any button treatment would over-elevate it\n- Three-zone vertical layout (brand / action / acquisition) reusable pattern for any auth screen"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.09.04.png",
+      "analysis": "## Screen\nPhone number entry screen for a mobile app's onboarding/registration flow. This is the first step of authentication \u2014 user enters phone number to receive an OTP. Layout splits into two clear zones: the form content area (top ~55%) and the native numeric keyboard (bottom ~45%). Primary interactive elements are the country code selector, phone number input field, clear button, \"already have account\" link, and sign up CTA button.\n\n## Layout & Spacing\nContent is left-aligned with generous top padding for the headline. The phone input row uses a two-part split: a compact country selector pill on the left and a wider text input taking remaining width. Substantial whitespace between the input row and the login link, then a large gap before the CTA \u2014 this breathing room prevents the form from feeling cramped. The CTA button sits just above the keyboard, anchored to the transition zone between content and keyboard.\n\n## Components\n- **Back arrow**: minimal, top-left, no container\n- **Country code selector**: rounded pill with flag emoji + dial code, lighter background, visually distinct from input field\n- **Phone input field**: rounded rectangle, light gray fill, active state with populated number, clear (\u00d7) button inside trailing edge\n- **Clear button**: small circular gray icon inside field, appears only when field has content\n- **Login link**: inline text link in blue, no underline, sentence-style phrasing (\"Already have an account? Log in\")\n- **Sign up CTA**: full-width, heavily rounded (pill shape), solid blue fill, white label, strong visual weight\n- **Native keyboard**: system numeric keypad, white keys on light gray background\n\n## Typography & Color\n- **Headline**: large, bold/black weight, high contrast black \u2014 dominates hierarchy immediately\n- **Subtitle**: small, regular weight, medium gray \u2014 supporting role\n- **Input text**: medium weight, dark \u2014 readable against gray field\n- **Link text**: blue, matches CTA button color \u2014 creates visual consistency in interactive elements\n- **CTA label**: white on blue, medium weight\n\nColor palette: near-white background, blue (#3B5BDB-ish) as the single accent used for both the primary action and the text link, gray for input fields and secondary elements. Clean two-tone functional palette.\n\n## Patterns\n- **Split country/number input**: separating dial code into its own tappable component rather than a dropdown or inline prefix \u2014 makes country switching feel like a first-class action\n- **CTA placement above keyboard**: the Sign Up button stays visible and reachable even with keyboard open \u2014 it doesn't get buried; the layout anticipates keyboard state\n- **Inline clear button**: appears contextually inside the field rather than outside, keeping the row clean until needed\n- **Login link as escape hatch**: placed close to the input, not in the header or footer \u2014 positioned where a returning user would naturally pause after seeing the form\n- **Whitespace as pacing**: the large empty space between input and CTA creates a visual \"breath\" that makes the single-field form feel calm rather than sparse\n- **Keyboard zone as visual separator**: the gray keyboard background creates a natural content/action division without needing a divider line\n\n## Notes\n- CTA above keyboard = must design for keyboard-up state explicitly, not as afterthought\n- Country selector as separate pill = feels more intentional than inline prefix text\n- One accent color doing double duty (link + button) = tight, trustworthy palette\n- Empty space between field and button isn't wasted \u2014 it's pacing\n- \"Let's get started!\" tone = warm, not clinical \u2014 copy does UX work\n- Inline \u00d7 clear button: only show when field populated \u2014 reduces visual noise at rest state\n- Consider: does the button stay fixed above keyboard or scroll with content?"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.09.22.png",
+      "analysis": "## Screen\nA status-selection bottom sheet modal in a health or fitness tracking app. Appears mid-flow \u2014 triggered from a user profile screen (visible dimmed behind). The sheet presents mutually exclusive status options for a user to self-report their current physical state. Layout is a vertically stacked list of radio options inside a floating card with a fixed CTA at the bottom.\n\n## Layout & Spacing\nBottom sheet takes roughly 70% of screen height, leaving the profile context visible above. Content uses generous internal padding (~20\u201324px sides). Option rows are evenly spaced with consistent gaps (~10px) between cards. The \"Done\" button sits in its own visual zone, separated from the list with clear breathing room \u2014 feels anchored rather than floating.\n\n## Components\n- **Bottom sheet card** \u2014 white, large top corner radius (~24px), no visible handle/drag indicator; modal feel rather than drawer\n- **Status option rows** \u2014 pill-shaped cards with light gray background; contain a leading icon, title + subtitle text block, and trailing radio indicator\n- **Selected state row** \u2014 warm peach/salmon background fill, icon and title shift to brand orange, radio dot fills solid orange\n- **Unselected radio** \u2014 empty circle, light gray border\n- **Leading icons** \u2014 monochrome, contextually matched (walking figure, sunrise, thermometer, bandage); sized consistently ~22px\n- **Primary CTA button** \u2014 full-width, rounded pill, solid terracotta/burnt orange, white label\n\n## Typography & Color\n- Sheet title: large bold (~22px), near-black, centered\n- Row title: medium weight (~16px), dark near-black when unselected, brand orange when selected\n- Row subtitle: small (~13px), medium gray, descriptive one-liner\n- **Palette:** Warm white background, terracotta/burnt orange (#C8573A-ish) as primary accent, peach tint for selected row fill, mid-gray for unselected row backgrounds and icons\n\nColor is used functionally: orange = selected/active state, gray = neutral/inactive, peach background reinforces selection without relying solely on the radio indicator.\n\n## Patterns\n- **Contextual dimming with identity persistence** \u2014 the profile (avatar + name) remains visible but dimmed behind the sheet, reinforcing *who* the status is being set for without repeating it inside the modal\n- **Full-row selection affordance** \u2014 the entire card changes color on selection, not just the radio button; reduces reliance on small touch targets\n- **Subtitle as micro-copy reassurance** \u2014 each option has a short, empathetic description (\"Needing rest to get well\") that reduces ambiguity and adds warmth to a clinical choice\n- **Icon as semantic reinforcement** \u2014 icons aren't decorative; they provide a second visual channel for quick scanning alongside text\n- **Warm color palette for health context** \u2014 avoids clinical blues/greens; terracotta palette feels personal and low-anxiety for a sensitive self-reporting task\n- **Mutually exclusive options as cards vs. standard radio list** \u2014 elevating radio choices to full card components increases perceived importance of the selection\n\n## Notes\n- Selected row = bg tint + label color change + filled radio = triple confirmation of state, very clear\n- Peach fill is subtle enough not to feel alarming for \"Active\" \u2014 color choice matters for each status (would sick/injured use different tints?)\n- No drag handle on sheet \u2014 intentional? Suggests non-dismissible until explicit action\n- \"Close\" text button top-right of background screen still visible \u2014 escape hatch without cluttering the sheet\n- Empathetic microcopy pattern worth stealing for any self-reporting or check-in flow\n- CTA label \"Done\" not \"Save\" \u2014 feels lighter, less transactional"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.09.27.png",
+      "analysis": "## Screen\nSubscription plan selection screen from a consumer app (likely audio/media). Modal or full-screen overlay presented during onboarding or upgrade flow. Layout is single-column, top-to-bottom: headline \u2192 trust banner \u2192 billing toggle \u2192 plan cards \u2192 CTA \u2192 legal text.\n\n## Layout & Spacing\nGenerous vertical rhythm throughout. Trust banner sits in its own contained block between headline and toggle, creating a clear pre-selection moment before the user engages with pricing. Plan cards stack vertically with consistent internal padding. Legal/fine-print is pushed well below the CTA, reducing friction at the decision point without hiding it. Left-aligned headline feels editorial rather than centered/formal.\n\n## Components\n- **Trust banner**: Rounded rectangle with light lavender fill, bell icon in a circular gray container, bold headline + supporting body text. Soft, non-alarming treatment for what is essentially a billing warning.\n- **Billing toggle**: Pill-shaped segmented control. Selected state = black fill with white text; unselected = transparent with gray text. Discount callout (\"-25%\") rendered in orange/amber directly on the unselected tab \u2014 nudges toward annual without forcing it.\n- **Plan cards**: Outlined cards with radio button on left, plan name in bold uppercase, account count badge top-right, pricing info below. Selected card gets a purple border + filled purple radio. Unselected card is neutral gray border. Active card has a decorative abstract purple shape bleeding into the bottom-right corner \u2014 adds personality without cluttering info.\n- **Account count badge**: Small pill tag (dark on selected, light gray on unselected) \u2014 quick scannable differentiator.\n- **CTA button**: Full-width, black, high-contrast, rounded. \"Try for free\" \u2014 commitment-reducing language.\n\n## Typography & Color\nStrong type hierarchy: oversized bold serif-style display for the headline (\"Our plans\"), bold condensed uppercase for plan names, medium weight for pricing, small regular for body/legal. Color palette is minimal \u2014 off-white background, near-black text, purple as the single accent (selection states, decorative element), amber/orange used exclusively for the discount percentage. Color is used functionally: purple = selected/active, orange = savings signal, black = primary action.\n\n## Patterns\n- **Objection handling before pricing**: The trial reminder banner appears *before* the plan cards, preemptively neutralizing the \"I'll forget to cancel\" anxiety. Sequencing this above the price is a deliberate trust-building move.\n- **Discount nudge on unselected state**: Placing \"-25%\" inside the non-active toggle tab is a passive upsell \u2014 visible at all times without modal interruption or aggressive highlighting.\n- **Decorative illustration as selection feedback**: The purple abstract shape inside the active card adds delight and reinforces selection state beyond just the border/radio change. Doubles as brand personality injection.\n- **Commitment-reducing CTA copy**: \"Try for free\" instead of \"Subscribe\" or \"Start plan\" reduces perceived risk at the final tap.\n- **Badge as plan differentiator**: Account count rendered as a small badge (not body text) allows instant plan comparison at a glance without reading full descriptions.\n\n## Notes\n- Trust copy *above* pricing = smart anxiety sequencing\n- Discount % lives on the unselected tab \u2014 always visible, never pushy\n- Decorative blob inside selected card = cheap delight, high ROI\n- Orange used *only* for savings signal \u2014 single-purpose accent color\n- Radio + border + illustration = three layers of selection feedback\n- \"Try for free\" > \"Subscribe\" \u2014 always soften the commitment verb\n- Legal below fold but still present \u2014 compliance without friction\n- Bell icon in soft circle = non-threatening way to surface billing reminder"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.09.34.png",
+      "analysis": "## Screen\nOnboarding personalization screen from a personal finance app. User selects their primary goals/interests before entering the main app experience. Sits early in the onboarding flow \u2014 post-signup, pre-dashboard. Layout is: header copy at top, 2\u00d73 grid of selectable goal cards in the middle, fixed CTA button at bottom.\n\n## Layout & Spacing\nContent is divided into three clear zones: header, selection grid, action. The 2\u00d73 card grid uses consistent gutters (~12px) with generous internal padding. Cards are square-ish with rounded corners, giving a tile/app-icon feel. The overall screen background is a very light gray-blue, slightly offset from the white cards, creating subtle depth without shadows. Bottom CTA floats with enough breathing room above the home indicator.\n\n## Components\n- **Goal selection cards** \u2014 White rounded-rect cards with a centered app-icon-style illustration (rounded square color background + white glyph) above a short label. No visible checkbox or selection indicator shown in current state \u2014 selection likely triggers a highlighted border or fill state.\n- **Illustration icons** \u2014 Each uses a distinct pastel color background (blue, coral/red, teal, light gray, pink, warm yellow). Icons are soft, rounded, friendly. Desaturated/grayed-out icons on \"Pay off debt,\" \"Share with partner,\" and \"Sync between devices\" suggest either unselected state or secondary priority options.\n- **Continue CTA** \u2014 Full-width pill button, near-black fill, white label. High contrast, confident. Pill shape (fully rounded) differentiates it from the rectangular cards.\n- **Header text block** \u2014 Large bold question headline + smaller regular-weight subtext explanation.\n\n## Typography & Color\n- **Headline**: Large, heavy/black weight, dark near-black. Conversational question format (\"How can we help?\") \u2014 approachable tone.\n- **Subtext**: Small, regular weight, medium gray. Explains the purpose of the selection.\n- **Card labels**: Medium weight, dark, centered below icon. Two-line labels (e.g., \"Track my spending\") handled gracefully with center alignment.\n- **Color palette**: Off-white/light lavender-gray background. Card icons use blue, coral, teal, gray, pink, amber \u2014 each unique per option. Grayed-out icons use desaturated versions, visually communicating lower engagement or unselected state. CTA is near-black \u2014 strong contrast anchor at bottom.\n\n## Patterns\n- **Intentional desaturation as state communication** \u2014 Three of the six cards have noticeably muted/gray icons vs. the vivid color of the top three. This could signal \"not yet selected\" vs. \"selected\" OR a visual hierarchy suggesting primary vs. secondary use cases. Either way, it's doing work without explicit labels.\n- **App-icon metaphor for feature selection** \u2014 Using rounded-square icon tiles mimics the mental model of choosing apps on a home screen \u2014 immediately familiar, reduces cognitive load for what could feel like a form.\n- **Conversational framing of a data collection step** \u2014 \"How can we help?\" reframes what is essentially a preference survey into a service offer. Subtext reinforces personalization benefit (\"customise the app for your needs\").\n- **No explicit multi-select UI chrome** \u2014 No checkboxes, no radio buttons. The selection mechanic is implied through the card tap interaction, keeping the UI clean. Trust that color/border change on tap communicates selection.\n- **Passive CTA until selections made** \u2014 \"Continue\" button is present but presumably activates only after selection \u2014 the always-visible button reduces anxiety about being \"stuck.\"\n\n## Notes\n- Desaturated icons = elegant unselected state, no need for checkboxes\n- App-icon grid = feature selection that feels like curation not a form\n- Conversational H1 on data-collection screens \u2192 reframe as \"helping you\" not \"interrogating you\"\n- Pastel icon backgrounds: each option gets a unique color = easier to remember / scan\n- Near-black pill CTA as strong visual anchor at bottom of content-heavy screen\n- Light bg offset from white cards = depth without shadows, very clean\n- Consider: does graying out some options prime users toward certain choices? Intentional nudge?"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.10.49.png",
+      "analysis": "## Screen\nStreaming app search/browse screen. Sits at the top of the search flow before any query is entered \u2014 the \"pre-search\" state that doubles as a content discovery surface. Two-column grid of genre/category tiles fills the primary content area below a search bar. Large title header with avatar top-right.\n\n## Layout & Spacing\nLarge display title anchors the top-left with generous top padding. Search bar sits directly beneath, full-width with consistent horizontal margins (~16px). \"Browse\" section header follows with tighter spacing, then a 2-column grid with uniform gutters (~8px) between tiles. Grid tiles use a consistent aspect ratio (roughly 16:9 landscape). Content bleeds toward the bottom edge, signaling scrollability.\n\n## Components\n- **Large title header**: Bold, oversized \u2014 iOS large title pattern, left-aligned\n- **Avatar/profile button**: Circular, initials-based, top-right \u2014 subtle gray fill, no border\n- **Search bar**: Rounded rectangle, light gray fill, left magnifier icon, right microphone icon \u2014 inactive/placeholder state\n- **Browse section label**: Medium-weight label, left-aligned, acts as a section divider without a line\n- **Category tiles**: Rounded corners (~12px), full-bleed imagery with text overlaid \u2014 some use solid color backgrounds with logos/text, others use photographic content with bottom-left label overlay. White text on imagery uses implicit shadow/contrast rather than explicit scrim in some tiles; others rely on dark background imagery naturally.\n\n## Typography & Color\n- Title: Heavy weight, ~34pt, black\n- Section header (\"Browse\"): Semibold, ~17\u201320pt, black\n- Tile labels: Medium/semibold white, ~14\u201316pt, bottom-left anchored\n- Search placeholder: Gray, regular weight\n- Overall palette: White background, black text, gray UI chrome. Tiles introduce full color via imagery. Active nav tab uses blue as the sole accent color \u2014 all other UI is achromatic.\n\n## Patterns\n- **Pre-search discovery grid**: Rather than an empty or minimal pre-search state, the screen becomes a full browsing surface \u2014 search intent is captured while passive browsing is enabled simultaneously\n- **Mixed tile treatment**: Some tiles are brand/logo-forward (solid black bg + logo), others are mood/genre-forward (cinematic photography + text label) \u2014 creates visual rhythm and hierarchy within a uniform grid\n- **Text-on-image without explicit scrim**: Genre tiles rely on naturally dark or high-contrast photography rather than adding a gradient overlay \u2014 keeps imagery clean while maintaining legibility\n- **Microphone affordance in search bar**: Voice input surfaced immediately in the inactive state, not hidden behind interaction\n- **Initials avatar as profile entry point**: Compact, no label needed \u2014 relies on position convention (top-right) for discoverability\n- **Aspect ratio consistency creating implied rhythm**: All tiles share the same ratio, so varied visual content (logos vs. photos vs. illustrated) feels cohesive\n\n## Notes\n- Pre-search = browse mode \u2014 don't waste the empty state\n- 2-col grid w/ 16:9 tiles = cinematic feel even in navigation\n- Mix logo tiles + photo tiles for grid visual variety without breaking layout\n- Achromatic chrome \u2192 color lives entirely in content\n- Avatar initials top-right = profile without nav real estate\n- Mic icon in dormant search bar = voice always one tap away\n- Bottom-left text anchoring on tiles feels editorial, not UI-generic\n- No scrims = trust your content photography to do the contrast work"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.11.04.png",
+      "analysis": "## Screen\nA processing/loading interstitial screen from a photo management or storage app. Sits between a user-initiated action (granting photo access or triggering a scan) and results display. Minimal single-purpose screen \u2014 purely communicative, no interaction required.\n\n## Layout & Spacing\nVertically centered composition with the spinner and text grouped as a tight unit, positioned slightly above true center (optical centering). Generous empty space above and below creates calm, unhurried feeling. Text block sits ~16\u201320px below the spinner. Two-line text stack with tight line spacing between heading and subtext.\n\n## Components\n- **Spinner/loader**: Custom circular progress indicator, not a system default. Thin stroke weight (~3px). Gradient fill from solid green to fully transparent, creating a \"fading tail\" effect \u2014 elegant alternative to a solid ring\n- **Heading text**: Bold, dark charcoal (~#1a1a1a), ~20\u201322px\n- **Subtext**: Regular weight, medium gray (~#999), ~15\u201316px, centered\n- **Background**: Pure or near-pure white (#ffffff or #fafafa)\n\n## Typography & Color\nTwo-level hierarchy: bold heading communicates the active process, lighter gray subtext manages expectations without competing. No decorative type \u2014 purely functional. Color palette is intentionally minimal: white background, near-black text, single green accent. The green is soft/muted (desaturated, slightly warm) rather than vivid \u2014 reduces anxiety, feels gentle.\n\n## Patterns\n- **Gradient spinner tail**: The loader uses a transparency fade on the trailing edge rather than a solid arc \u2014 communicates motion direction and feels more refined than standard spinners. Worth replicating in custom loaders\n- **Expectation-setting microcopy**: \"This may take a few seconds\" is a small but deliberate anxiety-reducer \u2014 preemptively addresses user concern about wait time without being apologetic\n- **Color restraint as trust signal**: Using only one accent color (green) on a white field signals cleanliness and focus \u2014 common in health/utility apps where trust matters\n- **Deliberate absence of progress percentage or bar**: No quantified progress shown \u2014 avoids the problem of inaccurate estimates and keeps the screen calm. Works when process duration is genuinely unknown\n- **System chrome suppression**: No navigation bar, no back button \u2014 user is locked into the flow intentionally, preventing interruption mid-process\n\n## Notes\n- Fading-tail spinner > solid spinner for polish, easy to build with conic-gradient or stroke-dasharray + opacity mask\n- \"May take a few seconds\" = set expectations early, don't apologize\n- Optical centering slightly above midpoint feels more balanced than mathematical center on tall screens\n- Muted green for loading = calm/safe, not urgent \u2014 color mood matters on wait screens\n- Negative space is doing heavy lifting here \u2014 resist filling it\n- No cancel button = intentional commitment gate"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.11.19.png",
+      "analysis": "## Screen\nA processing/loading interstitial screen from a financial or lending app, shown after a user submits an application. Sits between form submission and results \u2014 a \"please wait\" moment in an application flow. Single-column, vertically centered layout with minimal chrome. Primary interactive element is only the Cancel text link in the top-right corner.\n\n## Layout & Spacing\nContent is vertically centered slightly above true center, giving the illustration and text a natural resting point. Generous white space above and below the content cluster creates calm and reduces anxiety during a wait state. The loading indicator sits well below the text block, giving it breathing room as a secondary element. Top-right Cancel placement is intentionally low-key \u2014 accessible but not prominent.\n\n## Components\n- **3D Hourglass Illustration** \u2014 Rendered with soft shadows and a purple accent color on the rims. Feels tactile and premium, not a flat icon. Communicates \"time passing\" without a spinning loader.\n- **Cancel Text Link** \u2014 Purple, top-right, no button container. Minimal visual weight intentional \u2014 present but not encouraged.\n- **Animated Dot Loader** \u2014 Single small purple dot (appears to be part of a dot-pulse or dot-traveling animation). Extremely subtle; keeps the screen alive without being distracting.\n- **Headline** \u2014 Bold, dark, no container or card.\n- **Subtext** \u2014 Gray, centered, two lines max.\n\n## Typography & Color\n- **Hierarchy**: Bold ~22pt headline \u2192 Regular ~15pt gray subtext \u2014 clean two-level system, nothing else competing.\n- **Color palette**: Near-white background (#F8F8F8 or similar), near-black headline, medium gray body copy, purple accent (~#7B5CF0 range) used exclusively for interactive elements (Cancel) and brand touches (hourglass rims, dot).\n- Purple is used sparingly and functionally \u2014 it marks \"things you can interact with\" and \"brand identity\" simultaneously.\n\n## Patterns\n- **Anxiety reduction through restraint** \u2014 No progress bar, no percentage, no estimated time. Removing quantified uncertainty prevents users from fixating on progress. The copy \"just a little more to go...\" is conversational and reassuring without making a promise.\n- **3D illustration as emotional labor** \u2014 The hourglass replaces a generic spinner with something that communicates patience and craft. It signals the wait is expected and normal, not an error state.\n- **Escape hatch without promotion** \u2014 Cancel is available but styled to be nearly invisible. Users who need it can find it; users who are committed won't be tempted by it. No modal, no confirmation \u2014 just a quiet affordance.\n- **Single animated element** \u2014 One dot animating keeps the screen from feeling frozen without creating visual noise that raises anxiety. The animation is peripheral, not focal.\n- **Copy tone shift** \u2014 Using \"...\" ellipsis in the subtext mimics natural speech hesitation, making the wait feel human and in-progress rather than robotic.\n\n## Notes\n- 3D emoji-style illustration > flat icon for emotional loading states\n- One-dot loader = \"alive but calm\" \u2014 steal this\n- Cancel as naked text link, top-right, low contrast = soft escape hatch pattern\n- White space IS the design here \u2014 resist filling it\n- Conversational copy with ellipsis makes async feel synchronous\n- Purple reserved only for brand + interactive = strong functional color discipline\n- Vertically center slightly high, not true center \u2014 feels more intentional"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.11.32.png",
+      "analysis": "## Screen\nA loading/sync progress screen from a personal finance app. This appears mid-flow during a data refresh or initial account sync. The screen is a full-page interstitial that communicates background processing status. Layout is vertically centered with a sequential task list and a spinner below it.\n\n## Layout & Spacing\nContent is vertically centered in the lower-middle portion of the screen, leaving significant white space above \u2014 creates a calm, uncluttered feel during what could be an anxious wait. The task list items are evenly spaced with generous line height. The spinner sits below the list with clear separation, acting as a \"still working\" signal distinct from the completed items.\n\n## Components\n- **Step/task list items**: Each row pairs a circular status icon with a label. Completed items use a filled green circle with white checkmark. Active item uses a darker, more saturated green with bold text. Pending items use a light gray circle (empty) with gray text.\n- **Spinner**: Minimal arc-style circular loader in light blue-gray, positioned below the list. Subtle and non-intrusive.\n- **Fade/blur treatment**: Top and bottom list items are visually faded/blurred, implying a scrolling window or receding context \u2014 only the current and adjacent steps are in focus.\n\n## Typography & Color\n- Type hierarchy: Active step uses bold black (~16px), completed steps use regular weight medium gray, pending steps use light gray \u2014 weight and color together signal state.\n- Color palette: White background, sage/medium green for completed states, darker green for active state, light gray for pending, near-black for active label text.\n- Color is doing all the state communication \u2014 no additional labels or badges needed.\n\n## Patterns\n- **Progressive disclosure via opacity/blur**: Steps above and below the visible window fade out, creating a \"film strip\" or carousel-of-tasks metaphor. This implies continuity without showing everything at once \u2014 reduces cognitive load.\n- **Typographic weight as state indicator**: The active step is the only bold item \u2014 weight change alone would communicate state even without color.\n- **Dual loading signals**: The checkmark list tells *what's done*, the spinner tells *something is still happening* \u2014 separating completion feedback from in-progress feedback cleanly.\n- **Calm loading UX**: Rather than a single spinner with no context, breaking work into named steps makes wait time feel productive and transparent. Users understand what the system is doing.\n- **Size differentiation on active icon**: The active green circle appears slightly larger/more saturated than completed ones \u2014 subtle visual anchoring to the current moment.\n\n## Notes\n- Faded top/bottom rows = \"you are here\" in a sequence without a progress bar\n- Bold weight = active state, no extra UI needed\n- Spinner separated from list = \"done items\" vs \"still going\" \u2014 don't conflate these\n- Named tasks during load = trust-building pattern for finance/sync flows\n- All-white bg + generous space = loading doesn't feel like waiting\n- Try: animate items upward as each completes, like a ticker"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.11.44.png",
+      "analysis": "## Screen\nOnboarding completion / personalization loading screen from a wellness or lifestyle app. Sits at the end of an onboarding questionnaire flow, bridging user input to their customized home experience. Full-bleed illustrated layout with minimal UI chrome \u2014 essentially a transitional holding screen.\n\n## Layout & Spacing\nSingle vertical column, center-weighted. The spinner sits at true optical center of the screen. Progress bar and label text are anchored in the lower-middle third, creating a clear visual separation between \"ambient atmosphere\" (top) and \"functional feedback\" (bottom). The illustrated landscape bleeds into the very bottom edge with no padding, reinforcing immersion. Generous empty space above and below the spinner keeps focus calm rather than busy.\n\n## Components\n- **Spinner**: Small, subtle \u2014 uses a muted gray/white tone rather than a high-contrast color, keeping it unobtrusive against the dark gradient\n- **Progress bar**: Pill-shaped, full width with generous horizontal padding. Track is semi-transparent white/gray; fill is solid white. No percentage label \u2014 intentionally vague to reduce impatience\n- **Status label**: Single line of body text directly below the progress bar, left-aligned to the bar's start edge\n- **Illustrated scene**: Layered flat illustration \u2014 rolling hills in teal/dark green, large sun in terracotta/burnt orange, all sitting at the bottom. Decorative, not interactive\n\n## Typography & Color\nSingle text style \u2014 medium weight, white, ~16pt body. No headline present; the loading state IS the message. Color palette: deep indigo at top transitioning through purple-violet to deep maroon/burgundy at bottom. The gradient itself tells a story (dusk/dawn). Illustration palette \u2014 terracotta sun, muted teal hills \u2014 pulls warm and cool tones from the gradient, making it feel cohesive rather than pasted on.\n\n## Patterns\n- **Narrative loading**: \"Finalizing your personalized journey\" reframes waiting as something being done *for* the user, not a technical delay \u2014 emotionally recontextualizes friction\n- **Atmospheric gradient as mood-setting**: The gradient isn't just background fill \u2014 it mirrors the app's thematic territory (mindfulness, nature, cycles) before any content is shown\n- **Illustration anchored at bottom**: Landscape scene grounds the screen visually and creates a horizon metaphor \u2014 subtle but reinforces \"journey\" language in the copy\n- **Intentionally vague progress**: No percentage, no ETA \u2014 reduces the user's ability to fixate on time remaining, keeping them in a passive, receptive state\n- **Spinner + bar redundancy**: Two loading indicators used simultaneously \u2014 spinner signals active processing, bar signals overall completion arc. Together they feel more reassuring than either alone\n- **Negative space as calm**: Massive empty gradient above the interaction zone \u2014 resists the urge to fill space, which itself communicates the app's tone\n\n## Notes\n- Loading screen as brand moment \u2014 don't waste it on a spinner alone\n- Gradient storytelling: color can carry thematic meaning before a single word loads\n- \"Journey\" framing on loading copy \u2014 steal this pattern for any personalization flow\n- Bottom-anchored illustration = horizon line = forward motion metaphor, very reusable\n- Two-indicator loading (spinner + bar) = perceived reliability boost\n- Vague progress bar intentional \u2014 consider when NOT showing % is better UX\n- Full bleed scene with no safe-area padding = immersive, works well for transitional screens"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.12.00.png",
+      "analysis": "## Screen\nAI generation loading state within a dream/sleep journaling or dream interpretation app. This screen appears mid-flow after a user has submitted content for AI processing. Minimal single-focus layout \u2014 centered loading indicator with label, navigation bar at top, nothing else competing for attention.\n\n## Layout & Spacing\nFull-bleed dark background with a single focal point centered slightly above vertical midpoint (optical center). The loading element and label are vertically stacked with generous breathing room on all sides. The sparse layout is intentional \u2014 empty space reinforces the \"waiting\" state and prevents the user from feeling they should be doing anything else.\n\n## Components\n- **Navigation bar**: Back chevron left-aligned, centered title \"Dreams\" in medium weight white \u2014 minimal, no right action\n- **Circular progress indicator**: Custom-styled ring (not system default) with a gradient/shimmer arc suggesting motion; partially filled indicating progress in motion\n- **Central icon container**: Circular filled button in medium purple with sparkle/stars emoji-style icon \u2014 acts as the visual identity anchor for the AI feature\n- **Ambient glow**: Radial purple glow emanating behind the circular element \u2014 not a component per se but a key atmospheric layer\n- **Status label**: Single line of muted/desaturated text below the loader \u2014 \"Generating Dreams with AI...\"\n- **Home indicator**: Standard system bar at bottom\n\n## Typography & Color\n- Title: White, semibold, ~17pt \u2014 standard nav weight\n- Status text: Muted lavender-gray, ~15pt regular \u2014 intentionally low contrast to feel secondary and non-urgent\n- **Palette**: Deep navy-to-dark-purple gradient background, medium purple (#6B3FA0 range) for icon fill, warm silver/pearl for the progress ring arc, soft purple radial glow as the only light source\n- Color is used atmospherically \u2014 the glow creates depth and makes the screen feel alive without animation being visible in static form\n\n## Patterns\n- **Ambient glow as loading feedback**: Instead of a standard spinner, the purple radial bloom behind the icon implies energy/processing happening \u2014 emotional loading state rather than mechanical\n- **AI identity icon**: The sparkle stars icon inside the loader doubles as brand shorthand for \"AI feature\" \u2014 consistent iconography trains users to associate this symbol with AI actions throughout the app\n- **Custom progress ring over system spinner**: Replacing the default activity indicator with a styled circular arc keeps the visual language cohesive and premium; the pearl/gradient treatment feels intentional\n- **Atmospheric waiting**: The screen uses darkness and negative space as a design element \u2014 the emptiness mirrors the dreamlike, liminal quality of the subject matter; form follows content\n- **Low-contrast status copy**: The muted label text reduces anxiety during wait states \u2014 it informs without alarming or demanding attention\n- **Vertical optical centering**: The loader sits slightly above true center, which reads as more balanced on mobile screens during passive viewing\n\n## Notes\n- Glow-behind-icon = instant \"magic/AI\" signal without words\n- Muted status text = calm waiting, not urgent feedback\n- Custom ring > system spinner for premium feel\n- Empty screen = intentional patience UX, not lazy design\n- Sparkle icon as persistent AI affordance marker across app\n- Dark + purple = dreamy/nocturnal theming baked into loading state\n- Try: animated glow pulse synced to ring rotation for next level\n- Emotional loading states > mechanical ones \u2014 match content domain"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.12.10.png",
+      "analysis": "## Screen\nLoading/transition screen within a language learning app. Sits between lesson initiation and lesson content delivery. Full-screen white canvas with a centered mascot character and minimal chrome. Back navigation and progress bar anchored at top.\n\n## Layout & Spacing\nThree distinct vertical zones: top navigation strip (back arrow + progress bar), large empty white void (roughly 40% of screen height), then centered mascot + label cluster in the lower-middle third. The deliberate emptiness above the character creates a stage-like focus. Progress bar spans nearly full width with generous side padding. \"LOADING...\" label sits tight below the character with minimal gap.\n\n## Components\n- **Progress bar**: Pill-shaped track in light gray, filled segment in brand green \u2014 rounded caps, low height (~8px), very minimal\n- **Back arrow**: Simple left chevron in muted gray, low visual weight\n- **Mascot illustration**: Fully rendered character with expressive eyes, slight lean/dance pose, musical notes floating above \u2014 implies animation in live state\n- **Loading label**: All-caps spaced text in light gray, no spinner or traditional loading indicator\n\n## Typography & Color\nSingle text element: \"LOADING...\" in all-caps, wide letter-spacing, light gray \u2014 reads as secondary/passive information. No headline hierarchy. Color palette is extremely restrained: white background, brand green (progress fill, mascot body), warm orange (mascot feet/beak), light gray (track, text, arrow). Color is used sparingly so the green mascot becomes the sole focal point.\n\n## Patterns\n- **Mascot-as-loading-state**: Replaces generic spinner entirely with animated character \u2014 loading becomes a brand moment rather than friction\n- **Implied animation over static indicator**: Musical notes suggest the character is dancing/moving, making the wait feel alive even in static screenshot\n- **Progress bar during loading**: Showing lesson progress bar even on the loading screen maintains continuity \u2014 user knows where they are in the lesson arc before content appears\n- **Emotional reframing of wait**: The character's posture (slight dance, music notes) reframes \"waiting\" as \"something fun is about to happen\" \u2014 anxiety reduction through personality\n- **Whitespace as anticipation**: The large empty upper zone isn't wasted \u2014 it creates visual breathing room that makes the character feel like it's performing on a stage\n- **All-caps spaced label without spinner**: Communicates loading state typographically without any mechanical UI element, keeping the screen feeling warm and non-technical\n\n## Notes\n- Mascot replaces spinner = brand equity in dead time\n- Musical notes as motion hint \u2192 always animate the mascot here\n- Progress bar persistence across loading = reduces disorientation\n- White void above character = intentional stage framing, don't fill it\n- All-caps + letter-spacing for loading text = softer than a spinner, still clear\n- Minimal color palette makes green character pop with zero effort\n- Loading screens are brand moments \u2014 use characters, not circles"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.12.23.png",
+      "analysis": "## Screen\nA loading/fetching state screen from a document management or productivity app. This sits between a navigation action and a content-populated list view \u2014 a transitional state screen. Layout is minimal: top nav bar with back chevron and overflow menu, centered loading indicator with messaging, skeleton content ghosted at the bottom, and a 5-item tab bar.\n\n---\n\n## Layout & Spacing\nContent is vertically centered in the upper-middle zone of the screen, not true mathematical center \u2014 slightly above midpoint, which feels natural for thumb-reading posture. The skeleton placeholders at the bottom hint at the incoming content structure without committing to full skeleton treatment. Large amounts of negative space surround the loading message, creating calm rather than anxiety during a wait state.\n\n---\n\n## Components\n- **Spinner**: Thin-stroke circular indeterminate loader, light gray, minimal weight \u2014 matches the muted palette rather than using a brand accent color\n- **Loading copy block**: Two-line text group, bold headline + lighter subtext, center-aligned\n- **Skeleton placeholders**: Faint rectangular ghost blocks visible at bottom \u2014 very low contrast, almost subliminal\n- **Top nav**: Back chevron (left) + circular outlined overflow icon (right), no title \u2014 intentionally sparse\n- **Tab bar**: 5 icons, first tab active in blue, rest in gray; center tab uses a \"plus in square\" add action\n\n---\n\n## Typography & Color\n- **Type hierarchy**: Bold ~17px headline (\"Downloading your documents\") / Regular ~14px subdued subtext in medium gray\n- **Color palette**: Near-white/light gray background (#F0F0F4 range), dark charcoal text, mid-gray secondary text, single blue accent on active tab icon\n- **Functional color use**: Blue used exclusively to signal active state; gray spinner signals \"non-critical, passive\" wait rather than urgent processing\n\n---\n\n## Patterns\n- **Expectation-setting microcopy**: \"This might take a minute or so\u2026\" proactively manages user patience \u2014 honest, casual tone reduces frustration without over-promising\n- **Skeleton below the fold during load**: Rather than a full skeleton screen, only partial ghost content appears at the bottom edge \u2014 suggests content is coming without fabricating false structure\n- **Spinner without progress bar**: Deliberate choice to use indeterminate loader \u2014 avoids the anxiety of a stalled progress bar when duration is unknown\n- **No title in nav during load**: Withholding the screen title until content is ready prevents a jarring label-before-content moment\n- **Accent color restraint**: Blue appears only on the active tab \u2014 zero use of brand color in the loading state keeps the eye calm\n\n---\n\n## Notes\n- Honest wait copy > generic \"Loading\u2026\" \u2014 set real expectations\n- Partial skeleton at bottom = clever content preview without full skeleton commitment\n- Spinner color matches UI chrome, not brand \u2014 intentional calm signal\n- No nav title during load = clean progressive reveal pattern\n- Lots of breathing room during wait = reduces perceived load time\n- Single accent color discipline: only active tab gets blue, nothing else"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.12.54.png",
+      "analysis": "## Screen\nFood delivery app home screen in a loading/skeleton state. This is the initial landing screen users see immediately after opening the app or navigating home, before content has fully loaded. Layout flows top-to-bottom: location header \u2192 search bar \u2192 category pills row \u2192 restaurant/store cards with metadata.\n\n## Layout & Spacing\nContent is organized in clear horizontal bands with consistent left-right margins (~16px). Category filters sit in a single horizontal row of circles. Card content uses generous vertical spacing between cards (~12-16px gap). Text skeleton lines beneath each card are left-aligned and vary in width, mimicking real title/subtitle hierarchy. A circular element (likely a rating or action button) floats right-aligned next to the text lines, creating a two-column micro-layout within each card's metadata row.\n\n## Components\n- **Location selector**: Two-line treatment \u2014 small label above, bold address with dropdown chevron below. Functional hierarchy in a compact header\n- **Search bar**: Full-width pill shape, light gray fill, left-anchored search icon. No border, relies on fill contrast\n- **Category circles**: Four equal-diameter circular skeleton placeholders in a horizontal row \u2014 implies icon + label chips in loaded state\n- **Content cards**: Large rounded rectangle skeletons (~16px radius), full-width minus margins, tall aspect ratio suggesting hero image cards\n- **Metadata rows**: Two stacked skeleton lines of different widths beneath each card, paired with a right-side circular skeleton (rating badge or favorite button)\n- **Bottom nav**: 5-item tab bar with outline icons, active Home tab uses filled icon + bold label\n\n## Typography & Color\nSkeleton state uses a single flat gray (#E5E5E5 approx) for all placeholder elements \u2014 no shimmer animation visible in this static frame. Live UI elements (location text, nav labels) use black for active/primary and medium gray for inactive states. The location header uses a two-weight system: small regular label (\"Deliver now\") over larger semi-bold address text.\n\n## Patterns\n- **Skeleton screens over spinners**: The entire content area renders structural placeholders that mirror the exact layout of loaded content \u2014 circles where category icons will be, wide rectangles where hero images will be, variable-width text lines where titles/subtitles will be. This teaches the user the layout before content arrives\n- **Asymmetric text skeleton widths**: The two metadata lines beneath cards are deliberately different lengths (longer second line), mimicking natural text variance. This prevents the skeleton from feeling mechanical\n- **Right-aligned circular skeleton**: Placing a circle element flush-right in the metadata row preserves space for a rating badge or action button \u2014 the skeleton communicates interaction affordance even before load\n- **Two-line location header**: Separating delivery context (\"Deliver now\") from the actual address creates a scannable pattern where the label sets context and the address is the actionable element with a clear dropdown affordance\n- **5-tab navigation with mixed icon styles**: Active state uses filled icon variant, inactive uses outline \u2014 a standard but well-executed differentiation that works without color alone\n\n## Notes\n- Skeleton line width variation = critical detail, don't use uniform widths\n- Circle skeletons for category row = smart: communicates scrollable chip row format before load\n- Right-float circle in card meta = reserve space for rating/CTA even in skeleton\n- Two-line address header pattern reusable for any context-setting location/filter header\n- Full-bleed card skeleton with generous height = implies image-forward card design\n- No shimmer here \u2014 flat gray skeleton is cleaner, less distracting for fast loads"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.13.06.png",
+      "analysis": "## Screen\nA skeleton loading state for a shopping or content discovery app's home feed. This is the initial load screen users see before content populates. Layout is vertically scrollable with distinct horizontal sections \u2014 a filter/category chip row, a horizontal card list, a grid section, and a two-column card section below.\n\n## Layout & Spacing\nContent is organized into clearly delineated horizontal bands, each with a section label placeholder above it. Consistent left-edge alignment across all sections. The bottom section uses a 2-column asymmetric or equal grid with tall cards, suggesting editorial or product imagery. Generous vertical spacing between sections creates breathing room and signals distinct content categories.\n\n## Components\n- **Search bar**: Full-width pill shape, light gray fill, search icon prefix \u2014 passive/inactive state\n- **AI/sparkle action button**: Square with rounded corners, sparkle icon, red notification badge dot \u2014 stands out as a secondary action with urgency signal\n- **Category chips**: Short rounded rectangles in a horizontal row \u2014 filter or tab navigation\n- **Horizontal list items**: Square thumbnail + stacked text lines \u2014 classic media/product list skeleton\n- **Grid cards**: Equal-width tall rectangles with heavy rounded corners \u2014 content or product tiles\n- **Two-column cards**: Large tall rectangles, slightly different widths \u2014 editorial or featured content\n- **Bottom nav**: 5 icons, home filled/active, others outline \u2014 standard tab bar\n\n## Typography & Color\nNo live type visible \u2014 all skeleton. Color palette is minimal: pure white background, single gray tone (#E8E8E8 approx) for all skeleton elements. The only color accent is the red notification dot on the AI button, which draws immediate attention. The monochromatic skeleton maintains visual hierarchy purely through shape and size variation.\n\n## Patterns\n- **Notification badge on AI feature button** \u2014 using urgency (red dot) to drive engagement with a feature, not just a message count\n- **Mixed layout sections in one feed** \u2014 horizontal scroll row, grid, and large 2-col cards coexist, teaching the user that content types vary before anything loads\n- **Skeleton mirrors exact final layout** \u2014 section labels, card proportions, and grid columns are all represented, reducing layout shift perception on load\n- **Sparkle icon for AI** \u2014 communicates \"smart/magic\" functionality without text, now a recognizable convention worth noting\n- **Section header placeholders** \u2014 short label-width bars above each section group teach content taxonomy even in loading state\n\n## Notes\n- Red dot on feature button = clever engagement hook, not just notification\n- Skeleton as layout teacher \u2014 user learns structure before content arrives\n- Mix 3 layout patterns in one feed: horizontal list, grid, tall 2-col\n- Rounded corners on skeleton tiles feel softer, less clinical than rect skeletons\n- AI button isolated top-right = persistent utility, always accessible from home\n- Section label skeletons vary in width \u2014 adds realism, avoids mechanical repetition"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.13.33.png",
+      "analysis": "## Screen\nTechnical analysis panel for a stock trading/financial app. This is a modal or slide-up sheet overlay showing oscillator indicators for a specific stock. Sits within a chart detail flow \u2014 accessed from a chart view. Three-column data table within a sheet layout, with a persistent bottom toolbar and nav bar visible beneath.\n\n## Layout & Spacing\nSheet card with rounded top corners floats over the underlying chart screen. Header zone holds company identity (logo + name + category label). Section header (\"Oscillators\") acts as a collapsible/navigable group label. Three-column table: left-heavy name column (~60% width), right-aligned numeric value column, right-aligned action column. Rows use generous line height with thin full-width dividers. Consistent left/right padding (~16\u201320px) throughout.\n\n## Components\n- **Sheet/modal card** \u2014 white surface, rounded top corners, drop shadow implied by layering over chart\n- **Company header** \u2014 circular logo thumbnail (dark fill, white icon), stacked label + title typography, X dismiss button top-right\n- **Section header with chevron** \u2014 bold label + `>` indicating tappable/expandable category navigation\n- **Column headers** \u2014 small, muted gray, all-caps weight, right-aligned for Value and Action\n- **Data rows** \u2014 name in regular weight dark text, value in medium-weight neutral, action in colored semantic text\n- **Semantic action labels** \u2014 \"Buy\" rendered in blue, \"Neutral\" in muted gray \u2014 no pills or badges, pure text color coding\n- **Bottom persistent bar** \u2014 ticker + timeframe + action icons (add, draw, more) sitting above main nav\n\n## Typography & Color\nClear three-level hierarchy: company name (large, bold, black) \u2192 section label (medium bold) \u2192 column headers (small, gray, subdued) \u2192 data rows (regular, dark). Action words use blue as the sole accent color to signal signal strength. Neutral states use gray to visually recede. No red visible \u2014 likely reserved for Sell signals. Background is pure white; text contrast is high throughout.\n\n## Patterns\n- **Color-only signal encoding** \u2014 Buy/Neutral/Sell differentiated purely through text color with no additional iconography or badges; keeps the table scannable without visual noise\n- **Chevron on section header** \u2014 implies the \"Oscillators\" view is one of multiple swappable technical categories (Moving Averages, etc.), making the label a nav control, not just a title\n- **Contextual persistence** \u2014 underlying chart ticker bar (AAPL, 1D, drawing tools) remains visible below the sheet, maintaining spatial context without full dismissal\n- **Parameter transparency in labels** \u2014 indicator names include their parameters inline (\"RSI (14)\", \"Stochastic %K (14, 3, 3)\") \u2014 serves advanced users without a separate settings layer\n- **No visual weight on neutral** \u2014 the majority state (Neutral) is intentionally de-emphasized in gray, making the minority Buy/Sell states pop immediately during a scan\n- **Sheet-over-chart pattern** \u2014 data panel doesn't navigate away from the chart; preserves orientation for a user mid-analysis\n\n## Notes\n- Text-color-only for signal states = elegant data density, no badge clutter\n- Inline params in row labels = self-documenting table, no tooltips needed\n- Chevron section header doubles as category switcher \u2014 one component, two jobs\n- Bottom context bar pattern: keep current asset/timeframe visible even inside sub-panels\n- Gray column headers nearly disappear \u2014 intentional, data is the focus\n- Consider: what does \"Sell\" look like? Probably red \u2014 full traffic light system in text only\n- Sheet doesn't full-screen \u2014 partial overlay keeps chart memory alive"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.13.36.png",
+      "analysis": "## Screen\nCryptocurrency exchange markets list screen. This is a spot trading market overview \u2014 a browse/discovery screen sitting between app home and individual asset trading views. Three-column list layout with horizontal filter navigation stacked above. Users land here to scan market conditions before entering a trade.\n\n---\n\n## Layout & Spacing\nThree distinct navigation tiers stack vertically: top-level tab row \u2192 asset category tabs \u2192 filter chips + currency selector. Content area is a dense data table with consistent row height. Columns are left-aligned (asset name), right-aligned (price), and right-aligned (change pill). Tight but readable row spacing \u2014 roughly equal padding top/bottom per row. A subtle divider separates the column headers from data rows. The currency selector (USDT \u25bc) is pushed far right of the filter chips, separated by a vertical rule \u2014 smart use of a divider to group unlike controls.\n\n---\n\n## Components\n\n- **Top nav tabs** \u2014 plain text, weight differentiates active (bold) vs inactive (light gray). No pill/underline except second tier.\n- **Second-tier tabs** \u2014 underline indicator on active item only, minimal style.\n- **Filter chips row** \u2014 flat text chips, no border/background. Active state is bold black. Vertical rule separator before currency dropdown.\n- **Currency dropdown** \u2014 inline text + chevron, no button chrome. Lightweight.\n- **Column headers** \u2014 small gray text with bidirectional sort arrows (\u2195) on each column. Clean affordance.\n- **Asset rows** \u2014 two-line left cell: ticker bold + pair in gray + leverage badge; volume in small gray below. Right price cell: primary price large, USD equivalent smaller gray below.\n- **Leverage badge** \u2014 small amber/orange text label (e.g. \"10x\", \"5x\"), no background. Color alone signals the badge type.\n- **Change pill** \u2014 rounded rectangle, solid red or green fill, white bold percentage text. High contrast, immediately scannable.\n\n---\n\n## Typography & Color\n\nHierarchy: Bold ticker symbol \u2192 regular pair text \u2192 small gray volume/USD equivalent. Price uses a slightly larger weight than surrounding text to anchor the eye. Color palette is minimal: near-black for primary text, medium gray for secondary, amber for leverage multipliers, semantic red (#D9534F-ish) and green for change indicators. Color is used almost exclusively functionally \u2014 no decorative color anywhere. White background keeps data legible.\n\n---\n\n## Patterns\n\n- **Three-tier progressive filtering** \u2014 top tabs (section) \u2192 sub-tabs (asset type) \u2192 chips (category) creates a drill-down without navigating away. All visible simultaneously, reducing cognitive load.\n- **Leverage badge as ambient data** \u2014 showing \"10x\" or \"5x\" in amber inline with the pair name communicates risk/product type without a separate column or icon. Unobtrusive but informative.\n- **Dual price display** \u2014 native token price + USD equivalent stacked in the same cell. Solves the problem of non-USD pairs without adding a column.\n- **Change pill as the only high-contrast element** \u2014 everything else is muted; the colored pill becomes the natural focal point for scanning, which matches user intent (spotting movers).\n- **Sort arrows on all columns simultaneously** \u2014 rather than showing active sort state, all columns show the neutral \u2195 icon, keeping the header visually consistent and low-noise.\n- **FAB trade button** \u2014 center-docked, elevated circular button breaks the tab bar pattern to make the primary action (trade) always reachable without interrupting the browsing list.\n\n---\n\n## Notes\n- Leverage badge = color-only label, no pill bg \u2014 saves horizontal space, still readable\n- Dual price stack in one cell > adding USD column\n- Change pill = only saturated color on screen \u2192 instant eye magnet\n- Vertical rule as separator between filter chips and dropdown \u2014 underused pattern\n- Three nav tiers stacked without feeling heavy because each tier uses different visual weight\n- FAB in tab bar center = trade action elevated above browse actions\n- All sort arrows neutral state = cleaner than highlighting active sort"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.13.46.png",
+      "analysis": "## Screen\nSports app live game screen showing league standings. Sits within a game detail view, accessible mid-game. Three-tab structure (Summary / Play-By-Play / Box Score) with the standings table as the primary content under Summary. Layout is header \u2192 tab bar \u2192 scrollable data table \u2192 sticky footer navigation.\n\n## Layout & Spacing\n- Scoreboard header is compact and centered, using a three-column layout: home score / game clock / away score\n- Tab bar sits directly below with equal-width segments\n- Table uses consistent row height (~52pt) with generous vertical rhythm \u2014 numbers breathe well\n- Rank column, logo, team name, then right-aligned stat columns (W / L / PCT / GB) \u2014 classic tabular left-to-right priority\n- A dashed divider line separates playoff position from play-in/lottery zone \u2014 functional use of a subtle separator\n\n## Components\n- **Scoreboard header**: Dark background, team logos flanking large bold scores, center shows quarter + clock in smaller muted text\n- **Segmented tab bar**: Active tab (\"Summary\") in white bold, inactive in medium-gray \u2014 no pill or underline indicator, purely weight/color differentiation\n- **Data table rows**: Alternating implicit grouping via the dashed line; team logos are small circular icons (~24pt); rank numbers left-aligned in muted gray\n- **Dashed divider**: Used specifically to mark the playoff cutoff line \u2014 not a full rule, intentionally subtle\n- **Sticky footer**: \"Western Conference\" as a tappable underlined label \u2014 acts as a section switcher\n\n## Typography & Color\n- **Type hierarchy**: Large bold scores (top) \u2192 medium bold team names \u2192 regular tabular figures \u2192 small muted column headers\n- **Color palette**: Near-black background (#1a1a2e range), white for active/primary data, medium gray for secondary labels and inactive tabs, muted warm gray for column headers\n- **Color as function**: White = active/important data; gray = metadata/inactive; no color used for rows except the dashed separator which carries a subtle red tint (possibly team-color bleed from the gradient background)\n- Background has a subtle dark gradient with faint team color washes bleeding in from top corners\n\n## Patterns\n- **Playoff cutoff line as data** \u2014 the dashed divider communicates standings context (playoff vs. non-playoff) without any label, relying on sports-literate users knowing the convention\n- **Footer as conference switcher** \u2014 underlined text at the bottom acts as a persistent toggle between Eastern/Western conferences, avoiding a full tab or modal\n- **Score header persists across tabs** \u2014 live game context stays visible regardless of which tab is active, grounding the user in the live moment\n- **Tab differentiation by weight only** \u2014 no background pill or underline on active tab, just bold white vs. gray; clean but risks lower affordance clarity\n- **Logo as row identifier** \u2014 small team logos do more visual work than the text name for recognition, especially for sports-fluent users; text is secondary confirmation\n- **Tabular number alignment** \u2014 all stat columns are right-aligned or center-aligned consistently, making vertical scanning fast\n\n## Notes\n- Dashed divider = smart way to encode \"playoff line\" without a label \u2014 borrow for any ranked list with a threshold\n- Footer-as-section-switcher is elegant \u2014 avoids nested tabs or modal sheets\n- Bold weight only for active tab state is risky but very clean \u2014 works in dark mode\n- Team color gradient bleed in header background is subtle brand nod without being loud\n- Consider: how does this degrade if a team has a very light logo on dark bg?\n- Rank number in muted gray is smart \u2014 it's context, not the primary data point\n- PCT column is the real \"ranking signal\" \u2014 GB is supplementary; column order reflects this"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.14.19.png",
+      "analysis": "## Screen\nA merchant/seller info bottom sheet within a shopping app. This is a secondary overlay screen \u2014 likely accessed via a \"seller info\" or overflow menu tap on a product or store page. The underlying screen is dimmed/blurred. Layout is a modal card with a header identity block, truncated description, and a vertical action list.\n\n## Layout & Spacing\nContent is organized in two clear zones: an identity header (app icon + name + rating) and a scrollable action list. Generous vertical rhythm between list items (~40\u201344pt tap targets). The description block sits between header and actions as a transitional content layer. Consistent left-alignment with icon+label pairs. The close button is top-right, leaving the left side clean for content scanning.\n\n## Components\n- **Modal card** \u2014 white, large rounded corners (~20pt radius), floats over dimmed background with visible app content peeking above\n- **App icon** \u2014 small rounded square, matches standard icon treatment, paired with name + star rating inline\n- **Star rating** \u2014 filled gold star with numeric score and review count in muted smaller text, all inline\n- **Truncated description** \u2014 3-line clamp with a blue \"More\" inline text link to expand\n- **Icon+label list rows** \u2014 outline-style icons left of labels, no dividers, relies on whitespace alone for separation\n- **Destructive row (Report)** \u2014 red icon + red label, visually isolated at bottom, no separator but color alone signals danger\n\n## Typography & Color\n- App name: medium weight, ~16pt\n- Rating: small, ~12pt, muted gray\n- Description: regular weight, ~14pt, dark gray\n- List labels: regular/medium, ~16pt, near-black\n- \"More\" link: accent blue, same size as body copy\n- \"Report\": red, same size as other list items \u2014 color does all the destructive signaling\n- Palette: white card, near-black text, blue accent, red for destructive, gray for secondary info\n\n## Patterns\n- **Peek-through modal** \u2014 underlying screen content is visible above the sheet, reinforcing context without full dismissal; the large brand wordmark visible behind creates continuity\n- **Color-only destructive differentiation** \u2014 \"Report\" uses no separator, no section break, just red to isolate it from neutral actions; trusts color literacy entirely\n- **Divider-free list** \u2014 spacing alone separates rows, keeping the UI visually quiet; works because icon+label pairs are visually self-contained\n- **Inline \"More\" truncation** \u2014 description is clipped mid-sentence with an inline blue link rather than a separate \"read more\" button, saving vertical space while staying accessible\n- **Icon semantic variety** \u2014 each row uses a contextually distinct outline icon (chat bubble, external link arrow, upload/share, receipt, box, shield, info circle) adding scanability without color coding\n\n## Notes\n- Red-only destructive row = bold choice, no extra visual separation needed if placement is last\n- Peek-through modal adds depth without full-screen takeover \u2014 great for \"about this seller\" type flows\n- No dividers + generous padding = cleaner than most settings-style lists\n- Inline truncation with colored \"More\" saves a full row of UI\n- Rating + review count inline with name = compact trust signal in header\n- Outline icons at consistent size create rhythm without overwhelming text"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.14.45.png",
+      "analysis": "## Screen\nConfirmation/cancellation dialog screen within a car rental app. Sits in the post-booking flow when a user initiates a cancellation action. The underlying screen shows a booking confirmation with vehicle image and reservation details; a bottom sheet modal overlays it to handle the destructive action.\n\n## Layout & Spacing\nTwo-layer composition: the purple confirmation screen sits behind, partially visible, providing context for what's being cancelled. The white bottom sheet rises from the bottom with generous internal padding. Action buttons are separated by hairline dividers rather than spacing, creating a list-style action sheet feel. The icon sits centered with comfortable breathing room above the title.\n\n## Components\n- **Bottom sheet modal** \u2014 white card with rounded top corners, no shadow needed since it overlays a colored background. Partially reveals content beneath, reinforcing the layered context.\n- **Compound icon** \u2014 key icon in a circle with a red badge overlay (\u00d7). Badge communicates \"cancellation\" without text. Clean use of iconographic metaphor.\n- **Action list buttons** \u2014 three stacked text buttons separated by hairline dividers. No button chrome (no borders, no fills). Pure text actions in a list format.\n- **Underlying confirmation card** \u2014 purple background with centered vehicle PNG (no shadow/container), calendar icon + structured text block for reservation metadata.\n- **X dismiss button** \u2014 top-left, minimal, white on purple.\n\n## Typography & Color\n- **Purple background**: bold brand color used for the confirmed state \u2014 signals positivity/success\n- **White sheet**: neutral container for the decision moment\n- **Red/orange**: used exclusively for the destructive action label (\"Cancel reservation\") \u2014 strong functional signal\n- **Black bold**: used for neutral/safe actions (\"View reservation,\" \"Keep reservation\")\n- Type hierarchy: confirmation title in bold white \u2192 reservation metadata in lighter weight \u2192 sheet title bold dark \u2192 body copy regular gray \u2192 action labels vary by weight and color based on consequence\n\n## Patterns\n- **Destructive action sandwiching**: The cancel action (red) is placed between two safer options \u2014 \"View reservation\" above and \"Keep reservation\" below. This is a deliberate friction pattern; the eye naturally exits toward the bottom action, nudging toward retention.\n- **Contextual underlayer**: Keeping the booking confirmation visible behind the sheet reminds users what they're about to lose \u2014 a subtle psychological anchor against cancellation.\n- **Edit nudge in body copy**: The confirmation message proactively suggests editing as an alternative to cancelling (\"You can also edit and update your reservation for free\") \u2014 reducing churn without a separate screen.\n- **Badge-as-verb on icon**: The red \u00d7 badge on the key icon efficiently communicates the action type without relying solely on text \u2014 useful for quick scanning.\n- **No button chrome**: Action items styled as plain text with dividers rather than filled buttons \u2014 reduces visual weight and keeps the sheet feeling lightweight and non-alarming.\n\n## Notes\n- Sandwich destructive action between safe options \u2192 reduces accidental taps + nudges retention\n- Show what's at stake in the background layer \u2014 context as persuasion\n- Inline copy as micro-retention tool (\"edit for free\") \u2014 cheaper than a modal upsell\n- Badge overlay on icon = efficient compound meaning\n- Divider-separated text actions > button grid for 3-option sheets\n- Purple = confirmed/positive state; red = only for irreversible/destructive\n- Bottom sheet doesn't need shadow when background is saturated color"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.15.16.png",
+      "analysis": "## Screen\nNotification permission prompt modal in a peer-to-peer payments app. This is an in-app pre-permission screen that appears before triggering the native OS permission dialog \u2014 a common onboarding or first-session interstitial. Sits over the home screen with a dimmed background. Card-style modal centered on screen with illustration, headline, body copy, and two CTAs.\n\n## Layout & Spacing\nSingle-column modal card with generous internal padding. Content flows top-to-bottom: illustration \u2192 headline \u2192 body \u2192 primary CTA \u2192 secondary CTA. Illustration takes roughly 35% of the card height, creating strong visual anchoring before the text. Comfortable breathing room between each section. The two CTAs have clear vertical separation \u2014 no ambiguity about hierarchy.\n\n## Components\n- **Modal card**: White, rounded corners (large radius ~20px), floats over a dimmed/blurred background. No hard shadow visible \u2014 elevation implied by contrast alone.\n- **Close button (X)**: Small circular gray button top-right corner of the card. Subtle, doesn't compete with primary action.\n- **Illustration**: Circular light-blue background shape containing a hand tapping a phone with sketch-style lightning bolt marks. Feels hand-drawn/editorial, adds warmth.\n- **Primary CTA button**: Full-width pill shape (fully rounded), solid blue fill, white bold text. High contrast, dominant.\n- **Secondary CTA**: Text-only link in blue, no button container. Clear visual de-emphasis without hiding the option.\n\n## Typography & Color\n- **Headline**: ~20px, bold/black weight, dark near-black, centered, 2-line wrap\n- **Body**: ~14\u201315px, regular weight, medium gray, centered, relaxed line height\n- **CTA primary**: ~16px, bold, white on blue\n- **CTA secondary**: ~15px, medium weight, blue \u2014 matches primary button color to signal it's still interactive, just lower priority\n\nColor palette: White modal, light blue illustration circle, brand blue (#3D95CE-ish) for interactive elements, dark charcoal for headline, mid-gray for body text. Background app UI is desaturated/dimmed to ~40% opacity.\n\n## Patterns\n- **Pre-permission priming**: Custom in-app modal fires before native OS prompt, letting the app frame the value proposition on its own terms. If user taps \"Allow,\" the real OS dialog follows. Reduces cold-ask rejection rates.\n- **Asymmetric CTA pairing**: Filled button vs. bare text link creates strong hierarchy without hiding the decline path \u2014 respects user autonomy while still nudging toward the preferred action.\n- **Escape hatch transparency**: \"You can change this at any time in Settings\" \u2014 proactively defuses anxiety about commitment. Placed as a second body paragraph, not buried in fine print.\n- **Illustration as emotional softener**: The hand-drawn style illustration humanizes what is essentially a data/permission request. The circular crop acts as a contained \"stage\" for the illustration, keeping it tidy.\n- **Dimmed-but-visible background**: The home screen remains partially visible behind the modal, grounding the user in context \u2014 they know exactly where they are and what they're interrupting.\n\n## Notes\n- Pre-permission modal = best practice before any OS permission ask; always frame the \"why\" first\n- Pill CTA + text-only decline = clean hierarchy without dark pattern pressure\n- Circular illustration container is a reusable pattern for any feature education modal\n- \"Change anytime in Settings\" copy = anxiety reducer, worth including in any permission ask\n- Sketch/hand-drawn illustration style softens transactional/financial UI significantly\n- Close X in corner = always give escape; don't trap users in modals"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.15.20.png",
+      "analysis": "## Screen\nPermission request modal overlay on a food delivery app's home screen. This is a mid-session permission prompt triggered when a user taps the microphone/voice search icon in the search bar. The underlying home screen is dimmed but visible, providing context for why the permission is being requested.\n\n## Layout & Spacing\nModal card is center-anchored with generous internal padding (~24px). Content follows a clear vertical stack: headline \u2192 supporting copy \u2192 dual CTA buttons. The two action buttons sit side-by-side in a 40/60 visual weight split. Modal has rounded corners (~16px) creating a floating card feel. Background dim is moderate \u2014 enough to focus attention without fully obscuring context.\n\n## Components\n- **Modal card**: White, heavily rounded, drop-shadow elevation. Clean white background separates it sharply from the dimmed orange-tinted background.\n- **Close (X) button**: Small circular ghost button, top-right corner of modal. Subtle gray outline, provides escape without competing with primary CTAs.\n- **Dismiss button (\"Not now\")**: Pill-shaped, light peach/salmon fill, orange text. No hard border \u2014 tinted background matches brand color at low opacity.\n- **Confirm button (\"Continue\")**: Pill-shaped, solid brand orange, white text. Full visual weight primary action.\n- **Headline text**: Bold, left-aligned, 3-line question format.\n- **Body text**: Regular weight, muted gray, left-aligned below headline.\n\n## Typography & Color\nTwo-level hierarchy: heavy bold headline (~18px) vs. lighter body copy (~14px, gray). Brand orange (#E8521A approx.) used consistently across CTAs and background accents. The dismiss button uses a tinted version of the same orange \u2014 maintaining palette cohesion while clearly communicating secondary priority. No third color introduced.\n\n## Patterns\n- **Contextual permission priming**: Modal fires immediately after user interaction with the microphone icon \u2014 not on app launch. This just-in-time approach dramatically increases permission grant rates by tying the ask to clear user intent.\n- **Tinted secondary CTA**: Instead of a plain text link or outlined button for \"Not now,\" the dismiss option uses a low-opacity brand-color fill. This keeps visual harmony while still de-emphasizing the action \u2014 subtler than a ghost button, less dismissive than plain text.\n- **In-app pre-permission dialog**: This is a custom app-level dialog that precedes the OS system permission prompt. Allows the app to explain value before the irreversible native dialog appears \u2014 if user dismisses here, the OS prompt is preserved for a better moment.\n- **Question-framed headline**: Phrasing the permission ask as a question (\"Allow...?\") rather than a statement softens the demand and frames it as a user choice.\n- **Dual escape paths**: Both the X button and \"Not now\" dismiss \u2014 redundant dismissal reduces anxiety about being trapped.\n\n## Notes\n- Tinted-fill secondary button = elegant alternative to ghost/text-only dismiss\n- Pre-permission modal pattern: always gate OS prompts behind in-app explanation\n- Trigger permission ask on explicit user action, never on cold open\n- Question headline framing reduces friction vs. imperative statements\n- Keep background partially visible \u2014 context reinforces why permission matters\n- Same hue, different saturation/opacity for primary vs. secondary CTA = strong cohesion trick"
+    },
+    {
+      "url": "https://i.mscdn.ai/ui-inspo-2/Screenshot+2026-04-02+at+09.15.35.png",
+      "analysis": "## Screen\nA feature introduction modal overlaying a community/topics feed screen in a language learning app. This appears mid-flow \u2014 likely triggered when a user taps a locked feature or navigates to a section requiring premium/onboarding. The modal is a bottom-anchored card with a dimmed background showing the underlying content.\n\n## Layout & Spacing\nThe modal uses a centered card with generous internal padding (~24px). Content flows vertically: headline \u2192 supporting copy \u2192 preview card \u2192 CTA. The nested preview card (scenario example) sits inset within the modal, creating a card-within-card hierarchy. Background content is intentionally legible enough to provide context but dimmed to focus attention. The modal doesn't cover the full screen \u2014 it floats with visible corners, reinforcing it as a temporary interruption.\n\n## Components\n- **Modal card**: White, large corner radius (~20px), elevated with soft shadow, not full-bleed\n- **Nested preview card**: Slightly off-white/light gray background, smaller radius, mimics a real content item from the feed \u2014 functions as a live example\n- **\"NEW\" badge**: Small blue label with heart icon, top-right of preview card, adds social proof/freshness signal\n- **Primary CTA button**: Full-width, bold blue fill, large corner radius (pill-adjacent), white label \u2014 dominant visual anchor\n- **Floating decorative hearts**: Small scattered blue/purple heart shapes above the preview card, adds playfulness without cluttering\n- **Username + wand icon**: Micro-detail inside preview card reinforcing user-generated content feel\n\n## Typography & Color\n- **Headline**: Bold, ~20px, dark near-black \u2014 high contrast, immediate read\n- **Body copy**: Regular weight, ~14px, medium gray, centered alignment \u2014 secondary hierarchy\n- **Preview card text**: Left-aligned, mixed weights (bold title, light description), smaller scale \u2014 tertiary\n- **Color palette**: Deep blue (#3D4EFF-ish) as primary action color, white modal, medium gray body text, soft purple accent hearts\n- Blue used functionally: CTA button, badge label, decorative accents \u2014 creates color consistency across interactive and decorative elements\n\n## Patterns\n- **Card-within-card preview**: Rather than describing the feature abstractly, a real content item is embedded inside the modal \u2014 shows don't tell, reduces cognitive load about what the feature actually is\n- **Blurred/dimmed but readable background**: The underlying feed remains partially visible, reinforcing that this is an overlay on real content the user was already exploring \u2014 creates continuity rather than a hard context switch\n- **Scattered micro-illustrations**: The floating hearts are decorative but reinforce the emotional tone (confidence, fun, low-stakes practice) \u2014 not random, they're semantically linked to the copy\n- **No dismiss/close button visible**: Removes the easy escape, nudging toward the CTA \u2014 common in feature introduction flows where the goal is conversion\n- **User-generated content framing in preview**: Showing a username and scenario title inside the preview card implies community participation, making the feature feel alive and social rather than templated\n\n## Notes\n- Card-in-card = show the actual UX inside the pitch\n- Scatter decorative elements that echo the emotional message, not just fill space\n- Keeping background visible = \"you're close, just one tap away\" psychology\n- No X button = intentional friction toward action\n- \"NEW\" badge inside preview card adds urgency without screaming sale\n- Centered body copy works here because it's short \u2014 would break at longer lengths\n- Full-width pill CTA at bottom of modal = thumb-friendly, natural resting zone"
     }
   ]
 }