Cloudline iOS Capsule Profile

/cloudlineIosCapsuleProfile
A tactile, premium design system for modern, narrow-canvas creator profiles, emphasizing pill-shaped geometry, soft gradients, diffused shadows, and elegant sans-mono typography, inspired by refined contemporary iOS identity pages.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Cloudline iOS Capsule Profile

A design language for pristine, narrow-canvas creator interfaces and modern identity pages.

---

## Philosophy

> "Identity thrives in soft spaces; focus is found in rhythm."

This system produces highly tactile, perfectly centered interfaces reminiscent of the most premium iOS creator profiles. It rejects rigid, utilitarian squares in favor of fully rounded, pill-shaped geometry, ambient illumination, and a soothing, optical balance. The design should feel incredibly personal yet deeply polished—like a perfectly weighted stone or a piece of frosted glass. 

### Core Beliefs

1. **The Narrow Canvas** — Content is constrained to a tight, mobile-proportioned center column, regardless of the user's screen size. This creates an immediate sense of intimacy.
2. **Tactile Geometry** — Everything interactive is fully rounded. The capsule (pill) shape is the absolute foundational unit of this layout.
3. **Ambient Depth** — We do not use harsh lines. Depth is achieved through plush, diffused shadows, ambient radial gradients behind the canvas, and ultra-subtle inner highlights.
4. **Typographic Duality** — A harmonious friction between a silky, geometric primary sans-serif (for humanity) and a crisp, technical monospaced font (for metadata).
5. **Fluid Motion** — Nothing snaps jarringly. Elements arrive through a silky, staggered fade-up motion, and physical interaction is met with spring-based scale down (a physical "press").

### Strict Rules

* **Maximum Corner Radius** — All primary call-to-action buttons, cards, and image containers must use `rounded-full` or maximum squircle radiuses. Sharp corners are forbidden.
* **No Stark Whites** — Pure white is reserved strictly for inner-highlights and the foreground canvas. Backgrounds use Cool Ivory or Pale Blue Mist to ease eye strain.
* **Low-Contrast Boundaries** — Borders exist only to separate similar values. They must be practically invisible (e.g., `rgba(0,0,0,0.04)`).
* **Distinctive Accents Only** — CTAs use distinctive, mature hues (Iris, Aqua, Coral) rather than default web primaries. 
* **The Squeeze** — All buttons must possess a tactile press state that visually reduces their scale.

---

## Color Palette

### The Soft Scale

The palette replaces stark architectural scales with cloud-like gradients. Dark modes are not native to this aesthetic; instead, graphite ink sits atop a bed of pearl grays and ivories. 

```css
/* Canvas Backdrops (Ambient & Soft) */
bg-cool-ivory         /* Deep background ambient wash (#FDFBF7) */
bg-pale-mist          /* Alternative ambient wash, cooler (#E8EDF2) */
bg-cloud-white        /* The primary centered canvas / container (#FFFFFF) */

/* Structural Neutrals */
bg-pearl-gray         /* Secondary button backgrounds, social rows (#F0F0F5) */
bg-pearl-gray/50      /* Hover states for secondary pills */
bg-black/5            /* Ultra-low contrast borders and dividers */
bg-black/10           /* Active states, subtle selection fills */

/* Plush Shadows & Inner Highlights */
shadow-plush          /* Highly diffused, large spread shadow (rgba(0,0,0,0.06)) */
shadow-inner-glow     /* Inset shadow (inset 0 1px 0 rgba(255,255,255,0.8)) */
border-black/5        /* Standard low-contrast outer border */

/* The Distinctive Accents (CTAs) */
bg-glazed-iris        /* Primary brand accent (#5E5CE6) */
bg-mineral-aqua       /* Alternative brand accent (#32ADE6) */
bg-smoked-coral       /* Vibrant pop accent (#FF8A7A) */

/* Text Hierarchy */
text-graphite-ink     /* Primary text, Name block, active capsules (#1C1C1E) */
text-graphite-muted   /* Short bios, secondary descriptions (#8E8E93) */
text-graphite-soft    /* Tiny handles, metadata, timestamps (#AEAEB2) */
text-white            /* Text strictly used inside accent capsules */

```

### Tactile Press States

```css
active:scale-[0.97]
active:opacity-90
active:shadow-none

```

---

## Typography

A strict interplay between a smooth, contemporary Sans (SF Pro, Geist, Satoshi, Inter, or Neue Montreal) and a hyper-legible Mono (IBM Plex Mono or Berkeley Mono). 

### Font Families

```css
font-sans        /* Primary: SF Pro, Geist, or Satoshi. Soft, optical balance. */
font-mono        /* Secondary: IBM Plex Mono or Berkeley Mono. Tiny handles, tags. */

```

### Font Weights

```css
font-normal      /* Short bios, paragraph text, secondary labels */
font-medium      /* Capsule button text, social row labels */
font-semibold    /* The Name Block, primary headers */
/* font-light and font-black are excluded to maintain the mid-tone softness */

```

### Font Size Scale

```css
text-[10px]      /* Tiny mono metadata, link domains, exact timestamps */
text-xs          /* @handles, small category tags, capsule subtitles (12px) */
text-sm          /* Bio text, secondary button labels (14px) */
text-base        /* Primary capsule buttons, list items (16px) */
text-lg          /* Active view titles (18px) */
text-2xl         /* The Name Block (24px) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* The Name Block only */
tracking-normal  /* All sans-serif body and button text */
tracking-wide    /* Mono tags and metadata */

uppercase        /* Strict usage: only on [10px] mono metadata */

```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Name Block | Sans | 2xl | semibold | graphite-ink | tight |
| Short Bio | Sans | sm | normal | graphite-muted | normal |
| Primary Capsule | Sans | base | medium | white | normal |
| Tiny Handles | Mono | xs | normal | graphite-soft | wide |
| Link Domains | Mono | [10px] | normal | graphite-muted | wide |

---

## Animation System

### Core Philosophy: Silky Staggered Fade-Up

Content does not just appear; it flows upward as if floating to the surface. It relies on Framer-motion spring physics for organic, non-linear movement.

### The Staggered Arrival

```tsx
const containerVariants = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.08, delayChildren: 0.1 }
  }
}

const itemVariants = {
  hidden: { opacity: 0, y: 16, filter: 'blur(4px)' },
  show: { 
    opacity: 1, 
    y: 0, 
    filter: 'blur(0px)',
    transition: { type: 'spring', stiffness: 260, damping: 20 }
  }
}

```

### Tactile Press (The Squeeze)

All buttons and capsules must respond to physical interaction by slightly receding into the canvas.

```tsx
whileHover={{ scale: 1.01 }}
whileTap={{ scale: 0.97, transition: { type: 'spring', stiffness: 400, damping: 25 } }}

```

---

## UI Components

### Ambient Radial Gradient

The background behind the centered canvas isn't flat. It features a soft, glowing orb that creates ambient atmospheric light.

```tsx
<div className="fixed inset-0 pointer-events-none bg-cool-ivory">
  <div className="absolute top-[-10%] left-[20%] w-[60vw] h-[60vw] rounded-full bg-pale-mist/50 blur-[80px]" />
</div>

```

### Inner Highlight

Applied to all capsules to give them a premium, 3D extruded feel without using heavy bevels. 

```tsx
const InnerHighlight = () => (
  <div className="absolute inset-0 rounded-full border-t border-white/40 pointer-events-none" />
);

```

### The Centered Canvas Sizing

```tsx
// The invisible container that holds the creator profile
<main className="mx-auto w-full max-w-[420px] flex flex-col items-center px-6 py-12 gap-6 relative z-10" />

```

---

## Component Catalog

### The Profile Block

A compact, highly structured arrangement of the avatar, name, handle, and bio.

```tsx
<div className="flex flex-col items-center text-center gap-2 mb-4">
  <img src="..." className="w-24 h-24 rounded-full shadow-plush mb-2 border border-black/5" />
  <h1 className="text-2xl font-sans font-semibold text-graphite-ink tracking-tight">Aurora Design</h1>
  <span className="text-xs font-mono text-graphite-soft tracking-wide mb-1">@aurora.studio</span>
  <p className="text-sm font-sans text-graphite-muted max-w-[280px]">
    Crafting digital habitats. Product designer based in the Pacific Northwest.
  </p>
</div>

```

### Capsule Buttons (CTAs)

The vertical rhythm of the page is defined by these large, pill-shaped buttons. 

```tsx
// Primary Distinctive Capsule (Glazed Iris)
"relative w-full overflow-hidden bg-glazed-iris text-white font-sans font-medium text-base rounded-full px-6 py-4 shadow-plush flex items-center justify-between transition-transform"
/* Requires <InnerHighlight /> inside */

// Secondary Neutral Capsule
"relative w-full bg-cloud-white text-graphite-ink border border-black/5 font-sans font-medium text-base rounded-full px-6 py-4 shadow-sm hover:bg-pearl-gray transition-colors flex items-center justify-between"

```

### Crisp Social Row

A horizontal array of perfectly circular icon buttons. 

```tsx
<div className="flex items-center justify-center gap-3 w-full my-2">
  {/* Social Node */}
  <button className="w-12 h-12 rounded-full bg-pearl-gray border border-black/5 flex items-center justify-center text-graphite-ink shadow-sm hover:bg-black/5 transition-all">
    <TwitterIcon className="w-5 h-5" />
  </button>
</div>

```

### Metadata Mono Badges

For displaying small data points (link clicks, domain names, availability) inside or near capsules.

```tsx
// Inline Domain Tag (Sits inside a capsule button)
"font-mono text-[10px] uppercase tracking-wide text-graphite-soft bg-black/5 px-2 py-1 rounded-full"

```

---

## Quality Checklist

* [ ] Is the primary layout container restricted to a narrow width (max 420px)?
* [ ] Are all buttons, cards, and avatars utilizing `rounded-full` (capsule/circle) geometry?
* [ ] Do all CTAs include a tactile Framer Motion `whileTap={{ scale: 0.97 }}` interaction?
* [ ] Is there an `InnerHighlight` (subtle top white border) applied to primary colored buttons?
* [ ] Are `@handles` and URL domains strictly formatted using the Monospace font family?
* [ ] Did you avoid heavy drop shadows in favor of diffused `shadow-plush` spreads?
* [ ] Is the entry animation a staggered, spring-based upward fade?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Fully rounded capsules and perfect circles.
* Pairing a geometric Sans (Satoshi) with a technical Mono (Berkeley).
* Plush, ultra-diffused shadows with 10%+ spread.
* Subtle top-edge inner highlights on primary buttons.
* Soft, ambient radial blurs in the background canvas.

### ✗ Not Allowed

* Sharp corners or low-radius standard web buttons (`rounded-sm` or `rounded-md`).
* Wide, multi-column layouts; everything must remain centered and narrow.
* High-contrast, dark black borders or stark divider lines.
* Heavy text-shadows or dark drop shadows under text.
* Mixed bright primary colors (e.g., standard red/green/blue together). Stick to the designated distinctive accents.