Affiliate Storefront Design System¶
Generated: 2026-05-25. Based on competitive research: ShopMy tab-based grid + Creator Hero theming depth.
1. Color Palette¶
Base Tokens¶
| Token | Hex | Usage |
|---|---|---|
color-bg |
#FFFFFF |
Page background |
color-surface |
#F8F8F8 |
Card / panel background |
color-surface-raised |
#FFFFFF |
Elevated card (shadow adds depth) |
color-border |
#E5E5E5 |
Dividers, card borders |
color-border-strong |
#CCCCCC |
Input outlines, active states |
Neutral Scale (gray ramp)¶
| Token | Hex | Usage |
|---|---|---|
gray-50 |
#FAFAFA |
Subtle backgrounds |
gray-100 |
#F5F5F5 |
Hover states, tag fills |
gray-200 |
#EEEEEE |
Skeleton loaders |
gray-300 |
#E0E0E0 |
Disabled borders |
gray-500 |
#9E9E9E |
Placeholder text, secondary labels |
gray-700 |
#616161 |
Body text (secondary) |
gray-900 |
#212121 |
Headings, primary text |
Brand Primary (Platform Default)¶
The platform ships with a default primary. Creators override color-accent only; everything else derives from neutrals so the creator's accent stays dominant.
| Token | Hex | Usage |
|---|---|---|
color-primary |
#1A1A1A |
Platform nav, footer, platform-level CTAs |
color-primary-hover |
#333333 |
Hover/active on platform elements |
Accent (Creator Override)¶
| Token | Default Hex | Notes |
|---|---|---|
color-accent |
#E91E8C |
Deep rose default; creator replaces this one token via their storefront settings |
color-accent-light |
15% tint of accent | Badge fill, wishlist active fill |
color-accent-dark |
15% shade of accent | CTA hover state |
color-accent-text |
#FFFFFF |
Text on accent backgrounds (verify 4.5:1 contrast at build time) |
Rationale: neutrals carry the layout, accent carries creator identity. A creator with brand color #2563EB (blue) or #16A34A (green) swaps one CSS variable and the CTA buttons, tab active states, and wishlist hearts all update.
Semantic Colors¶
| Token | Hex | Usage |
|---|---|---|
color-sale |
#EF4444 |
Sale badge background, price strikethrough label |
color-sale-text |
#FFFFFF |
Text on sale badge |
color-new |
#8B5CF6 |
"New" badge |
color-success |
#22C55E |
In-stock indicator, commission paid pill |
color-warning |
#F59E0B |
Low-stock, pending commission |
color-error |
#EF4444 |
Form errors, out-of-stock |
color-overlay |
rgba(0,0,0,0.40) |
Modal scrim, card hover overlay |
color-skeleton |
#E5E5E5 |
Skeleton loader base |
color-skeleton-shine |
#F0F0F0 |
Skeleton shimmer highlight |
2. Typography¶
Font Stack¶
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Playfair Display', Georgia, serif; /* creator name / hero headlines only */
--font-mono: ui-monospace, 'Cascadia Code', monospace; /* price codes, analytics numbers */
Load via Google Fonts: Inter weights 400/500/600/700, Playfair Display weight 700 italic.
Type Scale¶
| Token | Size | Line Height | Weight | Usage |
|---|---|---|---|---|
text-xs |
11px | 16px | 400 | Meta labels, timestamps, "Powered by" |
text-sm |
13px | 20px | 400/500 | Card metadata, filter labels, secondary body |
text-base |
15px | 24px | 400 | Body copy, product descriptions |
text-md |
17px | 26px | 500/600 | Card product titles, form labels |
text-lg |
20px | 28px | 600 | Section headings (tab titles, category names) |
text-xl |
24px | 32px | 700 | Page headings, creator name in header |
text-2xl |
32px | 40px | 700 | Hero headline |
text-3xl |
clamp(32px, 5vw, 48px) |
1.1 | 700 | Creator name in hero banner (display font) |
Weight Scale¶
| Token | Value |
|---|---|
font-normal |
400 |
font-medium |
500 |
font-semibold |
600 |
font-bold |
700 |
Price Typography¶
Prices use font-mono at text-md/text-lg weight font-semibold in gray-900. Strikethrough price: text-sm font-normal gray-500 line-through. Sale price: text-md font-semibold color-sale.
3. Spacing Scale (4px base)¶
| Token | px | rem | Usage |
|---|---|---|---|
space-1 |
4px | 0.25rem | Icon padding, tight inline gaps |
space-2 |
8px | 0.5rem | Badge padding, small gaps |
space-3 |
12px | 0.75rem | Inner card padding (mobile) |
space-4 |
16px | 1rem | Default component padding |
space-5 |
20px | 1.25rem | Card gap in grid |
space-6 |
24px | 1.5rem | Section vertical padding |
space-8 |
32px | 2rem | Section margin |
space-10 |
40px | 2.5rem | Large section gaps |
space-12 |
48px | 3rem | Hero vertical padding |
space-16 |
64px | 4rem | Page top/bottom padding |
space-20 |
80px | 5rem | Full-bleed hero height min |
4. Component Specs¶
4.1 Product Card (Portrait + Square Variants)¶
Portrait (lifestyle photo primary)
Width: auto (fills grid column)
Aspect ratio: 3:4 image container (portrait)
Border radius: 8px on card, 8px on image crop
Background: color-surface-raised
Shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04)
Hover shadow: 0 4px 16px rgba(0,0,0,0.14)
Hover: translateY(-2px), transition 150ms ease
Image container:
- aspect-ratio: 3/4
- overflow: hidden
- object-fit: cover
- lazy load with blur-up placeholder (10px wide LQIP, scale up)
- WebP format required
Overlay on hover (desktop) / always visible (mobile):
- Bottom gradient: linear-gradient(transparent 50%, rgba(0,0,0,0.55) 100%)
- Positioned absolute, full card width
Card body (below image, padding space-3 x space-4):
- Product title: text-md font-medium gray-900, 2-line max (line-clamp: 2)
- Retailer label: text-sm font-normal gray-500 ("Amazon", "Sephora", "ASOS")
- Price row: price text-md font-semibold gray-900 + optional strikethrough text-sm gray-500
CTA Button ("Shop [Retailer]"):
- Full width of card body
- Height: 40px
- Background: color-accent
- Text: text-sm font-semibold color-accent-text
- Border radius: 6px
- Hover: color-accent-dark, transition 100ms
- Top margin: space-2
Wishlist Heart:
- Position: absolute top-right corner of image, space-2 from edges
- Size: 32x32px tap target, 20x20px icon
- Background: rgba(255,255,255,0.85) circle, blur-sm backdrop
- Active fill: color-accent-light, stroke color-accent
- Inactive: gray-300 stroke, transparent fill
Square (product image)
Same as portrait except:
- aspect-ratio: 1/1
- No overlay gradient (product images are clean on white)
- Card background: white, border: 1px solid color-border
Sale Badge:
Position: absolute top-left of image, space-2 from edges
Size: auto (text fits)
Background: color-sale
Text: "SALE" or "-20%" — text-xs font-bold color-sale-text uppercase
Padding: space-1 space-2
Border radius: 4px
New Badge: Same spec, background color-new.
4.2 Category Tab Bar¶
Container:
- Width: 100%
- Height: 48px
- Background: color-bg
- Border-bottom: 2px solid color-border
- Sticky at top below creator header on scroll
- Overflow-x: auto, scrollbar hidden (mobile scroll)
Tab Item:
- Height: 100%
- Padding: 0 space-4
- Min-width: 80px
- Text: text-sm font-medium gray-700
- Cursor: pointer
- White-space: nowrap
Active Tab:
- Text: gray-900 font-semibold
- Border-bottom: 2px solid color-accent (overlaps container border)
- Color: color-accent
Hover Tab:
- Background: gray-50
- Text: gray-900
Max tabs: 6 visible. 7th+ collapses into "More ▾" dropdown.
Mobile: horizontal scroll, no "More" needed.
Reorderable feel: drag handle visible on creator edit mode only.
4.3 Search Bar¶
Container:
- Width: 100% (full-width on mobile), max-width 600px on desktop (centered)
- Height: 44px
- Background: gray-100
- Border: 1.5px solid transparent
- Border radius: 22px (pill)
- Focus border: color-accent
- Transition: border-color 100ms, background 100ms
Focus state:
- Background: white
- Border: 1.5px solid color-accent
- Box shadow: 0 0 0 3px color-accent at 20% opacity
Icon:
- Search icon (20x20px, gray-500) at left, space-3 padding
- Clear X icon at right when input has value
Input text:
- text-base gray-900
- Placeholder: gray-500
Dropdown suggestions:
- Background: white
- Border-radius: 12px
- Shadow: 0 8px 32px rgba(0,0,0,0.12)
- Row height: 44px, padding space-3 space-4
- Hover: gray-50 background
- Product thumbnail (32x32) + title + retailer label per row
4.4 Creator Header¶
Banner:
- Height: 200px desktop / 140px mobile
- Width: 100%
- Object-fit: cover
- Fallback gradient: linear-gradient(135deg, color-accent 0%, color-accent-dark 100%)
Avatar:
- Size: 88px desktop / 72px mobile
- Shape: circle
- Border: 3px solid white
- Position: overlapping bottom of banner by 50% (negative margin-top: -44px)
- Box shadow: 0 2px 8px rgba(0,0,0,0.15)
Creator Name:
- font-display text-3xl font-bold gray-900
- Below avatar, space-2 margin-top
Handle / Subdomain:
- text-sm gray-500 font-normal ("@username" or "storefront.com/username")
- space-1 below name
Bio:
- text-base gray-700
- Max 2 lines on collapsed, expand on "more" tap
- Max-width: 560px
Social Links Row:
- Icon set: Instagram, TikTok, YouTube, Pinterest, Twitter/X — 24x24px each
- Color: gray-500, hover: gray-900
- Gap: space-3
- Row margin-top: space-3
Accent color application:
- Tab bar active indicator
- CTA buttons
- Wishlist heart active
- Social link hover (optional; creator can disable)
- Verified checkmark badge (if applicable)
Layout (desktop): avatar left-aligned with name/bio/social links to its right in a flex row.
Layout (mobile): avatar centered, name/bio/social links centered below.
4.5 Wishlist Heart Icon¶
Container:
- 44x44px minimum tap target (accessibility)
- Visual: 24x24px heart SVG centered in tap area
States:
- Default (not wishlisted): outline heart, gray-300 stroke 2px, no fill
- Hover: gray-500 stroke, scale(1.1) transform 100ms
- Active / wishlisted: filled heart, color-accent fill, no stroke
- Tap animation: scale(1.3) for 120ms then bounce back to 1.0 (spring easing)
Context usage:
- On product card: absolute top-right of image (see card spec)
- On product detail page: inline next to price row, 28x28px icon
4.6 Mobile Bottom Nav¶
Container:
- Position: fixed bottom-0 left-0 right-0
- Height: 56px + safe-area-inset-bottom (env(safe-area-inset-bottom))
- Background: white
- Border-top: 1px solid color-border
- Display: none on desktop (768px+), flex on mobile
4 items (equal width flex children):
1. Home (house icon)
2. Categories (grid icon)
3. Search (magnifying glass)
4. Profile (person icon)
Each item:
- Flex column center
- Icon: 24x24px, gray-500 inactive / color-accent active
- Label: text-xs gray-500 inactive / color-accent active, margin-top: 2px
- Tap target: full flex child area (min 44px height)
Active state transition: icon + label color transition 100ms.
Badge (notification dot): 6px circle, color-sale, absolute top-right of icon.
4.7 Analytics Stat Card¶
Container:
- Background: white
- Border: 1px solid color-border
- Border radius: 12px
- Padding: space-5 space-6
- Min-width: 160px
Label:
- text-sm gray-500 font-medium uppercase tracking-wide
Value:
- text-2xl font-bold gray-900 font-mono
- Margin-top: space-1
Delta / trend:
- text-sm font-medium
- Up delta: color-success + "▲ +12.4%"
- Down delta: color-error + "▼ -3.1%"
- Neutral: gray-500
Sparkline (optional):
- 60px wide, 28px tall, below value
- Stroke: color-accent 2px, no fill
- No axes
Grid: 4 cards in a row desktop, 2x2 tablet, single col scroll mobile.
5. Page Wireframes¶
5.1 Homepage (Creator Storefront Root)¶
┌─────────────────────────────────────────────────────────────────┐
│ CREATOR HEADER │
│ [Banner image — full width, 200px tall] │
│ [Avatar overlapping bottom of banner] │
│ Creator Name @handle Bio text │
│ [IG] [TT] [YT] links │
├─────────────────────────────────────────────────────────────────┤
│ TAB BAR [Favorites] [Home] [Beauty] [Fashion] [More ▾] │
│ ──────────── ^active tab underline (accent color) │
├─────────────────────────────────────────────────────────────────┤
│ HERO / FEATURED ROW (optional — creator-configured) │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Full-width banner image + headline + CTA │ │
│ │ "My Favorite Fall Picks →" │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ PINNED COLLECTION "Editor's Picks" [See all →] │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ card │ │ card │ │ card │ │ card │ horizontal scroll │
│ └──────┘ └──────┘ └──────┘ └──────┘ │
│ │
│ ALL PRODUCTS [Sort: Popular ▾] [Filter] │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ card │ │ card │ │ card │ │
│ ├──────┤ ├──────┤ ├──────┤ 3 col desktop │
│ │ card │ │ card │ │ card │ 2 col tablet │
│ └──────┘ └──────┘ └──────┘ 1 col mobile │
│ [Load more] │
├─────────────────────────────────────────────────────────────────┤
│ FOOTER "Powered by [Platform]" | Privacy | Terms │
└─────────────────────────────────────────────────────────────────┘
Grid gap: space-5 between cards. Gutter: space-6 on desktop, space-4 on mobile.
Product grid uses CSS Grid: grid-template-columns: repeat(3, 1fr) desktop, repeat(2, 1fr) tablet 768px, repeat(1, 1fr) mobile 480px.
5.2 Category Page (Tab Content)¶
┌─────────────────────────────────────────────────────────────────┐
│ [CREATOR HEADER — sticky top on desktop, hidden on scroll mobile│
├─────────────────────────────────────────────────────────────────┤
│ TAB BAR (sticky) [Favorites] [Home] [►Beauty] [Fashion] │
├─────────────────────────────────────────────────────────────────┤
│ CATEGORY LABEL "Beauty" · 48 products │
│ │
│ SUB-COLLECTIONS (horizontal pill chips) │
│ [All] [Skincare] [Makeup] [Fragrance] [Tools] │
│ │
│ ACTIVE FILTER ROW (only shown when filters applied) │
│ [Price: $0-$100 ✕] [Sort: Newest ▾] [Clear all] │
│ │
│ PRODUCT GRID (same 3/2/1 col as homepage) │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ card │ │ card │ │ card │ │
│ └──────┘ └──────┘ └──────┘ │
│ │
│ [Load more / infinite scroll] │
└─────────────────────────────────────────────────────────────────┘
Sub-collection pills:
- Height: 32px
- Background: gray-100, active: color-accent text: white
- Border radius: 16px (pill)
- Padding: 0 space-3
- Font: text-sm font-medium
- Gap: space-2 horizontal
5.3 Product Detail Page¶
┌─────────────────────────────────────────────────────────────────┐
│ ← Back to [Creator Name]'s Shop [♡ Wishlist] │
├─────────────────────────────────────────────────────────────────┤
│ DESKTOP: 2-column split (50/50) │
│ ┌──────────────────────┐ ┌──────────────────────────────┐ │
│ │ │ │ Product Title │ │
│ │ PRIMARY IMAGE │ │ text-xl font-bold gray-900 │ │
│ │ (aspect 1:1 or │ │ │ │
│ │ 3:4 depending on │ │ Retailer: Amazon │ │
│ │ upload type) │ │ text-sm gray-500 │ │
│ │ │ │ │ │
│ │ [img] [img] [img] │ │ $89.99 ~~$129.99~~ SALE │ │
│ │ thumbnail strip │ │ │ │
│ └──────────────────────┘ │ ┌──────────────────────┐ │ │
│ │ │ BUY AT AMAZON │ │ │
│ │ │ (full-width CTA) │ │ │
│ │ │ 56px tall, accent │ │ │
│ │ └──────────────────────┘ │ │
│ │ │ │
│ │ Creator Note │ │
│ │ (optional rich text) │ │
│ │ │ │
│ │ Description │ │
│ │ text-base gray-700 │ │
│ └──────────────────────────────┘ │
├─────────────────────────────────────────────────────────────────┤
│ RELATED PRODUCTS "More from [Creator]" │
│ 4-up horizontal scroll row (same card spec) │
└─────────────────────────────────────────────────────────────────┘
MOBILE: single column, image full-width top, all content below.
Primary CTA button: sticky bottom bar on mobile, full-width, 56px tall.
CTA button (detail page):
Height: 56px
Background: color-accent
Text: "Buy at [Retailer]" — text-base font-bold color-accent-text uppercase tracking-wide
Border radius: 8px
Width: 100% (detail column or full-width sticky on mobile)
Icon: external link icon 16x16px after text
5.4 Creator Profile Header (Detailed Wireframe)¶
DESKTOP (max-width 1200px, centered):
┌─────────────────────────────────────────────────────────────────┐
│ [BANNER IMAGE — 100vw width, 200px height, object-fit:cover] │
└─────────────────────────────────────────────────────────────────┘
↑ -44px margin overlap ↓
┌─────────────────────────────────────────────────────────────────┐
│ [88px avatar] Creator Name (text-3xl display) │
│ @handle · text-sm gray-500 │
│ Bio text — max 2 lines, expand toggle │
│ [IG icon] [TT icon] [YT icon] [PIN icon] │
└─────────────────────────────────────────────────────────────────┘
MOBILE (stacked center-aligned):
┌────────────────────────────┐
│ [BANNER 140px] │
│ [72px avatar] │
│ Creator Name (centered) │
│ @handle │
│ Bio (centered, 2-line) │
│ [IG] [TT] [YT] │
└────────────────────────────┘
6. Grid and Breakpoints¶
| Name | Min-width | Columns | Gutter | Margin |
|---|---|---|---|---|
| mobile | 0px | 1 (product grid), 4 (nav) | 12px | 16px |
| tablet | 640px | 2 (product grid) | 16px | 24px |
| desktop | 1024px | 3 (product grid) | 20px | 32px |
| wide | 1280px | 4 (product grid, homepage only) | 20px | auto (centered max 1280px) |
7. Elevation / Shadow Scale¶
| Level | CSS | Usage |
|---|---|---|
shadow-xs |
0 1px 2px rgba(0,0,0,0.06) |
Tab bar, sticky nav |
shadow-sm |
0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04) |
Product cards |
shadow-md |
0 4px 16px rgba(0,0,0,0.10) |
Dropdowns, search suggestions |
shadow-lg |
0 8px 32px rgba(0,0,0,0.12) |
Modals, popovers |
shadow-xl |
0 20px 60px rgba(0,0,0,0.15) |
Fullscreen overlay panels |
8. Motion / Transition Tokens¶
| Token | Value | Usage |
|---|---|---|
transition-fast |
100ms ease | Button hover, icon hover |
transition-base |
150ms ease | Card lift, tab underline |
transition-slow |
250ms ease | Panel slide-in, modal fade |
easing-spring |
cubic-bezier(0.175, 0.885, 0.32, 1.275) |
Wishlist heart bounce |
easing-smooth |
cubic-bezier(0.4, 0, 0.2, 1) |
Most transitions |
Respect prefers-reduced-motion: all transforms and opacity transitions become instant (0ms) when user has this OS preference set.
9. Tailwind Config Tokens (for codebuilder-1)¶
// tailwind.config.js — extend section
module.exports = {
theme: {
extend: {
colors: {
accent: 'var(--color-accent)', // creator-override
'accent-light': 'var(--color-accent-light)',
'accent-dark': 'var(--color-accent-dark)',
sale: '#EF4444',
new: '#8B5CF6',
success: '#22C55E',
warning: '#F59E0B',
surface: '#F8F8F8',
border: '#E5E5E5',
},
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
display: ['"Playfair Display"', 'Georgia', 'serif'],
mono: ['ui-monospace', '"Cascadia Code"', 'monospace'],
},
borderRadius: {
card: '8px',
pill: '9999px',
input: '22px',
},
spacing: {
// 4px base scale is Tailwind default (4=1rem=16px), use as-is
},
boxShadow: {
card: '0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04)',
'card-hover': '0 4px 16px rgba(0,0,0,0.14)',
dropdown: '0 8px 32px rgba(0,0,0,0.12)',
modal: '0 20px 60px rgba(0,0,0,0.15)',
},
transitionDuration: {
fast: '100ms',
base: '150ms',
slow: '250ms',
},
},
},
}
CSS custom properties to inject into :root per creator:
:root {
--color-accent: #E91E8C; /* platform default; per-creator override */
--color-accent-light: #FCE4F4;
--color-accent-dark: #C1157A;
--color-accent-text: #FFFFFF;
}
/* Creator override via inline style or dynamic <style> injection: */
/* --color-accent: #2563EB; */
10. Design Decisions and Rationale¶
| Decision | Rationale |
|---|---|
| Neutral base + single accent override | Lets any creator color feel native without redesigning the layout. Research showed Amazon/LTK bake their own brand color in — we avoid that trap. |
| 3:4 portrait cards as primary | LTK research: lifestyle photos outperform product-only images for creator audiences. Square variant for pure product shots. |
| "Shop [Retailer]" button text | ShopMy research: naming the retailer on the button removes click hesitation. Shoppers know they're going to Amazon, not a scam site. |
| Sticky mobile CTA on detail page | Conversion optimization from ShopMy/LTK analysis: CTA must stay above the fold at all times on mobile. |
| Platform branding "Powered by" footer only | Creator Hero research + recommendation: platform brand must not compete with creator identity. |
| Inter + Playfair Display | Inter is the best-legibility neutral sans at small sizes (product titles, metadata). Playfair adds creator personality to the hero name without feeling generic. Both are free via Google Fonts. |
| Accent-color wishlist heart | Connects the brand color to the "save" action emotionally; makes the storefront feel personalized without extra UI chrome. |
| Bottom nav (mobile) — 4 items max | Research: any more than 4 bottom nav items causes thumb reach issues on modern tall phones. Profile = account + wishlist. |