Fresh Pastel App Story Stack

/freshPastelAppStoryStack
A warm, tactile design system for center-aligned product landing pages, emphasizing high conversion, organic framing, and welcoming editorial style with disciplined structure, fresh pastel gradients, and hyper-legible typography.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Fresh Pastel App Story Stack

A design language for warm, high-conversion consumer landing interfaces.

---

## Philosophy

> "Warmth invites interaction; disciplined framing drives conversion."

This system creates a digital environment that feels like a premium lifestyle editorial crossed with an interactive app showcase. It marries the welcoming, tactile nature of B2C aesthetics with a rigorously structured, centered layout. The design relies on inviting colors, hyper-legible typography, and physical-feeling visual anchors to build a compelling narrative around the product.

### Core Beliefs

1. **The Product is the Protagonist** — The interface is merely the stage. The phone mockup is the ultimate visual anchor, acting as the undisputed center of gravity.
2. **Tactile Gravity** — Call-to-actions must feel like physical objects you want to press. No flat, generic colored buttons; only deep, rounded capsules with subtle lighting cues.
3. **Breathing Centricity** — Center-aligned storytelling demands expansive margins. The disciplined structure prevents the design from feeling unmoored or scattered.
4. **Organic Framing** — Sharp angles are banished. Soft, generous border radii and fresh, glowing gradients act as frames for content rather than the content itself.
5. **Legibility as a Courtesy** — Font pairings deliberately separate expressive, geometric headlines from invisible, high-functionality body copy. 

### Strict Rules

* **No Generic Accent Buttons** — Primary interactive elements must utilize the dark graphite capsule style. Branded colors are reserved solely for backdrop gradients and framing.
* **Centered Foundations** — Narrative flow must anchor to the center line. Alternate copy and imagery gracefully within centered container boundaries.
* **No Sharp Corners** — Containers, imagery, and buttons must utilize heavy border radii (large to full).
* **Restrained Gradients** — Gradients are strictly fresh (green-yellow) and used *only* as geometric framing squares behind product shots, never as text fills or main backgrounds.
* **Translucent Layering** — Floating labels and secondary UI elements must use glass/translucent backdrops to maintain the flow of the canvas.

---

## Color Palette

### Canvas & Structural Scale

The palette uses warm, pearl-like whites for the main stage, transitioning to mist-gray for segmented narrative blocks. Text relies on varying depths of graphite and slate.

```css
/* Canvas & Containers (Lightest to Darkest) */
bg-stone-50           /* Pearl/Ivory canvas background (#FAFAFA) */
bg-slate-50/80        /* Pale mist-gray section blocks */
bg-slate-100/50       /* Secondary container interiors, FAQ row backgrounds */
bg-white/60           /* Translucent labels, glass effect cards */

/* Borders & Dividers */
border-slate-200/50   /* Spacious FAQ dividers, subtle card outlines */
border-white/40       /* Inner borders on translucent labels */

/* Typography (Graphite & Slate) */
text-slate-900        /* Deep Graphite: Hero headings, strong emphasis */
text-slate-800        /* Medium Graphite: Section titles, active states */
text-slate-500        /* Slate-gray: Supporting copy, body text, FAQ descriptions */
text-slate-400        /* Light Slate: Metadata, compact icon card subtitles */

/* The Button: Dark Graphite */
bg-slate-800          /* Core CTA resting state */
bg-slate-900          /* Core CTA hover state */
shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)] /* Subtle inner highlight */

```

### The Aura: Fresh Pastel Accent

Used exclusively for square framing elements behind product UI shots.

```css
/* Fresh Green-Yellow Gradient */
bg-gradient-to-br from-lime-200 via-green-100 to-yellow-100
bg-gradient-to-tr from-lime-300/40 to-yellow-200/40 /* Soft background framing variant */

```

---

## Typography

The typography system pairs expressive, geometric warmth in headers with hyper-clean utilitarianism in the body copy. 

### Font Families

*   **Hero & Headings:** `font-manrope` or `font-geist` (Geometric, friendly, wide proportions).
*   **Body & Utility:** `font-roboto` or `font-inter` (Highly legible, neutral, compact).

### Font Weights

```css
font-normal      /* Inter/Roboto: All supporting copy and descriptions */
font-medium      /* Inter/Roboto: CTA buttons, compact card labels, translucent tags */
font-semibold    /* Manrope/Geist: FAQ questions, lower section headers */
font-extrabold   /* Manrope/Geist: Primary hero headings, massive story hooks */

```

### Font Size Scale

```css
text-xs          /* Translucent label metadata, subtle footer links (12px) */
text-sm          /* Compact icon card body, tooltips (14px) */
text-base        /* Standard supporting copy, FAQ text (16px) */
text-lg          /* Button text, introductory lead paragraphs (18px) */
text-xl          /* FAQ row titles, compact card headers (20px) */
text-3xl         /* Alternating section headings, standard marketing hooks */
text-4xl         /* Hero headings — The definitive structural anchor size */
text-5xl         /* Occasional high-impact standalone metrics */

```

### Letter Spacing & Line Height

```css
tracking-tight   /* Mandatory on text-3xl and text-4xl to unify geometric headers */
leading-relaxed  /* Standard body copy to maximize readability and warmth */
leading-tight    /* Hero copy to keep the visual block disciplined */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Formatting |
| --- | --- | --- | --- | --- | --- |
| Hero Heading | Manrope/Geist | 4xl | extrabold | slate-900 | tracking-tight, leading-tight |
| Section Title | Manrope/Geist | 3xl | semibold | slate-900 | tracking-tight |
| Body Copy | Inter/Roboto | base | normal | slate-500 | leading-relaxed |
| CTA Capsule | Inter/Roboto | lg | medium | white | rounded-full |
| Translucent Tag | Inter/Roboto | xs | medium | slate-800 | uppercase, backdrop-blur |

---

## Animation System

### Core Philosophy: The Gentle Float

Animations should evoke the feeling of lightweight physical objects settling onto a polished surface. No aggressive snapping or harsh digital glitches.

### Smooth Staging (Hero Reveal)

The hero text slides up gently, followed shortly by the phone mockup settling into its anchor position.

```tsx
// Text Reveal
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: "easeOut" }}

// Phone Anchor Settle
initial={{ opacity: 0, y: 40, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ delay: 0.2, duration: 0.8, type: "spring", bounce: 0.2 }}

```

### Translucent Label Hover (Magnetic Lift)

Floating UI elements gently rise and catch more light when engaged.

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

```

---

## UI Components

### The Hero Stage & Phone Anchor

The definitive layout structure. Center-aligned copy stacked above a perfectly flush phone presentation.

```tsx
<section className="flex flex-col items-center text-center pt-24 pb-0 bg-stone-50 overflow-hidden">
  <h1 className="font-manrope text-4xl font-extrabold text-slate-900 tracking-tight max-w-2xl">
    Your product story headline.
  </h1>
  <p className="font-inter text-base text-slate-500 mt-4 max-w-xl leading-relaxed">
    Slate-gray supporting copy perfectly centered below the hero.
  </p>
  <div className="mt-8 mb-12">
    {/* CTA Capsule Goes Here */}
  </div>
  
  {/* The Visual Anchor */}
  <div className="relative w-[320px] h-[600px] mt-8">
    <img src="/phone-mockup.png" className="absolute inset-0 z-10 drop-shadow-2xl" />
  </div>
</section>

```

### Gradient Framing Square

Fresh, organic backdrops used strictly behind product UI moments in lower alternating sections.

```tsx
<div className="relative w-full aspect-square flex items-center justify-center">
  {/* The Fresh Gradient Square */}
  <div className="absolute inset-4 rounded-3xl bg-gradient-to-br from-lime-200 via-green-100 to-yellow-100 transform rotate-3 scale-105 opacity-80" />
  
  {/* Product Shot Foreground */}
  <div className="relative z-10 bg-white rounded-2xl shadow-xl overflow-hidden">
    <img src="/app-moment.png" />
  </div>
</div>

```

### Translucent Labels

Glassy floating tags used to highlight specific features overlapping the gradient squares or phone anchor.

```tsx
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-md border border-white/40 shadow-sm">
  <span className="w-2 h-2 rounded-full bg-lime-400" />
  <span className="font-inter text-xs font-medium text-slate-800 uppercase tracking-wide">
    Live Sync
  </span>
</div>

```

---

## Component Catalog

### Call-to-Action (Graphite Capsule)

Fully rounded, non-generic. Must possess the subtle inner top-light to appear tactile.

```tsx
<button className="px-8 py-4 rounded-full bg-slate-800 hover:bg-slate-900 text-white font-inter text-lg font-medium transition-all duration-200 shadow-[0_4px_14px_0_rgba(0,0,0,0.1),inset_0_1px_1px_rgba(255,255,255,0.15)] hover:shadow-[0_6px_20px_rgba(0,0,0,0.15),inset_0_1px_1px_rgba(255,255,255,0.2)]">
  Get Started Free
</button>

```

### Alternating Section Container

Centered rounded blocks for the lower narrative. Uses pale mist-gray to separate from the pearl canvas.

```tsx
<section className="max-w-6xl mx-auto my-24 p-12 lg:p-20 rounded-[3rem] bg-slate-50/80 flex flex-col md:flex-row items-center gap-16">
  {/* Copy Half */}
  <div className="flex-1 space-y-6 text-center md:text-left">
    <h2 className="font-manrope text-3xl font-bold text-slate-900 tracking-tight">Seamless routines.</h2>
    <p className="font-inter text-slate-500 leading-relaxed text-base">Supporting narrative text goes here.</p>
  </div>
  {/* Image Half */}
  <div className="flex-1">
    {/* Frame component goes here */}
  </div>
</section>

```

### Compact Icon Cards

Used for feature grids. Bright, clean, heavily rounded.

```tsx
<div className="p-6 rounded-3xl bg-white border border-slate-100 shadow-sm hover:shadow-md transition-shadow duration-300 flex flex-col items-center text-center">
  <div className="w-12 h-12 rounded-2xl bg-lime-50 text-lime-600 flex items-center justify-center mb-4">
    <Icon className="w-6 h-6" />
  </div>
  <h3 className="font-manrope text-xl font-semibold text-slate-900">Instant Setup</h3>
  <p className="font-inter text-sm text-slate-400 mt-2">Zero configuration required.</p>
</div>

```

### Spacious FAQ Rows

Highly breathable accordions. No bounding boxes, just generous padding and subtle bottom borders.

```tsx
<div className="py-8 border-b border-slate-200/50 last:border-0 group cursor-pointer">
  <div className="flex justify-between items-center">
    <h4 className="font-manrope text-xl font-semibold text-slate-800 group-hover:text-slate-900 transition-colors">
      How does the pricing work?
    </h4>
    <ChevronIcon className="text-slate-400 transition-transform group-data-[open]:rotate-180" />
  </div>
  <p className="font-inter text-base text-slate-500 mt-4 leading-relaxed pr-12 hidden group-data-[open]:block">
    Detailed answer with plenty of vertical breathing room.
  </p>
</div>

```

---

## Quality Checklist

* [ ] Is the primary hero heading sized at `text-4xl` using Manrope or Geist?
* [ ] Is the body copy utilizing Inter or Roboto to ensure clean contrast against the geometric headers?
* [ ] Is the phone mockup placed directly below the hero CTA as the definitive visual anchor?
* [ ] Are all CTAs rendered as fully rounded dark graphite capsules (`bg-slate-800`/`900`) with inner shadow highlights?
* [ ] Are you completely avoiding generic primary-colored (blue, red, green) solid buttons?
* [ ] Do lower narrative sections alternate copy and app moments within heavily rounded, centered mist-gray containers?
* [ ] Are the green-yellow gradients strictly reserved for background framing squares behind product shots?
* [ ] Do secondary floating elements (labels/tags) utilize `backdrop-blur` and translucent white backgrounds?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Pearl (`stone-50`) or Ivory canvases.
* Large border radii (`rounded-2xl` to `rounded-[3rem]`) on all structural elements.
* Mixing geometric headings (Manrope) with utilitarian body fonts (Inter).
* Centered text alignments for primary story hooks.
* Expansive whitespace and padding in FAQ rows.
* Soft, bouncy spring animations for hovers and reveals.

### ✗ Not Allowed

* Sharp, 90-degree corners on buttons, cards, or imagery.
* Flat, unlit solid black buttons (must have the subtle inner highlight to be a "capsule").
* Blue, Purple, or Red primary action buttons.
* Gradients used as text fill colors or full-page backgrounds.
* Left-aligned hero sections (breaks the centered narrative anchor).
* Heavy, opaque drop shadows on text or UI cards.