Pastel Venue Capsule Minimal

/pastelVenueCapsuleMinimal
A clean, boutique-inspired system for airy, centered storytelling UIs. Uses solid pastel capsules, bold friendly typography, and ultra-soft, tactile surfaces for an inviting, modern-feeling product experience.
Jun 13, 2026
Design System Content
# Pastel Venue Capsule Minimal Design System

A design language for pristine, storytelling-driven light interfaces.

---

## Philosophy

> "Design should feel like a Sunday morning—effortless, bright, and deeply personal."

This system creates interfaces that feel like an airy, modern boutique or a highly curated editorial blog. It abandons rigid enterprise dashboards in favor of centered, human-scale storytelling. By relying on off-white canvases, plush pastel capsules, and bold, friendly typography, the aesthetic feels instantly approachable, tactile, and highly polished.

### Core Beliefs

1. **Storytelling at the Center** — Desktop layouts mimic the focused reading experience of mobile. Content is centered, constrained to roughly 70% of the viewport width, ensuring the eye never has to travel too far.
2. **The Power of the Capsule** — Backgrounds aren't just containers; they are rhythmic, solid pastel shapes (capsules) that stack vertically to pace the user's journey.
3. **Tactile Softness** — Everything feels soft to the touch. Generous border radii, glassy chips, and airy, diffused drop shadows replace harsh lines and stark contrasts.
4. **Conversational Density** — Copy is compact, punchy, and speaks directly to the user. No robotic system jargon; just clear, human dialogue.
5. **Polished Motion** — Elements don't just appear; they gently glide into place using Framer-style scroll reveals, feeling weightless but grounded.

### Strict Rules

* **No Full-Width Sprawl** — Core content must remain in the centered storytelling column. If a block stretches to 100% of the desktop width, it breaks the intimacy of the page.
* **No Sharp Corners** — Every container, button, and image frame must possess a visible border radius.
* **Pastels Only for Volume** — Saturated colors are strictly forbidden for large backgrounds. Volume is created using Lemon, Mint, Powder Blue, Blush, and Lavender pastels.
* **Bold Introductions** — Headlines must be bold and confident (Plus Jakarta Sans, Figtree, or Inter). No fragile, wispy header typography.
* **No High-Contrast Borders** — Borders exist only to subtly define edges where shadows aren't enough. They must remain incredibly faint.

---

## Color Palette

### The Canvas & The Capsules

The foundation is a warm, pristine off-white. The structural hierarchy is built using large, solid pastel blocks.

```css
/* Base Canvas */
bg-stone-50           /* The primary off-white body surface (#fafaf9) */
bg-white/60           /* Glassy overlays, translucent chips */

/* The Pastel Capsules (Backgrounds for 70% width feature blocks) */
bg-pastel-lemon       /* Warm, optimistic feature blocks (#fef08a / yellow-200) */
bg-pastel-mint        /* Fresh, success-oriented sections (#bbf7d0 / green-200) */
bg-pastel-powder      /* Calm, informative story containers (#bae6fd / sky-200) */
bg-pastel-blush       /* Inviting, community/social blocks (#fecdd3 / rose-200) */
bg-pastel-lavender    /* Premium, magical, or creative features (#e9d5ff / purple-200) */

/* Borders & Shadows */
border-stone-200/50   /* Ultra-low contrast borders for subtle definition */
border-white/40       /* Inner borders for glassy elements */
shadow-soft           /* box-shadow: 0 10px 40px -10px rgba(0,0,0,0.04) */

/* Text Hierarchy */
text-stone-900        /* Bold primary headlines, high-contrast text */
text-stone-600        /* Compact conversational body copy */
text-stone-400        /* Subtle metadata, timestamps, disabled states */

/* Interactive States */
hover:bg-stone-100    /* Subtle background shift for flat buttons */
bg-stone-900          /* Primary CTA background (inverted for contrast) */
text-white            /* Primary CTA text */

```

---

## Typography

Typography is confident, bold, and incredibly friendly. Headlines act as anchors, while body copy is kept compact, dense, and easy to scan. 

**Allowed Typefaces:** Plus Jakarta Sans, Figtree, or Inter.

### Font Weights

```css
font-bold        /* Primary headlines, feature block titles, CTAs - MANDATORY */
font-semibold    /* Subtitles, glassy chip labels, form inputs */
font-medium      /* Standard body copy, conversational paragraphs */
font-normal      /* Exclusively for subtle metadata; rarely used */

```

### Font Size Scale

```css
text-[13px]      /* Glassy chips, minor labels, footer links */
text-[15px]      /* Compact conversational body copy (replaces standard 16px) */
text-lg          /* Subheadings, lead-in paragraphs */
text-2xl         /* Small feature block headers */
text-4xl         /* Standard storytelling headlines */
text-5xl-7xl     /* Hero statements (tight leading, bold weight) */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* For 4xl-7xl headlines to create a solid typographic block */
tracking-tight   /* For standard buttons and subheaders */
tracking-normal  /* For 15px conversational body copy */
leading-snug     /* Keeps paragraph lines close and compact */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Family |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 6xl | bold | stone-900 | tighter | Plus Jakarta Sans |
| Feature Title | 4xl | bold | stone-900 | tight | Plus Jakarta Sans |
| Conversational Body | 15px | medium | stone-600 | normal | Inter / Figtree |
| Primary CTA | 15px | bold | white | tight | Plus Jakarta Sans |
| Glassy Chip | 13px | semibold | stone-700 | normal | Inter / Figtree |

---

## Animation System

### Core Philosophy: Framer-Style Scroll Reveals

The interface feels alive but never chaotic. Elements glide upward into view as the user scrolls, settling into their layouts with a gentle, premium spring physics.

### Vertical Scroll Reveal (Feature Blocks)

```tsx
initial={{ opacity: 0, y: 40, scale: 0.98 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ 
  type: "spring", 
  stiffness: 100, 
  damping: 20, 
  mass: 1 
}}
```

### Hover Dynamics (Glassy Chips & CTAs)

Slight scaling and soft shadow expansion mimic a physical element lifting toward the user.

```tsx
whileHover={{ scale: 1.02, y: -2 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}
```

---

## UI Components

### The 70% Storytelling Container

The defining layout structure of the aesthetic. All major content sits within this vertically stacked, centered column.

```tsx
<section className="w-full max-w-[70%] mx-auto flex flex-col gap-16 py-20">
  {/* Content flows here */}
</section>
```

### Pastel Capsule Feature Block

Large, generously rounded sections that break up the off-white rhythm.

```tsx
<div className="w-full bg-pastel-lavender rounded-[3rem] p-16 flex flex-col items-center text-center shadow-soft">
  <h2 className="text-4xl font-bold text-stone-900 tracking-tight mb-4">
    Everything in its right place.
  </h2>
  <p className="text-[15px] font-medium text-stone-600 max-w-md leading-snug">
    We've carefully curated your workspace so you can focus on what actually matters. Drop in, tune out the noise, and start creating.
  </p>
</div>
```

### Polished GIF Frames

Media isn't just dropped on the page; it sits inside highly polished, tactile frames that feel like premium physical devices.

```tsx
<div className="relative rounded-[2rem] p-2 bg-white/50 backdrop-blur-md shadow-[0_20px_60px_-15px_rgba(0,0,0,0.05)] border border-white/60">
  <img 
    src="/demo.gif" 
    alt="Product interaction" 
    className="rounded-[1.5rem] w-full object-cover shadow-inner"
  />
  {/* Subtle glare overlay */}
  <div className="absolute inset-0 rounded-[2rem] bg-gradient-to-tr from-transparent via-white/10 to-white/30 pointer-events-none" />
</div>
```

---

## Component Catalog

### Buttons (Slightly Rounded CTAs)

Buttons are confident, completely solid, and use slightly rounded corners (not fully pill-shaped, not sharp).

```tsx
// Primary CTA
"bg-stone-900 text-white font-bold text-[15px] rounded-xl px-6 py-3.5 hover:scale-[1.02] hover:shadow-xl transition-all duration-300"

// Secondary CTA (Pastel integration)
"bg-white/80 backdrop-blur-sm text-stone-900 font-bold text-[15px] rounded-xl px-6 py-3.5 border border-stone-200/50 hover:bg-white transition-all shadow-sm"

```

### Glassy Chips

Used for tags, categories, or subtle interactive filters.

```tsx
"inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-white/40 backdrop-blur-md border border-white/60 shadow-[0_4px_12px_rgba(0,0,0,0.03)] text-[13px] font-semibold text-stone-700"
```

### Inputs

Soft, approachable, and cleanly integrated into the off-white canvas.

```tsx
"w-full px-5 py-4 rounded-2xl bg-white shadow-soft border border-stone-100 text-stone-900 font-medium text-[15px] placeholder-stone-400 focus:outline-none focus:ring-4 focus:ring-pastel-powder/50 transition-all"
```

---

## Voice & Tone

The interface speaks like a knowledgeable, highly articulate friend over coffee:

* **Compact and Punchy:** "Jump back in" instead of "Resume previous session".
* **Optimistic:** Embrace an encouraging, lighthearted tone that matches the pastels.
* **Direct:** Do not waste the user's time. Use conversational snippets to explain features quickly and get out of the way.
* **Capitalization:** Use sentence case for almost everything. It feels less formal and more inviting.

---

## Quality Checklist

* [ ] Is the primary layout constrained to a central, 70% desktop width column?
* [ ] Are background surfaces strictly off-white (`stone-50`), punctuated *only* by solid pastel capsules?
* [ ] Do all headlines use `font-bold` with tight tracking in Plus Jakarta Sans, Figtree, or Inter?
* [ ] Is the body copy compact (`15px`, `leading-snug`, `medium` weight)?
* [ ] Are all drop shadows large, highly diffused, and incredibly low opacity (`0.04`)?
* [ ] Do media frames and GIFs have generous border radii (`2rem`) and glassy border treatments?
* [ ] Are scroll reveals utilizing a Framer-style spring physics rather than rigid linear fades?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Centralized, single-column storytelling layouts.
* Massive corner radii (`rounded-3xl` to `rounded-[3rem]`) for feature capsules.
* Generous vertical spacing (`gap-16`, `py-20`) to create rhythmic breathing room.
* Glassy, backdrop-blurred overlays over pastels.
* Soft, diffuse shadows that simulate ambient lighting.

### ✗ Not Allowed

* Edge-to-edge full-width grids on desktop (destroys the storytelling constraint).
* Dark mode components, heavy black backgrounds, or high-contrast borders.
* Primary/Neon colors (e.g., bright red, harsh blue, pure green). Only pastels are allowed for volume.
* Sharp square corners (`rounded-none` or `rounded-sm`).
* Lightweight, wispy fonts for headlines. Heaviness anchors the airy aesthetic.
Preview