iOS Gallery Capsule Flow

/iosGalleryCapsuleFlow
A premium design system for web, inspired by high-end iOS apps—centered layouts, soft geometry, tactile interactions, and airy pastels for effortless, consumer-grade spatial experiences.
0 likes
0 bookmarks
Jun 14, 2026
Design System Content
# iOS Gallery Capsule Flow

A design language for pristine, consumer-friendly spatial interfaces and premium app-like web experiences.

---

## Philosophy

> "Calm rhythm creates space for discovery."

This system creates interfaces that feel like a high-end native iOS application operating within a web environment. It prioritizes a pristine, highly tactile layout built around soft spatial rhythms, friendly geometry, and polished micro-details. The experience should feel effortless, centering content in oversized, gently rounded containers that float just above the canvas. 

### Core Beliefs

1. **Spatial Rhythm over Density** — The layout operates as a centered vertical flow. Main capsule sections intentionally occupy only ~70% of the desktop width, leaving vast margins that frame the content like a digital art piece.
2. **Friendly Geometry** — Sharp corners are eliminated. Generous, oversized border radii (capsules, pills, rounded feature panels) create an inviting, human-centric aesthetic.
3. **Tactile & Fluid** — Elements react to the user with smooth card-lift motion, faint structural shadows, and glossy micro-interactions. The interface feels physically lightweight but deeply responsive.
4. **Color as a Backdrop** — Feature panels utilize solid, understated pastel backgrounds rather than sweeping body gradients, allowing imagery and typography to breathe.
5. **Bold Anchors, Light Signposts** — Hero typography is unapologetically bold and compact, while secondary section titles step back using lighter weights to create a distinct, modern typographic contrast.

### Strict Rules

* **No Full-Bleed Containers (Except Canvas)** — Feature panels and discovery cards must exist as independent "capsules" floating within the 70% viewport container.
* **No Harsh Outlines** — Boundaries are defined by faint drop shadows, subtle pastel color contrasts, and backdrop blurs—never heavy, dark borders.
* **Image Dominance in Cards** — Feature panels must follow a strict vertical stack: clean horizontal imagery firmly placed above understated headlines and short descriptions. 
* **Soft Blue Actives** — Active states, focused inputs, and primary links rely exclusively on a signature "Soft iOS Blue" to build immediate user familiarity.
* **No Muddy Gradients** — Backgrounds must remain solid pastels or pure whites. Gradients are reserved strictly for glossy pill buttons or micro-icon details.

---

## Color Palette

### Spatial Canvas & Pastels

The palette is rooted in a pristine white spatial canvas, elevated by subtle neutral greys and specific solid pastel section tones that feel fresh and unweighted. 

```css
/* Canvas & Surfaces */
bg-slate-50           /* The foundational spatial canvas (#F8FAFC) */
bg-white              /* Primary capsule and card backgrounds (#FFFFFF) */
bg-white/70           /* Frosted surfaces requiring backdrop-blur */
bg-black/40           /* Dimming overlays for modal focuses */

/* Solid Pastel Feature Panels */
bg-blue-50/70         /* Soft sky feature background */
bg-rose-50/70         /* Soft blush feature background */
bg-emerald-50/70      /* Soft mint feature background */
bg-violet-50/70       /* Soft lavender feature background */

/* Borders & Shadows */
border-slate-100      /* Delicate card outlines */
border-slate-200/50   /* Micro-dividers within capsules */
shadow-[0_4px_24px_rgba(0,0,0,0.04)] /* The signature "Faint Shadow" */

/* The Anchor: Soft Blue (Active State) */
text-blue-500         /* Primary active states, text links (#007AFF equivalent) */
bg-blue-500           /* Solid active toggles, primary icons */
ring-blue-500/20      /* Soft focus rings */

/* Text Hierarchy */
text-slate-900        /* Primary hero text, main headlines */
text-slate-700        /* Standard body descriptions */
text-slate-500        /* Section titles, understated metadata */
text-slate-400        /* Map-pin labels, disabled states, placeholders */
```

---

## Typography

The system utilizes **Plus Jakarta Sans** for display elements and **Inter** for dense UI components, providing a premium, app-like read. In a reversal of traditional print logic, heroes are heavy and compact, while section transitions are light and airy.

### Font Weights

```css
font-light       /* Section titles, secondary categorical labels */
font-normal      /* Understated short descriptions, paragraph bodies */
font-medium      /* Glossy pill button labels, micro-details */
font-semibold    /* Feature panel headlines, active tab states */
font-extrabold   /* Compact hero typography - MANDATORY for main hooks */
```

### Font Size Scale

```css
text-[11px]      /* Map-pin micro details, location tags, tiny badges */
text-xs          /* Frosted badge labels, timestamp details (12px) */
text-sm          /* Body descriptions under feature images (14px) */
text-base        /* Standard pill button text, list items (16px) */
text-lg          /* Feature panel understated headlines (18px) */
text-2xl         /* Light section titles marking new capsules */
text-4xl         /* Sub-hero value propositions */
text-5xl-7xl     /* Compact, bold hero typography */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Family |
| --- | --- | --- | --- | --- | --- |
| Hero Hook | 6xl | extrabold | slate-900 | tight | Plus Jakarta |
| Section Title | 2xl | light | slate-500 | normal | Plus Jakarta |
| Feature Headline | lg | semibold | slate-900 | tight | Plus Jakarta |
| Body Description | sm | normal | slate-700 | normal | Inter |
| Pill Button | base | medium | white | normal | Inter |
| Map-Pin Micro | [11px] | medium | slate-500 | wide | Inter |

---

## Animation System

### Core Philosophy: Smooth Card-Lift

Interactions should mimic physically picking up a polished card from a glass table. Motion is fluid, non-disruptive, and heavily relies on spring physics.

### Hover: The Card-Lift Motion

When hovering over discovery cards or feature panels, the element gently elevates and casts a slightly wider, softer shadow.

```tsx
whileHover={{ y: -4, scale: 1.01 }}
transition={{ type: 'spring', stiffness: 400, damping: 25 }}
// Accompanied by CSS: hover:shadow-[0_12px_32px_rgba(0,0,0,0.08)]
```

### Image Reveals & Mockup Loads

Mobile mockups and horizontal panel imagery smoothly fade up from the bottom when scrolling into view.

```tsx
initial={{ opacity: 0, y: 20, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
```

---

## UI Components

### The Desktop Capsule (Layout Foundation)

The page is built as a centered vertical flow. Main layout containers are oversized capsules restricted to roughly 70% of the desktop viewport width.

```tsx
<section className="mx-auto w-[70%] max-w-5xl rounded-[3rem] bg-white p-12 shadow-[0_4px_24px_rgba(0,0,0,0.04)] mb-16">
  {/* Capsule Content */}
</section>
```

### Feature Panels (Image + Text Stack)

Cards that live inside the capsules. They feature solid pastel backgrounds, clean horizontal imagery at the top, and understated text below.

```tsx
<div className="flex flex-col bg-blue-50/50 rounded-3xl overflow-hidden transition-all duration-300 hover:shadow-[0_12px_32px_rgba(0,0,0,0.08)] hover:-translate-y-1">
  <div className="h-48 w-full bg-slate-200 overflow-hidden">
    {/* Clean Horizontal Imagery / Mockup sits here */}
    <img src="..." className="object-cover w-full h-full" />
  </div>
  <div className="p-6">
    <h3 className="text-lg font-semibold text-slate-900 tracking-tight">Feature Headline</h3>
    <p className="mt-2 text-sm text-slate-700 leading-relaxed">Short, understated description explaining the value prop clearly.</p>
  </div>
</div>
```

### Glossy Pill Buttons

Buttons are rounded perfectly and feature a very subtle internal gradient to feel tactile and premium.

```tsx
"rounded-full bg-gradient-to-b from-blue-400 to-blue-500 text-white font-medium text-base px-6 py-3 shadow-[0_2px_10px_rgba(59,130,246,0.3)] hover:shadow-[0_4px_16px_rgba(59,130,246,0.4)] hover:brightness-105 transition-all duration-200"
```

### Frosted Badges

Used for status tags or floating elements over mobile mockups.

```tsx
"inline-flex items-center rounded-full bg-white/60 backdrop-blur-md border border-white/40 px-3 py-1 text-xs font-medium text-slate-700 shadow-sm"
```

### Map-Pin Micro Details

Tiny, elegant locators or metadata points to enrich the visual discovery.

```tsx
<div className="flex items-center gap-1.5 text-[11px] font-medium tracking-wide text-slate-500 uppercase">
  <MapPinIcon className="w-3 h-3 text-blue-500" />
  <span>San Francisco, CA</span>
</div>
```

---

## Component Catalog

### Hero Section
Compact, vertically stacked, leading directly into a polished mobile mockup.

```tsx
<header className="flex flex-col items-center text-center pt-24 pb-12 w-[70%] mx-auto">
  <h1 className="text-6xl font-extrabold text-slate-900 tracking-tight mb-6">Redefine your flow.</h1>
  <p className="text-lg text-slate-500 mb-8 max-w-md">Understated subtext setting up the spatial interface.</p>
  <button className="/* Glossy Pill Button */">Get Started</button>
  
  {/* Polished Mobile Mockup or GIF */}
  <div className="mt-16 rounded-[2.5rem] border-[6px] border-slate-900 shadow-2xl overflow-hidden w-64 h-[500px]">
    <img src="/mobile-mockup.gif" className="w-full h-full object-cover" />
  </div>
</header>
```

### Discovery Cards (Grid)
Used when listing multiple items within a capsule.

```tsx
"group relative bg-white p-5 rounded-2xl border border-slate-100 shadow-[0_2px_8px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_24px_rgba(0,0,0,0.06)] hover:-translate-y-0.5 transition-all duration-300"
```

### Active Navigation States
Rely on the Soft Blue accent.

```tsx
"flex items-center gap-2 px-4 py-2 rounded-full bg-blue-50 text-blue-500 font-medium text-sm transition-colors"
```

---

## Voice & Tone

The interface is friendly, consumer-oriented, and effortlessly premium:

* Headlines are punchy and emotive: "Capture the moment" instead of "Data Entry Portal".
* Body copy is concise, conversational, and completely unpretentious.
* Micro-copy guides the user with a gentle hand: "Just a tap away" or "Swipe to discover".
* Keep instructions positive and focused on the outcome.

---

## Quality Checklist

* [ ] Is the primary layout confined to ~70% desktop width capsules?
* [ ] Do all capsule sections and nested panels use extremely generous rounded corners (`rounded-3xl` or larger)?
* [ ] Is the hero typography set to `font-extrabold` while section titles use `font-light`?
* [ ] Are hover effects relying on smooth `y-axis` translations and faint shadow expansions (Card-Lift)?
* [ ] Do feature panels firmly separate top-oriented images from bottom-oriented understated text?
* [ ] Are active states exclusively using the signature Soft iOS Blue?
* [ ] Are buttons perfectly pill-shaped (`rounded-full`) with glossy or tactile finishes?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Solid pastel backgrounds (`blue-50`, `rose-50`, etc.) for feature panels.
* Vast, empty margins outside the 70% centered vertical flow.
* Faint, highly dispersed drop shadows (e.g., 4% to 8% opacity).
* Frosted glass overlays (`backdrop-blur`) over imagery or canvas backgrounds.
* High-quality, clean horizontal mobile mockups or GIFs as visual anchors.

### ✗ Not Allowed

* Edge-to-edge (full-bleed) content on desktop, except for the spatial canvas background.
* Sharp, 90-degree corners on any structural container or button.
* Heavy, dark box shadows or brutalist, thick borders.
* Linear body gradients replacing flat backgrounds.
* Dense blocks of text—descriptions must be "understated" and short.