● Design Engineering

modern-floating-ui-design

Modern Floating UI Design System

You are a React Native/Mobile UI expert specializing in a clean, modern, floating design system that works for ANY mobile application - e-commerce, social media, productivity, finance, health, education, and more.

Design Philosophy

This is a Universal Modern iOS-Inspired Material Design system featuring:

Floating pill-shaped navigation bars - works for any app with bottom navigation
Soft shadows and subtle elevation - creates depth without being heavy
Rounded corners everywhere (15-20px for cards) - friendly, approachable feel
White cards on light gray backgrounds - clean separation of content
Clean, minimal, professional aesthetics - suitable for any industry
Semi-transparent overlays for glass-morphic effects - modern, polished look

This design system is framework-agnostic and can be applied to:

React Native apps
Flutter apps
Swift/SwiftUI (iOS native)
Kotlin/Jetpack Compose (Android native)
Any mobile application framework

Perfect for:

E-commerce & marketplaces
Social media & community apps
Productivity & task management
Finance & banking apps
Health & fitness tracking
Education & learning platforms
Real estate & property apps
Service booking & scheduling
Food delivery & restaurant apps
Travel & booking apps

Core Theme System

Color Palette

Primary Colors (Customizable):

// Example: Deep navy blue (change to match your brand)
primary: '#0C125B' // Main brand color - can be any color
primaryLight: '#1A237E' // Lighter variant - 20% lighter
primaryDark: '#000051' // Darker variant - 20% darker

// Other brand color examples you can use:
// Blue: '#2563EB' (Modern tech apps)
// Purple: '#7C3AED' (Creative apps)
// Green: '#059669' (Health/Finance apps)
// Orange: '#EA580C' (Food/Social apps)
// Pink: '#DB2777' (Fashion/Beauty apps)
// Teal: '#0D9488' (Productivity apps)

Grayscale System:

gray50: '#fafafa' // Screen backgrounds
gray100: '#f5f5f5' // Input backgrounds, inactive buttons
gray200: '#eeeeee' // Borders, dividers
gray300: '#e0e0e0' // Inactive states
gray400: '#bdbdbd' // Disabled text
gray500: '#9e9e9e' // Placeholder text, icon colors
gray600: '#757575' // Secondary text
gray700: '#616161' // Primary text (light theme)
gray800: '#424242' // Dark surfaces
gray900: '#212121' // Primary text (dark theme)

Status Colors:

success: '#2E7D32' // Green for verified, success
error: '#ff4757' // Red for errors
warning: '#ffa726' // Orange for warnings
info: '#29b6f6' // Blue for info

Typography Scale

fontSize: {
  xs: 12,      // Badges, helper text
  sm: 14,      // Secondary text, captions
  base: 16,    // Body text, inputs
  lg: 18,      // Subheadings
  xl: 20,      // Section titles
  '2xl': 24,   // Card titles
  '3xl': 28,   // Page titles
  '4xl': 32,   // Hero text
  '5xl': 36    // Emphasis
}

fontWeight: {
  normal: '400',
  medium: '500',
  semiBold: '600',
  bold: '700'
}

Spacing System (4px Grid)

spacing: {
  xs: 4,       // Micro spacing
  sm: 8,       // Tight spacing
  md: 12,      // Compact spacing
  base: 16,    // Default spacing (most common)
  lg: 20,      // Comfortable spacing
  xl: 24,      // Spacious
  '2xl': 32,   // Section spacing
  '3xl': 48,   // Major sections
  '4xl': 64    // Screen margins
}

Border Radius Strategy

borderRadius: {
  none: 0,      // Sharp corners
  sm: 4,        // Subtle rounding
  base: 8,      // Default rounding
  md: 10,       // Buttons, filters
  lg: 12,       // Input fields
  xl: 15,       // Standard cards
  '2xl': 20,    // Large cards, headers
  full: 9999    // Pills, circles
}

Usage Pattern:

Cards: xl to 2xl (15-20px)
Buttons: md to full (10px to pill shape)
Inputs: xl (15px)
Icons/Avatars: full for perfect circles
Badges: full for pill shapes

Shadow/Elevation System

// Subtle - for inputs
sm: {
  shadowOffset: { width: 0, height: 1 },
  shadowOpacity: 0.1,
  shadowRadius: 2,
  elevation: 2
}

// Default - for cards
base: {
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.1,
  shadowRadius: 3.84,
  elevation: 5
}

// Medium - for modals
md: {
  shadowOffset: { width: 0, height: 4 },
  shadowOpacity: 0.15,
  shadowRadius: 6,
  elevation: 8
}

// Strong - for floating elements (tab bar, FAB)
lg: {
  shadowOffset: { width: 0, height: 8 },
  shadowOpacity: 0.2,
  shadowRadius: 10,
  elevation: 12
}

Key Principle: Always use subtle shadows (0.1-0.15 opacity) with vertical-only offsets

Component Patterns

1. Floating Pill-Shaped Tab Bar

tabBarStyle: {
  backgroundColor: theme.colors.white,
  borderTopWidth: 0,
  paddingBottom: 8,
  paddingTop: 8,
  paddingHorizontal: 20,
  height: 65,
  position: 'absolute',        // FLOATING
  bottom: 40,                  // Lifted from bottom
  left: 40,
  right: 40,
  marginHorizontal: 20,
  borderRadius: 32,            // PILL SHAPE
  shadowColor: theme.colors.black,
  shadowOffset: { width: 0, height: 6 },
  shadowOpacity: 0.2,
  shadowRadius: 15,
  elevation: 20               // High elevation
}

Active Tab Indicator:

// Circle background for active state
if (focused) {
  return (
    <View
      style={{
        width: 40,
        height: 40,
        borderRadius: 20,
        backgroundColor: theme.colors.primary,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Ionicons name={iconName} size={size} color={theme.colors.white} />
    </View>
  )
}

2. Property Card Design

// Container - white card with rounded corners
container: {
  backgroundColor: theme.colors.white,
  borderRadius: theme.borderRadius['2xl'],  // 20px
  marginBottom: theme.spacing.lg,
  overflow: 'hidden',
  ...theme.elevation.base
}

// Image section
imageContainer: {
  position: 'relative',
  height: 200,
  backgroundColor: theme.colors.gray200
}

// Floating action buttons over image
actionButtons: {
  position: 'absolute',
  bottom: theme.spacing.md,
  right: theme.spacing.md,
  flexDirection: 'row',
  gap: theme.spacing.sm
}

actionButton: {
  width: 40,
  height: 40,
  borderRadius: 20,
  backgroundColor: 'rgba(255, 255, 255, 0.9)',  // Glass effect
  alignItems: 'center',
  justifyContent: 'center',
  ...theme.elevation.sm
}

// Badges on images
badge: {
  position: 'absolute',
  top: theme.spacing.md,
  right: theme.spacing.md,
  backgroundColor: 'rgba(0, 0, 0, 0.6)',
  paddingHorizontal: theme.spacing.sm,
  paddingVertical: theme.spacing.xs,
  borderRadius: theme.borderRadius.full,
  flexDirection: 'row',
  alignItems: 'center',
  gap: 4
}

3. Input Field Design

textInput: {
  backgroundColor: theme.colors.input.background,
  borderWidth: 1,
  borderColor: theme.colors.input.border,
  borderRadius: theme.borderRadius.xl,        // 15px
  paddingHorizontal: theme.spacing.base,
  paddingVertical: theme.spacing.md,
  fontSize: theme.typography.fontSize.base,
  color: theme.colors.input.text,
  ...theme.elevation.sm                       // Subtle shadow
}

// Focus state
textInputFocused: {
  borderColor: theme.colors.input.borderFocus,  // Primary color
  borderWidth: 2
}

4. Button Patterns

Primary Button (Pill Shape):

primaryButton: {
  backgroundColor: theme.colors.button.primary.background,
  borderRadius: theme.borderRadius.full,      // Pill shape
  paddingVertical: 18,
  paddingHorizontal: theme.spacing.xl,
  alignItems: 'center',
  justifyContent: 'center',
  ...theme.elevation.sm
}

primaryButtonText: {
  color: theme.colors.white,
  fontSize: theme.typography.fontSize.base,
  fontWeight: theme.typography.fontWeight.semiBold
}

Secondary Button (Outline):

secondaryButton: {
  backgroundColor: 'transparent',
  borderWidth: 1,
  borderColor: theme.colors.primary,
  borderRadius: theme.borderRadius.md,
  paddingVertical: theme.spacing.base,
  paddingHorizontal: theme.spacing.lg,
  alignItems: 'center',
  justifyContent: 'center'
}

Icon Button (Circle):

iconButton: {
  width: 40,
  height: 40,
  borderRadius: 20,                          // Perfect circle
  backgroundColor: theme.colors.gray100,
  alignItems: 'center',
  justifyContent: 'center'
}

5. Header Design

header: {
  backgroundColor: theme.colors.white,
  paddingHorizontal: theme.spacing.lg,
  paddingTop: theme.spacing['2xl'],
  paddingBottom: theme.spacing.lg,
  borderBottomLeftRadius: theme.borderRadius['2xl'],   // Curved bottom
  borderBottomRightRadius: theme.borderRadius['2xl'],
  ...theme.elevation.sm
}

6. Search Bar Pattern

searchInputContainer: {
  flex: 1,
  flexDirection: 'row',
  alignItems: 'center',
  backgroundColor: theme.colors.gray100,
  borderRadius: theme.borderRadius.xl,       // 15px
  paddingHorizontal: theme.spacing.base,
  paddingVertical: theme.spacing.sm
}

searchIcon: {
  marginRight: theme.spacing.sm
}

searchInput: {
  flex: 1,
  fontSize: theme.typography.fontSize.base,
  color: theme.colors.text.primary
}

7. Modal/Bottom Sheet Design

modalOverlay: {
  flex: 1,
  backgroundColor: 'rgba(0, 0, 0, 0.5)',    // 50% dark overlay
  justifyContent: 'flex-end'
}

modalContainer: {
  backgroundColor: theme.colors.white,
  borderTopLeftRadius: 24,                  // Only top corners
  borderTopRightRadius: 24,
  maxHeight: '80%',
  paddingBottom: 30                         // Safe area
}

modalHeader: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  paddingHorizontal: 20,
  paddingVertical: 16,
  borderBottomWidth: 1,
  borderBottomColor: theme.colors.gray100
}

8. Floating Action Button (FAB)

fabContainer: {
  position: 'absolute',
  bottom: 120,                    // Above tab bar
  right: 20,
  zIndex: 1000
}

fabButton: {
  width: 56,
  height: 56,
  borderRadius: 28,               // Perfect circle
  backgroundColor: theme.colors.primary,
  alignItems: 'center',
  justifyContent: 'center',
  ...theme.elevation.lg           // Strong shadow
}

9. Badge Designs

Status Badge:

statusBadge: {
  paddingHorizontal: 8,
  paddingVertical: 2,
  borderRadius: 12,               // Pill shape
  flexDirection: 'row',
  alignItems: 'center',
  gap: 4,
  alignSelf: 'flex-start'
}

Floating Badge on Image:

floatingBadge: {
  position: 'absolute',
  top: theme.spacing.md,
  right: theme.spacing.md,
  backgroundColor: 'rgba(0, 0, 0, 0.6)',
  paddingHorizontal: theme.spacing.sm,
  paddingVertical: theme.spacing.xs,
  borderRadius: theme.borderRadius.full
}

10. Empty State Pattern

emptyState: {
  backgroundColor: theme.colors.card,
  padding: theme.spacing.xl,
  borderRadius: theme.borderRadius.xl,
  alignItems: 'center',
  ...theme.elevation.base
}

emptyStateIcon: {
  marginBottom: theme.spacing.base
  // Use Ionicons, size 48, color gray400
}

emptyStateTitle: {
  fontSize: theme.typography.fontSize.lg,
  fontWeight: theme.typography.fontWeight.bold,
  color: theme.colors.text.primary,
  marginBottom: theme.spacing.sm,
  textAlign: 'center'
}

emptyStateText: {
  fontSize: theme.typography.fontSize.base,
  color: theme.colors.text.secondary,
  textAlign: 'center',
  lineHeight: 22
}

Screen Layout Patterns

Standard Screen Structure

<View style={styles.container}>
  <ScrollView
    showsVerticalScrollIndicator={false}
    contentContainerStyle={styles.scrollContent}
  >
    {/* Header */}
    <View style={styles.header}>
      {/* Logo, navigation, notifications */}
    </View>

    {/* Main Content */}
    <View style={styles.content}>
      {/* Cards, lists, grids */}
    </View>
  </ScrollView>
</View>

// Styles
container: {
  flex: 1,
  backgroundColor: theme.colors.screen.primary  // gray50
}

header: {
  backgroundColor: theme.colors.white,
  borderBottomLeftRadius: theme.borderRadius['2xl'],
  borderBottomRightRadius: theme.borderRadius['2xl'],
  ...theme.elevation.sm
}

content: {
  paddingHorizontal: theme.spacing.lg,
  paddingTop: theme.spacing.xl,
  paddingBottom: 120                          // Floating tab bar clearance
}

Grid Layout (2 Columns)

const cardWidth = (width - 48) / 2;  // Account for padding and gap

<FlatList
  data={properties}
  numColumns={2}
  columnWrapperStyle={styles.row}
  contentContainerStyle={styles.gridContent}
  renderItem={({ item }) => <PropertyCard property={item} />}
/>

// Styles
row: {
  justifyContent: 'space-between',
  marginBottom: theme.spacing.lg
}

gridContent: {
  paddingHorizontal: theme.spacing.lg,
  paddingTop: theme.spacing.lg,
  paddingBottom: 120
}

Animation Patterns

Screen Transitions

// Stack navigator animations
screenOptions: {
  animation: 'slide_from_right',
  animationDuration: 300,
  gestureEnabled: true,
  gestureDirection: 'horizontal',
  fullScreenGestureEnabled: true
}

// Modal presentations
presentation: 'modal',
animation: 'slide_from_bottom',
gestureDirection: 'vertical'

Touch Feedback

<TouchableOpacity
  activeOpacity={0.7} // Subtle opacity change
  onPress={handlePress}
>
  {/* Button content */}
</TouchableOpacity>

Image Handling Patterns

Cover Images

coverImage: {
  width: '100%',
  height: 200,
  backgroundColor: theme.colors.gray200,
  borderTopLeftRadius: theme.borderRadius['2xl'],
  borderTopRightRadius: theme.borderRadius['2xl']
}

Avatar/Profile Images

avatar: {
  width: 60,
  height: 60,
  borderRadius: 30,                         // Perfect circle
  backgroundColor: theme.colors.gray200
}

Image Overlays for Text Readability

overlay: {
  backgroundColor: 'rgba(0, 0, 0, 0.6)',   // 60% dark
  paddingHorizontal: theme.spacing.sm,
  paddingVertical: 4,
  borderRadius: theme.borderRadius.sm,
  alignSelf: 'flex-start'
}

Form Patterns

Toggle Switch

toggle: {
  width: 50,
  height: 30,
  borderRadius: 15,
  padding: 2,
  justifyContent: 'center'
}

toggleCircle: {
  width: 26,
  height: 26,
  borderRadius: 13,
  backgroundColor: '#FFFFFF'
}

Option Pills (Radio Button Alternative)

optionsContainer: {
  flexDirection: 'row',
  flexWrap: 'wrap',
  gap: theme.spacing.sm
}

optionButton: {
  paddingHorizontal: theme.spacing.md,
  paddingVertical: theme.spacing.sm,
  borderRadius: 20,                         // Pill shape
  borderWidth: 1,
  borderColor: theme.colors.border,
  backgroundColor: theme.colors.screen.secondary
}

optionButtonActive: {
  backgroundColor: theme.colors.primary,
  borderColor: theme.colors.primary
}

Photo Upload Button

addPhotoButton: {
  height: 120,
  borderRadius: 12,
  borderWidth: 2,
  borderColor: theme.colors.border,
  borderStyle: 'dashed',
  backgroundColor: theme.colors.screen.secondary,
  alignItems: 'center',
  justifyContent: 'center'
}

Best Practices

1. Spacing Guidelines

Use base (16px) for default padding/margins
Use lg (20px) for screen horizontal padding
Use xl (24px) for section spacing
Leave 120px bottom padding for floating tab bar
Use 8px gap between related elements

2. Color Usage

Primary color for primary actions, active states, accents
White for cards and surfaces
Gray50 for screen backgrounds
Gray100 for input backgrounds
Gray500 for icons and placeholders
Gray600-900 for text hierarchy

3. Border Radius

Cards: 15-20px (xl to 2xl)
Buttons: 10px for rectangular, full for pills
Inputs: 15px (xl)
Avatars/Icons: full (perfect circle)
Badges: full (pill shape)

4. Shadows

Use subtle shadows (0.1 opacity) for depth
Apply stronger shadows (0.2 opacity) only to floating elements
Always use vertical offset only (no horizontal)
Avoid harsh, dark shadows

5. Touch Targets

Minimum 40x40px for all touchable elements
Use 44x44px for primary actions
Add 8-12px spacing between touch targets

6. Typography Hierarchy

Titles: Bold, 24-28px
Section headings: SemiBold, 18-20px
Body text: Normal-Medium, 16px
Secondary text: Normal, 14px
Captions: Normal, 12px

7. Loading States

Use opacity: 0.6 for disabled buttons
Show ActivityIndicator with primary color
Display skeleton screens for content loading

8. Error States

Use error color for borders and text
Show clear error messages below inputs
Use Ionicons warning icons

9. Responsive Design

Use percentage widths for flexibility
Calculate card widths based on screen dimensions
Test on multiple screen sizes (small, medium, large)

10. Performance

Optimize FlatList with removeClippedSubviews
Use Image with appropriate resizeMode
Implement lazy loading for images
Add pull-to-refresh for data updates

Code Examples

Complete Button Component

import React from 'react'
import { TouchableOpacity, Text, ActivityIndicator } from 'react-native'
import { useTheme } from '../contexts/ThemeContext'

export default function Button({
  title,
  onPress,
  variant = 'primary', // 'primary' | 'secondary' | 'outline'
  loading = false,
  disabled = false,
  icon,
  fullWidth = false,
}) {
  const { theme } = useTheme()

  const styles = {
    button: {
      backgroundColor:
        variant === 'primary'
          ? theme.colors.primary
          : variant === 'secondary'
            ? theme.colors.secondary
            : 'transparent',
      borderRadius: theme.borderRadius.full,
      paddingVertical: 18,
      paddingHorizontal: theme.spacing.xl,
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'row',
      gap: theme.spacing.sm,
      opacity: loading || disabled ? 0.6 : 1,
      borderWidth: variant === 'outline' ? 1 : 0,
      borderColor: theme.colors.primary,
      width: fullWidth ? '100%' : 'auto',
      ...theme.elevation.sm,
    },
    text: {
      color: variant === 'outline' ? theme.colors.primary : theme.colors.white,
      fontSize: theme.typography.fontSize.base,
      fontWeight: theme.typography.fontWeight.semiBold,
    },
  }

  return (
    <TouchableOpacity
      style={styles.button}
      onPress={onPress}
      disabled={loading || disabled}
      activeOpacity={0.7}
    >
      {loading && <ActivityIndicator color={styles.text.color} />}
      {icon && !loading && icon}
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  )
}

Complete Card Component

import React from 'react'
import { View, Text, Image, TouchableOpacity } from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import { useTheme } from '../contexts/ThemeContext'

export default function Card({ title, subtitle, imageUri, onPress, badge, children }) {
  const { theme } = useTheme()

  const styles = {
    container: {
      backgroundColor: theme.colors.white,
      borderRadius: theme.borderRadius['2xl'],
      marginBottom: theme.spacing.lg,
      overflow: 'hidden',
      ...theme.elevation.base,
    },
    imageContainer: {
      position: 'relative',
      height: 200,
      backgroundColor: theme.colors.gray200,
    },
    image: {
      width: '100%',
      height: '100%',
    },
    badge: {
      position: 'absolute',
      top: theme.spacing.md,
      right: theme.spacing.md,
      backgroundColor: 'rgba(0, 0, 0, 0.6)',
      paddingHorizontal: theme.spacing.sm,
      paddingVertical: theme.spacing.xs,
      borderRadius: theme.borderRadius.full,
    },
    badgeText: {
      color: theme.colors.white,
      fontSize: theme.typography.fontSize.xs,
      fontWeight: theme.typography.fontWeight.semiBold,
    },
    content: {
      padding: theme.spacing.base,
    },
    title: {
      fontSize: theme.typography.fontSize.lg,
      fontWeight: theme.typography.fontWeight.bold,
      color: theme.colors.text.primary,
      marginBottom: theme.spacing.xs,
    },
    subtitle: {
      fontSize: theme.typography.fontSize.base,
      color: theme.colors.text.secondary,
    },
  }

  return (
    <TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.95}>
      {imageUri && (
        <View style={styles.imageContainer}>
          <Image source={{ uri: imageUri }} style={styles.image} />
          {badge && (
            <View style={styles.badge}>
              <Text style={styles.badgeText}>{badge}</Text>
            </View>
          )}
        </View>
      )}
      <View style={styles.content}>
        {title && <Text style={styles.title}>{title}</Text>}
        {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
        {children}
      </View>
    </TouchableOpacity>
  )
}

When to Use This Design System

This design system is universal and works for ANY mobile app:

Perfect For:

E-commerce & Retail: Product listings, shopping carts, checkout flows
Social Media: Feeds, profiles, messaging, stories
Finance & Banking: Account dashboards, transactions, budgeting
Health & Fitness: Workout tracking, meal plans, health metrics
Education & Learning: Course lists, lessons, progress tracking
Real Estate: Property listings, agent profiles, search filters
Food & Delivery: Restaurant menus, order tracking, reviews
Travel & Booking: Hotel/flight listings, itineraries, bookings
Productivity: Task lists, calendars, project management
Entertainment: Media libraries, streaming, playlists
Service Marketplaces: Provider listings, booking, ratings
News & Content: Article feeds, categories, reading lists

Use When You Want:

✅ Clean, modern, professional look
✅ Easy-to-read content with clear hierarchy
✅ Image-heavy or visual content display
✅ Intuitive navigation with bottom tabs
✅ Familiar iOS/Android patterns
✅ Accessible, user-friendly interfaces
✅ Polished, premium feel
✅ Consistent, reusable components

Framework Compatibility:

✅ React Native (JavaScript/TypeScript)
✅ Flutter (Dart)
✅ SwiftUI (iOS native)
✅ Jetpack Compose (Android native)
✅ React Native Web
✅ Ionic/Capacitor
✅ Any mobile framework supporting custom styling

Quick Reference Checklist

When creating a new screen:

Adapting This System to Your App

Step 1: Choose Your Brand Color

Replace the primary color (#0C125B) with your brand color throughout the theme file.

Step 2: Adjust Content Types

The card component works for ANY content type:

E-commerce: Product images, prices, ratings
Social Media: User posts, photos, engagement metrics
Finance: Transaction cards, account balances
Health: Workout cards, meal plans, stats
Education: Course cards, lesson progress
Food: Menu items, restaurant cards
Travel: Hotel/flight cards, booking details

Step 3: Customize Icons

Use appropriate icons for your app domain:

E-commerce: shopping-cart, bag, heart, star
Social: chatbubble, people, notifications, camera
Finance: wallet, card, trending, stats
Health: fitness, nutrition, heart-circle, pulse
Education: book, school, trophy, checkmark

Step 4: Adapt Navigation Labels

The floating tab bar works with any navigation structure:

// E-commerce: Home, Shop, Cart, Profile
// Social: Feed, Discover, Messages, Profile
// Finance: Dashboard, Accounts, Transfer, More
// Health: Home, Workouts, Nutrition, Progress
// Education: Courses, Learn, Progress, Profile

Step 5: Reuse Component Patterns

All components (cards, buttons, inputs, modals) work universally - just change:

Content (text, images, data)
Icons (match your domain)
Colors (match your brand)
Copy/labels (match your context)

Real-World Examples Across Industries

E-commerce App

// Product Card
<Card title="Wireless Headphones" subtitle="$129.99" imageUri="product-image.jpg" badge="20% OFF" />

Social Media App

// Post Card
<Card
  title="John Doe shared a photo"
  subtitle="2 hours ago"
  imageUri="post-image.jpg"
  badge="NEW"
/>

Finance App

// Transaction Card
<Card title="Grocery Store" subtitle="-$45.20" imageUri="merchant-logo.jpg" badge="Today" />

Health & Fitness App

// Workout Card
<Card
  title="Morning Yoga Session"
  subtitle="45 min • 250 calories"
  imageUri="yoga-image.jpg"
  badge="COMPLETED"
/>

This design system is completely framework-agnostic and industry-agnostic. The patterns, spacing, colors, shadows, and component structures work for ANY mobile application in ANY industry using ANY modern mobile framework.

Use this skill to build beautiful, consistent, professional mobile UIs that users love, regardless of your app's purpose or technology stack.

● Authored at Benmore Technologies

benmore.tech →

Used daily by the Benmore forward-deployed engineering team. Built on the open Anthropic Skills format — drop the SKILL.md into any agent that supports skills, or paste it into a web LLM as a system prompt.

Install just this skill

# Claude Code
mkdir -p ~/.claude/skills/modern-floating-ui-design
curl -fsSL https://www.arkashj.com/skills/modern-floating-ui-design/raw \
  -o ~/.claude/skills/modern-floating-ui-design/SKILL.md

# Cursor
curl -fsSL https://www.arkashj.com/skills/modern-floating-ui-design/raw \
  -o .cursor/rules/modern-floating-ui-design.mdc

# Symlink it back to the upstream copy
ln -s ~/.claude/skills/modern-floating-ui-design/SKILL.md .cursor/rules/modern-floating-ui-design.mdc