Porcelain Social Capsule System

/porcelainSocialCapsuleSystem
A pristine, calm, and premium light-theme design system for centered social profiles, capsule-link hubs, and polished creator landing pages, inspired by iOS clarity and tactile porcelain surfaces.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Porcelain Social Capsule System

A pristine light-theme design language for centered social identity pages, capsule-link hubs, creator profiles, and polished personal landing experiences.

---

## Philosophy

> "Porcelain surfaces, capsule actions, and social clarity."

The Porcelain Social Capsule System creates interfaces that feel calm, premium, and instantly understandable. It is inspired by iOS clarity, frosted light materials, precise spacing, and soft physical tactility. The composition is intentionally narrow and centered across all breakpoints, allowing the profile, social row, and primary actions to feel curated rather than crowded.

This system should feel like a pristine object placed on a white porcelain table: softly lit, elegantly spaced, lightly bordered, and highly reusable.

### Core Beliefs

1. **Centered composition creates calm** — The entire experience is built around one narrow, vertically stacked column.
2. **Capsules are the primary interaction shape** — Buttons, social links, handles, and small actions use fully rounded geometry.
3. **Whitespace is structural** — Spacing is not decorative; it creates rhythm, polish, and perceived quality.
4. **Porcelain light surfaces define the brand** — Whites, ivory, pale silver, and mist blue form the atmosphere.
5. **Accent colors should feel glazed** — CTAs use refined, lacquered accent colors rather than loud digital primaries.
6. **Every edge is intentional** — Hairline borders, inner highlights, and subtle shadows provide tactility without visual noise.
7. **Motion should feel silky** — Interface elements fade upward into place with soft easing and minimal displacement.

### Strict Rules

* **Single-column layout only** — No multi-column grids, masonry layouts, or wide dashboard structures.
* **Centered hierarchy** — Name block, introduction, social row, and capsule buttons must align to a central vertical axis.
* **Fully rounded primary actions** — Main buttons use large pill or capsule radii, never squared rectangles.
* **No harsh black** — Use graphite navy for text instead of pure black.
* **No heavy shadows** — Depth comes from plush, low-opacity shadows, inner highlights, and hairline borders.
* **No saturated neon colors** — Accents must remain polished, glazed, and refined.
* **No dense UI chrome** — Avoid sidebars, large nav bars, tables, and dashboard-style components.
* **No cluttered icon containers** — Social icons should appear crisp, light, and evenly spaced.

---

## Color Palette

### Porcelain Light Scale

The core palette is built around white ceramic surfaces, ivory warmth, pale silver borders, mist-blue ambient haze, and graphite navy text.

```css
/* Core Surfaces */
--porcelain-white:      #ffffff; /* Main canvas, brightest card face */
--cool-ivory:           #fbfaf7; /* Soft page background, warm light base */
--ivory-glass:          #fffdf8; /* Elevated translucent panels */
--pale-silver:          #f1f3f5; /* Subtle button surfaces and inactive capsules */
--silver-mist:          #e7ebef; /* Hairline borders, dividers */
--blue-mist:            #eef6fb; /* Ambient glow, soft background wash */
--frost-blue:           #e4f0f7; /* Secondary ambient gradient haze */
--porcelain-shadow:     #d8dee6; /* Shadow tint only, never as solid fill */

/* Text */
--graphite-navy:        #172033; /* Primary heading and name text */
--soft-graphite:        #30394c; /* Secondary heading text */
--slate-gray:           #667085; /* Descriptions and supporting text */
--silver-gray:          #98a2b3; /* Handles, metadata, inactive icons */
--pale-graphite:        #c3cad5; /* Disabled text, separators */

/* Borders */
--border-hairline:      #e8edf2; /* Default border */
--border-soft:          #dde4eb; /* Hover border */
--border-focus:         #b9c8d8; /* Neutral focus ring */
--border-luminous:      rgba(255, 255, 255, 0.82); /* Inner highlight */
```

### Tailwind-Oriented Utility Palette

```css
/* Backgrounds */
bg-white                 /* Main porcelain surface */
bg-[#fbfaf7]             /* Cool ivory page background */
bg-[#fffdf8]/85          /* Glassy elevated profile card */
bg-[#f1f3f5]             /* Pale silver inactive capsules */
bg-[#eef6fb]             /* Mist blue ambient zones */
bg-[#e4f0f7]/60          /* Frost blue gradient haze */

/* Borders */
border-[#e8edf2]         /* Default hairline borders */
border-[#dde4eb]         /* Hover and secondary boundaries */
border-white/80          /* Inner highlight effect */
ring-[#b9c8d8]/40        /* Neutral focus rings */

/* Text */
text-[#172033]           /* Primary name and strong headings */
text-[#30394c]           /* Secondary labels */
text-[#667085]           /* Intro text and captions */
text-[#98a2b3]           /* Handles and muted metadata */
text-[#c3cad5]           /* Disabled or placeholder text */
```

---

## Accent System

Porcelain Social Capsule System allows one dominant CTA accent per profile or page. Accent colors should not compete with each other in the same primary hierarchy.

### Primary CTA Accent Options

```css
/* Glazed Blueberry */
--accent-blueberry-50:   #eef4ff;
--accent-blueberry-100:  #dbe8ff;
--accent-blueberry-500:  #4f7fd9;
--accent-blueberry-600:  #3f6dc4;
--accent-blueberry-700:  #345ba6;
--accent-blueberry-ink:  #ffffff;

/* Eucalyptus Lacquer */
--accent-eucalyptus-50:  #eef8f3;
--accent-eucalyptus-100: #d8efe4;
--accent-eucalyptus-500: #4b9b7a;
--accent-eucalyptus-600: #3f8668;
--accent-eucalyptus-700: #336e56;
--accent-eucalyptus-ink: #ffffff;

/* Smoked Persimmon */
--accent-persimmon-50:   #fff3ed;
--accent-persimmon-100:  #ffe3d4;
--accent-persimmon-500:  #d97854;
--accent-persimmon-600:  #c56543;
--accent-persimmon-700:  #a95135;
--accent-persimmon-ink:  #ffffff;
```

### Accent Usage Rules

```css
/* Primary CTA */
background: var(--accent-blueberry-600);
color: var(--accent-blueberry-ink);

/* CTA Hover */
background: var(--accent-blueberry-700);

/* Subtle Accent Surface */
background: var(--accent-blueberry-50);
border-color: var(--accent-blueberry-100);
color: var(--accent-blueberry-700);

/* Focus Ring */
box-shadow: 0 0 0 4px rgba(79, 127, 217, 0.14);
```

### Accent Hierarchy

| Accent | Best Use | Visual Feeling |
| --- | --- | --- |
| Glazed Blueberry | Primary profile links, portfolio CTAs, booking buttons | Clear, polished, trustworthy |
| Eucalyptus Lacquer | Wellness, lifestyle, coaching, creative services | Calm, organic, refined |
| Smoked Persimmon | Featured drops, launches, limited offers | Warm, distinctive, editorial |

### Destructive Actions

Destructive states are rare and should only appear in admin, edit, or account-management contexts.

```css
text-[#b42318]
bg-[#fff1f0]
border-[#ffd6d2]
hover:bg-[#ffe4e1]
hover:text-[#912018]
```

---

## Layout System

### Core Composition

The layout is always a centered, single-column composition.

```css
/* Page Shell */
min-h-screen
w-full
bg-[#fbfaf7]
text-[#172033]
flex
justify-center

/* Main Column */
w-full
max-w-[430px]
mx-auto
px-5
sm:px-6
py-8
sm:py-12
```

### Recommended Widths

| Breakpoint | Column Width | Padding | Notes |
| --- | --- | --- | --- |
| Mobile | `100%` | `20px` | Full-width shell with generous side padding |
| Small | `430px` max | `24px` | Primary intended presentation |
| Medium | `430px` max | `24px` | Column remains narrow |
| Large | `430px` to `460px` max | `24px` | Do not expand into dashboard layout |

### Vertical Structure

```tsx
<main className="min-h-screen w-full bg-[#fbfaf7] flex justify-center">
  <section className="w-full max-w-[430px] px-5 sm:px-6 py-8 sm:py-12">
    <ProfileCard />
    <CapsuleStack />
  </section>
</main>
```

### Spacing Rhythm

```css
space-y-3       /* Tight button stack */
space-y-4       /* Social row to capsule stack */
space-y-5       /* Name block to intro */
space-y-6       /* Profile header sections */
space-y-8       /* Major vertical composition divisions */

gap-2           /* Icon clusters and small inline groups */
gap-3           /* Social icon row */
gap-4           /* Button content and larger capsule interiors */
```

### Safe Area Support

For mobile web and app-like usage, respect safe areas.

```css
padding-top: max(2rem, env(safe-area-inset-top));
padding-bottom: max(2rem, env(safe-area-inset-bottom));
```

---

## Typography

The typographic system pairs modern, clean sans-serif fonts with IBM Plex Mono for handles, usernames, and subtle technical details.

### Recommended Font Pairings

```css
/* Primary UI / Display */
font-family: "SF Pro Display", "SF Pro Text", "Geist", "Satoshi", "Neue Montreal", system-ui, sans-serif;

/* Handles / Micro Metadata */
font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
```

### Font Usage

| Font Role | Recommended Families | Usage |
| --- | --- | --- |
| Primary Sans | SF Pro, Geist, Satoshi, Neue Montreal | Name, intro, buttons, labels |
| Mono Detail | IBM Plex Mono | Handles, usernames, short metadata, small status text |
| System Fallback | system-ui, sans-serif | Universal fallback for app clarity |

### Font Weights

```css
font-normal      /* Body text, intro, regular labels */
font-medium      /* Capsule buttons, social labels, compact headings */
font-semibold    /* Name block, primary action emphasis */
font-bold        /* Rare; only for short name lockups if needed */
```

Large text should remain smooth and refined. Avoid ultra-heavy weights unless the brand identity specifically requires a stronger name mark.

### Font Size Scale

```css
text-[10px]      /* Tiny status dots, compact metadata */
text-[11px]      /* Mono handles, social usernames */
text-xs          /* Secondary labels, small footers */
text-sm          /* Intro text, capsule subtitles */
text-[15px]      /* Primary capsule button labels */
text-base        /* Strong labels and profile supporting text */
text-lg          /* Compact section headers */
text-xl          /* Small profile names */
text-2xl         /* Default profile name */
text-3xl         /* Large name lockup */
```

### Letter Spacing

```css
tracking-[-0.04em]     /* Large display name, if visually needed */
tracking-[-0.025em]    /* Default name block */
tracking-[-0.01em]     /* Capsule labels and short headings */
tracking-normal        /* Body and intro */
tracking-[0.02em]      /* Small labels */
tracking-[0.08em]      /* Uppercase micro badges */
```

### Text Hierarchy

| Element | Size | Weight | Color | Tracking | Font |
| --- | --- | --- | --- | --- | --- |
| Profile Name | `text-2xl` / `text-3xl` | `semibold` | `#172033` | `-0.025em` | Primary Sans |
| Handle | `text-[11px]` / `text-xs` | `medium` | `#98a2b3` | `0.02em` | IBM Plex Mono |
| Intro | `text-sm` / `text-[15px]` | `normal` | `#667085` | normal | Primary Sans |
| Capsule Label | `text-[15px]` | `medium` | contextual | `-0.01em` | Primary Sans |
| Capsule Subtitle | `text-xs` | `normal` | `#98a2b3` | normal | Primary Sans |
| Social Icon Label | `text-[11px]` | `medium` | `#667085` | normal | Primary Sans |
| Micro Badge | `text-[10px]` | `semibold` | `#667085` | `0.08em` | Primary Sans or Mono |

---

## Surface & Depth System

### Porcelain Card

The primary profile card should feel lightly raised, glossy, and calm.

```css
background:
  linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,253,248,0.88));

border: 1px solid rgba(232, 237, 242, 0.92);

box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.95),
  0 1px 2px rgba(23, 32, 51, 0.04),
  0 18px 48px rgba(90, 107, 128, 0.13);
```

### Plush Shadow Scale

```css
/* Hairline Elevation */
shadow-[0_1px_2px_rgba(23,32,51,0.04)]

/* Soft Capsule Elevation */
shadow-[0_8px_22px_rgba(90,107,128,0.10)]

/* Plush Profile Elevation */
shadow-[0_18px_48px_rgba(90,107,128,0.13)]

/* CTA Glow */
shadow-[0_12px_30px_rgba(63,109,196,0.22)]
```

### Inner Highlight

Use inner highlights on elevated cards and CTA capsules to create a polished, tactile finish.

```css
box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.72),
  0 10px 28px rgba(90,107,128,0.10);
```

### Ambient Gradient Haze

Ambient haze belongs behind the profile card, never inside body text areas.

```tsx
<div className="pointer-events-none absolute inset-x-0 top-0 mx-auto h-72 max-w-[520px] overflow-hidden">
  <div className="absolute left-1/2 top-6 h-48 w-48 -translate-x-1/2 rounded-full bg-[#e4f0f7]/70 blur-3xl" />
  <div className="absolute right-8 top-20 h-32 w-32 rounded-full bg-[#eef4ff]/70 blur-3xl" />
  <div className="absolute left-8 top-28 h-28 w-28 rounded-full bg-[#fff3ed]/45 blur-3xl" />
</div>
```

---

## Border System

Borders are always light, narrow, and precise.

```css
border border-[#e8edf2]          /* Default card and capsule border */
border border-[#dde4eb]          /* Hover state */
border border-white/80           /* Inner luminous edge */
ring-1 ring-white/70             /* Glass highlight */
ring-1 ring-[#e8edf2]/80         /* Subtle structure */
```

### Hairline Divider

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

### Capsule Border Treatment

```css
border: 1px solid rgba(232, 237, 242, 0.92);
box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.86),
  0 1px 2px rgba(23, 32, 51, 0.035);
```

---

## Radius System

The system heavily favors circular and capsule forms.

```css
rounded-full       /* Avatar, social icons, primary buttons, capsule links */
rounded-[28px]     /* Large profile card */
rounded-[24px]     /* Secondary containers */
rounded-[20px]     /* Compact cards */
rounded-2xl        /* Small internal modules */
rounded-xl         /* Rare utility containers */
```

### Radius Rules

| Component | Radius |
| --- | --- |
| Avatar | `rounded-full` |
| Social Icon Button | `rounded-full` |
| Primary Capsule Button | `rounded-full` |
| Link Capsule | `rounded-full` or `rounded-[999px]` |
| Profile Card | `rounded-[28px]` |
| Floating Status Badge | `rounded-full` |

---

## Animation System

### Core Philosophy: Silky Fade-Up

Elements should appear as if softly settling into place. Motion is clear, light, and sequential.

### Page Entrance

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

### Staggered Stack Reveal

```tsx
const container = {
  hidden: {},
  show: {
    transition: {
      staggerChildren: 0.055,
      delayChildren: 0.08,
    },
  },
};

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

### Capsule Hover Interaction

Capsules should feel responsive but not bouncy or playful.

```tsx
whileHover={{ y: -1, scale: 1.01 }}
whileTap={{ scale: 0.985 }}
transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
```

### Social Icon Hover

```tsx
whileHover={{ y: -2, scale: 1.04 }}
whileTap={{ scale: 0.96 }}
transition={{ type: "spring", stiffness: 420, damping: 32 }}
```

### 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;
  }
}
```

---

## UI Components

## Page Shell

The page shell anchors the entire visual system. It should feel airy, centered, and softly illuminated.

```tsx
<div className="relative min-h-screen w-full overflow-hidden bg-[#fbfaf7] text-[#172033]">
  <div className="pointer-events-none absolute inset-x-0 top-0 mx-auto h-80 max-w-[560px]">
    <div className="absolute left-1/2 top-8 h-52 w-52 -translate-x-1/2 rounded-full bg-[#e4f0f7]/70 blur-3xl" />
    <div className="absolute right-8 top-24 h-36 w-36 rounded-full bg-[#eef4ff]/70 blur-3xl" />
  </div>

  <main className="relative mx-auto flex min-h-screen w-full max-w-[430px] flex-col px-5 py-8 sm:px-6 sm:py-12">
    {/* Content */}
  </main>
</div>
```

---

## Profile Card

The profile card contains the avatar, name block, intro, and social row. It should be the visual anchor of the page.

```tsx
<section className="rounded-[28px] border border-[#e8edf2] bg-white/85 p-6 text-center shadow-[0_18px_48px_rgba(90,107,128,0.13)] ring-1 ring-white/80 backdrop-blur-xl">
  <div className="mx-auto h-24 w-24 rounded-full border border-white/90 bg-[#f1f3f5] shadow-[inset_0_1px_0_rgba(255,255,255,0.92),0_10px_26px_rgba(90,107,128,0.14)]" />

  <div className="mt-5">
    <h1 className="text-2xl font-semibold tracking-[-0.025em] text-[#172033]">
      Name Block
    </h1>
    <p className="mt-1 font-mono text-[11px] font-medium tracking-[0.02em] text-[#98a2b3]">
      @handle
    </p>
  </div>

  <p className="mx-auto mt-4 max-w-[320px] text-sm leading-6 text-[#667085]">
    Concise introduction text sits here with calm line height and centered alignment.
  </p>

  <div className="mt-5 flex items-center justify-center gap-3">
    {/* Social Row */}
  </div>
</section>
```

---

## Avatar

Avatars should look softly inset or delicately raised, never flat or harsh.

```tsx
<div className="relative mx-auto h-24 w-24 rounded-full border border-white/90 bg-gradient-to-b from-white to-[#f1f3f5] shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_12px_28px_rgba(90,107,128,0.16)]">
  <img
    src="/avatar.jpg"
    alt=""
    className="h-full w-full rounded-full object-cover"
  />
  <div className="pointer-events-none absolute inset-0 rounded-full ring-1 ring-inset ring-white/70" />
</div>
```

### Avatar Sizes

```css
h-20 w-20       /* Compact profile */
h-24 w-24       /* Default */
h-28 w-28       /* Large editorial profile */
```

---

## Name Block

The name block is compact, refined, and centered.

```tsx
<div className="text-center">
  <h1 className="text-2xl font-semibold tracking-[-0.025em] text-[#172033] sm:text-3xl">
    Isabella Monroe
  </h1>

  <div className="mt-2 inline-flex items-center rounded-full border border-[#e8edf2] bg-white/70 px-3 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]">
    <span className="font-mono text-[11px] font-medium tracking-[0.02em] text-[#98a2b3]">
      @isabellamonroe
    </span>
  </div>
</div>
```

---

## Intro Text

Intro text is concise and centered with comfortable line height.

```tsx
<p className="mx-auto max-w-[330px] text-center text-[15px] leading-6 text-[#667085]">
  Independent designer creating calm digital systems, visual identities, and polished product experiences.
</p>
```

### Intro Rules

* Maximum width: `320px` to `340px`
* Alignment: centered
* Line height: `1.55` to `1.7`
* Color: `#667085`
* Avoid dense paragraphs longer than 3 lines in the default card

---

## Social Row

Social buttons are crisp, circular, evenly spaced, and secondary to the main CTA stack.

```tsx
<div className="flex items-center justify-center gap-3">
  <a className="flex h-10 w-10 items-center justify-center rounded-full border border-[#e8edf2] bg-white/75 text-[#667085] shadow-[inset_0_1px_0_rgba(255,255,255,0.86),0_1px_2px_rgba(23,32,51,0.04)] transition-all duration-200 hover:-translate-y-0.5 hover:border-[#dde4eb] hover:bg-white hover:text-[#172033] hover:shadow-[0_8px_20px_rgba(90,107,128,0.10)]">
    <Icon className="h-4 w-4" />
  </a>
</div>
```

### Social Icon Button Sizes

```css
h-9 w-9         /* Compact */
h-10 w-10       /* Default */
h-11 w-11       /* Large */
```

### Social Row Rules

* Minimum gap: `12px`
* Maximum recommended icons: `5`
* Icons should be `16px` to `18px`
* Use graphite or slate colors by default
* Do not use platform brand colors unless required by integration guidelines

---

## Capsule Button Stack

The capsule stack is the primary reusable structure in the system. It should feel tappable, plush, and highly legible.

```tsx
<div className="mt-5 space-y-3">
  <a className="group flex min-h-[58px] w-full items-center justify-between rounded-full border border-[#e8edf2] bg-white/88 px-5 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.88),0_1px_2px_rgba(23,32,51,0.04)] transition-all duration-200 hover:-translate-y-0.5 hover:border-[#dde4eb] hover:bg-white hover:shadow-[0_10px_24px_rgba(90,107,128,0.10)]">
    <span className="flex min-w-0 items-center gap-3">
      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#f1f3f5] text-[#667085]">
        <Icon className="h-4 w-4" />
      </span>

      <span className="min-w-0 text-left">
        <span className="block truncate text-[15px] font-medium tracking-[-0.01em] text-[#172033]">
          Capsule Button
        </span>
        <span className="block truncate text-xs text-[#98a2b3]">
          Optional supporting detail
        </span>
      </span>
    </span>

    <ArrowRight className="h-4 w-4 shrink-0 text-[#c3cad5] transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-[#98a2b3]" />
  </a>
</div>
```

---

## Component Catalog

### Primary CTA Capsule

Used for the most important action on the page.

```tsx
<a className="group flex min-h-[60px] w-full items-center justify-center rounded-full bg-[#3f6dc4] px-6 py-4 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.28),0_12px_30px_rgba(63,109,196,0.22)] transition-all duration-200 hover:-translate-y-0.5 hover:bg-[#345ba6] hover:shadow-[inset_0_1px_0_rgba(255,255,255,0.25),0_16px_36px_rgba(63,109,196,0.26)] active:translate-y-0 active:scale-[0.985]">
  <span className="text-[15px] font-medium tracking-[-0.01em]">
    Primary Capsule Action
  </span>
</a>
```

### Secondary Capsule

Used for standard links and reusable actions.

```tsx
<a className="group flex min-h-[58px] w-full items-center justify-between rounded-full border border-[#e8edf2] bg-white/88 px-5 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.88),0_1px_2px_rgba(23,32,51,0.04)] transition-all duration-200 hover:-translate-y-0.5 hover:border-[#dde4eb] hover:bg-white hover:shadow-[0_10px_24px_rgba(90,107,128,0.10)] active:translate-y-0 active:scale-[0.99]">
  <span className="text-[15px] font-medium tracking-[-0.01em] text-[#172033]">
    Secondary Capsule
  </span>
</a>
```

### Soft Accent Capsule

Used when a secondary action needs subtle emphasis without becoming the primary CTA.

```tsx
<a className="flex min-h-[56px] w-full items-center justify-center rounded-full border border-[#dbe8ff] bg-[#eef4ff] px-5 py-3 text-[#345ba6] shadow-[inset_0_1px_0_rgba(255,255,255,0.72)] transition-all duration-200 hover:-translate-y-0.5 hover:bg-[#e5efff] hover:shadow-[0_8px_20px_rgba(63,109,196,0.12)]">
  <span className="text-[15px] font-medium tracking-[-0.01em]">
    Soft Accent Link
  </span>
</a>
```

### Icon Capsule

Used for compact but prominent external links.

```tsx
<a className="flex min-h-[54px] w-full items-center gap-3 rounded-full border border-[#e8edf2] bg-white/86 px-4 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.86)] transition-all duration-200 hover:border-[#dde4eb] hover:bg-white">
  <span className="flex h-9 w-9 items-center justify-center rounded-full bg-[#f1f3f5] text-[#667085]">
    <Icon className="h-4 w-4" />
  </span>

  <span className="min-w-0 flex-1">
    <span className="block truncate text-[15px] font-medium text-[#172033]">
      Icon Capsule
    </span>
    <span className="block truncate text-xs text-[#98a2b3]">
      Detail line
    </span>
  </span>
</a>
```

### Mono Handle Badge

Used for social handles, usernames, short IDs, and compact identity metadata.

```tsx
<span className="inline-flex items-center rounded-full border border-[#e8edf2] bg-white/72 px-3 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]">
  <span className="font-mono text-[11px] font-medium tracking-[0.02em] text-[#98a2b3]">
    @handle
  </span>
</span>
```

### Availability Badge

Used for profile status, creator availability, or compact profile signals.

```tsx
<span className="inline-flex items-center gap-1.5 rounded-full border border-[#d8efe4] bg-[#eef8f3] px-3 py-1 text-[#336e56]">
  <span className="h-1.5 w-1.5 rounded-full bg-[#4b9b7a]" />
  <span className="text-[10px] font-semibold uppercase tracking-[0.08em]">
    Available
  </span>
</span>
```

### Divider

```tsx
<div className="my-5 h-px w-full bg-gradient-to-r from-transparent via-[#dde4eb] to-transparent" />
```

### Floating Footer Capsule

Used for small footer links, credits, or compact secondary navigation.

```tsx
<footer className="mt-6 flex justify-center">
  <div className="inline-flex items-center gap-2 rounded-full border border-[#e8edf2] bg-white/65 px-4 py-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.86)] backdrop-blur-xl">
    <span className="text-xs text-[#98a2b3]">Footer Label</span>
  </div>
</footer>
```

---

## Inputs

Inputs should be rare in the primary social capsule experience, but when used, they should match the porcelain capsule language.

### Capsule Input

```tsx
<input
  className="h-12 w-full rounded-full border border-[#e8edf2] bg-white/88 px-5 text-sm text-[#172033] shadow-[inset_0_1px_0_rgba(255,255,255,0.86),0_1px_2px_rgba(23,32,51,0.04)] outline-none transition-all placeholder:text-[#c3cad5] focus:border-[#b9c8d8] focus:bg-white focus:ring-4 focus:ring-[#b9c8d8]/20"
  placeholder="Email address"
/>
```

### Search Capsule

```tsx
<div className="flex h-12 items-center gap-3 rounded-full border border-[#e8edf2] bg-white/88 px-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]">
  <Search className="h-4 w-4 text-[#98a2b3]" />
  <input
    className="min-w-0 flex-1 bg-transparent text-sm text-[#172033] outline-none placeholder:text-[#c3cad5]"
    placeholder="Search"
  />
</div>
```

---

## Navigation

Navigation should remain minimal. For social capsule pages, navigation is usually unnecessary. If required, use compact floating capsules.

### Top Mini Navigation

```tsx
<nav className="mb-5 flex items-center justify-center">
  <div className="inline-flex rounded-full border border-[#e8edf2] bg-white/70 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.86)] backdrop-blur-xl">
    <button className="rounded-full bg-[#172033] px-4 py-2 text-xs font-medium text-white shadow-[0_6px_16px_rgba(23,32,51,0.16)]">
      Active
    </button>
    <button className="rounded-full px-4 py-2 text-xs font-medium text-[#667085] transition-colors hover:text-[#172033]">
      Link
    </button>
  </div>
</nav>
```

### Navigation Rules

* Keep navigation centered.
* Use no more than 3 items.
* Active state may use graphite navy or the selected accent color.
* Avoid full-width tab bars unless the profile has multiple content views.

---

## Interaction States

### Default

```css
background: rgba(255, 255, 255, 0.88);
border-color: #e8edf2;
color: #172033;
```

### Hover

```css
transform: translateY(-1px);
background: #ffffff;
border-color: #dde4eb;
box-shadow: 0 10px 24px rgba(90, 107, 128, 0.10);
```

### Active / Pressed

```css
transform: scale(0.985);
box-shadow:
  inset 0 1px 2px rgba(23, 32, 51, 0.06),
  0 1px 2px rgba(23, 32, 51, 0.03);
```

### Focus Visible

```css
outline: none;
box-shadow:
  0 0 0 4px rgba(185, 200, 216, 0.28),
  inset 0 1px 0 rgba(255, 255, 255, 0.86);
```

### Disabled

```css
opacity: 0.48;
pointer-events: none;
filter: saturate(0.72);
```

---

## Iconography

Icons should be simple, rounded, and optically light.

### Icon Rules

```css
h-4 w-4        /* Default icon size */
h-[18px] w-[18px] /* Social icon maximum */
stroke-[1.75]  /* Preferred stroke weight */
text-[#667085] /* Default icon color */
text-[#172033] /* Strong active icon color */
```

### Icon Container

```tsx
<span className="flex h-9 w-9 items-center justify-center rounded-full bg-[#f1f3f5] text-[#667085]">
  <Icon className="h-4 w-4" />
</span>
```

### Iconography Rules

* Prefer outline icons over filled icons.
* Use consistent stroke widths.
* Avoid overly detailed icons.
* Keep icon color neutral unless inside a primary CTA.
* Social brand icons should remain monochrome unless required.

---

## Background System

### Porcelain Canvas

```css
background-color: #fbfaf7;
```

### Ambient Haze Canvas

```css
background:
  radial-gradient(circle at 50% 0%, rgba(228, 240, 247, 0.9), transparent 34%),
  radial-gradient(circle at 82% 18%, rgba(238, 244, 255, 0.7), transparent 26%),
  radial-gradient(circle at 18% 28%, rgba(255, 243, 237, 0.45), transparent 24%),
  #fbfaf7;
```

### Glass Porcelain Card

```css
background: rgba(255, 255, 255, 0.84);
backdrop-filter: blur(20px);
border: 1px solid rgba(232, 237, 242, 0.9);
```

### Background Rules

* Ambient haze must be subtle and blurred.
* Gradients should never reduce text contrast.
* Haze should sit behind the centered column.
* Avoid colorful full-page backgrounds.
* Do not use dark mode treatments in this system.

---

## Example Full Composition

```tsx
export function PorcelainSocialCapsulePage() {
  return (
    <div className="relative min-h-screen w-full overflow-hidden bg-[#fbfaf7] text-[#172033]">
      <div className="pointer-events-none absolute inset-x-0 top-0 mx-auto h-80 max-w-[560px]">
        <div className="absolute left-1/2 top-8 h-52 w-52 -translate-x-1/2 rounded-full bg-[#e4f0f7]/70 blur-3xl" />
        <div className="absolute right-8 top-24 h-36 w-36 rounded-full bg-[#eef4ff]/70 blur-3xl" />
        <div className="absolute left-8 top-32 h-28 w-28 rounded-full bg-[#fff3ed]/45 blur-3xl" />
      </div>

      <main className="relative mx-auto flex min-h-screen w-full max-w-[430px] flex-col px-5 py-8 sm:px-6 sm:py-12">
        <section className="rounded-[28px] border border-[#e8edf2] bg-white/85 p-6 text-center shadow-[0_18px_48px_rgba(90,107,128,0.13)] ring-1 ring-white/80 backdrop-blur-xl">
          <div className="relative mx-auto h-24 w-24 rounded-full border border-white/90 bg-gradient-to-b from-white to-[#f1f3f5] shadow-[inset_0_1px_0_rgba(255,255,255,0.95),0_12px_28px_rgba(90,107,128,0.16)]">
            <img
              src="/avatar.jpg"
              alt=""
              className="h-full w-full rounded-full object-cover"
            />
            <div className="pointer-events-none absolute inset-0 rounded-full ring-1 ring-inset ring-white/70" />
          </div>

          <div className="mt-5">
            <h1 className="text-2xl font-semibold tracking-[-0.025em] text-[#172033] sm:text-3xl">
              Isabella Monroe
            </h1>

            <div className="mt-2 inline-flex items-center rounded-full border border-[#e8edf2] bg-white/72 px-3 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.86)]">
              <span className="font-mono text-[11px] font-medium tracking-[0.02em] text-[#98a2b3]">
                @isabellamonroe
              </span>
            </div>
          </div>

          <p className="mx-auto mt-4 max-w-[330px] text-[15px] leading-6 text-[#667085]">
            Independent designer creating calm digital systems, visual identities, and polished product experiences.
          </p>

          <div className="mt-5 flex items-center justify-center gap-3">
            <a className="flex h-10 w-10 items-center justify-center rounded-full border border-[#e8edf2] bg-white/75 text-[#667085] shadow-[inset_0_1px_0_rgba(255,255,255,0.86),0_1px_2px_rgba(23,32,51,0.04)] transition-all duration-200 hover:-translate-y-0.5 hover:border-[#dde4eb] hover:bg-white hover:text-[#172033] hover:shadow-[0_8px_20px_rgba(90,107,128,0.10)]">
              <Icon className="h-4 w-4" />
            </a>
          </div>
        </section>

        <section className="mt-5 space-y-3">
          <a className="group flex min-h-[60px] w-full items-center justify-center rounded-full bg-[#3f6dc4] px-6 py-4 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.28),0_12px_30px_rgba(63,109,196,0.22)] transition-all duration-200 hover:-translate-y-0.5 hover:bg-[#345ba6] active:translate-y-0 active:scale-[0.985]">
            <span className="text-[15px] font-medium tracking-[-0.01em]">
              Work With Me
            </span>
          </a>

          <a className="group flex min-h-[58px] w-full items-center justify-between rounded-full border border-[#e8edf2] bg-white/88 px-5 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.88),0_1px_2px_rgba(23,32,51,0.04)] transition-all duration-200 hover:-translate-y-0.5 hover:border-[#dde4eb] hover:bg-white hover:shadow-[0_10px_24px_rgba(90,107,128,0.10)]">
            <span className="flex min-w-0 items-center gap-3">
              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#f1f3f5] text-[#667085]">
                <Icon className="h-4 w-4" />
              </span>

              <span className="min-w-0 text-left">
                <span className="block truncate text-[15px] font-medium tracking-[-0.01em] text-[#172033]">
                  View Portfolio
                </span>
                <span className="block truncate text-xs text-[#98a2b3]">
                  Selected product and identity work
                </span>
              </span>
            </span>

            <ArrowRight className="h-4 w-4 shrink-0 text-[#c3cad5] transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-[#98a2b3]" />
          </a>
        </section>
      </main>
    </div>
  );
}
```

---

## Accessibility

### Contrast

| Element | Minimum Contrast Goal |
| --- | --- |
| Primary text on porcelain white | WCAG AA |
| Intro text on white card | WCAG AA |
| CTA text on accent background | WCAG AA |
| Muted handles | Must remain legible at small sizes |
| Icon-only social buttons | Must include accessible labels |

### Focus Visibility

Every interactive element must include a visible focus state.

```css
focus-visible:outline-none
focus-visible:ring-4
focus-visible:ring-[#b9c8d8]/30
```

### Touch Targets

```css
min-h-[44px]       /* Absolute minimum */
min-h-[54px]       /* Preferred capsule minimum */
h-10 w-10          /* Minimum social icon button */
```

---

## Quality Checklist

* [ ] Is the entire layout centered and single-column across breakpoints?
* [ ] Does the main column stay narrow, ideally between `390px` and `460px`?
* [ ] Does the page use porcelain white, cool ivory, pale silver, mist blue, and graphite navy?
* [ ] Is only one dominant CTA accent used per profile or page?
* [ ] Are primary actions fully rounded capsules?
* [ ] Does the name block feel refined, compact, and centered?
* [ ] Is the handle styled with IBM Plex Mono or an equivalent monospace face?
* [ ] Are social icons crisp, evenly spaced, and secondary to the CTA stack?
* [ ] Are borders hairline and light rather than thick or dark?
* [ ] Are shadows plush, soft, and low-opacity?
* [ ] Are inner highlights used on elevated cards or important capsules?
* [ ] Does the background include subtle ambient haze without reducing readability?
* [ ] Do hover states lift by only `1px` to `2px`?
* [ ] Do entrance animations use silky fade-up motion?
* [ ] Are touch targets at least `44px` high?
* [ ] Is pure black avoided in favor of graphite navy?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Porcelain white, cool ivory, pale silver, mist blue, and graphite navy.
* Glazed CTA accents such as blueberry, eucalyptus, or smoked persimmon.
* One primary CTA accent per page.
* Fully rounded capsule buttons.
* Centered avatar, name block, handle, intro, and social row.
* Hairline borders and luminous inner highlights.
* Soft ambient gradient haze behind the main composition.
* Plush shadows with low-opacity blue-gray tinting.
* SF Pro, Geist, Satoshi, or Neue Montreal for primary typography.
* IBM Plex Mono for handles and small identity metadata.
* Silky fade-up interactions with subtle blur clearing.

### ✗ Not Allowed

* Multi-column layouts or dashboard-like structures.
* Harsh black text or dark panels.
* Neon accent colors.
* Square primary buttons.
* Heavy drop shadows with muddy gray edges.
* Dense navigation bars or sidebars.
* Platform-brand-colored social rows unless required.
* Large paragraphs inside the profile card.
* Thick borders or strong outlines.
* Overly playful bounce animations.
* Crowded button stacks without vertical breathing room.