// Social app UI
Influencer Marketplace App UI Design in Expo
This influencer marketplace app UI helps brands find creators for a campaign. Search and category chips sit above a staggered grid of talent, and each card opens a full creator profile.
- Screens
- 2
- Built with
- Expo SDK 58
- Fonts
- Syne, Outfit
- License
- Free (MIT)
Influencer Marketplace app screens
Discover creators
A headline for campaigns, search with filters, category chips and a staggered creator grid under a floating tab bar.
Creator profile
A framed portrait wrapped by a pink ribbon, social reach tiles, a short bio, latest work and a contact button.
Copy the Influencer Marketplace kit
Use the artifact as a design brief, the skill to generate the UI with an AI agent, or the code to run it right away.
Design artifact
The full design: tokens, screens and source
# Influencer Marketplace: design artifact
This influencer marketplace app UI helps brands find creators for a campaign. Search and category chips sit above a staggered grid of talent, and each card opens a full creator profile.
- Type: Social mobile app UI
- Screens: 2
- Artboard: 390 × 844
- Target: Expo SDK 58, Expo Router, TypeScript, expo-blur, expo-image, expo-linear-gradient, react-native-svg
- Live page: https://developermill.com/app-designs/influencer-marketplace-app-ui-design
## Design direction
Black canvas with looping pink ribbon strokes, a peach display face and glassy stat tiles over neon event photography.
- Hand-drawn ribbon strokes in SVG
- Staggered creator grid with verified badges
- Removable category chips
- Profile with reach by social platform
## Foundations
### Colour
| Token | Hex |
| --- | --- |
| Black | `#111014` |
| Charcoal | `#1D191C` |
| Peach | `#F2A37E` |
| Orchid | `#F0A2E6` |
| Mist | `#F4EEF1` |
| Stone | `#B8AEB4` |
### Typography
- Typefaces: Syne, Outfit
- Common sizes (px): 11, 12, 13, 14, 30
### Shape and depth
- Common corner radii (px): 10, 14, 16, 18, 20, 24
- Shadows: `inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 24px rgba(0,0,0,0.35)`, `0 12px 32px rgba(0,0,0,0.5)`, `0 20px 40px rgba(0,0,0,0.45)`, `inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.35)`
## Screens
### 1. Discover creators
A headline for campaigns, search with filters, category chips and a staggered creator grid under a floating tab bar.
Preview: https://developermill.com/app-designs/influencer-marketplace-app-ui-design/discover.webp
Copy on this screen:
- Best Influencers
- for your marketing
- campaigns
- Models
- Lifestyle
- Sports
### 2. Creator profile
A framed portrait wrapped by a pink ribbon, social reach tiles, a short bio, latest work and a contact button.
Preview: https://developermill.com/app-designs/influencer-marketplace-app-ui-design/profile.webp
Copy on this screen:
- Zara Quinn
- Party Influencer
- 11.6M
- 7.3M
- 1.1M
- Hi! I’m ready for collaborations with streetwear and event organizer brands.
- Latest
- Contact Influencer
## Full source
The original artboards as HTML. Image URLs point at the hosted demo assets.
### Discover creators (Main)
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Discover influencers</title>
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet">
<style>
body{margin:0}
a{color:#F2A37E}a:hover{color:#F7C2A6}
</style>
</helmet>
<div style="width: 390px; height: 844px; position: relative; overflow: hidden; background: #0D0A0C; font-family: Outfit, system-ui, sans-serif; color: #F4EEF1">
<svg aria-hidden="true" width="390" height="150" viewBox="0 0 390 150" style="position: absolute; left: 0; top: 0">
<path d="M70 -10 C 60 40, 120 60, 130 30 C 140 0, 90 0, 110 45 C 130 90, 200 60, 215 35 C 230 10, 260 20, 250 55 C 240 90, 300 95, 330 60 C 350 35, 380 30, 400 50" fill="none" stroke="{{accent}}" stroke-width="16" stroke-linecap="round"></path>
</svg>
<div style="position: absolute; left: 24px; right: 24px; top: 128px; display: flex; flex-direction: column; gap: 22px">
<h1 style="margin: 0; font-family: Syne, sans-serif; font-weight: 700; font-size: 30px; line-height: 1.12; letter-spacing: -0.2px; color: #F2A37E">Best Influencers<br>for your marketing<br>campaigns</h1>
<div style="display: flex; align-items: center; gap: 10px">
<label style="flex: 1; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 16px; background: #1D191C; border: 1px solid #2A2529">
<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#B8AEB4" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg>
<input type="search" placeholder="Search Influencer" aria-label="Search influencer" style="flex: 1; background: transparent; border: 0; outline: none; color: #F4EEF1; font: 400 15px Outfit, sans-serif">
</label>
<button aria-label="Filters" style="width: 50px; height: 50px; border-radius: 16px; background: #1D191C; border: 1px solid #2A2529; display: flex; align-items: center; justify-content: center; cursor: pointer">
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#F4EEF1" stroke-width="1.8" stroke-linecap="round"><path d="M8 4v16M16 4v16"></path><circle cx="8" cy="9" r="2.4" fill="#1D191C"></circle><circle cx="16" cy="15" r="2.4" fill="#1D191C"></circle></svg>
</button>
</div>
<div style="display: flex; gap: 8px; margin-right: -24px; overflow: hidden">
<button style="display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 14px; border-radius: 14px; background: #1D191C; border: 1px solid #2A2529; color: #F4EEF1; font: 500 14px Outfit, sans-serif; white-space: nowrap">Models<span aria-hidden="true" style="width: 28px; height: 28px; border-radius: 10px; background: #2C272B; display: flex; align-items: center; justify-content: center"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#F4EEF1" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"></path></svg></span></button>
<button style="display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 14px; border-radius: 14px; background: #1D191C; border: 1px solid #2A2529; color: #F4EEF1; font: 500 14px Outfit, sans-serif; white-space: nowrap">Lifestyle<span aria-hidden="true" style="width: 28px; height: 28px; border-radius: 10px; background: #2C272B; display: flex; align-items: center; justify-content: center"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#F4EEF1" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"></path></svg></span></button>
<button style="display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 14px; border-radius: 14px; background: #1D191C; border: 1px solid #2A2529; color: #F4EEF1; font: 500 14px Outfit, sans-serif; white-space: nowrap">Sports<span aria-hidden="true" style="width: 28px; height: 28px; border-radius: 10px; background: #2C272B; display: flex; align-items: center; justify-content: center"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#F4EEF1" stroke-width="2.4" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"></path></svg></span></button>
</div>
</div>
<div style="position: absolute; left: 16px; right: 16px; top: 432px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px">
<div style="display: flex; flex-direction: column; gap: 8px">
<sc-for list="{{leftCol}}" as="c" hint-placeholder-count="2">
<div style="position: relative; height: {{c.h}}; border-radius: 20px; overflow: hidden; background: {{c.photo}}">
<img src="{{c.src}}" alt="{{c.alt}}" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%">
<div aria-hidden="true" style="position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0) 30%)"></div>
<button aria-label="Save to favourites" style="position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center">
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1.8" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"></path></svg>
</button>
<div style="position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 12px 12px; background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0))">
<div style="display: flex; align-items: center; gap: 5px; font: 600 14px Outfit, sans-serif; color: #FFFFFF">{{c.name}}<svg role="img" aria-label="Verified" width="14" height="14" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#E68BD6"></circle><path d="M7.5 12.5l3 3 6-6.5" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>
<div style="font-size: 12px; color: #CFC6CB; margin-top: 2px">{{c.role}}</div>
</div>
</div>
</sc-for>
</div>
<div style="display: flex; flex-direction: column; gap: 8px">
<sc-for list="{{rightCol}}" as="c" hint-placeholder-count="2">
<div style="position: relative; height: {{c.h}}; border-radius: 20px; overflow: hidden; background: {{c.photo}}">
<img src="{{c.src}}" alt="{{c.alt}}" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%">
<div aria-hidden="true" style="position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0) 30%)"></div>
<button aria-label="Save to favourites" style="position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center">
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1.8" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"></path></svg>
</button>
<div style="position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 12px 12px; background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0))">
<div style="display: flex; align-items: center; gap: 5px; font: 600 14px Outfit, sans-serif; color: #FFFFFF">{{c.name}}<svg role="img" aria-label="Verified" width="14" height="14" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#E68BD6"></circle><path d="M7.5 12.5l3 3 6-6.5" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>
<div style="font-size: 12px; color: #CFC6CB; margin-top: 2px">{{c.role}}</div>
</div>
</div>
</sc-for>
</div>
</div>
<nav aria-label="Main" style="position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px; border-radius: 24px; background: rgba(28,24,27,0.94); border: 1px solid #2E292D; box-shadow: 0 12px 32px rgba(0,0,0,0.5)">
<a href="#" aria-label="Home" style="width: 48px; height: 44px; border-radius: 16px; background: #2E282C; display: flex; align-items: center; justify-content: center"><svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="1.8" stroke-linejoin="round"><path d="M4 10.5L12 4l8 6.5V20H4z"></path><path d="M10 20v-5h4v5"></path></svg></a>
<a href="#" aria-label="Messages" style="width: 48px; height: 44px; border-radius: 16px; display: flex; align-items: center; justify-content: center"><svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#B8AEB4" stroke-width="1.8" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"></path><path d="M8 10h.01M12 10h.01M16 10h.01" stroke-linecap="round" stroke-width="2.4"></path></svg></a>
<a href="#" aria-label="Favourites" style="width: 48px; height: 44px; border-radius: 16px; display: flex; align-items: center; justify-content: center"><svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#B8AEB4" stroke-width="1.8" stroke-linejoin="round"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"></path></svg></a>
<a href="#" aria-label="Profile" style="width: 48px; height: 44px; border-radius: 16px; display: flex; align-items: center; justify-content: center"><svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#B8AEB4" stroke-width="1.8"><circle cx="12" cy="12" r="8.5"></circle><circle cx="12" cy="10" r="3"></circle><path d="M6.8 18.2c1.3-2 3.1-3 5.2-3s3.9 1 5.2 3"></path></svg></a>
</nav>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"accent":{"editor":"color","default":"#F0A2E6","options":["#F0A2E6","#F2A37E","#9EC5FF"]},"$preview":{"width":390,"height":844}}'>
class Component extends DCLogic {
renderVals() {
return {
accent: this.props.accent ?? '#F0A2E6',
leftCol: [
{ name: 'Leo Carter', role: 'Club DJ', h: '172px', src: 'https://developermill.com/app-designs/influencer-marketplace-app-ui-design/assets/c55cdfc657.jpg', alt: 'Leo Carter DJing under green lasers', photo: '#1B2A14' },
{ name: 'Nina Costa', role: 'Beauty model', h: '220px', src: 'https://developermill.com/app-designs/influencer-marketplace-app-ui-design/assets/69bc7c7ba5.jpg', alt: 'Nina Costa in a sequin jacket on stage', photo: '#1A1530' }
],
rightCol: [
{ name: 'Maya Brooks', role: 'Fashion model', h: '220px', src: 'https://developermill.com/app-designs/influencer-marketplace-app-ui-design/assets/6073575a4b.jpg', alt: 'Maya Brooks in warm club light', photo: '#2A1612' },
{ name: 'Theo Grant', role: 'Sports creator', h: '172px', src: 'https://developermill.com/app-designs/influencer-marketplace-app-ui-design/assets/cb92db0f6a.jpg', alt: 'Theo Grant on a city street at night', photo: '#0F1D1C' }
]
};
}
}
</script>
</body>
</html>
```
### Creator profile (Profile)
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Influencer profile</title>
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700&family=Outfit:wght@400;500;600&display=swap" rel="stylesheet">
<style>
body{margin:0}
a{color:#F2A37E}a:hover{color:#F7C2A6}
</style>
</helmet>
<div style="width: 390px; height: 844px; position: relative; overflow: hidden; background: #0D0A0C; font-family: Outfit, system-ui, sans-serif; color: #F4EEF1">
<svg aria-hidden="true" width="390" height="420" viewBox="0 0 390 420" style="position: absolute; left: 0; top: 0">
<path d="M150 -10 C 170 30, 250 20, 300 40 C 360 65, 400 40, 420 30" fill="none" stroke="{{accent}}" stroke-width="16" stroke-linecap="round"></path>
<path d="M-20 150 C 20 120, 60 140, 70 175 C 80 210, 30 230, 60 255" fill="none" stroke="{{accent}}" stroke-width="16" stroke-linecap="round"></path>
<path d="M330 170 C 380 160, 410 210, 380 250 C 355 285, 300 270, 320 240" fill="none" stroke="{{accent}}" stroke-width="16" stroke-linecap="round"></path>
<path d="M150 360 C 170 395, 215 390, 240 370" fill="none" stroke="{{accent}}" stroke-width="14" stroke-linecap="round"></path>
</svg>
<a href="Main.dc.html" aria-label="Back" style="position: absolute; left: 20px; top: 70px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(40,35,39,0.85); display: flex; align-items: center; justify-content: center"><svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"></path></svg></a>
<div style="position: absolute; left: 66px; top: 66px; width: 258px; height: 300px; border-radius: 24px; overflow: hidden; background: #2A1A28; box-shadow: 0 20px 40px rgba(0,0,0,0.45)">
<img src="https://developermill.com/app-designs/influencer-marketplace-app-ui-design/assets/9cc208790a.jpg" alt="Zara Quinn seated in a bucket hat between neon lights" style="width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block">
</div>
<div style="position: absolute; left: 16px; right: 16px; top: 388px; display: flex; gap: 8px">
<div style="flex: 1; min-width: 0; padding: 14px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.35); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); display: flex; flex-direction: column; justify-content: center; gap: 4px">
<div style="display: flex; align-items: center; gap: 6px; font: 600 17px Outfit, sans-serif">Zara Quinn<svg role="img" aria-label="Verified" width="16" height="16" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#E68BD6"></circle><path d="M7.5 12.5l3 3 6-6.5" fill="none" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path></svg></div>
<div style="font-size: 13px; color: #BDB3B9">Party Influencer</div>
</div>
<a href="#" aria-label="Instagram, 11.6 million followers" style="width: 52px; padding: 12px 0; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 24px rgba(0,0,0,0.35); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: #F4EEF1">
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#F4EEF1" stroke-width="1.8"><rect x="4" y="4" width="16" height="16" rx="5"></rect><circle cx="12" cy="12" r="3.6"></circle><circle cx="16.8" cy="7.2" r="0.9" fill="#F4EEF1" stroke="none"></circle></svg>
<span style="font-size: 11px">11.6M</span>
</a>
<a href="#" aria-label="TikTok, 7.3 million followers" style="width: 52px; padding: 12px 0; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 24px rgba(0,0,0,0.35); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: #F4EEF1">
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#F4EEF1" stroke-width="1.8" stroke-linecap="round"><path d="M13 4v10.5a3.5 3.5 0 1 1-3.5-3.5"></path><path d="M13 4c.5 2.6 2.4 4.3 5 4.5"></path></svg>
<span style="font-size: 11px">7.3M</span>
</a>
<a href="#" aria-label="Facebook, 1.1 million followers" style="width: 52px; padding: 12px 0; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 24px rgba(0,0,0,0.35); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: #F4EEF1">
<svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#F4EEF1" stroke-width="1.8" stroke-linecap="round"><path d="M14.5 4H13a3 3 0 0 0-3 3v13"></path><path d="M7.5 11h7"></path></svg>
<span style="font-size: 11px">1.1M</span>
</a>
</div>
<p style="position: absolute; left: 24px; right: 24px; top: 478px; margin: 0; font-size: 14px; line-height: 1.5; color: #DCD3D8">Hi! I’m ready for collaborations with streetwear and event organizer brands.</p>
<h2 style="position: absolute; left: 24px; top: 540px; margin: 0; font: 600 15px Outfit, sans-serif; color: #F4EEF1">Latest</h2>
<div style="position: absolute; left: 16px; top: 570px; right: -40px; display: flex; gap: 8px">
<img src="https://developermill.com/app-designs/influencer-marketplace-app-ui-design/assets/ef32642df8.jpg" alt="Concert crowd under purple stage lights" style="width: 110px; height: 118px; flex: none; border-radius: 16px; object-fit: cover; background: #2A1035">
<img src="https://developermill.com/app-designs/influencer-marketplace-app-ui-design/assets/9700e726de.jpg" alt="Hands holding a game controller" style="width: 110px; height: 118px; flex: none; border-radius: 16px; object-fit: cover; background: #1E2050">
<img src="https://developermill.com/app-designs/influencer-marketplace-app-ui-design/assets/b0156366cb.jpg" alt="Dance All Night neon sign" style="width: 110px; height: 118px; flex: none; border-radius: 16px; object-fit: cover; background: #2A0C12">
<img src="https://developermill.com/app-designs/influencer-marketplace-app-ui-design/assets/f448cc0666.jpg" alt="DJ hands on a mixer" style="width: 110px; height: 118px; flex: none; border-radius: 16px; object-fit: cover; background: #2A1A0A">
</div>
<a href="#" style="position: absolute; left: 32px; right: 32px; bottom: 54px; height: 58px; border-radius: 29px; border: 1.5px solid #F2A37E; background: linear-gradient(180deg, rgba(242,163,126,0.10), rgba(242,163,126,0.02)); display: flex; align-items: center; justify-content: center; text-decoration: none; color: #F4EEF1; font: 600 16px Outfit, sans-serif">Contact Influencer</a>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props='{"accent":{"editor":"color","default":"#F0A2E6","options":["#F0A2E6","#F2A37E","#9EC5FF"]},"$preview":{"width":390,"height":844}}'>
class Component extends DCLogic {
renderVals() {
return { accent: this.props.accent ?? '#F0A2E6' };
}
}
</script>
</body>
</html>
```SKILL.md
Save as .claude/skills/influencer-marketplace-app-ui/SKILL.md
--- name: influencer-marketplace-app-ui description: Build the Influencer Marketplace mobile app UI in Expo React Native. Use when asked to create a influencer marketing app UI or a new screen in this visual style. --- # Influencer Marketplace app UI Build this social app UI in an Expo Router project with TypeScript. Reference: https://developermill.com/app-designs/influencer-marketplace-app-ui-design ## Visual direction Black canvas with looping pink ribbon strokes, a peach display face and glassy stat tiles over neon event photography. Keep these signature details: - Hand-drawn ribbon strokes in SVG - Staggered creator grid with verified badges - Removable category chips - Profile with reach by social platform ## Set up ```bash npx expo install expo-blur expo-image expo-linear-gradient react-native-svg @expo-google-fonts/outfit @expo-google-fonts/syne expo-font ``` ## Tokens | Name | Hex | | --- | --- | | Black | `#111014` | | Charcoal | `#1D191C` | | Peach | `#F2A37E` | | Orchid | `#F0A2E6` | | Mist | `#F4EEF1` | | Stone | `#B8AEB4` | - Typefaces: Syne, Outfit - Text sizes (px): 11, 12, 13, 14, 30 - Corner radii (px): 10, 14, 16, 18, 20, 24 Define these once and reuse them. Do not add new colours. ## Screens 1. **Discover creators.** A headline for campaigns, search with filters, category chips and a staggered creator grid under a floating tab bar. 2. **Creator profile.** A framed portrait wrapped by a pink ribbon, social reach tiles, a short bio, latest work and a contact button. ## Build rules - Draw each screen on a 390 × 844 artboard and scale it to the device width. - Load each custom font weight by family name with expo-font. Do not set fontWeight with custom fonts. - Draw icons, charts and illustrations with react-native-svg. - Use Pressable with an accessibilityLabel for controls, with at least a 44px target. - Navigate with router.navigate and keep sample data as constants at the top of the file. - Use expo-image with contentFit for photos. ## Done when - All routes are linked and reachable. - Colours, type and radii match the tokens above. - `npx tsc --noEmit` and `npx expo lint` pass. - The layout holds up on small and large phones.
Set up the project
npx create-expo-app@latest influencer-marketplace-app --template default cd influencer-marketplace-app rm -rf src npx expo install expo-blur expo-image expo-linear-gradient react-native-svg @expo-google-fonts/outfit @expo-google-fonts/syne expo-font
src/app/_layout.tsx
import { Outfit_400Regular, Outfit_500Medium, Outfit_600SemiBold } from '@expo-google-fonts/outfit';
import { Syne_700Bold } from '@expo-google-fonts/syne';
import { useFonts } from 'expo-font';
import { Stack } from 'expo-router';
export default function RootLayout() {
const [fontsLoaded] = useFonts({
Outfit_400Regular,
Outfit_500Medium,
Outfit_600SemiBold,
Syne_700Bold,
});
if (!fontsLoaded) return null;
return <Stack screenOptions={{ headerShown: false }} />;
}src/app/index.tsx
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
import Svg, { Circle, Path } from 'react-native-svg';
import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';
const accent = '#F0A2E6';
const leftCol = [
{
name: 'Leo Carter',
role: 'Club DJ',
h: 172,
src: 'c55cdfc657.jpg',
alt: 'Leo Carter DJing under green lasers',
photo: '#1B2A14',
},
{
name: 'Nina Costa',
role: 'Beauty model',
h: 220,
src: '69bc7c7ba5.jpg',
alt: 'Nina Costa in a sequin jacket on stage',
photo: '#1A1530',
},
];
const rightCol = [
{
name: 'Maya Brooks',
role: 'Fashion model',
h: 220,
src: '6073575a4b.jpg',
alt: 'Maya Brooks in warm club light',
photo: '#2A1612',
},
{
name: 'Theo Grant',
role: 'Sports creator',
h: 172,
src: 'cb92db0f6a.jpg',
alt: 'Theo Grant on a city street at night',
photo: '#0F1D1C',
},
];
export default function MainScreen() {
return (
<Screen background="#0D0A0C" statusBar="light">
<View style={{ flex: 1 }}>
<Svg
width="390"
height="150"
viewBox="0 0 390 150"
style={{ position: 'absolute', left: 0, top: 0 }}>
<Path
d="M70 -10 C 60 40, 120 60, 130 30 C 140 0, 90 0, 110 45 C 130 90, 200 60, 215 35 C 230 10, 260 20, 250 55 C 240 90, 300 95, 330 60 C 350 35, 380 30, 400 50"
fill="none"
stroke={accent}
strokeWidth="16"
strokeLinecap="round"
/>
</Svg>
<View style={{ position: 'absolute', left: 24, right: 24, top: 128, gap: 22 }}>
<Text
style={{
margin: 0,
fontFamily: 'Syne_700Bold',
fontSize: 30,
color: '#F2A37E',
letterSpacing: -0.2,
lineHeight: 33.6,
}}>
Best Influencers{'\n'}for your marketing{'\n'}campaigns
</Text>
<View style={{ alignItems: 'center', gap: 10, flexDirection: 'row' }}>
<View
style={{
flex: 1,
alignItems: 'center',
gap: 10,
height: 52,
paddingVertical: 0,
paddingHorizontal: 16,
borderRadius: 16,
backgroundColor: '#1D191C',
borderWidth: 1,
borderColor: '#2A2529',
flexDirection: 'row',
}}>
<Svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="#B8AEB4"
strokeWidth="2"
strokeLinecap="round">
<Circle cx="11" cy="11" r="7" />
<Path d="M20 20l-3.5-3.5" />
</Svg>
<TextInput
placeholder="Search Influencer"
placeholderTextColor="#8A8A8A"
accessibilityLabel="Search influencer"
style={{
flex: 1,
borderWidth: 0,
fontFamily: 'Outfit_400Regular',
fontSize: 15,
color: '#F4EEF1',
}}
/>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel="Filters"
style={{
width: 50,
height: 50,
borderRadius: 16,
backgroundColor: '#1D191C',
borderWidth: 1,
borderColor: '#2A2529',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#F4EEF1"
strokeWidth="1.8"
strokeLinecap="round">
<Path d="M8 4v16M16 4v16" />
<Circle cx="8" cy="9" r="2.4" fill="#1D191C" />
<Circle cx="16" cy="15" r="2.4" fill="#1D191C" />
</Svg>
</Pressable>
</View>
<View style={{ gap: 8, marginRight: -24, overflow: 'hidden', flexDirection: 'row' }}>
<Pressable
accessibilityRole="button"
style={{
alignItems: 'center',
gap: 10,
height: 40,
paddingVertical: 0,
paddingLeft: 14,
paddingRight: 6,
borderRadius: 14,
backgroundColor: '#1D191C',
borderWidth: 1,
borderColor: '#2A2529',
flexShrink: 1,
flexDirection: 'row',
}}>
<Text
style={{
fontFamily: 'Outfit_500Medium',
fontSize: 14,
color: '#F4EEF1',
flexShrink: 1,
}}>
Models
</Text>
<View
style={{
width: 28,
height: 28,
borderRadius: 10,
backgroundColor: '#2C272B',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="#F4EEF1"
strokeWidth="2.4"
strokeLinecap="round">
<Path d="M6 6l12 12M18 6L6 18" />
</Svg>
</View>
</Pressable>
<Pressable
accessibilityRole="button"
style={{
alignItems: 'center',
gap: 10,
height: 40,
paddingVertical: 0,
paddingLeft: 14,
paddingRight: 6,
borderRadius: 14,
backgroundColor: '#1D191C',
borderWidth: 1,
borderColor: '#2A2529',
flexShrink: 1,
flexDirection: 'row',
}}>
<Text
style={{
fontFamily: 'Outfit_500Medium',
fontSize: 14,
color: '#F4EEF1',
flexShrink: 1,
}}>
Lifestyle
</Text>
<View
style={{
width: 28,
height: 28,
borderRadius: 10,
backgroundColor: '#2C272B',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="#F4EEF1"
strokeWidth="2.4"
strokeLinecap="round">
<Path d="M6 6l12 12M18 6L6 18" />
</Svg>
</View>
</Pressable>
<Pressable
accessibilityRole="button"
style={{
alignItems: 'center',
gap: 10,
height: 40,
paddingVertical: 0,
paddingLeft: 14,
paddingRight: 6,
borderRadius: 14,
backgroundColor: '#1D191C',
borderWidth: 1,
borderColor: '#2A2529',
flexShrink: 1,
flexDirection: 'row',
}}>
<Text
style={{
fontFamily: 'Outfit_500Medium',
fontSize: 14,
color: '#F4EEF1',
flexShrink: 1,
}}>
Sports
</Text>
<View
style={{
width: 28,
height: 28,
borderRadius: 10,
backgroundColor: '#2C272B',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="12"
height="12"
viewBox="0 0 24 24"
fill="none"
stroke="#F4EEF1"
strokeWidth="2.4"
strokeLinecap="round">
<Path d="M6 6l12 12M18 6L6 18" />
</Svg>
</View>
</Pressable>
</View>
</View>
<View
style={{
position: 'absolute',
left: 16,
right: 16,
top: 432,
flexDirection: 'row',
gap: 8,
}}>
<View style={{ gap: 8, flex: 1 }}>
{leftCol.map((c, index) => (
<View
key={index}
style={{
height: c.h,
borderRadius: 20,
overflow: 'hidden',
backgroundColor: c.photo,
}}>
<Image
source={{ uri: asset(c.src) }}
contentFit="cover"
contentPosition={{ left: 'center', top: '25%' }}
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
width: '100%',
height: '100%',
}}
/>
<View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
<LinearGradient
colors={['rgba(0,0,0,0.25)', 'rgba(0,0,0,0)']}
locations={[0, 0.3]}
start={{ x: 0.5, y: 0 }}
end={{ x: 0.5, y: 1 }}
style={StyleSheet.absoluteFill}
/>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel="Save to favourites"
style={{
position: 'absolute',
right: 10,
top: 10,
width: 32,
height: 32,
borderWidth: 0,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinejoin="round">
<Path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" />
</Svg>
</Pressable>
<View
style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
paddingTop: 36,
paddingBottom: 12,
paddingHorizontal: 12,
}}>
<LinearGradient
colors={['rgba(0,0,0,0.78)', 'rgba(0,0,0,0)']}
locations={[0, 1]}
start={{ x: 0.5, y: 1 }}
end={{ x: 0.5, y: 0 }}
style={StyleSheet.absoluteFill}
/>
<View style={{ alignItems: 'center', gap: 5, flexDirection: 'row' }}>
<Text
style={{
fontFamily: 'Outfit_600SemiBold',
fontSize: 14,
color: '#FFFFFF',
flexShrink: 1,
}}>
{c.name}
</Text>
<Svg
width="14"
height="14"
viewBox="0 0 24 24"
accessibilityRole="image"
accessibilityLabel="Verified">
<Circle cx="12" cy="12" r="11" fill="#E68BD6" />
<Path
d="M7.5 12.5l3 3 6-6.5"
fill="none"
stroke="#FFFFFF"
strokeWidth="2.4"
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
</View>
<Text
style={{
marginTop: 2,
fontFamily: 'Outfit_400Regular',
fontSize: 12,
color: '#CFC6CB',
}}>
{c.role}
</Text>
</View>
</View>
))}
</View>
<View style={{ gap: 8, flex: 1 }}>
{rightCol.map((c, index) => (
<View
key={index}
style={{
height: c.h,
borderRadius: 20,
overflow: 'hidden',
backgroundColor: c.photo,
}}>
<Image
source={{ uri: asset(c.src) }}
contentFit="cover"
contentPosition={{ left: 'center', top: '25%' }}
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
width: '100%',
height: '100%',
}}
/>
<View style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}>
<LinearGradient
colors={['rgba(0,0,0,0.25)', 'rgba(0,0,0,0)']}
locations={[0, 0.3]}
start={{ x: 0.5, y: 0 }}
end={{ x: 0.5, y: 1 }}
style={StyleSheet.absoluteFill}
/>
</View>
<Pressable
accessibilityRole="button"
accessibilityLabel="Save to favourites"
style={{
position: 'absolute',
right: 10,
top: 10,
width: 32,
height: 32,
borderWidth: 0,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinejoin="round">
<Path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" />
</Svg>
</Pressable>
<View
style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
paddingTop: 36,
paddingBottom: 12,
paddingHorizontal: 12,
}}>
<LinearGradient
colors={['rgba(0,0,0,0.78)', 'rgba(0,0,0,0)']}
locations={[0, 1]}
start={{ x: 0.5, y: 1 }}
end={{ x: 0.5, y: 0 }}
style={StyleSheet.absoluteFill}
/>
<View style={{ alignItems: 'center', gap: 5, flexDirection: 'row' }}>
<Text
style={{
fontFamily: 'Outfit_600SemiBold',
fontSize: 14,
color: '#FFFFFF',
flexShrink: 1,
}}>
{c.name}
</Text>
<Svg
width="14"
height="14"
viewBox="0 0 24 24"
accessibilityRole="image"
accessibilityLabel="Verified">
<Circle cx="12" cy="12" r="11" fill="#E68BD6" />
<Path
d="M7.5 12.5l3 3 6-6.5"
fill="none"
stroke="#FFFFFF"
strokeWidth="2.4"
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
</View>
<Text
style={{
marginTop: 2,
fontFamily: 'Outfit_400Regular',
fontSize: 12,
color: '#CFC6CB',
}}>
{c.role}
</Text>
</View>
</View>
))}
</View>
</View>
<View
style={{
position: 'absolute',
left: '50%',
bottom: 34,
transform: [{ translateX: '-50%' }],
gap: 6,
padding: 8,
borderRadius: 24,
backgroundColor: 'rgba(28,24,27,0.94)',
borderWidth: 1,
borderColor: '#2E292D',
boxShadow: '0 12px 32px rgba(0,0,0,0.5)',
flexDirection: 'row',
}}>
<Pressable
accessibilityRole="link"
accessibilityLabel="Home"
style={{
width: 48,
height: 44,
borderRadius: 16,
backgroundColor: '#2E282C',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="1.8"
strokeLinejoin="round">
<Path d="M4 10.5L12 4l8 6.5V20H4z" />
<Path d="M10 20v-5h4v5" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="link"
accessibilityLabel="Messages"
style={{
width: 48,
height: 44,
borderRadius: 16,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="#B8AEB4"
strokeWidth="1.8"
strokeLinejoin="round">
<Path d="M4 5h16v11H9l-5 4z" />
<Path d="M8 10h.01M12 10h.01M16 10h.01" strokeLinecap="round" strokeWidth="2.4" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="link"
accessibilityLabel="Favourites"
style={{
width: 48,
height: 44,
borderRadius: 16,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="#B8AEB4"
strokeWidth="1.8"
strokeLinejoin="round">
<Path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" />
</Svg>
</Pressable>
<Pressable
accessibilityRole="link"
accessibilityLabel="Profile"
style={{
width: 48,
height: 44,
borderRadius: 16,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="#B8AEB4"
strokeWidth="1.8">
<Circle cx="12" cy="12" r="8.5" />
<Circle cx="12" cy="10" r="3" />
<Path d="M6.8 18.2c1.3-2 3.1-3 5.2-3s3.9 1 5.2 3" />
</Svg>
</Pressable>
</View>
</View>
</Screen>
);
}src/app/profile.tsx
import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { router } from 'expo-router';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Svg, { Circle, Path, Rect } from 'react-native-svg';
import { Screen } from '@/components/screen';
import { asset } from '@/lib/assets';
const accent = '#F0A2E6';
export default function ProfileScreen() {
return (
<Screen background="#0D0A0C" statusBar="light">
<View style={{ flex: 1 }}>
<Svg
width="390"
height="420"
viewBox="0 0 390 420"
style={{ position: 'absolute', left: 0, top: 0 }}>
<Path
d="M150 -10 C 170 30, 250 20, 300 40 C 360 65, 400 40, 420 30"
fill="none"
stroke={accent}
strokeWidth="16"
strokeLinecap="round"
/>
<Path
d="M-20 150 C 20 120, 60 140, 70 175 C 80 210, 30 230, 60 255"
fill="none"
stroke={accent}
strokeWidth="16"
strokeLinecap="round"
/>
<Path
d="M330 170 C 380 160, 410 210, 380 250 C 355 285, 300 270, 320 240"
fill="none"
stroke={accent}
strokeWidth="16"
strokeLinecap="round"
/>
<Path
d="M150 360 C 170 395, 215 390, 240 370"
fill="none"
stroke={accent}
strokeWidth="14"
strokeLinecap="round"
/>
</Svg>
<Pressable
accessibilityRole="link"
accessibilityLabel="Back"
onPress={() => router.navigate('/')}
style={{
position: 'absolute',
left: 20,
top: 70,
zIndex: 2,
width: 44,
height: 44,
borderRadius: '50%',
backgroundColor: 'rgba(40,35,39,0.85)',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
}}>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#FFFFFF"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round">
<Path d="M15 5l-7 7 7 7" />
</Svg>
</Pressable>
<View
style={{
position: 'absolute',
left: 66,
top: 66,
width: 258,
height: 300,
borderRadius: 24,
overflow: 'hidden',
backgroundColor: '#2A1A28',
boxShadow: '0 20px 40px rgba(0,0,0,0.45)',
}}>
<Image
source={{ uri: asset('9cc208790a.jpg') }}
contentFit="cover"
contentPosition={{ left: 'center', top: '30%' }}
accessibilityLabel="Zara Quinn seated in a bucket hat between neon lights"
style={{ width: '100%', height: '100%' }}
/>
</View>
<View
style={{
position: 'absolute',
left: 16,
right: 16,
top: 388,
gap: 8,
flexDirection: 'row',
}}>
<View
style={{
flex: 1,
minWidth: 0,
padding: 14,
borderRadius: 18,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.16)',
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.35)',
justifyContent: 'center',
gap: 4,
overflow: 'hidden',
}}>
<BlurView intensity={40} tint="default" style={StyleSheet.absoluteFill} />
<LinearGradient
colors={['rgba(255,255,255,0.14)', 'rgba(255,255,255,0.04)']}
locations={[0, 1]}
start={{ x: 0.146, y: 0.146 }}
end={{ x: 0.854, y: 0.854 }}
style={StyleSheet.absoluteFill}
/>
<View style={{ alignItems: 'center', gap: 6, flexDirection: 'row' }}>
<Text
style={{
fontFamily: 'Outfit_600SemiBold',
fontSize: 17,
color: '#F4EEF1',
flexShrink: 1,
}}>
Zara Quinn
</Text>
<Svg
width="16"
height="16"
viewBox="0 0 24 24"
accessibilityRole="image"
accessibilityLabel="Verified">
<Circle cx="12" cy="12" r="11" fill="#E68BD6" />
<Path
d="M7.5 12.5l3 3 6-6.5"
fill="none"
stroke="#FFFFFF"
strokeWidth="2.4"
strokeLinecap="round"
strokeLinejoin="round"
/>
</Svg>
</View>
<Text style={{ fontFamily: 'Outfit_400Regular', fontSize: 13, color: '#BDB3B9' }}>
Party Influencer
</Text>
</View>
<Pressable
accessibilityRole="link"
accessibilityLabel="Instagram, 11.6 million followers"
style={{
width: 54,
paddingVertical: 12,
paddingHorizontal: 0,
borderRadius: 18,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.14)',
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 24px rgba(0,0,0,0.35)',
alignItems: 'center',
gap: 8,
overflow: 'hidden',
}}>
<BlurView intensity={40} tint="default" style={StyleSheet.absoluteFill} />
<LinearGradient
colors={['rgba(255,255,255,0.12)', 'rgba(255,255,255,0.03)']}
locations={[0, 1]}
start={{ x: 0.329, y: 0.03 }}
end={{ x: 0.671, y: 0.97 }}
style={StyleSheet.absoluteFill}
/>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#F4EEF1"
strokeWidth="1.8"
style={{ position: 'relative' }}>
<Rect x="4" y="4" width="16" height="16" rx="5" />
<Circle cx="12" cy="12" r="3.6" />
<Circle cx="16.8" cy="7.2" r="0.9" fill="#F4EEF1" stroke="none" />
</Svg>
<Text style={{ fontFamily: 'Outfit_400Regular', fontSize: 11, color: '#F4EEF1' }}>
11.6M
</Text>
</Pressable>
<Pressable
accessibilityRole="link"
accessibilityLabel="TikTok, 7.3 million followers"
style={{
width: 54,
paddingVertical: 12,
paddingHorizontal: 0,
borderRadius: 18,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.14)',
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 24px rgba(0,0,0,0.35)',
alignItems: 'center',
gap: 8,
overflow: 'hidden',
}}>
<BlurView intensity={40} tint="default" style={StyleSheet.absoluteFill} />
<LinearGradient
colors={['rgba(255,255,255,0.12)', 'rgba(255,255,255,0.03)']}
locations={[0, 1]}
start={{ x: 0.329, y: 0.03 }}
end={{ x: 0.671, y: 0.97 }}
style={StyleSheet.absoluteFill}
/>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#F4EEF1"
strokeWidth="1.8"
strokeLinecap="round"
style={{ position: 'relative' }}>
<Path d="M13 4v10.5a3.5 3.5 0 1 1-3.5-3.5" />
<Path d="M13 4c.5 2.6 2.4 4.3 5 4.5" />
</Svg>
<Text style={{ fontFamily: 'Outfit_400Regular', fontSize: 11, color: '#F4EEF1' }}>
7.3M
</Text>
</Pressable>
<Pressable
accessibilityRole="link"
accessibilityLabel="Facebook, 1.1 million followers"
style={{
width: 54,
paddingVertical: 12,
paddingHorizontal: 0,
borderRadius: 18,
borderWidth: 1,
borderColor: 'rgba(255,255,255,0.14)',
boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 24px rgba(0,0,0,0.35)',
alignItems: 'center',
gap: 8,
overflow: 'hidden',
}}>
<BlurView intensity={40} tint="default" style={StyleSheet.absoluteFill} />
<LinearGradient
colors={['rgba(255,255,255,0.12)', 'rgba(255,255,255,0.03)']}
locations={[0, 1]}
start={{ x: 0.329, y: 0.03 }}
end={{ x: 0.671, y: 0.97 }}
style={StyleSheet.absoluteFill}
/>
<Svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#F4EEF1"
strokeWidth="1.8"
strokeLinecap="round"
style={{ position: 'relative' }}>
<Path d="M14.5 4H13a3 3 0 0 0-3 3v13" />
<Path d="M7.5 11h7" />
</Svg>
<Text style={{ fontFamily: 'Outfit_400Regular', fontSize: 11, color: '#F4EEF1' }}>
1.1M
</Text>
</Pressable>
</View>
<Text
style={{
position: 'absolute',
left: 24,
right: 24,
top: 478,
margin: 0,
fontFamily: 'Outfit_400Regular',
fontSize: 14,
color: '#DCD3D8',
lineHeight: 21,
}}>
Hi! I’m ready for collaborations with streetwear and event organizer brands.
</Text>
<Text
style={{
position: 'absolute',
left: 24,
top: 540,
margin: 0,
fontFamily: 'Outfit_600SemiBold',
fontSize: 15,
color: '#F4EEF1',
}}>
Latest
</Text>
<View
style={{
position: 'absolute',
left: 16,
top: 570,
right: -40,
gap: 8,
flexDirection: 'row',
}}>
<Image
source={{ uri: asset('ef32642df8.jpg') }}
contentFit="cover"
accessibilityLabel="Concert crowd under purple stage lights"
style={{
width: 110,
height: 118,
flexGrow: 0,
flexShrink: 0,
borderRadius: 16,
backgroundColor: '#2A1035',
}}
/>
<Image
source={{ uri: asset('9700e726de.jpg') }}
contentFit="cover"
accessibilityLabel="Hands holding a game controller"
style={{
width: 110,
height: 118,
flexGrow: 0,
flexShrink: 0,
borderRadius: 16,
backgroundColor: '#1E2050',
}}
/>
<Image
source={{ uri: asset('b0156366cb.jpg') }}
contentFit="cover"
accessibilityLabel="Dance All Night neon sign"
style={{
width: 110,
height: 118,
flexGrow: 0,
flexShrink: 0,
borderRadius: 16,
backgroundColor: '#2A0C12',
}}
/>
<Image
source={{ uri: asset('f448cc0666.jpg') }}
contentFit="cover"
accessibilityLabel="DJ hands on a mixer"
style={{
width: 110,
height: 118,
flexGrow: 0,
flexShrink: 0,
borderRadius: 16,
backgroundColor: '#2A1A0A',
}}
/>
</View>
<Pressable
accessibilityRole="link"
style={{
position: 'absolute',
left: 32,
right: 32,
bottom: 54,
height: 61,
borderRadius: 29,
borderWidth: 1.5,
borderColor: '#F2A37E',
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
flexDirection: 'row',
}}>
<LinearGradient
colors={['rgba(242,163,126,0.10)', 'rgba(242,163,126,0.02)']}
locations={[0, 1]}
start={{ x: 0.5, y: 0 }}
end={{ x: 0.5, y: 1 }}
style={StyleSheet.absoluteFill}
/>
<Text
style={{
fontFamily: 'Outfit_600SemiBold',
fontSize: 16,
color: '#F4EEF1',
flexShrink: 1,
}}>
Contact Influencer
</Text>
</Pressable>
</View>
</Screen>
);
}src/components/screen.tsx
import { StatusBar } from 'expo-status-bar';
import type { ReactNode } from 'react';
import { ScrollView, useWindowDimensions, View } from 'react-native';
// Every screen is drawn on a 390 wide artboard, then scaled to the device width.
const ARTBOARD_WIDTH = 390;
type Props = {
background: string;
statusBar: 'light' | 'dark';
height?: number;
children: ReactNode;
};
export function Screen({ background, statusBar, height: artboardHeight = 844, children }: Props) {
const { width, height } = useWindowDimensions();
const scale = width / ARTBOARD_WIDTH;
return (
<ScrollView
bounces={false}
showsVerticalScrollIndicator={false}
style={{ flex: 1, backgroundColor: background }}
contentContainerStyle={{ height: Math.max(artboardHeight * scale, height) }}>
<StatusBar style={statusBar} />
<View
style={{
width: ARTBOARD_WIDTH,
height: artboardHeight,
overflow: 'hidden',
transformOrigin: 'left top',
transform: [{ scale }],
}}>
{children}
</View>
</ScrollView>
);
}src/lib/assets.ts
// Demo images are hosted by DeveloperMill. Point this at your own CDN, or swap to require().
const ASSET_BASE = 'https://developermill.com/app-designs/influencer-marketplace-app-ui-design/assets';
export const asset = (name: string) => `${ASSET_BASE}/${name}`;About this design
The neon photos and pink ribbon give the app real attitude. The profile brings social reach, a short bio and recent work into one screen with a single contact action, which also suits model agencies and booking apps.
Black canvas with looping pink ribbon strokes, a peach display face and glassy stat tiles over neon event photography.
- Hand-drawn ribbon strokes in SVG
- Staggered creator grid with verified badges
- Removable category chips
- Profile with reach by social platform
Colour palette
Black
#111014
Charcoal
#1D191C
Peach
#F2A37E
Orchid
#F0A2E6
Mist
#F4EEF1
Stone
#B8AEB4
How to use this design
- 01
Pick what to copy
Copy the Influencer Marketplace artifact, skill or code from this page.
- 02
Run it or generate it
Paste the code into a new Expo app and start it, or give the skill to your AI coding agent.
- 03
Make it yours
Replace the demo images and sample content, then connect your own data.
Frequently asked questions
What is the pink ribbon made from?
It is an SVG path drawn with react-native-svg, so it stays sharp on every screen and can be recoloured from the code.
Can this be used for a model agency?
Yes. The grid and profile are generic talent screens. Change the stats and the contact action to fit bookings.
How does the glass effect work on the stat tiles?
Each tile layers a BlurView from expo-blur, a soft gradient and a thin border, then places the icon and value above them.
Is the Influencer Marketplace design free to use?
Yes. The design, skill and Expo code are free and MIT licensed, including for commercial apps. Replace the demo images and sample content with your own before you ship.
What is the difference between the artifact, skill and code?
The artifact is the full design: tokens, screens and source. The skill is a SKILL.md that teaches an AI coding agent to build the UI. The code is the finished Expo app you can paste in and run.
Which Expo version does the code use?
It targets Expo SDK 58 with Expo Router and TypeScript. It uses packages installed through npx expo install, with no custom native code.
