Opal Social Glass Stack

/opalSocialGlassStack
A mobile-first design system for elegant, frosted-glass social pages, featuring luminous surfaces, pill-shaped CTAs, and refined, centered layouts emphasizing readability, soft radiance, and premium interaction.
1 like
Jun 24, 2026
Design System Content
# Opal Social Glass Stack Design System

A design language for luminous, mobile-first social link pages with premium frosted surfaces, centered structure, and elegant glass-adjacent depth.

---

## Philosophy

> "Soft light, clear action, effortless presence."

Opal Social Glass Stack creates profile-link interfaces that feel polished, airy, and premium without sacrificing the immediate usability of classic link pages. The interface should feel like a stack of translucent objects resting in diffused light: softly frosted, gently bordered, slightly reflective, and always easy to scan.

The system is designed for mobile-first personal pages, creator profiles, professional link hubs, product microsites, and social landing pages where the user should quickly understand who someone is, where to find them, and which action to take next.

### Core Beliefs

1. **Clarity before glass** — Frosted panels, blur, shimmer, and translucency must never reduce readability or tap confidence.
2. **Center alignment creates calm** — The entire page should feel composed around a single vertical axis: avatar, name, bio, links, CTAs.
3. **Premium through restraint** — The surface treatment should feel luminous and expensive, not decorative or noisy.
4. **Soft contrast, sharp edges** — Backgrounds may be hazy and atmospheric, but text, buttons, icons, and touch targets remain crisp.
5. **Pills are the primary interface language** — Rounded CTA buttons, social rows, badges, and handles form the recognizable stack.
6. **Mobile is the default canvas** — Every layout decision begins at 360–430px wide and scales outward carefully.
7. **Motion is a glint, not a performance** — Animations should feel like light shifting across glass: subtle, short, and refined.

### Strict Rules

* **Mobile-first always** — Primary layouts must work beautifully at 360px width before desktop enhancements are considered.
* **No complex grids** — Avoid bento layouts, dense card grids, dashboards, or multi-column information architecture for the core page.
* **No low-contrast text on blur** — Text must sit on a stable enough surface to meet practical readability.
* **No heavy shadows** — Depth comes from blur, hairline borders, transparency, and tiny low-opacity shadows.
* **No loud gradients** — Atmospheric gradients are allowed only as soft halos or translucent washes.
* **No glass clutter** — Do not stack multiple intense glass panels inside each other unless the opacity and blur are extremely restrained.
* **No sharp-corner primary elements** — Main panels, CTAs, avatars, badges, and rows must use soft radii or full pills.
* **No dense navigation** — This system is for profile headers, concise bios, social links, and generous CTA stacks.

---

## Color Palette

The palette is built around opalescent whites, frosted silvers, pale lavender-gray, translucent sky, and deep slate. Accent CTAs may use orchid chrome, lagoon glaze, or rosewood gel, but should not all compete on the same screen.

### Core Surface Scale

```css
/* Main Canvas */
bg-opal-white              /* Primary page canvas (#FDFDFB) */
bg-opal-mist               /* Soft luminous off-white (#F8F7F4) */
bg-frost-silver            /* Frosted neutral panel tone (#EEF0F2) */
bg-lavender-gray           /* Pale lavender-gray atmospheric surface (#ECEAF2) */
bg-sky-translucent         /* Translucent sky overlay rgba(202, 225, 241, 0.42) */
bg-slate-deep              /* Deep slate text and dark footer zones (#17212B) */

/* Glass Surfaces */
bg-glass-opal              /* Main frosted panel rgba(255, 255, 255, 0.58) */
bg-glass-silver            /* Secondary frosted row rgba(238, 240, 242, 0.46) */
bg-glass-sky               /* Cool luminous surface rgba(213, 231, 244, 0.36) */
bg-glass-lavender          /* Subtle lavender surface rgba(232, 229, 241, 0.38) */
bg-glass-dark              /* Dark translucent overlay rgba(23, 33, 43, 0.56) */

/* Background Halos */
bg-halo-opal               /* Large central glow rgba(255, 255, 255, 0.72) */
bg-halo-sky                /* Cool blue halo rgba(164, 210, 238, 0.38) */
bg-halo-lavender           /* Pale violet halo rgba(194, 181, 222, 0.34) */
bg-halo-rose               /* Soft rosewood haze rgba(174, 99, 122, 0.20) */
```

### Border Scale

Borders should feel like fine glass edges catching light. Avoid thick, opaque outlines.

```css
/* Hairline Borders */
border-white-60            /* Highlight edge rgba(255, 255, 255, 0.60) */
border-white-35            /* Soft inner edge rgba(255, 255, 255, 0.35) */
border-silver-40           /* Default glass border rgba(185, 193, 202, 0.40) */
border-silver-25           /* Subtle container division rgba(185, 193, 202, 0.25) */
border-slate-10            /* Very soft dark boundary rgba(23, 33, 43, 0.10) */
border-slate-18            /* Hover/active boundary rgba(23, 33, 43, 0.18) */

/* Accent Borders */
border-orchid-35           /* Orchid chrome active edge rgba(178, 112, 224, 0.35) */
border-lagoon-35           /* Lagoon glaze active edge rgba(38, 162, 177, 0.35) */
border-rosewood-35         /* Rosewood gel active edge rgba(156, 78, 96, 0.35) */
```

### Text Hierarchy

Text should be crisp and readable against frosted surfaces. Use deep slate instead of pure black for a softer premium appearance.

```css
text-slate-950             /* Primary headings and name text (#111820) */
text-slate-850             /* Main body and CTA text (#1B2631) */
text-slate-700             /* Secondary descriptions (#344252) */
text-slate-500             /* Metadata, handles, timestamps (#687584) */
text-slate-400             /* Placeholders, disabled labels (#8994A1) */
text-white                 /* Text on dark or saturated accent CTAs (#FFFFFF) */
text-opal-white            /* Text on deep translucent glass (#FDFDFB) */
```

### Accent CTA Family

Use one primary accent per screen whenever possible. Secondary accent treatments may appear as tiny glows, focus states, or hover edges, but not as competing buttons.

```css
/* Orchid Chrome — premium, creator-forward, luminous purple */
bg-orchid-chrome           /* Primary orchid CTA (#A66BE8) */
bg-orchid-chrome-hover     /* Hover state (#9659DA) */
bg-orchid-chrome-soft      /* Soft backing rgba(166, 107, 232, 0.14) */
text-orchid-chrome         /* Accent text (#8D4DCC) */
ring-orchid-chrome         /* Focus ring rgba(166, 107, 232, 0.38) */

/* Lagoon Glaze — fresh, tech-adjacent, clear aqua */
bg-lagoon-glaze            /* Primary lagoon CTA (#22A6B3) */
bg-lagoon-glaze-hover      /* Hover state (#1796A3) */
bg-lagoon-glaze-soft       /* Soft backing rgba(34, 166, 179, 0.14) */
text-lagoon-glaze          /* Accent text (#147D89) */
ring-lagoon-glaze          /* Focus ring rgba(34, 166, 179, 0.36) */

/* Rosewood Gel — warm, editorial, intimate */
bg-rosewood-gel            /* Primary rosewood CTA (#9E5368) */
bg-rosewood-gel-hover      /* Hover state (#8F475B) */
bg-rosewood-gel-soft       /* Soft backing rgba(158, 83, 104, 0.14) */
text-rosewood-gel          /* Accent text (#814052) */
ring-rosewood-gel          /* Focus ring rgba(158, 83, 104, 0.34) */
```

### Neutral Utility Colors

```css
bg-white/70                /* Elevated frosted card fill */
bg-white/50                /* Default translucent row fill */
bg-white/35                /* Open-air glass chip fill */
bg-slate-950/5             /* Subtle pressed state */
bg-slate-950/8             /* Secondary hover state */
bg-slate-950/12            /* Strong pressed state */
bg-slate-950/70            /* Dark glass bottom sheet */

border-white/50            /* Top highlight */
border-white/30            /* Nested glass divider */
border-slate-950/10        /* Default utility border */
border-slate-950/15        /* Hover utility border */
```

### Color Usage Ratios

| Role | Recommended Usage |
| --- | --- |
| Opal white / mist / silver | 65–75% of visible interface |
| Pale lavender-gray / translucent sky | 15–25% as atmosphere, halos, and soft panels |
| Deep slate | 8–12% for text, icons, dark contrast details |
| Accent CTA | 3–6% for primary actions and active states |
| Shimmer / highlight white | 1–2% for premium surface glints |

### Approved Color Combinations

```css
/* Classic Opal */
background: #FDFDFB;
panel: rgba(255, 255, 255, 0.58);
text: #111820;
accent: #A66BE8;

/* Cool Sky Glass */
background: linear-gradient(180deg, #FDFDFB 0%, #EEF5FA 100%);
panel: rgba(255, 255, 255, 0.52);
text: #17212B;
accent: #22A6B3;

/* Lavender Silver */
background: #F7F5FA;
panel: rgba(255, 255, 255, 0.60);
text: #1B2631;
accent: #A66BE8;

/* Rosewood Opal */
background: #FBF8F7;
panel: rgba(255, 255, 255, 0.58);
text: #17212B;
accent: #9E5368;
```

---

## Typography

Opal Social Glass Stack uses contemporary sans-serif typography with smooth geometry, strong legibility, and calm proportions. Handles and compact metadata may use a subtle monospace face for contrast.

### Font Families

```css
/* Primary Sans Options */
font-geist              /* Preferred modern default */
font-switzer            /* Premium editorial UI alternative */
font-sf-pro             /* Native Apple-like mobile refinement */
font-circular           /* Friendly geometric option */
font-neue-montreal      /* Polished brand-forward option */

/* Mono Options */
font-ibm-plex-mono      /* Preferred mono for handles and micro labels */
font-geist-mono         /* Alternate mono for technical metadata */
```

### Recommended Font Stack

```css
font-family:
  "Geist",
  "Switzer",
  "SF Pro Display",
  "SF Pro Text",
  "Circular",
  "Neue Montreal",
  system-ui,
  -apple-system,
  BlinkMacSystemFont,
  sans-serif;

font-family-mono:
  "IBM Plex Mono",
  "Geist Mono",
  "SF Mono",
  "Roboto Mono",
  monospace;
```

### Font Weights

```css
font-light       /* Large display names when oversized or editorial */
font-normal      /* Bio, descriptions, supporting text */
font-medium      /* CTA labels, profile names, link titles */
font-semibold    /* Important buttons, compact labels, selected states */
font-bold        /* Rare; only for extremely small labels requiring clarity */
```

### Font Size Scale

```css
text-[10px]      /* Micro badges, tiny counters, legal/system utility */
text-[11px]      /* Compact mono handles, metadata beneath links */
text-xs          /* Social handles, small labels, secondary profile details */
text-sm          /* Link subtitles, bio on dense mobile screens */
text-[15px]      /* Ideal mobile body and CTA label size */
text-base        /* Default CTA labels and profile bio on spacious screens */
text-lg          /* Profile name on compact mobile layouts */
text-xl          /* Profile name on standard mobile layouts */
text-2xl         /* Featured profile name, small hero names */
text-3xl         /* Large profile display name */
text-4xl         /* Desktop or highly expressive profile header only */
```

### Line Height

```css
leading-none       /* Avatar initials, icon labels, compact badges */
leading-tight      /* Profile names and display headings */
leading-snug       /* Short bios, compact descriptions */
leading-normal     /* Default readable body */
leading-relaxed    /* Longer bio blocks only */
```

### Letter Spacing

```css
tracking-tight     /* Display names and large headings */
tracking-normal    /* Default UI text and CTA labels */
tracking-wide      /* Small labels and short metadata */
tracking-wider     /* Selected tabs, compact section labels */
tracking-[0.08em]  /* Tiny uppercase mono labels only */
```

### Typography Roles

| Element | Size | Weight | Color | Font | Tracking | Notes |
| --- | --- | --- | --- | --- | --- | --- |
| Profile Name | text-xl–3xl | medium | slate-950 | Primary Sans | tight | Centered; never cramped |
| Handle | text-xs–sm | normal | slate-500 | IBM Plex Mono | normal/wide | Use below name or beside verification icon |
| Bio | text-sm–base | normal | slate-700 | Primary Sans | normal | Max 2–4 lines on mobile |
| Primary CTA | text-[15px]–base | semibold | white | Primary Sans | normal | Crisp, centered label |
| Secondary Link | text-[15px] | medium | slate-850 | Primary Sans | normal | Avoid tiny tap labels |
| Link Subtitle | text-xs–sm | normal | slate-500 | Primary Sans | normal | Optional, one line |
| Social Icon Label | text-xs | medium | slate-600 | Primary Sans | normal | Only if icons are labeled |
| Micro Badge | text-[10px]–[11px] | semibold | slate-500 | IBM Plex Mono | 0.08em | Uppercase allowed for UI labels |

### Type Rules

* Profile names should usually use `font-medium`, not heavy bold.
* Handles should use IBM Plex Mono or another subtle mono to create a precise social identity layer.
* Bios should be short, centered, and readable with generous line height.
* CTA labels must not be smaller than `text-sm` on mobile.
* Avoid decorative display fonts; the glass treatment is already expressive.
* Use deep slate for most text, never pale gray for essential labels.

---

## Layout System

The layout is a centered vertical stack optimized for mobile link pages. Complexity should come from refined surfaces, not information architecture.

### Core Page Structure

```txt
Page Background
└── Centered Mobile Shell
    ├── Profile Header
    │   ├── Avatar
    │   ├── Name
    │   ├── Handle
    │   └── Bio
    ├── Social Link Row
    ├── Primary CTA Stack
    ├── Secondary Link Stack
    └── Optional Footer / Badge
```

### Mobile-First Shell

```css
min-h-screen
w-full
px-4
py-6
flex
justify-center
items-start
```

### Content Width

```css
w-full
max-w-[420px]       /* Preferred mobile/social profile width */
mx-auto
```

For very small devices:

```css
max-w-[360px]
px-3
```

For tablet/desktop preview:

```css
max-w-[440px]       /* Do not over-expand link pages */
```

### Vertical Spacing Scale

```css
space-y-1          /* Micro grouping: name + handle */
space-y-2          /* Small text groupings */
space-y-3          /* Social icons / compact links */
space-y-4          /* Header to bio, bio to socials */
space-y-5          /* CTA stack spacing */
space-y-6          /* Major page sections */
space-y-8          /* Header to main panel */
space-y-10         /* Large top-level separation */
```

### Padding Scale

```css
p-3               /* Small chips and compact rows */
p-4               /* Default link rows and compact glass panels */
p-5               /* Standard frosted profile panels */
p-6               /* Spacious premium profile panel */
px-5 py-4         /* Preferred pill CTA padding */
px-6 py-4         /* Large primary CTA */
px-4 py-3         /* Secondary CTA and social rows */
```

### Radius Scale

Soft radii are central to the system. Most interactive elements should feel pill-shaped.

```css
rounded-xl         /* Small nested chips */
rounded-2xl        /* Link rows, compact panels */
rounded-3xl        /* Primary frosted panel */
rounded-[28px]     /* Premium glass containers */
rounded-[32px]     /* Large profile surface */
rounded-full       /* CTAs, avatar masks, social pills, badges */
```

### Recommended Layout Variants

#### 1. Frosted Panel Stack

The most canonical layout. All profile content and links live inside one softly frosted container.

```tsx
<section className="w-full max-w-[420px] rounded-[32px] border border-white/50 bg-white/55 p-5 shadow-opal backdrop-blur-2xl">
  <ProfileHeader />
  <SocialLinks />
  <CTAStack />
</section>
```

#### 2. Open-Air Stack

Profile header sits directly on the atmospheric background while CTAs appear as individual glass pills.

```tsx
<main className="w-full max-w-[420px] mx-auto px-4 py-8">
  <ProfileHeader className="mb-6" />
  <CTAStack variant="floatingPills" />
</main>
```

#### 3. Split Glow Panel

A minimal panel with a soft halo behind the avatar and CTA stack.

```tsx
<div className="relative w-full max-w-[420px]">
  <div className="absolute -top-16 left-1/2 h-52 w-52 -translate-x-1/2 rounded-full bg-sky-300/25 blur-3xl" />
  <section className="relative rounded-[32px] border border-white/45 bg-white/50 p-6 backdrop-blur-2xl">
    <ProfileHeader />
    <CTAStack />
  </section>
</div>
```

---

## Surface & Glass System

Glass should feel premium, stable, and usable. Use frosted translucency with hairline borders, subtle shadows, and atmospheric background halos.

### Backdrop Blur Scale

```css
backdrop-blur-sm       /* Light translucency for chips */
backdrop-blur-md       /* Social icon rows and small pills */
backdrop-blur-xl       /* Standard CTA rows */
backdrop-blur-2xl      /* Main frosted panels */
backdrop-blur-3xl      /* Modal/bottom sheet glass */
```

### Glass Opacity Scale

```css
bg-white/35            /* Airy chip; only behind non-critical text */
bg-white/45            /* Floating social icon pill */
bg-white/55            /* Default frosted panel */
bg-white/65            /* High-readability link row */
bg-white/75            /* Inputs and dense text surfaces */
bg-white/85            /* Maximum clarity glass */
```

### Shadow Scale

Shadows must remain soft and low-depth. They should create lift without murkiness.

```css
/* Opal Shadow Tokens */
shadow-opal-xs:
  0 1px 2px rgba(23, 33, 43, 0.04)

shadow-opal-sm:
  0 4px 14px rgba(23, 33, 43, 0.06)

shadow-opal-md:
  0 10px 30px rgba(23, 33, 43, 0.08)

shadow-opal-glow:
  0 16px 48px rgba(164, 210, 238, 0.18)

shadow-orchid-glow:
  0 12px 34px rgba(166, 107, 232, 0.25)

shadow-lagoon-glow:
  0 12px 34px rgba(34, 166, 179, 0.22)

shadow-rosewood-glow:
  0 12px 34px rgba(158, 83, 104, 0.20)
```

### Inner Highlight

Use an inset white edge to create a glass lip.

```css
box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.72),
  inset 0 -1px 0 rgba(23, 33, 43, 0.04),
  0 10px 30px rgba(23, 33, 43, 0.08);
```

### Standard Glass Panel

```tsx
"className='rounded-[32px] border border-white/50 bg-white/55 p-5 shadow-opal-md backdrop-blur-2xl ring-1 ring-slate-950/5'"
```

### High-Clarity Glass Row

```tsx
"className='rounded-full border border-white/55 bg-white/70 px-5 py-4 shadow-opal-sm backdrop-blur-xl'"
```

### Airy Glass Chip

```tsx
"className='rounded-full border border-white/40 bg-white/35 px-3 py-1.5 backdrop-blur-md'"
```

### Dark Glass Overlay

Use sparingly for modal sheets or contrast moments.

```tsx
"className='rounded-[28px] border border-white/15 bg-slate-950/65 p-5 text-white shadow-opal-md backdrop-blur-2xl'"
```

---

## Background System

Backgrounds should feel luminous and atmospheric without becoming distracting. The most common composition is an opal base with two to three blurred halos.

### Base Background

```tsx
"className='min-h-screen bg-[#FDFDFB] text-slate-950'"
```

### Opal Halo Background

```tsx
<div className="fixed inset-0 overflow-hidden bg-[#FDFDFB]">
  <div className="absolute -top-24 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-sky-300/25 blur-3xl" />
  <div className="absolute top-40 -left-20 h-64 w-64 rounded-full bg-violet-300/20 blur-3xl" />
  <div className="absolute bottom-0 right-[-80px] h-72 w-72 rounded-full bg-rose-300/16 blur-3xl" />
</div>
```

### Frosted Silver Gradient

```css
background:
  radial-gradient(circle at 50% 0%, rgba(202, 225, 241, 0.42), transparent 34%),
  radial-gradient(circle at 14% 36%, rgba(194, 181, 222, 0.24), transparent 30%),
  linear-gradient(180deg, #FDFDFB 0%, #EEF0F2 100%);
```

### Lavender Sky Wash

```css
background:
  radial-gradient(circle at 50% -10%, rgba(164, 210, 238, 0.34), transparent 38%),
  radial-gradient(circle at 80% 20%, rgba(194, 181, 222, 0.26), transparent 32%),
  linear-gradient(180deg, #FAFAFC 0%, #ECEAF2 100%);
```

### Background Rules

* Halos should be blurred at `blur-3xl` or stronger.
* Halos should not create hard color bands behind text.
* Avoid animated backgrounds unless movement is extremely slow and opacity is very low.
* Backgrounds should never reduce CTA contrast.
* If text overlaps a halo, increase panel opacity to `bg-white/70` or higher.

---

## Iconography

Icons should be thin, soft, and recognizable. They function as wayfinding, not decoration.

### Icon Style

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

### Icon Sizes

```css
w-4 h-4          /* Inline metadata icon */
w-5 h-5          /* Standard link row icon */
w-6 h-6          /* Social icon button */
w-7 h-7          /* Large primary CTA icon */
```

### Icon Containers

```tsx
// Social Icon Pill
"flex h-11 w-11 items-center justify-center rounded-full border border-white/45 bg-white/45 text-slate-700 shadow-opal-xs backdrop-blur-md transition-all"

// Link Row Icon Capsule
"flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/55 text-slate-700 ring-1 ring-slate-950/6"
```

### Icon Rules

* Use consistent icon sets per page.
* Avoid filled icons unless brand recognition requires it.
* Icons inside CTAs should be aligned on the same optical center as text.
* Social icon rows should use generous spacing and touch-friendly hit areas.
* Use deep slate icons on light glass; use white icons on accent CTAs.

---

## Animation System

### Core Philosophy: The Luminous Settle

Interface elements appear as if gently resolving through frosted glass: a slight fade, a subtle upward movement, and a clean blur-to-clear finish. Motion is calm, responsive, and short.

### Page Entrance

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

### Staggered Stack Reveal

Use for profile header, social row, and CTA buttons.

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

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

### CTA Press Interaction

CTA buttons should feel tactile but not bouncy.

```tsx
whileTap={{ scale: 0.985 }}
whileHover={{ y: -1 }}
transition={{ duration: 0.18, ease: "easeOut" }}
```

### Glass Hover Lift

```tsx
"className='transition-all duration-200 ease-out hover:-translate-y-0.5 hover:bg-white/75 hover:border-white/70 hover:shadow-opal-md'"
```

### Restrained Shimmer

Use only for featured primary CTAs or premium badges. Shimmer should be slow and low-opacity.

```tsx
<div className="pointer-events-none absolute inset-0 overflow-hidden rounded-full">
  <div className="absolute inset-y-0 -left-1/2 w-1/2 rotate-12 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-opal-shimmer" />
</div>
```

```css
@keyframes opal-shimmer {
  0% {
    transform: translateX(-120%) rotate(12deg);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  55% {
    opacity: 0.25;
  }
  100% {
    transform: translateX(320%) rotate(12deg);
    opacity: 0;
  }
}

.animate-opal-shimmer {
  animation: opal-shimmer 3.8s ease-in-out infinite;
}
```

### Halo Drift

Optional for atmospheric backgrounds. Keep extremely subtle.

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

.animate-halo-drift {
  animation: halo-drift 14s ease-in-out infinite;
}
```

### Motion Rules

* Page reveal duration should stay between `300ms` and `480ms`.
* Button interactions should stay between `120ms` and `220ms`.
* Do not animate blur continuously on text.
* Do not animate multiple CTA shimmers at once.
* Respect reduced-motion preferences.

```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

## Profile Header

The profile header is compact, centered, and visually calm. It should establish identity quickly before the user reaches the CTA stack.

### Structure

```txt
Avatar
Name
Handle
Bio
Optional Status Badge
```

### Standard Profile Header

```tsx
<header className="flex flex-col items-center text-center">
  <div className="mb-4 h-24 w-24 rounded-full border border-white/60 bg-white/50 p-1 shadow-opal-md backdrop-blur-xl">
    <img
      src="/avatar.jpg"
      alt=""
      className="h-full w-full rounded-full object-cover"
    />
  </div>

  <h1 className="text-2xl font-medium tracking-tight text-slate-950">
    Profile Name
  </h1>

  <p className="mt-1 font-mono text-xs text-slate-500">
    @handle
  </p>

  <p className="mt-4 max-w-[30ch] text-sm leading-snug text-slate-700">
    Short profile bio that stays concise and centered.
  </p>
</header>
```

### Avatar Styles

```tsx
// Standard Glass Avatar
"h-24 w-24 rounded-full border border-white/60 bg-white/45 p-1 shadow-opal-md backdrop-blur-xl"

// Compact Avatar
"h-20 w-20 rounded-full border border-white/60 bg-white/45 p-1 shadow-opal-sm backdrop-blur-xl"

// Large Premium Avatar
"h-28 w-28 rounded-full border border-white/70 bg-white/50 p-1.5 shadow-opal-glow backdrop-blur-2xl"
```

### Avatar Fallback

```tsx
"className='flex h-full w-full items-center justify-center rounded-full bg-gradient-to-br from-white to-slate-100 text-xl font-medium text-slate-700'"
```

---

## Frosted Panel

The frosted panel is the primary container for the stack. It should feel like a single opal slab floating over the background.

### Standard Panel

```tsx
<section className="relative overflow-hidden rounded-[32px] border border-white/50 bg-white/55 p-5 shadow-opal-md backdrop-blur-2xl ring-1 ring-slate-950/5">
  <div className="pointer-events-none absolute inset-x-6 top-0 h-px bg-white/80" />
  <div className="relative space-y-6">
    {children}
  </div>
</section>
```

### Compact Panel

```tsx
"className='rounded-[28px] border border-white/45 bg-white/50 p-4 shadow-opal-sm backdrop-blur-xl ring-1 ring-slate-950/5'"
```

### High-Clarity Panel

```tsx
"className='rounded-[32px] border border-white/60 bg-white/72 p-5 shadow-opal-md backdrop-blur-2xl ring-1 ring-slate-950/6'"
```

### Panel Rules

* Use `overflow-hidden` if adding shimmer, top glints, or inner highlights.
* Use `bg-white/65` or higher behind longer text blocks.
* Main panels should not exceed `max-w-[440px]`.
* Avoid nesting more than one full panel inside another full panel.

---

## CTA Buttons

CTA buttons are the most important interaction elements. They should be large, pill-shaped, centered, and highly tappable.

### Primary CTA — Orchid Chrome

```tsx
"relative flex min-h-14 w-full items-center justify-center gap-2 overflow-hidden rounded-full bg-[#A66BE8] px-6 py-4 text-[15px] font-semibold text-white shadow-orchid-glow transition-all duration-200 hover:bg-[#9659DA] active:scale-[0.985] focus:outline-none focus:ring-4 focus:ring-[#A66BE8]/30"
```

### Primary CTA — Lagoon Glaze

```tsx
"relative flex min-h-14 w-full items-center justify-center gap-2 overflow-hidden rounded-full bg-[#22A6B3] px-6 py-4 text-[15px] font-semibold text-white shadow-lagoon-glow transition-all duration-200 hover:bg-[#1796A3] active:scale-[0.985] focus:outline-none focus:ring-4 focus:ring-[#22A6B3]/30"
```

### Primary CTA — Rosewood Gel

```tsx
"relative flex min-h-14 w-full items-center justify-center gap-2 overflow-hidden rounded-full bg-[#9E5368] px-6 py-4 text-[15px] font-semibold text-white shadow-rosewood-glow transition-all duration-200 hover:bg-[#8F475B] active:scale-[0.985] focus:outline-none focus:ring-4 focus:ring-[#9E5368]/30"
```

### Secondary Glass CTA

```tsx
"flex min-h-14 w-full items-center justify-center gap-2 rounded-full border border-white/55 bg-white/65 px-6 py-4 text-[15px] font-medium text-slate-850 shadow-opal-sm backdrop-blur-xl transition-all duration-200 hover:-translate-y-0.5 hover:border-white/75 hover:bg-white/78 hover:shadow-opal-md active:scale-[0.985] focus:outline-none focus:ring-4 focus:ring-slate-950/10"
```

### Ghost Glass CTA

```tsx
"flex min-h-12 w-full items-center justify-center gap-2 rounded-full border border-white/35 bg-white/30 px-5 py-3 text-sm font-medium text-slate-700 backdrop-blur-md transition-all duration-200 hover:bg-white/50 hover:text-slate-950 active:scale-[0.985]"
```

### CTA Stack

```tsx
<div className="space-y-3">
  <a className="primary-cta">Primary Action</a>
  <a className="secondary-glass-cta">Secondary Link</a>
  <a className="secondary-glass-cta">Secondary Link</a>
</div>
```

### CTA Rules

* Minimum mobile tap height: `48px`; preferred: `56px`.
* Primary CTA should appear above secondary links.
* Do not use more than one saturated primary CTA style in a single stack.
* Icons are optional but should not reduce label centering.
* Shimmer may appear on one featured CTA only.

---

## Link Rows

Link rows are pill-shaped, frosted, and highly readable. They support classic link-page usability while matching the opal glass surface.

### Standard Link Row

```tsx
<a className="group flex min-h-14 w-full items-center gap-3 rounded-full border border-white/55 bg-white/65 px-4 py-3 shadow-opal-sm backdrop-blur-xl transition-all duration-200 hover:-translate-y-0.5 hover:border-white/75 hover:bg-white/78 hover:shadow-opal-md active:scale-[0.985]">
  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/60 text-slate-700 ring-1 ring-slate-950/6">
    <Icon className="h-5 w-5" />
  </span>

  <span className="min-w-0 flex-1 text-left">
    <span className="block truncate text-[15px] font-medium text-slate-850">
      Link Title
    </span>
    <span className="block truncate text-xs text-slate-500">
      Optional subtitle or destination
    </span>
  </span>

  <ArrowUpRight className="h-4 w-4 shrink-0 text-slate-400 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-slate-700" />
</a>
```

### Compact Link Row

```tsx
"flex min-h-12 w-full items-center justify-between rounded-full border border-white/50 bg-white/55 px-4 py-2.5 text-sm font-medium text-slate-800 shadow-opal-xs backdrop-blur-lg transition-all hover:bg-white/70"
```

### Featured Link Row

```tsx
"relative flex min-h-16 w-full items-center gap-3 overflow-hidden rounded-[28px] border border-white/60 bg-white/72 px-4 py-4 shadow-opal-md backdrop-blur-2xl ring-1 ring-orchid-chrome/15 transition-all hover:-translate-y-0.5 hover:shadow-orchid-glow"
```

### Link Row Rules

* Use one-line truncation for link titles on mobile.
* Subtitles should be optional and never required for comprehension.
* Arrows should be subtle and secondary.
* Avoid placing dense paragraphs inside link rows.
* Link rows should use `space-y-3` in the stack.

---

## Social Links

Social links can be displayed as a compact icon row, labeled pills, or a mixed row with handle.

### Icon Row

```tsx
<div className="flex items-center justify-center gap-3">
  <a className="flex h-11 w-11 items-center justify-center rounded-full border border-white/45 bg-white/45 text-slate-700 shadow-opal-xs backdrop-blur-md transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/65 hover:text-slate-950 active:scale-95">
    <Icon className="h-5 w-5" />
  </a>
</div>
```

### Labeled Social Pill

```tsx
<a className="inline-flex h-10 items-center gap-2 rounded-full border border-white/45 bg-white/45 px-4 text-sm font-medium text-slate-700 shadow-opal-xs backdrop-blur-md transition-all hover:bg-white/65 hover:text-slate-950">
  <Icon className="h-4 w-4" />
  Instagram
</a>
```

### Handle Strip

```tsx
<div className="flex items-center justify-center gap-2 rounded-full border border-white/40 bg-white/35 px-4 py-2 backdrop-blur-md">
  <span className="font-mono text-xs text-slate-500">@handle</span>
  <span className="h-1 w-1 rounded-full bg-slate-400/60" />
  <span className="text-xs font-medium text-slate-600">Available everywhere</span>
</div>
```

### Social Link Rules

* Keep social rows visually lighter than CTAs.
* Use `h-11 w-11` or larger for touch-friendly icon buttons.
* Do not overcrowd; 3–5 icons is ideal.
* If more than 5 social links are needed, use labeled pill rows instead.

---

## Badges & Status Pills

Badges should be translucent, small, and understated. They may indicate availability, featured status, location, or membership.

### Opal Badge

```tsx
"inline-flex items-center gap-1.5 rounded-full border border-white/45 bg-white/40 px-3 py-1.5 text-xs font-medium text-slate-600 shadow-opal-xs backdrop-blur-md"
```

### Mono Micro Badge

```tsx
"inline-flex items-center rounded-full border border-white/40 bg-white/35 px-2.5 py-1 font-mono text-[10px] font-semibold uppercase tracking-[0.08em] text-slate-500 backdrop-blur-md"
```

### Accent Badge

```tsx
"inline-flex items-center gap-1.5 rounded-full border border-[#A66BE8]/25 bg-[#A66BE8]/12 px-3 py-1.5 text-xs font-medium text-[#8D4DCC] backdrop-blur-md"
```

### Availability Dot

```tsx
<span className="relative flex h-2.5 w-2.5">
  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-lagoon-glaze opacity-30" />
  <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-lagoon-glaze" />
</span>
```

### Badge Rules

* Badges should never compete with the primary CTA.
* Use mono badges for compact identity or system-like metadata only.
* Avoid saturated badge backgrounds.
* Keep badges horizontally centered below bio or above CTA stack.

---

## Inputs

Inputs are optional in social link pages but useful for email capture, waitlists, contact forms, or unlock codes. They should use high-clarity glass.

### Standard Input

```tsx
"w-full rounded-full border border-white/55 bg-white/70 px-5 py-4 text-[15px] text-slate-950 shadow-opal-sm backdrop-blur-xl placeholder:text-slate-400 focus:border-white/80 focus:bg-white/85 focus:outline-none focus:ring-4 focus:ring-orchid-chrome/20"
```

### Input With Button

```tsx
<div className="flex gap-2 rounded-full border border-white/55 bg-white/60 p-1.5 shadow-opal-sm backdrop-blur-xl">
  <input
    className="min-w-0 flex-1 bg-transparent px-4 text-[15px] text-slate-950 placeholder:text-slate-400 focus:outline-none"
    placeholder="Email address"
  />
  <button className="rounded-full bg-orchid-chrome px-5 py-3 text-sm font-semibold text-white shadow-orchid-glow">
    Join
  </button>
</div>
```

### Textarea

```tsx
"min-h-28 w-full resize-none rounded-[24px] border border-white/55 bg-white/70 px-5 py-4 text-[15px] leading-normal text-slate-950 shadow-opal-sm backdrop-blur-xl placeholder:text-slate-400 focus:border-white/80 focus:bg-white/85 focus:outline-none focus:ring-4 focus:ring-orchid-chrome/20"
```

### Input Rules

* Prefer pill inputs for single-line capture.
* Use rounded-3xl textareas for longer messages.
* Input surfaces should be clearer than decorative glass: `bg-white/70` minimum.
* Focus rings should use the selected screen accent.

---

## Navigation & Utility Controls

Navigation should remain minimal. This system is not built for dense menus.

### Top Utility Bar

```tsx
<div className="mb-5 flex items-center justify-between">
  <button className="flex h-10 w-10 items-center justify-center rounded-full border border-white/45 bg-white/40 text-slate-700 shadow-opal-xs backdrop-blur-md transition-all hover:bg-white/65">
    <ArrowLeft className="h-4 w-4" />
  </button>

  <button className="flex h-10 w-10 items-center justify-center rounded-full border border-white/45 bg-white/40 text-slate-700 shadow-opal-xs backdrop-blur-md transition-all hover:bg-white/65">
    <Share className="h-4 w-4" />
  </button>
</div>
```

### Share Sheet Trigger

```tsx
"inline-flex h-10 items-center gap-2 rounded-full border border-white/45 bg-white/40 px-4 text-sm font-medium text-slate-700 shadow-opal-xs backdrop-blur-md transition-all hover:bg-white/65"
```

### Floating Bottom Action

```tsx
"fixed inset-x-4 bottom-4 z-30 mx-auto flex max-w-[420px] items-center justify-between rounded-full border border-white/55 bg-white/70 p-2 shadow-opal-md backdrop-blur-2xl"
```

---

## Modal & Sheet System

Modals should be rare, centered, and glassy. On mobile, prefer bottom sheets with large radii.

### Overlay

```tsx
"fixed inset-0 z-40 bg-slate-950/18 backdrop-blur-md"
```

### Bottom Sheet

```tsx
"fixed inset-x-3 bottom-3 z-50 mx-auto max-w-[420px] rounded-[32px] border border-white/55 bg-white/72 p-5 shadow-opal-md backdrop-blur-2xl ring-1 ring-slate-950/6"
```

### Center Modal

```tsx
"fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] max-w-[380px] -translate-x-1/2 -translate-y-1/2 rounded-[32px] border border-white/55 bg-white/75 p-5 shadow-opal-md backdrop-blur-2xl ring-1 ring-slate-950/6"
```

### Modal Entrance

```tsx
initial={{ opacity: 0, scale: 0.97, filter: "blur(8px)" }}
animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
exit={{ opacity: 0, scale: 0.98, filter: "blur(8px)" }}
transition={{ duration: 0.24, ease: [0.22, 1, 0.36, 1] }}
```

---

## Component Catalog

### Page Shell

```tsx
<div className="relative min-h-screen overflow-hidden bg-[#FDFDFB] px-4 py-6 text-slate-950">
  <div className="pointer-events-none fixed inset-0">
    <div className="absolute -top-24 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-sky-300/25 blur-3xl" />
    <div className="absolute top-44 -left-20 h-64 w-64 rounded-full bg-violet-300/20 blur-3xl" />
    <div className="absolute bottom-[-80px] right-[-80px] h-72 w-72 rounded-full bg-rose-300/16 blur-3xl" />
  </div>

  <main className="relative z-10 mx-auto w-full max-w-[420px]">
    {children}
  </main>
</div>
```

### Main Profile Card

```tsx
<section className="rounded-[32px] border border-white/50 bg-white/55 p-5 shadow-opal-md backdrop-blur-2xl ring-1 ring-slate-950/5">
  <div className="space-y-6">
    <ProfileHeader />
    <SocialIconRow />
    <CTAStack />
  </div>
</section>
```

### Open-Air Profile Stack

```tsx
<main className="mx-auto flex min-h-screen w-full max-w-[420px] flex-col items-center justify-center px-4 py-8">
  <ProfileHeader />

  <div className="mt-6 w-full space-y-3">
    <PrimaryCTA />
    <SecondaryCTA />
    <SecondaryCTA />
  </div>
</main>
```

### Primary Link Button

```tsx
<a className="relative flex min-h-14 w-full items-center justify-center gap-2 overflow-hidden rounded-full bg-[#A66BE8] px-6 py-4 text-[15px] font-semibold text-white shadow-orchid-glow transition-all duration-200 hover:bg-[#9659DA] active:scale-[0.985] focus:outline-none focus:ring-4 focus:ring-[#A66BE8]/30">
  <span className="relative z-10">Book a Call</span>
</a>
```

### Secondary Link Button

```tsx
<a className="flex min-h-14 w-full items-center justify-center gap-2 rounded-full border border-white/55 bg-white/65 px-6 py-4 text-[15px] font-medium text-slate-850 shadow-opal-sm backdrop-blur-xl transition-all duration-200 hover:-translate-y-0.5 hover:border-white/75 hover:bg-white/78 hover:shadow-opal-md active:scale-[0.985]">
  View Portfolio
</a>
```

### Link With Icon

```tsx
<a className="group flex min-h-14 w-full items-center gap-3 rounded-full border border-white/55 bg-white/65 px-4 py-3 shadow-opal-sm backdrop-blur-xl transition-all duration-200 hover:-translate-y-0.5 hover:border-white/75 hover:bg-white/78 hover:shadow-opal-md active:scale-[0.985]">
  <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-white/60 text-slate-700 ring-1 ring-slate-950/6">
    <Icon className="h-5 w-5" />
  </span>

  <span className="min-w-0 flex-1 text-left">
    <span className="block truncate text-[15px] font-medium text-slate-850">
      Latest Release
    </span>
    <span className="block truncate text-xs text-slate-500">
      Listen on all platforms
    </span>
  </span>

  <ArrowUpRight className="h-4 w-4 shrink-0 text-slate-400 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-slate-700" />
</a>
```

### Social Icon Button

```tsx
<a className="flex h-11 w-11 items-center justify-center rounded-full border border-white/45 bg-white/45 text-slate-700 shadow-opal-xs backdrop-blur-md transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/65 hover:text-slate-950 active:scale-95">
  <Icon className="h-5 w-5" />
</a>
```

### Footer Badge

```tsx
<footer className="mt-5 flex justify-center">
  <span className="inline-flex items-center rounded-full border border-white/40 bg-white/35 px-3 py-1.5 font-mono text-[10px] font-semibold uppercase tracking-[0.08em] text-slate-500 backdrop-blur-md">
    Opal Link
  </span>
</footer>
```

---

## State System

### Default State

```css
background: rgba(255, 255, 255, 0.65);
border-color: rgba(255, 255, 255, 0.55);
box-shadow: 0 4px 14px rgba(23, 33, 43, 0.06);
```

### Hover State

```css
background: rgba(255, 255, 255, 0.78);
border-color: rgba(255, 255, 255, 0.75);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(23, 33, 43, 0.08);
```

### Pressed State

```css
transform: scale(0.985);
background: rgba(255, 255, 255, 0.72);
```

### Focus State

```css
outline: none;
box-shadow:
  0 0 0 4px rgba(166, 107, 232, 0.22),
  0 10px 30px rgba(23, 33, 43, 0.08);
```

### Disabled State

```css
opacity: 0.46;
pointer-events: none;
filter: saturate(0.75);
```

### Loading State

```tsx
"relative pointer-events-none overflow-hidden text-white/80 after:absolute after:inset-0 after:animate-opal-shimmer after:bg-gradient-to-r after:from-transparent after:via-white/25 after:to-transparent"
```

---

## Accessibility & Usability

### Touch Targets

```css
min-height: 48px;       /* Absolute minimum */
min-height: 56px;       /* Preferred CTA height */
min-width: 44px;        /* Icon button minimum */
```

### Readability Rules

* Main text should use `text-slate-950`, `text-slate-850`, or `text-slate-700`.
* Avoid placing `text-slate-500` directly on `bg-white/35`.
* Use `bg-white/70` or higher behind dense text.
* Keep bio width near `28ch–34ch`.
* Keep CTA labels centered and vertically aligned.
* Use visible focus rings on all interactive elements.

### Contrast Adjustments

When backgrounds become colorful or busy:

```tsx
// Increase panel clarity
"bg-white/75 backdrop-blur-2xl"

// Increase border definition
"border-white/70 ring-1 ring-slate-950/8"

// Increase text strength
"text-slate-950"
```

---

## Responsive Behavior

### Mobile: 320–430px

```css
page-padding: 16px;
content-width: 100%;
max-width: 420px;
avatar-size: 80px–96px;
panel-padding: 20px;
cta-height: 56px;
```

### Small Mobile Adjustments

```tsx
"className='px-3 py-5 [@media(max-width:360px)]:px-3'"
```

```tsx
// Compact CTA for narrow screens
"min-h-12 px-4 py-3 text-sm"
```

### Tablet: 431–768px

```css
content-width: 420px–440px;
avatar-size: 96px–112px;
panel-padding: 24px;
```

### Desktop: 769px+

The link stack remains centered and compact. Do not stretch the interface into a website layout unless additional page sections are intentionally added below.

```tsx
"mx-auto flex min-h-screen w-full max-w-[440px] items-center px-4 py-10"
```

### Desktop Enhancement Rules

* Increase vertical breathing room, not layout complexity.
* Keep the core stack single-column.
* Do not exceed `max-w-[480px]` for the primary link page shell.
* Background halos may become larger and softer on desktop.

---

## Implementation Tokens

### CSS Variables

```css
:root {
  /* Surfaces */
  --opal-white: #FDFDFB;
  --opal-mist: #F8F7F4;
  --frost-silver: #EEF0F2;
  --lavender-gray: #ECEAF2;
  --deep-slate: #17212B;

  /* Text */
  --text-primary: #111820;
  --text-secondary: #344252;
  --text-muted: #687584;
  --text-disabled: #8994A1;

  /* Accents */
  --orchid-chrome: #A66BE8;
  --orchid-chrome-hover: #9659DA;
  --lagoon-glaze: #22A6B3;
  --lagoon-glaze-hover: #1796A3;
  --rosewood-gel: #9E5368;
  --rosewood-gel-hover: #8F475B;

  /* Glass */
  --glass-opal: rgba(255, 255, 255, 0.58);
  --glass-clear: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-border-soft: rgba(255, 255, 255, 0.35);

  /* Shadows */
  --shadow-opal-xs: 0 1px 2px rgba(23, 33, 43, 0.04);
  --shadow-opal-sm: 0 4px 14px rgba(23, 33, 43, 0.06);
  --shadow-opal-md: 0 10px 30px rgba(23, 33, 43, 0.08);
  --shadow-orchid: 0 12px 34px rgba(166, 107, 232, 0.25);
  --shadow-lagoon: 0 12px 34px rgba(34, 166, 179, 0.22);
  --shadow-rosewood: 0 12px 34px rgba(158, 83, 104, 0.20);

  /* Radius */
  --radius-pill: 999px;
  --radius-panel: 32px;
  --radius-card: 24px;
}
```

### Tailwind Extension Example

```ts
export const opalSocialGlassStack = {
  colors: {
    opal: {
      white: "#FDFDFB",
      mist: "#F8F7F4"
    },
    frost: {
      silver: "#EEF0F2"
    },
    lavender: {
      gray: "#ECEAF2"
    },
    slate: {
      deep: "#17212B"
    },
    orchid: {
      chrome: "#A66BE8",
      hover: "#9659DA"
    },
    lagoon: {
      glaze: "#22A6B3",
      hover: "#1796A3"
    },
    rosewood: {
      gel: "#9E5368",
      hover: "#8F475B"
    }
  },
  boxShadow: {
    "opal-xs": "0 1px 2px rgba(23, 33, 43, 0.04)",
    "opal-sm": "0 4px 14px rgba(23, 33, 43, 0.06)",
    "opal-md": "0 10px 30px rgba(23, 33, 43, 0.08)",
    "opal-glow": "0 16px 48px rgba(164, 210, 238, 0.18)",
    "orchid-glow": "0 12px 34px rgba(166, 107, 232, 0.25)",
    "lagoon-glow": "0 12px 34px rgba(34, 166, 179, 0.22)",
    "rosewood-glow": "0 12px 34px rgba(158, 83, 104, 0.20)"
  },
  borderRadius: {
    opal: "32px",
    glass: "28px"
  }
};
```

---

## Quality Checklist

* [ ] Is the interface mobile-first, centered, and single-column?
* [ ] Does the page avoid complex grids and dense navigation?
* [ ] Are the main actions generous, pill-shaped, and at least `48px` tall?
* [ ] Is the profile header compact with avatar, name, handle, and concise bio?
* [ ] Are frosted surfaces readable, using enough opacity behind text?
* [ ] Are glass effects created with blur, translucency, hairline borders, and low-depth shadows?
* [ ] Is only one primary accent CTA style dominant on the screen?
* [ ] Are background halos soft, blurred, and non-distracting?
* [ ] Are handles or compact metadata set in a subtle mono such as IBM Plex Mono?
* [ ] Are shimmer effects restrained to one featured element or avoided entirely?
* [ ] Do hover and press states feel tactile without heavy movement?
* [ ] Are focus rings visible and aligned with the selected accent color?
* [ ] Does the stack remain compact and centered on desktop instead of expanding into columns?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Opal white, frosted silver, pale lavender-gray, translucent sky, and deep slate.
* Orchid chrome, lagoon glaze, or rosewood gel as primary CTA accents.
* Translucent overlays with practical readability.
* Backdrop blur on panels, buttons, social rows, and sheets.
* Hairline borders that resemble illuminated glass edges.
* Soft background halos with heavy blur and low opacity.
* Pill-shaped CTA buttons and rounded glass panels.
* Centered profile headers and concise bios.
* IBM Plex Mono or equivalent subtle mono for handles.
* Fade-up, blur-to-clear, and restrained shimmer animations.
* Low-depth shadows and soft accent glows.

### ✗ Not Allowed

* Complex bento grids or multi-column core link layouts.
* Heavy black drop shadows or muddy elevation.
* Extremely transparent panels behind important text.
* Multiple saturated CTA colors competing in the same stack.
* Busy animated gradients behind content.
* Sharp-corner primary buttons or rectangular link rows.
* Dense paragraphs inside CTA buttons or link rows.
* Tiny mobile tap targets.
* Excessive shimmer across multiple elements.
* Overly decorative typography or high-contrast display fonts.
* Primary content stretched wide on desktop.
* Dark opaque overlays that make the interface feel heavy.
Preview