No preview available
Lilac Internet Capsule Stack

/lilacInternetCapsuleStack
A light-theme, mobile-first design system for creator link hubs and Gen-Z profiles, featuring soft capsule buttons, narrow layouts, and airy lavender accents for a premium yet approachable social-native user experience.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Lilac Internet Capsule Stack Design System

A light-theme, mobile-first design language for polished creator link hubs, soft Gen-Z profiles, and capsule-based social destinations.

---

## Philosophy

> "A creator page should feel weightless, personal, and instantly tappable."

Lilac Internet Capsule Stack is designed for narrow, centered profile pages that feel native to contemporary social platforms: soft, glossy, compact, and touch-first. The interface is built around a calm cloud-white canvas, lavender-tinted depth, rounded capsule buttons, crisp icon alignment, and subtle atmospheric glows.

The system should feel clean and creator-ready rather than decorative. Every element exists to help a visitor understand who the creator is, scan their links quickly, and tap with confidence.

### Core Beliefs

1. **Mobile is the primary canvas** — The ideal composition is narrow, centered, thumb-friendly, and never expands into a full-width desktop layout.
2. **Capsules create clarity** — Fully rounded button forms make actions feel friendly, modern, and instantly tappable.
3. **Soft color, sharp structure** — Lavender glows and translucent panels provide atmosphere, while typography and spacing remain precise.
4. **The CTA should feel glazed** — Primary actions use jelly-like purple, orchid, or periwinkle accents with subtle depth and sheen.
5. **Profiles need polish, not clutter** — The header is compact, the bio is short, the social row is minimal, and links are stacked vertically.
6. **Motion should feel silky** — Interface elements fade upward in staggered sequence, with tactile press states for mobile interactions.
7. **Creator UI must feel personal but premium** — The system balances approachable Gen-Z internet softness with refined spacing and crisp implementation.

### Strict Rules

* **Light Theme Only** — The canvas must stay bright, airy, and lavender-tinted. No dark-mode primary layouts.
* **Narrow Centered Layout Always** — Content must remain constrained on every breakpoint. Desktop screens should not create wide profile pages.
* **Capsule Buttons Only** — Link buttons use full pill radii. Squared, sharp, or standard card buttons are not allowed for primary link actions.
* **No Heavy Shadows** — Depth comes from soft glows, translucent surfaces, hairline borders, and gentle tonal layering.
* **No Harsh Black** — Text uses ink plum, deep aubergine, or softened charcoal-plum, never pure black.
* **No Busy Social Rows** — Social icons must be minimal, evenly spaced, and visually quieter than the link stack.
* **No Dense Layouts** — The system must preserve breathing room around the avatar, display name, bio, social row, and capsules.
* **No Loud Rainbow Gradients** — Gradients are allowed only as soft lilac, periwinkle, orchid, and ultraviolet washes.

---

## Color Palette

### Core Palette

The palette is bright, misty, and purple-rooted. It uses cloud-white foundations, lavender-milk panels, pale lilac fills, mist-gray borders, ink-plum text, and distinctive glazed CTA accents.

```css
/* Primary Canvas */
--cloud-white: #ffffff;        /* Main page canvas */
--soft-cloud: #fbfaff;         /* Slightly lilac-tinted page background */
--lavender-milk: #f6f1ff;      /* Primary soft background wash */
--lilac-fog: #eee6ff;          /* Elevated soft section tint */
--pale-lilac: #e7dcff;         /* Secondary fills, subtle badges */
--mist-gray: #eceaf2;          /* Neutral boundaries and low-contrast dividers */

/* Surface Layers */
--surface-white: rgba(255, 255, 255, 0.78);
--surface-lavender: rgba(248, 244, 255, 0.72);
--surface-glass: rgba(255, 255, 255, 0.52);
--surface-hover: rgba(245, 239, 255, 0.86);
--surface-pressed: rgba(232, 220, 255, 0.92);

/* Text */
--ink-plum: #24172f;           /* Primary text */
--deep-plum: #3a2848;          /* Secondary headings */
--soft-plum: #6b5a78;          /* Body and bio text */
--muted-plum: #9688a3;         /* Metadata, handles, inactive icons */
--disabled-plum: #bfb4ca;      /* Disabled text */

/* Borders */
--border-cloud: rgba(255, 255, 255, 0.72);
--border-lilac: rgba(191, 169, 231, 0.34);
--border-mist: rgba(151, 139, 166, 0.18);
--border-active: rgba(126, 87, 255, 0.44);

/* CTA Accents */
--ultraviolet-jelly: #7c4dff;  /* Primary CTA */
--orchid-chrome: #c65cff;      /* Secondary CTA highlight */
--glazed-periwinkle: #8ea2ff;  /* Cool accent and hover glow */
--lilac-electric: #a879ff;     /* Active focus, selected states */
--soft-violet: #d9c7ff;        /* Low-intensity CTA fill */
```

### Tailwind-Style Token Mapping

```css
/* Backgrounds */
bg-white                  /* #ffffff */
bg-[#fbfaff]              /* soft cloud */
bg-[#f6f1ff]              /* lavender milk */
bg-[#eee6ff]              /* lilac fog */
bg-[#e7dcff]              /* pale lilac */
bg-white/70               /* translucent panels */
bg-[#f6f1ff]/70           /* tinted glass sections */

/* Text */
text-[#24172f]            /* ink plum: primary */
text-[#3a2848]            /* deep plum: secondary headings */
text-[#6b5a78]            /* soft plum: body/bio */
text-[#9688a3]            /* muted plum: handles, icons, metadata */
text-[#bfb4ca]            /* disabled */

/* Borders */
border-white/70           /* glass panel rim */
border-[#bfa9e7]/30       /* default lilac border */
border-[#978ba6]/20       /* neutral mist border */
border-[#7c4dff]/40       /* focused CTA ring */

/* CTA */
bg-[#7c4dff]              /* ultraviolet jelly */
bg-[#c65cff]              /* orchid chrome */
bg-[#8ea2ff]              /* glazed periwinkle */
text-[#7c4dff]            /* accent text */
ring-[#7c4dff]/20         /* soft focus glow */
```

### Color Usage Rules

| Role | Token | Usage |
| --- | --- | --- |
| Main canvas | `cloud-white`, `soft-cloud` | Page background and safe outer area |
| Atmospheric wash | `lavender-milk`, `lilac-fog` | Radial glows, large soft background gradients |
| Link capsules | `surface-white`, `surface-lavender` | Default button surfaces |
| Primary text | `ink-plum` | Display name, main labels |
| Secondary text | `soft-plum` | Bio, supporting descriptions |
| Muted text | `muted-plum` | Handles, micro metadata, inactive social icons |
| Primary CTA | `ultraviolet-jelly` | Main featured link or primary action |
| Secondary accent | `orchid-chrome` | Highlight sheens, gradients, selected social states |
| Cool accent | `glazed-periwinkle` | Hover glows, focus halos, decorative radial light |

---

## Gradient System

Gradients are soft, diffused, and atmospheric. They should feel like screen glow rather than visible graphic decoration.

### Background Radial Glow

```css
background:
  radial-gradient(circle at 50% 0%, rgba(199, 165, 255, 0.34), transparent 34%),
  radial-gradient(circle at 85% 18%, rgba(142, 162, 255, 0.22), transparent 28%),
  radial-gradient(circle at 16% 32%, rgba(198, 92, 255, 0.16), transparent 30%),
  #fbfaff;
```

### Soft Capsule Sheen

```css
background:
  linear-gradient(180deg, rgba(255,255,255,0.86), rgba(248,244,255,0.76)),
  linear-gradient(90deg, rgba(255,255,255,0.24), rgba(199,165,255,0.18), rgba(255,255,255,0.12));
```

### Primary CTA Gradient

```css
background:
  linear-gradient(135deg, #7c4dff 0%, #a879ff 46%, #c65cff 100%);
```

### Periwinkle CTA Gradient

```css
background:
  linear-gradient(135deg, #8ea2ff 0%, #a879ff 54%, #d7c7ff 100%);
```

### Ultra-Soft Page Wash

```css
background:
  linear-gradient(180deg, #fbfaff 0%, #f6f1ff 46%, #ffffff 100%);
```

### Gradient Noise Overlay

Use faint noise to prevent overly flat gradients. Noise must be extremely subtle.

```css
.noise-overlay {
  opacity: 0.035;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("/noise.png");
}
```

If using CSS-only texture:

```css
background-image:
  radial-gradient(rgba(36, 23, 47, 0.045) 0.6px, transparent 0.6px);
background-size: 4px 4px;
opacity: 0.18;
```

---

## Typography

Typography is modern, clean, and social-native. The primary face should feel contemporary and polished. Handles and small utility details use a restrained mono face.

### Recommended Font Families

```css
/* Primary Sans Options */
font-family: "Geist", system-ui, sans-serif;
font-family: "Satoshi", system-ui, sans-serif;
font-family: "Plus Jakarta Sans", system-ui, sans-serif;
font-family: "Neue Montreal", system-ui, sans-serif;

/* Mono Accent */
font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
```

### Font Pairings

| Pairing | Primary Use | Mono Use |
| --- | --- | --- |
| Geist + IBM Plex Mono | Crisp creator UI, clean modern profiles | Handles, small metadata |
| Satoshi + IBM Plex Mono | Softer editorial creator identity | Social handles, link stats |
| Plus Jakarta Sans + IBM Plex Mono | Friendly, rounded mobile-first hubs | Micro labels |
| Neue Montreal + IBM Plex Mono | Minimal premium profile pages | Short system-like labels |

### Font Weights

```css
font-normal      /* Bio text, supporting descriptions */
font-medium      /* Link labels, social row labels, handles */
font-semibold    /* Display name, primary buttons */
font-bold        /* Reserved only for high-confidence display names */
```

Large text should be confident but not bulky. Avoid overly heavy headings unless the typeface requires it for legibility.

### Font Size Scale

```css
text-[10px]      /* Micro badges, tiny status dots, link metadata */
text-[11px]      /* Mono handles, small labels */
text-xs          /* Social labels, compact metadata */
text-sm          /* Bio, secondary button labels, small links */
text-[15px]      /* Primary capsule labels on compact screens */
text-base        /* Default capsule labels */
text-lg          /* Display name on small devices */
text-xl          /* Display name on standard mobile */
text-2xl         /* Display name on large mobile / desktop */
text-3xl         /* Hero creator name for high-impact profile variants */
```

### Letter Spacing

```css
tracking-[-0.03em]   /* Large display names */
tracking-[-0.02em]   /* Section titles and featured labels */
tracking-[-0.01em]   /* Capsule button labels */
tracking-normal      /* Bio and body text */
tracking-[0.02em]    /* Handles and small social labels */
tracking-[0.08em]    /* Micro mono metadata */
```

### Line Height

```css
leading-none       /* Avatar-adjacent stats, compact labels */
leading-tight      /* Display name, tight headings */
leading-snug       /* Bio text */
leading-normal     /* Body or descriptive sections */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Font |
| --- | --- | --- | --- | --- | --- |
| Display Name | `text-xl md:text-2xl` | `semibold` | `ink-plum` | `-0.03em` | Primary Sans |
| Handle | `text-[11px]` | `medium` | `muted-plum` | `0.02em` | IBM Plex Mono |
| Bio | `text-sm` | `normal` | `soft-plum` | `normal` | Primary Sans |
| Capsule Label | `text-[15px]` | `semibold` | `ink-plum` or `white` | `-0.01em` | Primary Sans |
| Capsule Metadata | `text-[10px]` | `medium` | `muted-plum` | `0.08em` | IBM Plex Mono |
| Social Icon | `text-base` | `medium` | `muted-plum` | `normal` | Icon Font / SVG |

---

## Layout System

The system is mobile-first and centered at every breakpoint. Desktop should feel like a larger canvas holding the same narrow creator card, not like a web dashboard.

### Page Container

```css
min-h-screen
w-full
bg-[#fbfaff]
text-[#24172f]
overflow-x-hidden
relative
```

### Centered Shell

```css
mx-auto
min-h-screen
w-full
max-w-[430px]
px-5
pt-8
pb-10
sm:max-w-[440px]
sm:px-6
md:max-w-[460px]
```

### Strict Width Rules

| Breakpoint | Max Content Width | Notes |
| --- | --- | --- |
| 320px | `100% - 32px` | Small phones need compact padding |
| 375px | `100% - 40px` | Standard mobile target |
| 430px | `390px` | Ideal profile width |
| 768px | `440px` | Remains narrow and centered |
| 1024px+ | `460px` | Never exceed creator-link width |

### Vertical Rhythm

```css
--space-avatar-to-name: 14px;
--space-name-to-handle: 5px;
--space-handle-to-bio: 12px;
--space-bio-to-social: 18px;
--space-social-to-links: 22px;
--space-between-capsules: 12px;
```

### Recommended Page Structure

```tsx
<main className="relative min-h-screen overflow-hidden bg-[#fbfaff] text-[#24172f]">
  <BackgroundGlow />
  <div className="relative z-10 mx-auto min-h-screen w-full max-w-[430px] px-5 pt-8 pb-10">
    <ProfileHeader />
    <SocialRow />
    <LinkStack />
  </div>
</main>
```

---

## Spacing System

Spacing is compact but breathable. The link hub should feel fast to scan without becoming dense.

```css
space-1      /* 4px: icon-label gaps, small internal alignments */
space-1.5    /* 6px: handle/name micro spacing */
space-2      /* 8px: compact row spacing */
space-3      /* 12px: capsule gaps */
space-4      /* 16px: small group separation */
space-5      /* 20px: bio/social separation */
space-6      /* 24px: header-to-stack rhythm */
space-8      /* 32px: page top section spacing */
space-10     /* 40px: bottom safe breathing room */
```

### Touch Target Rules

```css
min-height: 48px;    /* Absolute minimum tappable link height */
height: 56px;        /* Standard capsule height */
height: 62px;        /* Featured capsule height */
padding-inline: 18px;
```

---

## Radius System

The visual language is round, soft, and capsule-led.

```css
rounded-lg       /* 12px: tiny inner chips only */
rounded-xl       /* 16px: small floating social buttons */
rounded-2xl      /* 20px: translucent profile panels */
rounded-3xl      /* 24px: large soft panels */
rounded-full     /* All primary capsules, avatars, icon buttons */
```

### Radius Usage

| Component | Radius |
| --- | --- |
| Avatar | `rounded-full` |
| Social icon button | `rounded-full` |
| Link capsule | `rounded-full` |
| Featured link capsule | `rounded-full` |
| Glass profile panel | `rounded-[28px]` |
| Small metadata pill | `rounded-full` |
| Toast / floating notification | `rounded-2xl` |

---

## Elevation & Depth

Depth should feel like translucent glass floating above lavender light. Avoid dark, directional drop shadows.

### Shadow Tokens

```css
/* Barely-there panel depth */
shadow-[0_1px_2px_rgba(36,23,47,0.04)]

/* Soft capsule lift */
shadow-[0_8px_24px_rgba(124,77,255,0.08)]

/* Featured CTA glow */
shadow-[0_12px_34px_rgba(124,77,255,0.22)]

/* Orchid glow */
shadow-[0_12px_34px_rgba(198,92,255,0.18)]

/* Periwinkle glow */
shadow-[0_12px_34px_rgba(142,162,255,0.18)]
```

### Glass Panel Treatment

```css
bg-white/60
backdrop-blur-xl
border
border-white/70
shadow-[0_1px_2px_rgba(36,23,47,0.04)]
```

### Capsule Surface Treatment

```css
bg-white/72
backdrop-blur-xl
border
border-[#bfa9e7]/30
shadow-[0_8px_24px_rgba(124,77,255,0.08)]
```

---

## Iconography

Icons should be clean, geometric, and aligned with exact optical centering. Use thin-to-medium stroke weights.

### Recommended Icon Styles

```css
stroke-width: 1.75px;  /* Default */
stroke-linecap: round;
stroke-linejoin: round;
```

### Icon Sizes

```css
w-3.5 h-3.5    /* Micro metadata icons */
w-4 h-4        /* Secondary link icons */
w-5 h-5        /* Primary social icons */
w-6 h-6        /* Featured social icons only */
```

### Icon Alignment Rules

* Icons in capsules align to the left with a fixed `20px` slot.
* Trailing arrows or external-link icons align to the right with a fixed `20px` slot.
* Center labels must remain visually centered even when icons are present.
* Social icons sit inside equal-size circular buttons.
* Do not mix filled and outlined icons in the same row unless brand icons require it.

### Capsule Icon Layout

```tsx
<div className="grid grid-cols-[20px_1fr_20px] items-center gap-3">
  <Icon className="h-5 w-5 text-[#9688a3]" />
  <span className="truncate text-center text-[15px] font-semibold tracking-[-0.01em]">
    Link Label
  </span>
  <ArrowUpRight className="h-4 w-4 text-[#b5a8c2]" />
</div>
```

---

## Animation System

### Core Philosophy: Silky Social-Native Fade-Up

Elements enter with a gentle vertical lift, soft opacity reveal, and optional blur-to-clear. The sequence should feel polished and lightweight, similar to a high-quality creator landing page.

### Page Entrance

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

### Staggered Link Stack

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

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

### Tactile Press State

Touch interactions should feel soft and physical.

```tsx
whileTap={{ scale: 0.975, y: 1 }}
transition={{ type: "spring", stiffness: 520, damping: 32 }}
```

### Hover Lift

Desktop hover states should be subtle and not disrupt the mobile-first feel.

```tsx
whileHover={{ y: -1, scale: 1.006 }}
transition={{ type: "spring", stiffness: 360, damping: 28 }}
```

### Avatar Entrance

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

### Glow Drift

Background glows can move very slightly. Motion must remain slow and ambient.

```css
@keyframes lilac-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translate3d(8px, -10px, 0) scale(1.04);
    opacity: 0.9;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.72;
  }
}

.animate-lilac-drift {
  animation: lilac-drift 9s ease-in-out infinite;
}
```

---

## UI Components

## BackgroundGlow

A soft radial glow system that establishes the lavender internet atmosphere.

```tsx
function BackgroundGlow() {
  return (
    <div className="pointer-events-none fixed inset-0 overflow-hidden">
      <div className="absolute left-1/2 top-[-120px] h-[340px] w-[340px] -translate-x-1/2 rounded-full bg-[#a879ff]/24 blur-3xl" />
      <div className="absolute right-[-90px] top-[120px] h-[240px] w-[240px] rounded-full bg-[#8ea2ff]/18 blur-3xl" />
      <div className="absolute left-[-100px] top-[260px] h-[220px] w-[220px] rounded-full bg-[#c65cff]/12 blur-3xl" />
      <div className="absolute inset-0 bg-[radial-gradient(rgba(36,23,47,0.045)_0.6px,transparent_0.6px)] [background-size:4px_4px] opacity-[0.12]" />
    </div>
  );
}
```

---

## Profile Header

The profile header is compact, centered, and highly polished. It should communicate identity quickly without occupying too much vertical space.

### Default Profile Header

```tsx
<section className="flex flex-col items-center text-center">
  <div className="relative">
    <div className="absolute inset-[-8px] rounded-full bg-[#a879ff]/20 blur-xl" />
    <img
      src="/avatar.jpg"
      alt=""
      className="relative h-24 w-24 rounded-full border border-white/80 object-cover shadow-[0_12px_34px_rgba(124,77,255,0.16)]"
    />
  </div>

  <h1 className="mt-4 text-xl font-semibold tracking-[-0.03em] text-[#24172f]">
    Display Name
  </h1>

  <div className="mt-1 font-mono text-[11px] font-medium tracking-[0.02em] text-[#9688a3]">
    @handle
  </div>

  <p className="mt-3 max-w-[320px] text-sm leading-snug text-[#6b5a78]">
    Short creator bio limited to two compact lines.
  </p>
</section>
```

### Header Sizing

| Element | Size | Notes |
| --- | --- | --- |
| Avatar | `88px–104px` | Default: `96px` |
| Display Name | `20px–24px` | Use `semibold` |
| Handle | `11px` | Mono face |
| Bio | `14px` | Max width `320px` |
| Header bottom spacing | `18px–24px` | Depends on social row presence |

---

## Avatar System

Avatars are round, softly glowing, and rimmed with a bright glass edge.

### Standard Avatar

```css
h-24
w-24
rounded-full
object-cover
border
border-white/80
shadow-[0_12px_34px_rgba(124,77,255,0.16)]
```

### Small Avatar

```css
h-20
w-20
rounded-full
object-cover
border
border-white/80
shadow-[0_10px_28px_rgba(124,77,255,0.14)]
```

### Featured Avatar Ring

```tsx
<div className="relative rounded-full p-[3px] bg-gradient-to-br from-[#7c4dff] via-[#a879ff] to-[#c65cff]">
  <img className="h-24 w-24 rounded-full border-[3px] border-[#fbfaff] object-cover" />
</div>
```

---

## Social Row

The social row is minimal and secondary. It sits between the bio and the link stack and should never overpower the capsules.

### Standard Social Row

```tsx
<div className="mt-5 flex items-center justify-center gap-2.5">
  {socials.map((social) => (
    <a
      key={social.href}
      href={social.href}
      className="flex h-10 w-10 items-center justify-center rounded-full border border-[#bfa9e7]/30 bg-white/58 text-[#9688a3] backdrop-blur-xl transition-all duration-200 hover:border-[#7c4dff]/30 hover:bg-white/80 hover:text-[#7c4dff] active:scale-95"
    >
      <social.icon className="h-5 w-5" />
    </a>
  ))}
</div>
```

### Social Row Rules

* Use `3–5` icons by default.
* Maximum allowed: `6` icons.
* Social buttons use `40px` circular hit areas.
* Icons must be optically centered.
* Social row color should be muted until hover or tap.
* Avoid labels unless the profile has no link stack.

---

## Link Stack

The link stack is the main interaction zone. It consists of vertically stacked, fully rounded capsule buttons.

### Stack Container

```tsx
<motion.div
  variants={container}
  initial="hidden"
  animate="show"
  className="mt-6 flex flex-col gap-3"
>
  {links.map((link) => (
    <CapsuleLink key={link.href} {...link} />
  ))}
</motion.div>
```

### Default Capsule Link

```tsx
<motion.a
  variants={item}
  whileTap={{ scale: 0.975, y: 1 }}
  href={href}
  className="group relative min-h-14 overflow-hidden rounded-full border border-[#bfa9e7]/30 bg-white/72 px-4 text-[#24172f] shadow-[0_8px_24px_rgba(124,77,255,0.08)] backdrop-blur-xl transition-all duration-200 hover:border-[#7c4dff]/30 hover:bg-white/88 hover:shadow-[0_12px_30px_rgba(124,77,255,0.12)]"
>
  <div className="absolute inset-0 bg-gradient-to-b from-white/42 to-transparent opacity-80" />

  <div className="relative grid min-h-14 grid-cols-[20px_1fr_20px] items-center gap-3">
    <Icon className="h-5 w-5 text-[#9688a3] transition-colors group-hover:text-[#7c4dff]" />
    <span className="truncate text-center text-[15px] font-semibold tracking-[-0.01em]">
      Link Label
    </span>
    <ArrowUpRight className="h-4 w-4 text-[#bfb4ca] transition-colors group-hover:text-[#7c4dff]" />
  </div>
</motion.a>
```

### Featured CTA Capsule

```tsx
<motion.a
  variants={item}
  whileTap={{ scale: 0.975, y: 1 }}
  href={href}
  className="group relative min-h-[62px] overflow-hidden rounded-full bg-gradient-to-br from-[#7c4dff] via-[#a879ff] to-[#c65cff] px-4 text-white shadow-[0_12px_34px_rgba(124,77,255,0.22)] transition-all duration-200 hover:shadow-[0_16px_40px_rgba(124,77,255,0.28)]"
>
  <div className="absolute inset-x-4 top-0 h-px bg-white/70" />
  <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(255,255,255,0.38),transparent_42%)]" />

  <div className="relative grid min-h-[62px] grid-cols-[20px_1fr_20px] items-center gap-3">
    <Icon className="h-5 w-5 text-white/86" />
    <span className="truncate text-center text-base font-semibold tracking-[-0.02em]">
      Featured Link
    </span>
    <ArrowUpRight className="h-4 w-4 text-white/76" />
  </div>
</motion.a>
```

### Soft Accent Capsule

```tsx
<a className="group relative min-h-14 overflow-hidden rounded-full border border-[#8ea2ff]/28 bg-[#eef1ff]/72 px-4 text-[#24172f] shadow-[0_8px_24px_rgba(142,162,255,0.12)] backdrop-blur-xl transition-all duration-200 hover:border-[#8ea2ff]/44 hover:bg-[#f3f5ff] active:scale-[0.975]">
  <div className="relative grid min-h-14 grid-cols-[20px_1fr_20px] items-center gap-3">
    <Icon className="h-5 w-5 text-[#8ea2ff]" />
    <span className="truncate text-center text-[15px] font-semibold tracking-[-0.01em]">
      Soft Accent Link
    </span>
    <ArrowUpRight className="h-4 w-4 text-[#9daaf7]" />
  </div>
</a>
```

### Minimal Text Capsule

```tsx
<a className="flex min-h-12 items-center justify-center rounded-full border border-[#978ba6]/16 bg-white/48 px-5 text-sm font-medium text-[#6b5a78] backdrop-blur-xl transition-all duration-200 hover:bg-white/72 hover:text-[#24172f] active:scale-[0.975]">
  Minimal Link
</a>
```

---

## Capsule Button States

### Default

```css
bg-white/72
border-[#bfa9e7]/30
text-[#24172f]
shadow-[0_8px_24px_rgba(124,77,255,0.08)]
```

### Hover

```css
hover:bg-white/88
hover:border-[#7c4dff]/30
hover:shadow-[0_12px_30px_rgba(124,77,255,0.12)]
```

### Pressed

```css
active:scale-[0.975]
active:translate-y-px
active:bg-[#e8dcff]/80
```

### Focus

```css
focus:outline-none
focus-visible:ring-4
focus-visible:ring-[#7c4dff]/18
focus-visible:border-[#7c4dff]/44
```

### Disabled

```css
pointer-events-none
opacity-45
saturate-50
```

---

## Translucent Panels

Panels are used sparingly for grouped profile content, small featured modules, or compact announcements.

### Glass Profile Panel

```tsx
<section className="rounded-[28px] border border-white/70 bg-white/58 p-5 text-center shadow-[0_1px_2px_rgba(36,23,47,0.04)] backdrop-blur-xl">
  <ProfileHeader />
</section>
```

### Floating Info Panel

```tsx
<div className="rounded-3xl border border-[#bfa9e7]/24 bg-white/52 p-4 shadow-[0_8px_24px_rgba(124,77,255,0.07)] backdrop-blur-xl">
  <div className="flex items-center gap-3">
    <div className="flex h-9 w-9 items-center justify-center rounded-full bg-[#f1e9ff] text-[#7c4dff]">
      <Icon className="h-4 w-4" />
    </div>
    <div className="min-w-0">
      <div className="truncate text-sm font-semibold tracking-[-0.01em] text-[#24172f]">
        Panel Title
      </div>
      <div className="truncate text-xs text-[#9688a3]">
        Supporting detail
      </div>
    </div>
  </div>
</div>
```

---

## Badges & Pills

Badges should be small, rounded, and pastel. They should not compete with link capsules.

### Soft Lilac Badge

```tsx
<span className="inline-flex items-center rounded-full border border-[#bfa9e7]/28 bg-[#f1e9ff]/74 px-2.5 py-1 text-[10px] font-medium tracking-[0.08em] text-[#6b5a78] backdrop-blur-xl">
  LABEL
</span>
```

### Mono Handle Pill

```tsx
<span className="inline-flex items-center rounded-full border border-[#978ba6]/16 bg-white/54 px-2.5 py-1 font-mono text-[10px] font-medium tracking-[0.04em] text-[#9688a3] backdrop-blur-xl">
  @handle
</span>
```

### Active Accent Pill

```tsx
<span className="inline-flex items-center rounded-full border border-[#7c4dff]/24 bg-[#7c4dff]/8 px-2.5 py-1 text-[10px] font-semibold tracking-[0.08em] text-[#7c4dff]">
  ACTIVE
</span>
```

---

## Inputs

Inputs are rarely central in a link hub, but when used for newsletter signup, search, or contact forms, they should match the capsule language.

### Capsule Input

```tsx
<input
  className="h-14 w-full rounded-full border border-[#bfa9e7]/30 bg-white/68 px-5 text-sm font-medium text-[#24172f] placeholder:text-[#b8acc4] shadow-[0_8px_24px_rgba(124,77,255,0.07)] backdrop-blur-xl transition-all duration-200 focus:border-[#7c4dff]/44 focus:bg-white/86 focus:outline-none focus:ring-4 focus:ring-[#7c4dff]/14"
  placeholder="Input placeholder"
/>
```

### Email Capture Row

```tsx
<div className="flex gap-2 rounded-full border border-[#bfa9e7]/30 bg-white/58 p-1.5 shadow-[0_8px_24px_rgba(124,77,255,0.08)] backdrop-blur-xl">
  <input className="min-w-0 flex-1 bg-transparent px-3 text-sm text-[#24172f] placeholder:text-[#b8acc4] focus:outline-none" />
  <button className="h-11 rounded-full bg-[#7c4dff] px-5 text-sm font-semibold text-white shadow-[0_8px_22px_rgba(124,77,255,0.22)] active:scale-95">
    Join
  </button>
</div>
```

---

## Tabs & Small Navigation

Tabs may be used when a creator has categories such as links, shop, music, or posts. They must remain compact and capsule-based.

### Capsule Tab Group

```tsx
<div className="flex rounded-full border border-[#bfa9e7]/24 bg-white/52 p-1 backdrop-blur-xl">
  {tabs.map((tab) => (
    <button
      className={cn(
        "relative h-9 flex-1 rounded-full px-3 text-xs font-semibold transition-colors",
        active
          ? "text-white"
          : "text-[#9688a3] hover:text-[#24172f]"
      )}
    >
      {active && (
        <motion.span
          layoutId="activeTab"
          className="absolute inset-0 rounded-full bg-gradient-to-br from-[#7c4dff] to-[#a879ff] shadow-[0_8px_18px_rgba(124,77,255,0.18)]"
          transition={{ type: "spring", stiffness: 420, damping: 34 }}
        />
      )}
      <span className="relative">{tab.label}</span>
    </button>
  ))}
</div>
```

---

## Loading States

Loading should feel soft and atmospheric, not mechanical.

### Capsule Skeleton

```tsx
<div className="h-14 animate-pulse rounded-full border border-[#bfa9e7]/18 bg-[#f1e9ff]/54" />
```

### Profile Skeleton

```tsx
<div className="flex flex-col items-center">
  <div className="h-24 w-24 animate-pulse rounded-full bg-[#eadfff]" />
  <div className="mt-4 h-5 w-36 animate-pulse rounded-full bg-[#eadfff]" />
  <div className="mt-2 h-3 w-24 animate-pulse rounded-full bg-[#f1e9ff]" />
  <div className="mt-4 h-4 w-64 animate-pulse rounded-full bg-[#f1e9ff]" />
</div>
```

### Shimmer Overlay

```css
@keyframes lilac-shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.58),
    transparent
  );
  animation: lilac-shimmer 1.4s ease-in-out infinite;
}
```

---

## Toasts & Floating Feedback

Toasts are compact, rounded, and glassy. They appear near the bottom on mobile.

### Mobile Toast

```tsx
<motion.div
  initial={{ opacity: 0, y: 12, scale: 0.98 }}
  animate={{ opacity: 1, y: 0, scale: 1 }}
  exit={{ opacity: 0, y: 8, scale: 0.98 }}
  transition={{ duration: 0.24, ease: [0.22, 1, 0.36, 1] }}
  className="fixed bottom-5 left-1/2 z-50 flex h-12 -translate-x-1/2 items-center gap-2 rounded-full border border-white/70 bg-white/72 px-4 text-sm font-medium text-[#24172f] shadow-[0_12px_34px_rgba(124,77,255,0.16)] backdrop-blur-xl"
>
  <Check className="h-4 w-4 text-[#7c4dff]" />
  <span>Saved</span>
</motion.div>
```

---

## Component Catalog

### Cards

Cards are secondary to capsules. Use them only for profile panels, embedded previews, or small content modules.

```tsx
// Soft Glass Card
"rounded-[28px] border border-white/70 bg-white/58 p-5 shadow-[0_1px_2px_rgba(36,23,47,0.04)] backdrop-blur-xl"

// Lilac Preview Card
"rounded-3xl border border-[#bfa9e7]/24 bg-[#f6f1ff]/66 p-4 shadow-[0_8px_24px_rgba(124,77,255,0.07)] backdrop-blur-xl"

// Interactive Mini Card
"rounded-3xl border border-[#bfa9e7]/24 bg-white/62 p-4 transition-all duration-200 hover:bg-white/82 hover:border-[#7c4dff]/28 active:scale-[0.985]"
```

### Buttons

```tsx
// Primary Capsule CTA
"min-h-14 rounded-full bg-gradient-to-br from-[#7c4dff] via-[#a879ff] to-[#c65cff] px-6 text-sm font-semibold text-white shadow-[0_12px_34px_rgba(124,77,255,0.22)] transition-all duration-200 hover:shadow-[0_16px_40px_rgba(124,77,255,0.28)] active:scale-[0.975]"

// Secondary Glass Capsule
"min-h-14 rounded-full border border-[#bfa9e7]/30 bg-white/72 px-6 text-sm font-semibold text-[#24172f] shadow-[0_8px_24px_rgba(124,77,255,0.08)] backdrop-blur-xl transition-all duration-200 hover:bg-white/88 hover:border-[#7c4dff]/30 active:scale-[0.975]"

// Icon Circle
"flex h-10 w-10 items-center justify-center rounded-full border border-[#bfa9e7]/30 bg-white/58 text-[#9688a3] backdrop-blur-xl transition-all duration-200 hover:text-[#7c4dff] hover:bg-white/80 active:scale-95"

// Tiny Pill Button
"rounded-full border border-[#978ba6]/16 bg-white/54 px-3 py-1.5 text-xs font-semibold text-[#6b5a78] backdrop-blur-xl transition-all hover:text-[#24172f] hover:bg-white/76"
```

### Inputs

```tsx
// Capsule Input
"h-14 w-full rounded-full border border-[#bfa9e7]/30 bg-white/68 px-5 text-sm font-medium text-[#24172f] placeholder:text-[#b8acc4] shadow-[0_8px_24px_rgba(124,77,255,0.07)] backdrop-blur-xl transition-all duration-200 focus:border-[#7c4dff]/44 focus:bg-white/86 focus:outline-none focus:ring-4 focus:ring-[#7c4dff]/14"

// Compact Search Input
"h-11 w-full rounded-full border border-[#978ba6]/16 bg-white/54 px-4 text-sm text-[#24172f] placeholder:text-[#b8acc4] backdrop-blur-xl focus:outline-none focus:ring-4 focus:ring-[#7c4dff]/12"
```

### Badges

```tsx
// Lilac Badge
"inline-flex items-center rounded-full border border-[#bfa9e7]/28 bg-[#f1e9ff]/74 px-2.5 py-1 text-[10px] font-medium tracking-[0.08em] text-[#6b5a78] backdrop-blur-xl"

// Active Accent Badge
"inline-flex items-center rounded-full border border-[#7c4dff]/24 bg-[#7c4dff]/8 px-2.5 py-1 text-[10px] font-semibold tracking-[0.08em] text-[#7c4dff]"

// Mono Handle Badge
"inline-flex items-center rounded-full border border-[#978ba6]/16 bg-white/54 px-2.5 py-1 font-mono text-[10px] font-medium tracking-[0.04em] text-[#9688a3] backdrop-blur-xl"
```

---

## Responsive Behavior

The design remains visually centered and narrow. Larger screens only add more outer whitespace and slightly calmer vertical spacing.

### Mobile: 320px–430px

```css
max-width: 100%;
padding-inline: 20px;
avatar-size: 88px-96px;
capsule-height: 56px;
capsule-gap: 12px;
```

### Large Mobile / Small Tablet: 431px–767px

```css
max-width: 430px;
padding-inline: 24px;
avatar-size: 96px;
capsule-height: 56px;
```

### Tablet and Desktop: 768px+

```css
max-width: 460px;
padding-inline: 24px;
avatar-size: 96px-104px;
capsule-height: 56px;
```

### Desktop Containment Rule

```tsx
<div className="mx-auto w-full max-w-[460px]">
  {/* All profile content */}
</div>
```

Do not introduce multi-column layouts for the link stack.

---

## Accessibility

### Contrast

| Element | Minimum Target |
| --- | --- |
| Primary text on light surfaces | WCAG AA |
| Bio text on lavender surfaces | WCAG AA preferred |
| White text on CTA gradients | WCAG AA |
| Muted icons | May be lower only when decorative |
| Focus rings | Must be clearly visible |

### Focus States

All interactive elements need visible keyboard focus.

```css
focus-visible:outline-none
focus-visible:ring-4
focus-visible:ring-[#7c4dff]/18
focus-visible:ring-offset-0
```

### Touch Targets

```css
min-width: 40px;     /* Social icons */
min-height: 40px;    /* Social icons */
min-height: 48px;    /* Secondary tappable controls */
min-height: 56px;    /* Primary capsule links */
```

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

---

## Implementation Pattern

### Full Page Example

```tsx
export function LilacInternetProfile() {
  return (
    <main className="relative min-h-screen overflow-hidden bg-[#fbfaff] text-[#24172f]">
      <BackgroundGlow />

      <motion.div
        initial={{ opacity: 0, y: 12, filter: "blur(8px)" }}
        animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
        transition={{ duration: 0.42, ease: [0.22, 1, 0.36, 1] }}
        className="relative z-10 mx-auto min-h-screen w-full max-w-[430px] px-5 pt-8 pb-10 sm:max-w-[440px] sm:px-6 md:max-w-[460px]"
      >
        <ProfileHeader />

        <SocialRow />

        <motion.div
          variants={container}
          initial="hidden"
          animate="show"
          className="mt-6 flex flex-col gap-3"
        >
          <FeaturedCapsuleLink />
          <CapsuleLink />
          <CapsuleLink />
          <CapsuleLink />
        </motion.div>
      </motion.div>
    </main>
  );
}
```

---

## Quality Checklist

* [ ] Is the entire experience light-themed with a cloud-white or lavender-milk canvas?
* [ ] Is the layout narrow and centered on every breakpoint?
* [ ] Does the page avoid desktop-wide layouts and multi-column link stacks?
* [ ] Is the profile header compact, centered, and visually polished?
* [ ] Does the display name feel confident without becoming oversized or heavy?
* [ ] Is the handle set in a subtle mono face such as IBM Plex Mono?
* [ ] Is the bio short, centered, and limited to a compact width?
* [ ] Is the social row minimal, muted, and secondary to the link stack?
* [ ] Are all primary link buttons fully rounded capsules?
* [ ] Do capsules include crisp left/right icon alignment?
* [ ] Are CTA accents limited to ultraviolet jelly, orchid chrome, glazed periwinkle, or related lilac tones?
* [ ] Are shadows soft, lavender-tinted, and free of muddy dark blur?
* [ ] Are background glows radial, subtle, and non-distracting?
* [ ] Is gradient noise faint enough to preserve legibility?
* [ ] Do interactive elements include tactile press states?
* [ ] Does the page entrance use silky staggered fade-up animation?
* [ ] Are focus states visible and accessible?
* [ ] Are all primary tap targets at least `48px` tall, preferably `56px`?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Cloud white, lavender milk, pale lilac, mist gray, ink plum, and soft violet accents.
* Narrow, centered layouts on all screen sizes.
* Fully rounded capsule buttons for links and CTAs.
* Subtle radial glows behind the profile and page shell.
* Faint gradient noise for texture.
* Translucent glass panels with soft backdrop blur.
* Ultraviolet, orchid, and periwinkle CTA gradients.
* Mono handles and micro metadata.
* Minimal social rows with circular icon buttons.
* Crisp SVG icons with consistent stroke width.
* Tactile `active:scale` or `whileTap` states.
* Staggered fade-up animation for profile and links.

### ✗ Not Allowed

* Dark backgrounds as the primary theme.
* Full-width desktop link layouts.
* Square or sharp-cornered primary buttons.
* Heavy black shadows or muddy elevation.
* Pure black text.
* Oversaturated rainbow gradients.
* Dense social rows with too many icons.
* Large cards competing with the capsule stack.
* Excessive decorative elements inside link buttons.
* Misaligned icons or inconsistent icon sizing.
* Abrupt animations, bouncy novelty effects, or aggressive parallax.
* Opaque modal overlays that hide the soft page atmosphere.