Porcelain iOS Capsule Hub

/porcelainIosCapsuleHub
A premium, tactile design system for refined personal hubs, link-in-bio pages, and creator cards—centered, capsule-based, and quietly elegant, inspired by modern iOS and editorial principles, with restrained color and motion.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Porcelain iOS Capsule Hub Design System

A refined, reusable design language for premium link-in-bio pages, creator hubs, personal cards, and compact editorial profiles.

---

## Philosophy

> “A personal page should feel like a polished object: calm, tactile, centered, and unmistakably intentional.”

Porcelain iOS Capsule Hub combines the softness of modern iOS surfaces with the structure of an editorial personal card. The interface should feel light, elegant, and quietly premium: a centered stack of rounded capsules, crisp icons, subtle depth, and carefully measured type.

The page is not a landing page, dashboard, or split editorial layout. It is a contained personal hub: narrow, focused, reusable, and instantly scannable.

### Core Beliefs

1. **The page is a card, not a website** — Every layout should feel like a beautifully composed personal object centered on the canvas.
2. **Capsules create rhythm** — Rounded, stacked components form the visual identity: links, metadata, tags, social rows, and CTAs all share a soft pill-like geometry.
3. **Polish comes from restraint** — Borders, shadows, highlights, and motion remain quiet. Nothing should feel glossy, loud, or promotional.
4. **The accent is a signature** — A single distinctive color gives the page identity without overpowering the porcelain foundation.
5. **Editorial order over social chaos** — Information is arranged with compact hierarchy, consistent spacing, and deliberate grouping.
6. **Touch should feel physical** — Hover, tap, and focus states respond with slight lift, soft press, or inner highlight changes.

### Strict Rules

* **Centered narrow container only** — Desktop layouts must never become split-screen or multi-column hero layouts.
* **No heavy cards** — Avoid thick shadows, dark borders, harsh panels, or floating blocks.
* **No loud gradients** — Gradients may only be ambient, low-opacity, and surface-enhancing.
* **No saturated rainbow UI** — Use one primary accent plus neutrals. Social icons may remain monochrome unless brand recognition is required.
* **No sharp corners on primary elements** — Links, CTAs, profile modules, and social buttons use full or near-full rounding.
* **No cluttered metadata** — Metadata must remain compact, low-contrast, and visually subordinate.
* **No oversized web-navigation patterns** — Avoid navbars, sidebars, mega menus, tab bars, and dashboard chrome.

---

## Design Principles

### 1. Centered Personal Object

The interface is composed around a single vertical axis. On desktop, the content sits in a narrow centered container. On mobile, it remains full-width with generous side padding.

```css
/* Desktop Page Shell */
max-w-[440px]
mx-auto
px-5

/* Mobile Page Shell */
w-full
px-4
```

Recommended content width:

| Context | Width |
| --- | --- |
| Mobile | `100%` with `16px–20px` side padding |
| Small desktop | `400px–440px` |
| Large desktop | `420px–480px` maximum |
| Modal/card preview | `360px–420px` |

### 2. Stacked Capsule Architecture

All primary modules stack vertically with consistent spacing and rounded geometry.

```css
space-y-3
rounded-full
rounded-[28px]
rounded-[32px]
```

The system should feel like a sequence of soft, tappable capsules rather than boxes.

### 3. Porcelain Surface Logic

Surfaces are layered using subtle value shifts:

1. **Page canvas** — porcelain white or cool pearl.
2. **Main profile card** — translucent pearl/white.
3. **Capsules** — soft white, greige, or frosted pearl.
4. **Interactive states** — slight lift, brighter surface, stronger border.
5. **Accent moments** — primary CTA, active link, tiny status indicator.

### 4. Compact Editorial Hierarchy

The system uses restrained type scale, controlled leading, and compact metadata.

Profile names feel editorial and refined. Usernames, timestamps, locations, availability notes, and small stats appear in muted mono or compact sans text.

### 5. Tactile iOS Restraint

Interaction should feel soft and responsive:

* Hover: slight lift, border brightening, ambient shadow increase.
* Tap: scale down very slightly.
* Focus: accent ring with soft halo.
* Load: fade in with minimal vertical movement.

---

## Color Palette

The palette is built from porcelain white, cool pearl, pale greige, soft silver, ink navy, and one distinctive accent.

The default accent for this system is **Glazed Violet**: a sophisticated blue-violet with enough color to feel memorable while remaining polished.

---

## Core Color Tokens

```css
:root {
  /* Canvas */
  --porcelain-white: #FCFBF8;
  --cool-pearl: #F5F6F4;
  --pearl-mist: #EEF0ED;
  --pale-greige: #E7E2DA;
  --warm-greige: #D8D1C7;

  /* Structure */
  --soft-silver: #C9CED3;
  --silver-line: #DDE1E3;
  --frost-line: #E9ECEC;
  --white-line: rgba(255, 255, 255, 0.72);

  /* Text */
  --ink-navy: #111827;
  --deep-navy: #1D2430;
  --slate-ink: #384150;
  --mist-text: #6F7782;
  --silver-text: #9AA2AA;
  --disabled-text: #C0C6CC;

  /* Primary Accent: Glazed Violet */
  --glazed-violet-50: #F4F1FF;
  --glazed-violet-100: #E9E2FF;
  --glazed-violet-200: #D8CCFF;
  --glazed-violet-300: #BFAEFF;
  --glazed-violet-400: #9B84F4;
  --glazed-violet-500: #7C63DC;
  --glazed-violet-600: #654BC6;
  --glazed-violet-700: #5239A6;
  --glazed-violet-800: #412E82;
  --glazed-violet-900: #30235F;

  /* Feedback: restrained and optional */
  --soft-red-50: #FFF1F1;
  --soft-red-600: #C24141;
}
```

---

## Tailwind-Style Color Map

```css
/* Backgrounds */
bg-porcelain          /* #FCFBF8 — main canvas */
bg-pearl              /* #F5F6F4 — secondary canvas */
bg-pearl-mist         /* #EEF0ED — soft section area */
bg-greige             /* #E7E2DA — muted decorative panels */
bg-white/80           /* translucent card surfaces */
bg-white/65           /* frosted capsule surfaces */

/* Borders */
border-frost          /* #E9ECEC — default ultra-soft border */
border-silver-line    /* #DDE1E3 — visible component boundaries */
border-soft-silver    /* #C9CED3 — hover/focus-adjacent structure */
border-white/70       /* inner highlight and frosted edges */

/* Text */
text-ink              /* #111827 — primary name and headlines */
text-deep-navy        /* #1D2430 — secondary headings */
text-slate-ink        /* #384150 — link labels and body */
text-mist             /* #6F7782 — metadata */
text-silver           /* #9AA2AA — icons, timestamps, auxiliary text */
text-disabled         /* #C0C6CC — disabled states */

/* Accent: Glazed Violet */
text-accent           /* #654BC6 */
bg-accent             /* #654BC6 */
border-accent         /* #654BC6 */
bg-accent-soft        /* #F4F1FF */
border-accent-soft    /* #D8CCFF */
ring-accent/20        /* focus halo */
```

---

## Accent Variants

The system supports one accent at a time. Do not combine these accents within the same page.

### Default Accent: Glazed Violet

Best for refined creators, writers, designers, consultants, stylists, and premium personal brands.

```css
--accent-50: #F4F1FF;
--accent-100: #E9E2FF;
--accent-300: #BFAEFF;
--accent-500: #7C63DC;
--accent-600: #654BC6;
--accent-700: #5239A6;
```

### Alternative Accent: Eucalyptus Blue

Best for wellness, lifestyle, architecture, photography, travel, and calm professional identities.

```css
--accent-50: #EEF8F8;
--accent-100: #D7EEEE;
--accent-300: #9FCFCC;
--accent-500: #5AA6A2;
--accent-600: #3F8D8A;
--accent-700: #32716F;
```

### Alternative Accent: Burnt Nectarine

Best for food, music, creative studios, personal shops, warm editorial identities, and energetic creators.

```css
--accent-50: #FFF4EE;
--accent-100: #FFE3D2;
--accent-300: #FFB184;
--accent-500: #F47A3D;
--accent-600: #D95F26;
--accent-700: #B84A1E;
```

---

## Color Usage Rules

### Background Composition

```css
/* Main Page */
"min-h-screen bg-[#FCFBF8] text-[#111827]"

/* Ambient Pearl Canvas */
"bg-[radial-gradient(circle_at_top,#ffffff_0%,#F5F6F4_42%,#FCFBF8_100%)]"

/* Frosted Main Card */
"bg-white/70 backdrop-blur-xl border border-white/70 shadow-[0_24px_80px_rgba(17,24,39,0.08)]"

/* Capsule Surface */
"bg-white/72 border border-[#E9ECEC] shadow-[inset_0_1px_0_rgba(255,255,255,0.82)]"
```

### Text Contrast

| Element | Color |
| --- | --- |
| Profile name | `text-ink` |
| Username | `text-mist` or `text-slate-ink` |
| Bio | `text-slate-ink` |
| Metadata | `text-mist` |
| Icon default | `text-silver` |
| Icon hover | `text-ink` |
| Primary CTA text | `text-white` |
| Secondary CTA text | `text-slate-ink` |

### Border Logic

| Use Case | Border |
| --- | --- |
| Default capsule | `border-frost` |
| Main card | `border-white/70` |
| Hover capsule | `border-silver-line` |
| Featured capsule | `border-accent/25` |
| Focused input/CTA | `border-accent` |
| Divider line | `border-frost/80` |

### Shadow Logic

Shadows must be soft, ambient, and low-opacity.

```css
/* Main Card Shadow */
shadow-[0_24px_80px_rgba(17,24,39,0.08)]

/* Capsule Shadow */
shadow-[0_8px_24px_rgba(17,24,39,0.045)]

/* Hover Shadow */
shadow-[0_12px_32px_rgba(17,24,39,0.07)]

/* Inner Highlight */
shadow-[inset_0_1px_0_rgba(255,255,255,0.85)]
```

Avoid:

```css
shadow-xl
shadow-2xl
shadow-black/30
drop-shadow-lg
```

---

## Typography

Porcelain iOS Capsule Hub uses modern grotesk sans typography with optional mono details. Type should feel contemporary, compact, and premium, with enough editorial refinement for a personal card.

### Recommended Font Pairings

| Primary Sans | Mono Detail |
| --- | --- |
| Neue Montreal | Geist Mono |
| Geist | Geist Mono |
| Inter | IBM Plex Mono |
| Söhne | Söhne Mono |
| Manrope | JetBrains Mono |

### Font Stack

```css
font-family:
  "Neue Montreal",
  "Geist",
  "Inter",
  "Söhne",
  "Manrope",
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  sans-serif;
```

### Mono Detail Stack

```css
font-family:
  "Geist Mono",
  "IBM Plex Mono",
  "JetBrains Mono",
  "SF Mono",
  ui-monospace,
  monospace;
```

---

## Font Weights

```css
font-normal      /* Bio text, capsule descriptions, supporting copy */
font-medium      /* Link labels, usernames, compact UI labels */
font-semibold    /* Profile name, primary CTAs, featured links */
/* font-bold should be avoided except for rare numeric counters */
```

### Weight Rules

* Profile names use `font-semibold`, never heavy black weights.
* Link labels use `font-medium` or `font-semibold`.
* Metadata uses `font-medium` at small sizes to remain legible.
* Mono usernames use `font-medium` with slight negative or normal tracking.
* Large display text should not exceed `font-semibold`.

---

## Font Size Scale

```css
text-[10px]      /* tiny metadata dots, compact status labels */
text-[11px]      /* mono usernames, small timestamps, social counts */
text-xs          /* metadata, tag text, secondary capsule labels */
text-[13px]      /* compact bio, small link descriptions */
text-sm          /* standard link labels, buttons, input text */
text-[15px]      /* primary capsule text, refined body text */
text-base        /* profile bio emphasis, featured links */
text-lg          /* compact profile name on mobile */
text-xl          /* default profile name */
text-2xl         /* prominent profile name */
text-3xl         /* rare editorial header inside preview/editor */
```

---

## Line Height

```css
leading-none       /* icon-only pills, counters */
leading-tight      /* profile name, compact headings */
leading-snug       /* bio text and link descriptions */
leading-normal     /* default UI body text */
leading-relaxed    /* longer bio text only */
```

Recommended:

| Element | Size | Line Height |
| --- | --- | --- |
| Profile Name | `text-xl` or `text-2xl` | `leading-tight` |
| Username | `text-xs` | `leading-none` |
| Bio | `text-sm` or `text-[15px]` | `leading-snug` |
| Link Label | `text-sm` or `text-[15px]` | `leading-tight` |
| Link Description | `text-xs` | `leading-snug` |
| Metadata | `text-[11px]` | `leading-none` |

---

## Letter Spacing & Transforms

```css
tracking-[-0.03em]   /* profile name */
tracking-[-0.02em]   /* compact headings */
tracking-[-0.01em]   /* link labels */
tracking-normal      /* bio and default text */
tracking-wide        /* tiny capsule metadata */
tracking-widest      /* optional uppercase section labels */

uppercase            /* only for tiny structural labels and metadata groups */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Profile Name | `text-2xl` | `semibold` | `text-ink` | `-0.03em` | none |
| Username | `text-xs` | `medium` | `text-mist` | normal | none |
| Bio | `text-sm` | `normal` | `text-slate-ink` | normal | none |
| Section Label | `text-[10px]` | `semibold` | `text-silver` | `widest` | uppercase |
| Link Label | `text-[15px]` | `medium` | `text-ink` | `-0.01em` | none |
| Link Detail | `text-xs` | `normal` | `text-mist` | normal | none |
| Primary CTA | `text-sm` | `semibold` | white | normal | none |
| Metadata Pill | `text-[11px]` | `medium` | `text-mist` | normal | none |

---

## Layout System

### Page Shell

The full page uses vertical centering only when content is short. For longer creator hubs, content begins near the top with generous breathing room.

```tsx
<div className="min-h-screen bg-[#FCFBF8] px-4 py-8 sm:py-12">
  <main className="mx-auto w-full max-w-[440px]">
    {/* Profile card and capsules */}
  </main>
</div>
```

### Desktop Rules

```css
max-w-[440px]
mx-auto
px-5
py-12
```

* No split hero layouts.
* No secondary sidebar.
* No card grid on desktop.
* No horizontal navigation bar.
* The design remains vertically stacked even on wide screens.

### Mobile Rules

```css
px-4
pt-6
pb-8
max-w-none
```

* Capsules should be comfortably tappable.
* Primary link height should be at least `52px`.
* Social icons should be at least `40px × 40px`.
* Avoid placing more than four tiny controls in one horizontal row.

---

## Spacing System

The spacing scale is compact but breathable.

```css
gap-1       /* icon and tiny label spacing */
gap-1.5     /* metadata dot groups */
gap-2       /* icon + text inside capsules */
gap-2.5     /* social icon row */
gap-3       /* stacked link capsules */
gap-4       /* section separation */
gap-5       /* profile header spacing */
gap-6       /* major card regions */
gap-8       /* page-level vertical rhythm */
```

### Recommended Spacing

| Relationship | Spacing |
| --- | --- |
| Avatar to name | `mt-4` |
| Name to username | `mt-1` |
| Username to bio | `mt-3` |
| Bio to metadata row | `mt-4` |
| Header to social row | `mt-5` |
| Social row to links | `mt-6` |
| Link stack gap | `gap-3` |
| Section label to first item | `mt-2` |
| Main card padding | `p-5` or `p-6` |
| Capsule horizontal padding | `px-4` or `px-5` |
| Capsule vertical padding | `py-3.5` to `py-4` |

---

## Radius System

Rounded capsules define the system.

```css
rounded-[18px]     /* small tags and compact metadata pills */
rounded-[22px]     /* small cards and input capsules */
rounded-[26px]     /* standard link capsules */
rounded-[28px]     /* large capsules */
rounded-[32px]     /* main profile card */
rounded-full       /* CTAs, social buttons, avatar rings */
```

### Radius Rules

| Component | Radius |
| --- | --- |
| Avatar | `rounded-full` |
| Main card | `rounded-[32px]` |
| Link capsule | `rounded-[26px]` or `rounded-full` |
| Primary CTA | `rounded-full` |
| Social icon button | `rounded-full` |
| Metadata pill | `rounded-full` |
| Input | `rounded-full` |
| Toast | `rounded-[22px]` |
| Modal preview | `rounded-[32px]` |

---

## Surface System

### Porcelain Canvas

```css
"min-h-screen bg-[#FCFBF8]"
```

### Ambient Pearl Canvas

A soft radial gradient is permitted if very subtle.

```css
"bg-[radial-gradient(circle_at_top,#FFFFFF_0%,#F5F6F4_44%,#FCFBF8_100%)]"
```

### Main Profile Card

```css
"rounded-[32px] border border-white/70 bg-white/70 p-5 shadow-[0_24px_80px_rgba(17,24,39,0.08)] backdrop-blur-xl"
```

### Frosted Capsule

```css
"rounded-[26px] border border-[#E9ECEC] bg-white/72 shadow-[inset_0_1px_0_rgba(255,255,255,0.86),0_8px_24px_rgba(17,24,39,0.045)] backdrop-blur-xl"
```

### Greige Capsule

```css
"rounded-[26px] border border-[#DDE1E3] bg-[#F5F6F4]/85 shadow-[inset_0_1px_0_rgba(255,255,255,0.72)]"
```

### Featured Accent Capsule

```css
"rounded-[26px] border border-[#D8CCFF] bg-[#F4F1FF]/72 shadow-[inset_0_1px_0_rgba(255,255,255,0.86),0_10px_30px_rgba(101,75,198,0.10)]"
```

---

## Iconography

Icons should be crisp, minimal, and visually balanced within circular or capsule containers.

### Icon Style

```css
stroke-width: 1.75;
width: 18px;
height: 18px;
```

### Icon Rules

* Use outline icons for default UI.
* Use filled icons only for recognizable social brands if necessary.
* Keep social icons monochrome by default.
* Use accent color only for selected, featured, or primary actions.
* Align icons optically, not mathematically, when brand marks differ in shape.
* Avoid decorative illustration icons inside primary links.

### Social Icon Button

```tsx
<a
  className="
    flex h-10 w-10 items-center justify-center rounded-full
    border border-[#E9ECEC] bg-white/72 text-[#6F7782]
    shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]
    transition-all duration-200 ease-out
    hover:-translate-y-0.5 hover:border-[#DDE1E3] hover:bg-white hover:text-[#111827]
    active:translate-y-0 active:scale-[0.97]
  "
>
  <Icon className="h-[18px] w-[18px]" />
</a>
```

---

## Animation System

### Core Philosophy: The Gentle Lift

Motion should feel calm, fast, and tactile. Elements fade into place, lift slightly on hover, and press softly on tap.

No exaggerated bouncing, long transitions, spinning decorative elements, or dramatic scroll reveals.

---

## Page Entrance

```tsx
initial={{ opacity: 0, y: 8, filter: "blur(6px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{ duration: 0.34, ease: [0.22, 1, 0.36, 1] }}
```

### Staggered Capsule Entrance

```tsx
const container = {
  hidden: { opacity: 1 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.045,
      delayChildren: 0.08
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 8, filter: "blur(5px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: {
      duration: 0.28,
      ease: [0.22, 1, 0.36, 1]
    }
  }
};
```

---

## Hover Motion

```css
transition-all
duration-200
ease-out
hover:-translate-y-0.5
hover:shadow-[0_12px_32px_rgba(17,24,39,0.07)]
```

### Tap Feedback

```css
active:translate-y-0
active:scale-[0.985]
```

### Primary CTA Tap

```css
active:scale-[0.975]
```

### Icon Button Tap

```css
active:scale-[0.94]
```

---

## Focus Motion

Focus states use a soft accent halo without becoming harsh.

```css
focus-visible:outline-none
focus-visible:ring-4
focus-visible:ring-[#654BC6]/15
focus-visible:border-[#654BC6]/45
```

---

## Reduced Motion

```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
```

---

## Component Catalog

---

## Page Container

The container is the foundation of the system. It centers the entire personal hub and prevents desktop layouts from expanding too wide.

```tsx
<section className="min-h-screen bg-[radial-gradient(circle_at_top,#FFFFFF_0%,#F5F6F4_42%,#FCFBF8_100%)] px-4 py-8 sm:py-12">
  <main className="mx-auto w-full max-w-[440px]">
    {/* Hub content */}
  </main>
</section>
```

### Rules

* Maximum width should stay between `400px` and `480px`.
* Use a single vertical stack.
* Avoid desktop-only side panels.
* Maintain consistent vertical rhythm through `space-y-3`, `space-y-4`, and `space-y-6`.

---

## Main Profile Card

The profile card is the primary object. It holds avatar, name, username, bio, metadata, and social icons.

```tsx
<div
  className="
    rounded-[32px] border border-white/70 bg-white/72 p-5
    shadow-[0_24px_80px_rgba(17,24,39,0.08)]
    backdrop-blur-xl
  "
>
  {/* Profile content */}
</div>
```

### Compact Profile Header

```tsx
<header className="flex flex-col items-center text-center">
  <div className="relative">
    <img
      src="/avatar.jpg"
      className="
        h-24 w-24 rounded-full object-cover
        ring-1 ring-[#DDE1E3]
        shadow-[0_10px_30px_rgba(17,24,39,0.10)]
      "
    />
    <span
      className="
        absolute bottom-1 right-1 h-4 w-4 rounded-full
        border-2 border-white bg-[#654BC6]
        shadow-[0_4px_12px_rgba(101,75,198,0.28)]
      "
    />
  </div>

  <h1 className="mt-4 text-2xl font-semibold leading-tight tracking-[-0.03em] text-[#111827]">
    Creator Name
  </h1>

  <p className="mt-1 font-mono text-xs font-medium text-[#6F7782]">
    @username
  </p>

  <p className="mt-3 max-w-[32ch] text-sm leading-snug text-[#384150]">
    Short refined bio text goes here with compact line length and calm spacing.
  </p>
</header>
```

---

## Avatar System

### Standard Avatar

```css
"h-24 w-24 rounded-full object-cover ring-1 ring-[#DDE1E3] shadow-[0_10px_30px_rgba(17,24,39,0.10)]"
```

### Large Avatar

```css
"h-28 w-28 rounded-full object-cover ring-1 ring-white/80 shadow-[0_14px_40px_rgba(17,24,39,0.12)]"
```

### Mini Avatar

```css
"h-9 w-9 rounded-full object-cover ring-1 ring-[#E9ECEC]"
```

### Avatar Ring Accent

```css
"ring-2 ring-[#654BC6]/20"
```

### Availability Dot

```css
"absolute bottom-1 right-1 h-4 w-4 rounded-full border-2 border-white bg-[#654BC6]"
```

---

## Metadata Row

Metadata rows are compact and low-contrast. Use them for location, role, availability, small stats, or update status.

```tsx
<div className="mt-4 flex flex-wrap items-center justify-center gap-1.5">
  <span className="rounded-full border border-[#E9ECEC] bg-white/65 px-2.5 py-1 text-[11px] font-medium text-[#6F7782]">
    Los Angeles
  </span>
  <span className="rounded-full border border-[#E9ECEC] bg-white/65 px-2.5 py-1 text-[11px] font-medium text-[#6F7782]">
    Designer
  </span>
  <span className="rounded-full border border-[#E9ECEC] bg-white/65 px-2.5 py-1 text-[11px] font-medium text-[#6F7782]">
    Available
  </span>
</div>
```

### Metadata Pill

```css
"rounded-full border border-[#E9ECEC] bg-white/65 px-2.5 py-1 text-[11px] font-medium text-[#6F7782]"
```

### Accent Metadata Pill

```css
"rounded-full border border-[#D8CCFF] bg-[#F4F1FF] px-2.5 py-1 text-[11px] font-semibold text-[#654BC6]"
```

---

## Social Icon Row

Social icons should be crisp, evenly spaced, and contained in circular tactile buttons.

```tsx
<div className="mt-5 flex items-center justify-center gap-2.5">
  <a className="flex h-10 w-10 items-center justify-center rounded-full border border-[#E9ECEC] bg-white/72 text-[#6F7782] shadow-[inset_0_1px_0_rgba(255,255,255,0.86)] transition-all duration-200 ease-out hover:-translate-y-0.5 hover:bg-white hover:text-[#111827] active:scale-[0.94]">
    <InstagramIcon className="h-[18px] w-[18px]" />
  </a>
  <a className="flex h-10 w-10 items-center justify-center rounded-full border border-[#E9ECEC] bg-white/72 text-[#6F7782] shadow-[inset_0_1px_0_rgba(255,255,255,0.86)] transition-all duration-200 ease-out hover:-translate-y-0.5 hover:bg-white hover:text-[#111827] active:scale-[0.94]">
    <XIcon className="h-[18px] w-[18px]" />
  </a>
  <a className="flex h-10 w-10 items-center justify-center rounded-full border border-[#E9ECEC] bg-white/72 text-[#6F7782] shadow-[inset_0_1px_0_rgba(255,255,255,0.86)] transition-all duration-200 ease-out hover:-translate-y-0.5 hover:bg-white hover:text-[#111827] active:scale-[0.94]">
    <LinkedInIcon className="h-[18px] w-[18px]" />
  </a>
</div>
```

### Social Icon Sizes

| Context | Size |
| --- | --- |
| Compact | `h-9 w-9` |
| Default | `h-10 w-10` |
| Prominent | `h-11 w-11` |
| Icon glyph | `h-[17px] w-[17px]` to `h-[19px] w-[19px]` |

---

## Link Capsule

The link capsule is the core reusable unit. It should feel tappable, clean, and softly elevated.

```tsx
<a
  className="
    group flex min-h-[56px] items-center justify-between gap-3
    rounded-[26px] border border-[#E9ECEC] bg-white/72 px-4 py-3.5
    text-[#111827]
    shadow-[inset_0_1px_0_rgba(255,255,255,0.86),0_8px_24px_rgba(17,24,39,0.045)]
    backdrop-blur-xl
    transition-all duration-200 ease-out
    hover:-translate-y-0.5 hover:border-[#DDE1E3] hover:bg-white
    hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.92),0_12px_32px_rgba(17,24,39,0.07)]
    active:translate-y-0 active:scale-[0.985]
  "
>
  <div className="flex min-w-0 items-center gap-3">
    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#F5F6F4] text-[#6F7782]">
      <Icon className="h-[17px] w-[17px]" />
    </div>

    <div className="min-w-0">
      <p className="truncate text-[15px] font-medium leading-tight tracking-[-0.01em]">
        Link title
      </p>
      <p className="mt-0.5 truncate text-xs leading-snug text-[#6F7782]">
        Optional short description
      </p>
    </div>
  </div>

  <ArrowUpRight className="h-4 w-4 shrink-0 text-[#9AA2AA] transition-colors group-hover:text-[#111827]" />
</a>
```

### Link Capsule Rules

* Minimum height: `52px`.
* Preferred height with description: `64px–72px`.
* Use one leading icon or thumbnail.
* Use one trailing affordance icon.
* Keep descriptions to one line.
* Avoid more than two text lines inside a standard link capsule.
* Use `truncate` for long labels.
* Maintain `gap-3` between icon and text.

---

## Featured Link Capsule

Used for one primary destination or promoted content.

```tsx
<a
  className="
    group flex min-h-[64px] items-center justify-between gap-3
    rounded-[28px] border border-[#D8CCFF] bg-[#F4F1FF]/80 px-4 py-4
    text-[#111827]
    shadow-[inset_0_1px_0_rgba(255,255,255,0.88),0_12px_34px_rgba(101,75,198,0.11)]
    transition-all duration-200 ease-out
    hover:-translate-y-0.5 hover:border-[#BFAEFF] hover:bg-[#F4F1FF]
    active:translate-y-0 active:scale-[0.985]
  "
>
  <div className="flex min-w-0 items-center gap-3">
    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/80 text-[#654BC6]">
      <SparkleIcon className="h-[18px] w-[18px]" />
    </div>

    <div className="min-w-0">
      <div className="mb-1 inline-flex rounded-full bg-white/65 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[#654BC6]">
        Featured
      </div>
      <p className="truncate text-[15px] font-semibold leading-tight tracking-[-0.01em]">
        Featured link title
      </p>
    </div>
  </div>

  <ArrowUpRight className="h-4 w-4 shrink-0 text-[#654BC6]" />
</a>
```

---

## Primary CTA

Primary CTAs are fully rounded and use the accent as a signature.

```tsx
<button
  className="
    inline-flex h-12 w-full items-center justify-center rounded-full
    bg-[#654BC6] px-5 text-sm font-semibold text-white
    shadow-[inset_0_1px_0_rgba(255,255,255,0.22),0_12px_30px_rgba(101,75,198,0.24)]
    transition-all duration-200 ease-out
    hover:-translate-y-0.5 hover:bg-[#5239A6]
    active:translate-y-0 active:scale-[0.975]
    focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#654BC6]/20
  "
>
  Primary CTA
</button>
```

### Primary CTA Rules

* Use sparingly: one primary CTA per page section.
* Keep height between `44px` and `52px`.
* Use white text.
* Add inner highlight for tactile polish.
* Do not use harsh black shadows.

---

## Secondary CTA

```tsx
<button
  className="
    inline-flex h-12 w-full items-center justify-center rounded-full
    border border-[#E9ECEC] bg-white/72 px-5 text-sm font-semibold text-[#384150]
    shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]
    transition-all duration-200 ease-out
    hover:-translate-y-0.5 hover:border-[#DDE1E3] hover:bg-white hover:text-[#111827]
    active:translate-y-0 active:scale-[0.985]
    focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#654BC6]/15
  "
>
  Secondary CTA
</button>
```

---

## Icon CTA

```tsx
<button
  className="
    flex h-11 w-11 items-center justify-center rounded-full
    border border-[#E9ECEC] bg-white/72 text-[#6F7782]
    shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]
    transition-all duration-200 ease-out
    hover:-translate-y-0.5 hover:bg-white hover:text-[#111827]
    active:scale-[0.94]
  "
>
  <Icon className="h-[18px] w-[18px]" />
</button>
```

---

## Link Stack

A link stack groups capsules with consistent vertical rhythm.

```tsx
<section className="mt-6 space-y-3">
  <a className="...">Link capsule</a>
  <a className="...">Link capsule</a>
  <a className="...">Link capsule</a>
</section>
```

### Sectioned Link Stack

```tsx
<section className="mt-6">
  <div className="mb-2 px-2">
    <p className="text-[10px] font-semibold uppercase tracking-widest text-[#9AA2AA]">
      Latest
    </p>
  </div>

  <div className="space-y-3">
    {/* Link capsules */}
  </div>
</section>
```

### Section Rules

* Section labels are optional.
* If used, labels should be tiny, uppercase, and muted.
* Avoid thick dividers between every link.
* Prefer spacing over lines.

---

## Compact Info Capsule

Used for small updates, availability, newsletters, booking notes, or short announcements.

```tsx
<div
  className="
    rounded-[26px] border border-[#E9ECEC] bg-white/65 px-4 py-3
    shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]
  "
>
  <div className="flex items-start gap-3">
    <div className="mt-0.5 h-2 w-2 rounded-full bg-[#654BC6]" />
    <div>
      <p className="text-sm font-medium leading-tight text-[#111827]">
        Compact info title
      </p>
      <p className="mt-1 text-xs leading-snug text-[#6F7782]">
        Short supporting detail in one or two lines.
      </p>
    </div>
  </div>
</div>
```

---

## Newsletter Capsule

```tsx
<form
  className="
    rounded-[28px] border border-[#E9ECEC] bg-white/72 p-2
    shadow-[inset_0_1px_0_rgba(255,255,255,0.86),0_8px_24px_rgba(17,24,39,0.045)]
  "
>
  <div className="flex items-center gap-2">
    <input
      className="
        h-11 min-w-0 flex-1 rounded-full bg-transparent px-3
        text-sm text-[#111827] placeholder:text-[#9AA2AA]
        focus:outline-none
      "
      placeholder="Email address"
    />

    <button
      className="
        h-11 shrink-0 rounded-full bg-[#654BC6] px-4
        text-sm font-semibold text-white
        shadow-[inset_0_1px_0_rgba(255,255,255,0.22)]
        transition-all duration-200 ease-out
        hover:bg-[#5239A6] active:scale-[0.97]
      "
    >
      Join
    </button>
  </div>
</form>
```

---

## Inputs

Inputs follow capsule geometry and remain visually quiet.

### Standard Input

```tsx
<input
  className="
    h-12 w-full rounded-full border border-[#E9ECEC] bg-white/72 px-4
    text-sm text-[#111827] placeholder:text-[#9AA2AA]
    shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]
    transition-all duration-200 ease-out
    focus:border-[#654BC6]/45 focus:bg-white
    focus:outline-none focus:ring-4 focus:ring-[#654BC6]/15
  "
/>
```

### Textarea

```tsx
<textarea
  className="
    min-h-[112px] w-full resize-none rounded-[24px]
    border border-[#E9ECEC] bg-white/72 px-4 py-3
    text-sm leading-snug text-[#111827] placeholder:text-[#9AA2AA]
    shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]
    transition-all duration-200 ease-out
    focus:border-[#654BC6]/45 focus:bg-white
    focus:outline-none focus:ring-4 focus:ring-[#654BC6]/15
  "
/>
```

---

## Badges & Pills

### Default Pill

```css
"inline-flex items-center rounded-full border border-[#E9ECEC] bg-white/65 px-2.5 py-1 text-[11px] font-medium text-[#6F7782]"
```

### Accent Pill

```css
"inline-flex items-center rounded-full border border-[#D8CCFF] bg-[#F4F1FF] px-2.5 py-1 text-[11px] font-semibold text-[#654BC6]"
```

### Mono Username Pill

```css
"inline-flex items-center rounded-full border border-[#E9ECEC] bg-white/65 px-2.5 py-1 font-mono text-[11px] font-medium text-[#6F7782]"
```

### Status Dot Pill

```tsx
<span className="inline-flex items-center gap-1.5 rounded-full border border-[#E9ECEC] bg-white/65 px-2.5 py-1 text-[11px] font-medium text-[#6F7782]">
  <span className="h-1.5 w-1.5 rounded-full bg-[#654BC6]" />
  Available
</span>
```

---

## Dividers

Use dividers sparingly. Prefer whitespace.

### Soft Divider

```css
"h-px w-full bg-[#E9ECEC]/80"
```

### Inset Divider

```css
"mx-4 h-px bg-[#E9ECEC]/80"
```

### Gradient Divider

```css
"h-px w-full bg-gradient-to-r from-transparent via-[#DDE1E3] to-transparent"
```

---

## Floating Action Strip

Used for compact page controls such as share, copy link, theme toggle, or edit.

```tsx
<div
  className="
    fixed bottom-5 left-1/2 z-30 flex -translate-x-1/2 items-center gap-2
    rounded-full border border-white/70 bg-white/72 p-1.5
    shadow-[0_18px_60px_rgba(17,24,39,0.14)]
    backdrop-blur-xl
  "
>
  <button className="flex h-10 w-10 items-center justify-center rounded-full text-[#6F7782] transition-all hover:bg-[#F5F6F4] hover:text-[#111827] active:scale-[0.94]">
    <ShareIcon className="h-[18px] w-[18px]" />
  </button>
  <button className="flex h-10 w-10 items-center justify-center rounded-full bg-[#654BC6] text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.22)] transition-all hover:bg-[#5239A6] active:scale-[0.94]">
    <CopyIcon className="h-[18px] w-[18px]" />
  </button>
</div>
```

---

## Toast

Toasts are small frosted capsules that appear near the bottom center.

```tsx
<div
  className="
    fixed bottom-6 left-1/2 z-50 -translate-x-1/2
    rounded-full border border-white/70 bg-white/80 px-4 py-2.5
    text-sm font-medium text-[#384150]
    shadow-[0_18px_60px_rgba(17,24,39,0.14)]
    backdrop-blur-xl
  "
>
  Link copied
</div>
```

### Toast Motion

```tsx
initial={{ opacity: 0, y: 8, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 8, scale: 0.98 }}
transition={{ duration: 0.2, ease: [0.22, 1, 0.36, 1] }}
```

---

## Modal / Share Sheet

Modals should feel like iOS sheets: rounded, frosted, centered on desktop, bottom-sheet on mobile.

```tsx
<div className="fixed inset-0 z-50 flex items-end justify-center bg-[#111827]/10 px-4 pb-4 backdrop-blur-sm sm:items-center sm:pb-0">
  <div
    className="
      w-full max-w-[420px] rounded-[32px] border border-white/70 bg-white/80 p-5
      shadow-[0_30px_100px_rgba(17,24,39,0.18)]
      backdrop-blur-2xl
    "
  >
    {/* Modal content */}
  </div>
</div>
```

### Modal Rules

* Use `rounded-[32px]`.
* Keep max width under `440px`.
* Avoid full desktop-width modals.
* Use blurred translucent overlay.
* Place actions as rounded full-width capsules.

---

## QR Code Card

For sharing creator pages, QR cards remain minimal and porcelain.

```tsx
<div
  className="
    rounded-[28px] border border-[#E9ECEC] bg-white/72 p-4
    shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]
  "
>
  <div className="rounded-[22px] bg-white p-4 shadow-[0_8px_24px_rgba(17,24,39,0.05)]">
    <QRCode className="h-full w-full text-[#111827]" />
  </div>

  <p className="mt-3 text-center font-mono text-[11px] font-medium text-[#6F7782]">
    yourdomain.com/username
  </p>
</div>
```

---

## Loading States

Loading states use soft skeleton capsules with pearl shimmer.

### Skeleton Capsule

```css
"animate-pulse rounded-[26px] border border-[#E9ECEC] bg-[#F5F6F4]"
```

### Link Skeleton

```tsx
<div className="flex min-h-[64px] items-center gap-3 rounded-[26px] border border-[#E9ECEC] bg-white/60 px-4 py-3.5">
  <div className="h-9 w-9 rounded-full bg-[#EEF0ED]" />
  <div className="min-w-0 flex-1 space-y-2">
    <div className="h-3 w-2/3 rounded-full bg-[#EEF0ED]" />
    <div className="h-2.5 w-1/2 rounded-full bg-[#EEF0ED]" />
  </div>
</div>
```

### Shimmer

```css
"relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_1.6s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent"
```

```css
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}
```

---

## Empty States

Empty states should remain compact and contained.

```tsx
<div
  className="
    rounded-[28px] border border-dashed border-[#DDE1E3] bg-white/52 px-5 py-8
    text-center
  "
>
  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-[#F5F6F4] text-[#9AA2AA]">
    <LinkIcon className="h-5 w-5" />
  </div>

  <p className="mt-3 text-sm font-medium text-[#111827]">
    No links yet
  </p>

  <p className="mt-1 text-xs leading-snug text-[#6F7782]">
    Add the first capsule to begin building this hub.
  </p>
</div>
```

---

## Error & Destructive States

Destructive actions are allowed only for deletion, removal, or failed states. They should remain soft and never dominate the interface.

### Destructive Button

```css
"rounded-full border border-[#F4CCCC] bg-[#FFF1F1] px-4 py-2 text-sm font-semibold text-[#C24141] transition-all hover:bg-[#FFE7E7] active:scale-[0.98]"
```

### Error Input

```css
"border-[#F4CCCC] bg-[#FFF8F8] focus:ring-[#C24141]/12 focus:border-[#C24141]/40"
```

### Error Text

```css
"text-xs font-medium text-[#C24141]"
```

---

## Visual Effects

### Inner Highlight

The inner highlight gives capsules a tactile, iOS-like surface.

```css
shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]
```

### Ambient Glow

Use behind the main card or avatar, not behind every component.

```tsx
<div className="pointer-events-none absolute left-1/2 top-8 h-48 w-48 -translate-x-1/2 rounded-full bg-[#654BC6]/10 blur-3xl" />
```

### Porcelain Noise

Optional, extremely subtle.

```css
"before:pointer-events-none before:absolute before:inset-0 before:opacity-[0.025] before:[background-image:url('/noise.png')]"
```

### Frosted Backdrop

```css
"bg-white/72 backdrop-blur-xl"
```

---

## Accessibility

### Contrast

* Primary text must remain dark ink navy.
* Metadata can be muted but must remain readable.
* Accent text on soft accent backgrounds should use `accent-600` or darker.
* White text on accent buttons should use `accent-600` or darker as the background.

### Touch Targets

| Component | Minimum Size |
| --- | --- |
| Link capsule | `52px` height |
| Primary CTA | `44px` height |
| Icon button | `40px × 40px` |
| Social icon | `40px × 40px` |
| Metadata pill | `28px` height |

### Focus States

Every interactive element must include visible focus styling.

```css
"focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#654BC6]/15"
```

### Text Truncation

Use truncation for link labels and usernames where layout may break.

```css
"truncate"
"min-w-0"
```

---

## Responsive Behavior

### Mobile

```css
"px-4 py-6"
"max-w-none"
"rounded-[28px]"
```

* Main card padding: `p-5`.
* Avatar: `h-24 w-24`.
* Link stack: `gap-3`.
* Avoid fixed-height pages when content may scroll.

### Tablet

```css
"max-w-[420px]"
"py-10"
```

* Slightly increase vertical spacing.
* Maintain single-column layout.

### Desktop

```css
"max-w-[440px]"
"py-12"
```

* Keep the hub centered.
* Do not expand into columns.
* Use ambient background space as the luxury element.

---

## Example Page Composition

```tsx
<section className="relative min-h-screen overflow-hidden bg-[radial-gradient(circle_at_top,#FFFFFF_0%,#F5F6F4_42%,#FCFBF8_100%)] px-4 py-8 sm:py-12">
  <div className="pointer-events-none absolute left-1/2 top-8 h-48 w-48 -translate-x-1/2 rounded-full bg-[#654BC6]/10 blur-3xl" />

  <main className="relative mx-auto w-full max-w-[440px]">
    <div className="rounded-[32px] border border-white/70 bg-white/72 p-5 shadow-[0_24px_80px_rgba(17,24,39,0.08)] backdrop-blur-xl">
      <header className="flex flex-col items-center text-center">
        <img
          src="/avatar.jpg"
          className="h-24 w-24 rounded-full object-cover ring-1 ring-[#DDE1E3] shadow-[0_10px_30px_rgba(17,24,39,0.10)]"
        />

        <h1 className="mt-4 text-2xl font-semibold leading-tight tracking-[-0.03em] text-[#111827]">
          Creator Name
        </h1>

        <p className="mt-1 font-mono text-xs font-medium text-[#6F7782]">
          @creator
        </p>

        <p className="mt-3 max-w-[32ch] text-sm leading-snug text-[#384150]">
          Independent designer creating refined digital products, resources, and visual systems.
        </p>

        <div className="mt-4 flex flex-wrap items-center justify-center gap-1.5">
          <span className="rounded-full border border-[#E9ECEC] bg-white/65 px-2.5 py-1 text-[11px] font-medium text-[#6F7782]">
            New York
          </span>
          <span className="rounded-full border border-[#D8CCFF] bg-[#F4F1FF] px-2.5 py-1 text-[11px] font-semibold text-[#654BC6]">
            Available
          </span>
        </div>

        <div className="mt-5 flex items-center justify-center gap-2.5">
          {/* Social icon buttons */}
        </div>
      </header>

      <section className="mt-6 space-y-3">
        {/* Featured link capsule */}
        {/* Standard link capsules */}
      </section>
    </div>
  </main>
</section>
```

---

## Quality Checklist

* [ ] Is the entire page built around a centered narrow container?
* [ ] Does the desktop layout remain single-column?
* [ ] Do all primary interactive elements use rounded capsule geometry?
* [ ] Are shadows soft, ambient, and low-opacity?
* [ ] Are borders low-contrast and refined?
* [ ] Is there only one primary accent color in use?
* [ ] Does the profile card feel like a polished personal object?
* [ ] Are metadata elements compact and visually secondary?
* [ ] Are social icons crisp, evenly spaced, and restrained?
* [ ] Do hover states use gentle lift rather than dramatic movement?
* [ ] Do tap states include subtle press feedback?
* [ ] Are focus states visible and softly accented?
* [ ] Is typography modern, compact, and carefully scaled?
* [ ] Are usernames or technical details optionally set in mono?
* [ ] Are all capsules readable and comfortable on mobile?
* [ ] Is whitespace used instead of dividers wherever possible?

---

## Allowed vs Not Allowed

### Allowed

* Porcelain white, cool pearl, pale greige, soft silver, and ink navy.
* A single signature accent such as Glazed Violet, Eucalyptus Blue, or Burnt Nectarine.
* Centered narrow desktop containers.
* Stacked rounded capsules.
* Fully rounded CTAs.
* Compact metadata pills.
* Monochrome social icons.
* Optional mono usernames.
* Subtle frosted surfaces.
* Low-contrast borders.
* Inner highlights.
* Soft ambient shadows.
* Gentle fade and lift animations.
* Responsive tap feedback.

### Not Allowed

* Split-screen desktop layouts.
* Wide landing-page hero sections.
* Heavy bento grids.
* Sharp-cornered primary cards.
* Thick borders or dark outlines.
* Loud rainbow accents.
* Multiple competing accent colors.
* Heavy black drop shadows.
* Overly glossy gradients.
* Large navigation bars.
* Sidebar layouts.
* Dense dashboard controls.
* Dramatic motion or bounce effects.
* Oversized metadata.
* Cluttered social icon rows.