Pastel Capsule Mobile Launch

/pastelCapsuleMobileLaunch
A gentle, premium design system for mobile launches, featuring soft pastels, generous spacing, immaculate centering, pill-shaped UI, and structured, approachable typography for a contemporary, delightful unboxing experience.
Jul 24, 2026
Design System Content
# Pastel Capsule Mobile Launch Design System

A polished, friendly, and highly structured design language for modern, light-themed mobile product launches.

---

## Philosophy

> "Softness invites interaction; structure provides clarity."

This system creates landing pages and interfaces that feel like a premium, unboxing experience for a digital product. It relies on a hyper-centered mobile-first composition, airy vertical spacing, and calming pastel tones. The design feels approachable yet immaculate, utilizing fully rounded geometries and soft gradient backdrops to frame product mockups like art pieces.

### Core Beliefs

1. **Centered & Mobile-First** — The hero stack must be perfectly centered, immediately guiding the eye down into a prominent, high-fidelity phone mockup.
2. **Generous Vertical Breathing Room** — Sections require massive padding. The space between an alternating feature row is just as important as the feature itself.
3. **Soft Framing** — Product shots and screenshots never sit on bare white; they are cushioned inside rounded pastel gradient capsules or padded gradient squares.
4. **Friendly Typography** — The typographic pairing of Manrope and DM Sans brings approachability and warmth, contrasting with harsh tech aesthetics.
5. **Calm Containment** — Borders are nearly invisible, relying on subtle shifts between porcelain white and pale cloud gray to define bento cards and FAQ accordions.

### Strict Rules

* **No Sharp Corners** — All buttons must be fully rounded pills. Bento cards and screenshot containers must use significant border radii (xl to 3xl).
* **No Pure Black** — Pure `#000000` is forbidden. Headings and primary CTAs use a Deep Plum-Charcoal, while body copy uses a soft Graphite.
* **Frosted, Not Solid, Navbars** — The navigation must float at the top as a slim, frosted glass layer, allowing the page to scroll softly beneath it.
* **Alternating Rhythm** — Feature sections must follow a strict alternating pattern of copy and product shots (Left/Right, then Right/Left).

---

## Color Palette

### The Calm Scale

The base palette is built for cleanliness and reusability, forming a soft backdrop that allows the pastel accents to pop without overwhelming the user. 

```css
/* Base Canvas */
bg-white               /* Porcelain White: Primary canvas background (#FFFFFF) */
bg-cloud-50            /* Pale Cloud Gray: Secondary sections, bento backgrounds (#F8F9FA) */
bg-cloud-100           /* Hover states for soft cards, FAQ accordion backgrounds (#F1F3F5) */

/* The Pastels (Capsules, Accents, & Gradients) */
bg-lavender-200        /* Soft Lavender Mist: Gradient stops, icon backdrops (#E6E6FA) */
bg-blush-200           /* Blush Pink: Soft highlight capsules, secondary accents (#FFD1DC) */
bg-powder-200          /* Powder Blue: Screenshot padding, gentle feature tags (#B0E0E6) */

/* Text Hierarchy */
text-plum-900          /* Deep Plum-Charcoal: Hero headings, Section titles, Primary CTA (#2D2A32) */
text-graphite-600      /* Graphite: Supporting copy, body text, FAQ descriptions (#4B4B5C) */
text-graphite-400      /* Muted Graphite: Nav labels, micro-copy, placeholders (#717182) */

/* Structural Borders */
border-cloud-100       /* Ultra-soft bento dividers */
border-white/20        /* Inner highlights for glassmorphism */

```

### Primary Call-to-Action

```css
bg-plum-900            /* Primary pill buttons */
hover:bg-plum-800      /* Hover state for primary pill */
text-white             /* Text inside primary CTAs */

```

---

## Typography

The typographic system relies on geometric friendliness. Headings are sturdy and approachable, while body text is highly legible and airy.

### Font Families

*   **Headings:** Manrope (Primary) or Geist.
*   **Body & UI:** DM Sans (Primary) or Roboto.

### Font Weights

```css
font-normal      /* Nav labels, secondary details */
font-medium      /* Supporting copy, FAQ descriptions, button labels */
font-semibold    /* Headings, hero text, section titles (Manrope) - MANDATORY */

```

### Font Size Scale

```css
text-[13px]      /* Slim nav labels, micro-tags */
text-[15px]      /* Secondary UI hints, friendly icon row labels */
text-[17px]      /* Primary supporting copy, FAQ text (17-18px range) */
text-[18px]      /* Prominent body text beneath section headings */
text-[32px]      /* Secondary section titles (32-36px range) */
text-[36px]      /* Primary feature section titles */
text-4xl         /* Hero headline, prominent value props (36px+) */

```

### Letter Spacing & Line Height

```css
tracking-tight   /* Hero headlines, section titles (Manrope Semibold) */
tracking-normal  /* All body copy (DM Sans) */
leading-relaxed  /* 1.625 for 17-18px supporting copy */
leading-tight    /* 1.15 for 32-36px section titles and 4xl hero */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Line Height |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl | semibold | plum-900 | tight |
| Section Title | Manrope | [36px] | semibold | plum-900 | tight |
| Supporting Copy | DM Sans | [18px] | medium | graphite-600 | relaxed |
| Nav Labels | DM Sans | [13px] | normal | graphite-400 | normal |
| Primary CTA | DM Sans | [15px] | medium | white | normal |

---

## Animation System

### Core Philosophy: The Soft Spring

Movements should feel buoyant, friendly, and deeply responsive—mirroring the tactile joy of modern mobile OS interfaces.

### Mobile Mockup Entrance (Hero Reveal)

The hero phone mockup slides up smoothly from below, stabilizing into its capsule.

```tsx
initial={{ opacity: 0, y: 40, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: 'spring', damping: 25, stiffness: 120, delay: 0.2 }}

```

### Bento Card Hover (Lift & Glow)

Hovering over a bento card or feature capsule triggers a gentle lift and a soft shadow, rather than harsh border changes.

```tsx
whileHover={{ y: -4, boxShadow: '0px 12px 24px -8px rgba(45, 42, 50, 0.08)' }}
transition={{ duration: 0.2, ease: 'easeOut' }}

```

---

## UI Components

### The Slim Frosted Navbar

A pill-shaped or full-width ultra-thin navigation bar that blurs the content beneath it.

```tsx
<nav className="fixed top-4 left-1/2 -translate-x-1/2 h-14 px-6 rounded-full bg-white/70 backdrop-blur-md border border-white/40 shadow-sm flex items-center gap-8 z-50">
  {/* Nav Items (13px Graphite) */}
</nav>

```

### Pastel Gradient Capsule (Screenshot Framer)

Product screenshots must be housed within these tall, rounded gradient pills.

```tsx
<div className="relative w-full max-w-sm aspect-[9/19] rounded-[3rem] bg-gradient-to-br from-lavender-200 via-white to-powder-200 p-4 shadow-sm overflow-hidden flex items-center justify-center">
  <img src="/phone-mockup.png" className="w-full h-auto drop-shadow-xl rounded-[2.5rem]" />
</div>

```

### Centered Hero Stack

The primary top-level composition.

```tsx
<header className="flex flex-col items-center text-center pt-32 pb-16 px-4 max-w-2xl mx-auto space-y-6">
  <h1 className="font-manrope font-semibold text-4xl text-plum-900 tracking-tight">
    Your product's perfect launch.
  </h1>
  <p className="font-sans font-medium text-[18px] text-graphite-600 leading-relaxed max-w-lg">
    Supporting copy goes here. Perfectly balanced, wrapping to two or three neat lines.
  </p>
  <button className="rounded-full bg-plum-900 text-white px-8 py-3.5 font-medium text-[15px] hover:bg-plum-800 transition-colors">
    Get Started
  </button>
</header>
/* Followed immediately by the Mobile Mockup Entrance */

```

---

## Component Catalog

### Buttons

```tsx
// Primary CTA (Deep Plum Pill)
"rounded-full bg-plum-900 text-white font-medium text-[15px] px-8 py-3.5 hover:bg-plum-800 transition-transform active:scale-95 shadow-sm"

// Secondary Action (Soft Cloud Pill)
"rounded-full bg-cloud-50 text-plum-900 font-medium text-[15px] px-8 py-3.5 hover:bg-cloud-100 transition-colors border border-cloud-100"

```

### Soft Bento Cards

Used for secondary features below the alternating sections.

```tsx
"bg-cloud-50 rounded-3xl p-8 border border-white shadow-[inset_0_1px_1px_white] hover:shadow-sm transition-all flex flex-col gap-4"

```

### Friendly Icon Rows

Horizontal arrays of features utilizing pastel backdrop circles.

```tsx
<div className="flex items-center gap-3">
  <div className="w-10 h-10 rounded-full bg-blush-200 flex items-center justify-center text-plum-900">
    <Icon className="w-5 h-5" />
  </div>
  <span className="font-sans font-medium text-[15px] text-plum-900">
    Feature Label
  </span>
</div>

```

### Calm FAQ Accordions

Clean, line-separated dropdowns with smooth reveals.

```tsx
<div className="border-b border-cloud-100 py-6 group cursor-pointer">
  <h4 className="font-manrope font-semibold text-[17px] text-plum-900 flex justify-between">
    Question goes here?
    <ChevronIcon className="text-graphite-400 group-hover:text-plum-900 transition-colors" />
  </h4>
  <p className="font-sans text-[17px] text-graphite-600 leading-relaxed pt-3 hidden"> {/* Animated reveal */}
    Answer goes here.
  </p>
</div>

```

---

## Quality Checklist

* [ ] Is the hero typography completely centered and stacked above a prominent phone mockup?
* [ ] Are all buttons and tags fully rounded pills (`rounded-full`)?
* [ ] Do all product screenshots sit comfortably inside rounded pastel capsules or padded squares?
* [ ] Did you use Manrope Semibold for headings and DM Sans for the 17-18px body copy?
* [ ] Is the navbar slim, frosted (`backdrop-blur`), and floating rather than a solid top block?
* [ ] Does the page use Deep Plum-Charcoal for primary text rather than pure black?
* [ ] Do the feature sections successfully alternate (Text left/Mockup right → Mockup left/Text right)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Soft pastel gradients (lavender, blush, powder blue) strictly used as containers/backgrounds for imagery or icons.
* Fully rounded pill buttons and heavily rounded cards (`rounded-3xl`).
* Deep plum-charcoal and graphite tones for typography.
* Massive vertical gaps between sections (`py-24` or `py-32`).
* Glassmorphism on the main navigation bar.

### ✗ Not Allowed

* Sharp square corners on buttons, cards, or image wrappers.
* Left-aligned hero sections (hero must be strictly center-aligned).
* Pure black text or backgrounds.
* Raw screenshots dropped onto the white background without a pastel or cloud gray padded container.
* Thin, lightweight heading fonts (headings must be Semibold).
Preview