Soft Viral Creator Card

/softViralCreatorCard
A tactile, creator-focused design system for expressive, trend-driven interfaces—narrow, warm, and visually plush. Features curated palettes, plush shadows, animated micro-interactions, and highly reusable, rounded components inspired by contemporary social media minimalism.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Soft Viral Creator Card Design System

A design language for trendy, expressive, and highly reusable creator-focused interfaces.

---

## Philosophy

> "Design should feel like a warm introduction—effortless, expressive, and immediately familiar."

This system creates interfaces that feel like a highly curated social media presence—approachable, beautifully lit, and perfectly contained. The design should feel tactile and premium, relying on a narrow, centered architecture, warm base tones, and vibrant, distinctive bursts of color. It is a modern homage to classic link-in-bio minimalism, elevated by plush shadows, ambient glows, and immaculate typography.

### Core Beliefs

1. **Centered and Contained** — The layout is narrow, anchored to the center of the screen. This creates an intimate, digestible reading experience synonymous with mobile-first creator hubs.
2. **Atmospheric Warmth** — Stark hospital whites are replaced with warm porcelains and powder lilacs. The background feels soft and physical.
3. **Distinctive Interactivity** — Calls to action act as "candy-like" focal points (blueberry gel, guava enamel, matcha chrome) that pop irresistibly against muted slate and pale gray.
4. **Plush Depth** — Depth is achieved through soft, diffused shadows and faint ambient background glows rather than harsh geometric drop shadows.
5. **Icon & Text Harmony** — Stacked pill buttons demand absolute optical alignment. An icon and its accompanying text must feel like a single, unified block of information.

### Strict Rules

* **Narrow Viewports Only** — Maximum content width is strictly capped (e.g., 440px max-w) to preserve the "creator card" aesthetic even on desktop.
* **No Sharp Corners** — Every card, button, and image container uses substantial border radii (pills, circles, and highly rounded rectangles).
* **Restrained Motion** — Animations must feel buoyant but grounded. Use subtle fade-and-lift micro-interactions; avoid dizzying spins or overly elastic bounces.
* **Harmonious Sizing** — Avatars and monograms remain small and polished to allow the display typography to act as the primary visual anchor.

---

## Color Palette

### Base & Canvas Scale

The foundation relies on soft, creamy neutrals and muted cools to create an inviting, studio-lit atmosphere, overlaid with an ultra-subtle grain.

```css
/* Canvas Backgrounds */
bg-stone-50           /* Warm white canvas base (#fafaf9) */
bg-rose-50/50         /* Porcelain tint for alternating cards (#fff1f2) */
bg-slate-50           /* Pale gray secondary container (#f8fafc) */
bg-fuchsia-50/60      /* Powder lilac ambient zones */

/* Borders & Dividers */
border-stone-200      /* Standard structural hairline border */
border-slate-200/60   /* Ultra-faint dividers for social rows */
border-white/40       /* Inner highlight borders for "enamel" effect */

/* Typography Scale */
text-stone-900        /* Primary display text, names, major headlines */
text-slate-600        /* Muted slate for bios, secondary descriptions */
text-slate-400        /* Faint metadata, inactive social icons */
text-stone-400        /* Subtle timestamps, footer marks */

```

### The "Gel & Chrome" Accents

Unlike standard primary colors, these accents mimic high-end materials—glossy, vibrant, and tactile. Used exclusively for CTAs, badges, and ambient glows.

```css
/* Blueberry Gel (Cool CTA) */
bg-indigo-600         /* Primary active pill button */
text-indigo-600       /* Focused links, icon highlights */
shadow-indigo-500/20  /* Plush ambient shadow for Blueberry elements */

/* Guava Enamel (Warm CTA) */
bg-rose-500           /* High-conversion highlights, subscribe buttons */
text-rose-500         /* Expressive tags, numerical notifications */
shadow-rose-400/20    /* Plush ambient shadow for Guava elements */

/* Matcha Chrome (Success/Subtle CTA) */
bg-emerald-400        /* Secondary vibrant action, verification checks */
text-emerald-500      /* Availability status, positive metrics */
shadow-emerald-400/20 /* Plush ambient shadow for Matcha elements */

```

---

## Typography

The typography leverages modern, geometric sans-serifs (Satoshi, Plus Jakarta Sans, Switzer) to feel native to contemporary social platforms. Headings are tightly tracked for punchiness, while body copy is sized generously for effortless readability.

### Font Family Preference
*Primary:* `font-satoshi` or `font-jakarta` (Plus Jakarta Sans)

### Font Weights

```css
font-medium      /* Standard bio text, social labels, soft body copy */
font-semibold    /* Stacked pill button text, secondary section headers */
font-bold        /* Display names, primary profile titles */
font-extrabold   /* Monograms, high-impact numerical stats */

```

### Font Size & Tracking Scale

```css
/* Headings (Tight Tracking) */
text-3xl tracking-tight font-bold     /* Profile Display Name */
text-2xl tracking-tight font-bold     /* Section/Card Titles */
text-xl tracking-tight font-semibold  /* Featured Content Headings */

/* Body & Buttons (Readable, Normal Tracking) */
text-base leading-relaxed font-medium /* Concise Bio text (16px) */
text-[15px] font-semibold             /* Primary CTA Pill Button text */
text-sm font-medium                   /* Social row icon labels (14px) */

/* Metadata */
text-xs tracking-wide uppercase       /* Tiny muted tags, powder lilac badges */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Avatar Monogram | 2xl | extrabold | stone-900 | tight | uppercase |
| Profile Name | 3xl | bold | stone-900 | tight | none |
| Bio Paragraph | base | medium | slate-600 | normal | none |
| Pill Button | [15px] | semibold | stone-900 / white | normal | none |
| Tiny Pill Tag | xs | medium | fuchsia-800 | wide | none |

---

## Animation System

### Core Philosophy: The Restrained Lift

Motion should emulate lifting a high-quality, physical card off a table. It is fluid, frictionless, and relies on subtle opacity and Y-axis shifts.

### Initial Load Transition (Fade & Lift)

Elements cascade down the center column sequentially, fading in and sliding up slightly.

```tsx
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1], staggerChildren: 0.08 }}

```

### Micro-Interactions (The Plush Hover)

When hovering over stacked pills or social icons, the element physically lifts, expanding its plush shadow slightly without harsh scaling.

```tsx
whileHover={{ 
  y: -2, 
  scale: 1.01,
  boxShadow: "0px 12px 24px -8px rgba(79, 70, 229, 0.15)" // Blueberry shadow
}}
transition={{ type: "spring", stiffness: 400, damping: 25 }}

```

---

## UI Components

### Subtle Texture (Film Grain Overlay)

To prevent the warm canvases from feeling like flat digital screens, a fixed, faint grain sits above the background but below the cards.

```tsx
<div 
  className="pointer-events-none fixed inset-0 z-0 opacity-[0.03] mix-blend-multiply"
  style={{ backgroundImage: "url('/noise-texture.png')" }} 
/>

```

### Faint Ambient Glow

Placed behind the primary avatar or the central card cluster to add atmospheric depth.

```tsx
<div className="absolute top-10 left-1/2 -translate-x-1/2 w-64 h-64 bg-indigo-400/20 rounded-full blur-3xl pointer-events-none z-0" />

```

### The Stacked Pill Button

The core interactive unit of the system. Perfectly rounded, perfectly aligned.

```tsx
<button className="relative w-full group flex items-center justify-between p-4 bg-white border border-stone-100 rounded-full shadow-[0_2px_8px_-4px_rgba(0,0,0,0.05)] hover:shadow-[0_8px_20px_-6px_rgba(0,0,0,0.08)] transition-all duration-300">
  <div className="flex items-center gap-3">
    <Icon className="w-5 h-5 text-slate-400 group-hover:text-indigo-600 transition-colors" />
    <span className="text-[15px] font-semibold text-stone-900">Watch the latest vlog</span>
  </div>
  <ArrowRightIcon className="w-4 h-4 text-slate-300 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300" />
</button>

```

---

## Component Catalog

### Layout Architecture

The structural container that forces the narrow, centered visual aesthetic.

```tsx
// Main Canvas
"min-h-screen bg-stone-50 flex flex-col items-center justify-start py-12 px-4 relative overflow-hidden"

// Central Content Column
"w-full max-w-[420px] flex flex-col items-center gap-6 z-10 relative"

```

### Identity Elements

```tsx
// Small Avatar Image
"w-20 h-20 rounded-full border-[3px] border-white shadow-md object-cover"

// Avatar Monogram
"w-20 h-20 rounded-full bg-slate-100 border-[3px] border-white shadow-md flex items-center justify-center text-2xl font-extrabold text-stone-900 tracking-tight"

```

### Social Row

```tsx
// Spaced Social Container
"flex items-center justify-center gap-4 w-full py-2"

// Circular Social Icon Button
"w-12 h-12 rounded-full bg-white border border-stone-100 shadow-sm flex items-center justify-center text-slate-600 hover:text-rose-500 hover:shadow-rose-500/10 hover:-translate-y-1 transition-all duration-300"

```

### Highlight/CTA Pills

```tsx
// The Blueberry Gel CTA
"w-full p-4 rounded-full bg-indigo-600 text-white font-semibold text-[15px] shadow-[0_8px_20px_-6px_rgba(79,70,229,0.4)] hover:bg-indigo-700 hover:-translate-y-0.5 transition-all flex items-center justify-center gap-2"

// The Matcha Chrome Tag
"px-3 py-1 bg-emerald-50 border border-emerald-100 text-emerald-600 rounded-full text-xs font-semibold flex items-center gap-1.5"

```

### Content Cards

```tsx
// Standard Media/Link Card
"w-full bg-white rounded-3xl p-5 border border-stone-100 shadow-[0_4px_16px_-8px_rgba(0,0,0,0.04)]"

```

---

## Quality Checklist

* [ ] Is the entire layout restricted to a narrow, centered maximum width (e.g., 420px-440px)?
* [ ] Are all avatars, cards, and buttons utilizing fully rounded corners (`rounded-full` or `rounded-3xl`)?
* [ ] Does the display heading typography feature tightened tracking (`tracking-tight`)?
* [ ] Is the background a warm white/porcelain rather than pure `#ffffff` or `#000000`?
* [ ] Are hover state shadows plush and tinted (e.g., matching the accent color) instead of harsh and gray?
* [ ] Do stacked pill buttons maintain strict horizontal alignment between their leading icon and text?
* [ ] Is the ambient noise/grain layer subtle enough to not distract from the primary content?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm whites, porcelains, powder lilacs, and muted slates.
* Saturated "candy-like" accent colors (Blueberry, Guava, Matcha) used exclusively for buttons, tags, or glows.
* Plush, highly diffused drop shadows.
* Fully rounded border radii (`rounded-full`) for interactive elements.
* Bouncy, physical-feeling spring transitions for hover states (fade and lift).
* Ultra-subtle film grain overlay.

### ✗ Not Allowed

* Wide, full-screen grid layouts or sprawling desktop sidebars.
* Sharp, 0px border radii on any component.
* Harsh, dark drop shadows with low blur values (e.g., `box-shadow: 4px 4px 0px black`).
* Loose/wide tracking on primary display names or section headers.
* Cold, stark grays or pure digital white backgrounds.