No preview available
Pearl Photo Hero App Stack

/pearlPhotoHeroAppStack
A warm, modern, and immersive mobile-first design system centered on full-bleed photography, pristine geometry, frosted glass elements, and strict vertical conversion flow to maximize focus and conversion.
1 likes
1 bookmark
Jun 16, 2026
Design System Content
# Pearl Photo Hero App Stack

A design language for warm, immersive, and highly converting mobile-first web experiences.

---

## Philosophy

> "Immersion sets the stage; centralized focus drives the action."

This system is built to balance the breathtaking scale of full-bleed photography with the highly controlled, pristine geometry of a mobile-first interface. It feels warm, modern, and impeccably calm. By stripping away decorative clutter and gradients, the aesthetic relies entirely on photographic depth, frosted glass subtlety, and a relentless, centered vertical conversion flow. 

### Core Beliefs

1. **Photography is the environment** — The hero section is a full-width, full-height window into the product's world. Everything else lives within or below this environment.
2. **The center is sacred** — The user's eye should never have to wander. The conversion flow is a singular, vertically stacked column that mimics the ergonomics of a mobile device.
3. **Warmth through geometry** — Fully rounded interactive elements and soft-radius content blocks create a friendly, approachable mood without sacrificing premium polish.
4. **Charcoal anchors the action** — In a world of pale grays, translucent glass, and white space, pure dark charcoal provides a grounding, unmistakable target for calls to action.
5. **Glass over gradients** — Depth is achieved through backdrop blurring (frosted glass) and soft boundaries, never through artificial color gradients.

### Strict Rules

* **No Gradients** — Backgrounds are either flat, pale geometric blocks, or pure photography. No linear or radial color fades.
* **No Decorative Clutter** — Eliminate floating shapes, abstract blobs, or non-functional graphic elements. Every element must serve the layout or the content.
* **Strictly Centered Lower Sections** — Below the hero, the layout must not break into wide, sprawling multi-column grids. Keep blocks vertically stacked, centered, and constrained to a mobile-optimized maximum width.
* **Fully Rounded Primary Actions** — All main CTAs must be pill-shaped (`rounded-full`). No harsh right angles for interactive elements.

---

## Color Palette

### The Warm Light Scale & Charcoal Anchor

The palette relies on near-whites, pale warm grays, and translucent layers to maintain a calm mood. The "accent" is not a bright color, but rather a deeply grounding dark charcoal that commands interaction.

```css
/* Backgrounds (Canvas & Structural) */
bg-white              /* Primary cards, clean icon rows, FAQ accordions */
bg-stone-50           /* Lower section canvas, pale-gray rounded blocks (#fafaf9) */
bg-stone-100          /* Secondary friendly feature cards, hover states */
bg-stone-200/50       /* Disabled states, subtle background dividers */

/* Frosted Glass (For Nav & Labels over Photography) */
bg-white/70           /* Slim navigation base */
bg-white/40           /* Subtle glass labels over the hero photo */
backdrop-blur-md      /* Essential pairing for all glass backgrounds */
backdrop-blur-lg      /* Heavy blur for navigation legibility */

/* Borders */
border-white/20       /* Inner borders for glass elements over photos */
border-stone-100      /* Soft borders for pale-gray blocks */
border-stone-200      /* Standard structural separation */

/* Typography & Icons */
text-stone-950        /* Primary headlines, stark contrast requirements */
text-stone-800        /* Subheadings, active navigation links */
text-stone-600        /* Compact supporting copy, FAQ body text */
text-stone-400        /* Inactive states, metadata, subtle icon rows */

/* The Anchor: Dark Charcoal (CTAs) */
bg-neutral-900        /* Primary call-to-action buttons (#171717) */
text-white            /* Text inside primary CTAs */
hover:bg-neutral-800  /* Hover state for primary actions */
ring-neutral-900/20   /* Focus rings for accessibility */

```

---

## Typography

The typography pairs the geometric, confident structure of **Manrope** for display elements with the clean, highly legible compactness of **DM Sans** for everything else.

### Font Families & Weights

```css
font-manrope     /* Exclusively for headlines and numerical features */
font-dmsans      /* Supporting copy, buttons, labels, and UI elements */

font-normal      /* Core body copy in DM Sans */
font-medium      /* Button labels, UI metadata, subtle glass labels */
font-semibold    /* Primary headlines in Manrope (MANDATORY for text-4xl) */

```

### Font Size Scale

```css
text-xs          /* Subtle glass labels, metadata (12px) */
text-sm          /* Compact supporting copy, FAQ text, clean icon labels (14px) */
text-base        /* Standard UI buttons, friendly feature card copy (16px) */
text-lg          /* Nav links, spacious accordion headers (18px) */
text-xl          /* Feature card titles, secondary stacked section headers */
text-4xl         /* Hero headline (Manrope semibold) - The strict anchor point */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Headlines (Manrope text-4xl) to lock the geometry */
tracking-normal  /* All DM Sans supporting copy */
tracking-wide    /* Subtle glass labels and tiny metadata */
uppercase        /* Restricted to tiny glass metadata labels only */

```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl | semibold | stone-950 (or white/glass on dark photo) | tight |
| Section Titles | Manrope | xl | semibold | stone-900 | tight |
| Supporting Copy | DM Sans | sm | normal | stone-600 | normal |
| Primary CTA | DM Sans | base | medium | white | normal |
| Glass Labels | DM Sans | xs | medium | stone-800 | wide |

---

## Animation System

### Core Philosophy: The Calm Arrival

Movements should feel like a deep breath—smooth, spacious, and deliberate. Elements slide softly upward into their centered alignments.

### Hero Sequence

The hero text sets the stage, followed immediately by the pristine phone mockup smoothly elevating into its resting place directly beneath the text.

```tsx
// Phone Mockup Arrival
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }} // Decelerating calm spring

```

### Spacious FAQ Accordions

Expansion should not feel mechanical; it should feel like paper softly unfolding to reveal compact supporting copy.

```tsx
// Accordion Expand
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
transition={{ duration: 0.4, ease: "easeOut" }}

```

---

## UI Components

### Slim, Frosted Navigation

Minimalistic, unobtrusive, and designed to float above the full-height photographic hero without obscuring it.

```tsx
<nav className="fixed top-0 w-full h-14 bg-white/70 backdrop-blur-lg border-b border-white/20 flex items-center justify-center z-50">
  {/* Centered minimal brand/links */}
</nav>

```

### The Pristine Phone Mockup

The focal point of the hero section. Centered perfectly beneath the `text-4xl` Manrope headline.

```tsx
<div className="relative mt-8 mx-auto w-full max-w-[320px] rounded-[3rem] border-[6px] border-stone-100 shadow-2xl bg-white overflow-hidden">
  {/* App Interface Img */}
</div>

```

### Subtle Glass Labels

Used as floating badges over the photographic hero or within the app UI mockup to denote status or categories without adding visual weight.

```tsx
<span className="px-3 py-1.5 rounded-full bg-white/40 backdrop-blur-md border border-white/30 text-stone-900 font-dmsans text-xs font-medium tracking-wide">
  Premium Quality
</span>

```

---

## Component Catalog

### Buttons

Always fully rounded. The charcoal button is the inescapable center of gravity for the user's eye.

```tsx
// Primary Conversion CTA (Dark Charcoal)
"bg-neutral-900 text-white font-dmsans font-medium text-base rounded-full px-8 py-3.5 hover:bg-neutral-800 transition-colors shadow-sm"

// Secondary Action (Ghost/Glass)
"bg-stone-100 text-stone-900 font-dmsans font-medium text-base rounded-full px-8 py-3.5 hover:bg-stone-200 transition-colors"

```

### Near-White & Pale-Gray Blocks

For the vertically stacked lower sections. These blocks contain features and flow smoothly down the page.

```tsx
// Friendly Feature Card
"bg-white rounded-3xl p-8 border border-stone-100 shadow-sm flex flex-col items-center text-center max-w-md mx-auto"

// Lower Section Container Block
"bg-stone-50 rounded-[2.5rem] p-10 w-full max-w-2xl mx-auto flex flex-col items-center space-y-6"

```

### Clean Icon Rows

Horizontal arrays of simple, monochrome icons used to communicate trust, features, or integration points inside the centered flow.

```tsx
<div className="flex items-center justify-center gap-6 py-4 text-stone-400">
  <Icon name="shield" className="w-6 h-6 hover:text-stone-600 transition-colors" />
  <Icon name="zap" className="w-6 h-6 hover:text-stone-600 transition-colors" />
  <Icon name="heart" className="w-6 h-6 hover:text-stone-600 transition-colors" />
</div>

```

### Spacious FAQ Accordions

Generously padded, stacked vertically, using DM Sans for compact but highly readable supporting copy.

```tsx
<details className="w-full max-w-xl mx-auto border-b border-stone-200 py-6 group cursor-pointer">
  <summary className="font-dmsans text-lg text-stone-900 font-medium list-none flex justify-between items-center">
    Question Title Here
    <span className="text-stone-400 group-open:rotate-45 transition-transform">+</span>
  </summary>
  <p className="mt-4 font-dmsans text-sm text-stone-600 leading-relaxed">
    Compact supporting copy that directly answers the user's query without stretching across the entire screen.
  </p>
</details>

```

---

## Quality Checklist

* [ ] Is the hero section utilizing full-height and full-width photography?
* [ ] Is the primary headline exactly `text-4xl`, `semibold`, using **Manrope**?
* [ ] Is all supporting body copy using **DM Sans** in a compact size (`text-sm` or `text-base`)?
* [ ] Are all primary CTAs fully rounded (`rounded-full`) and styled in dark charcoal (`bg-neutral-900`)?
* [ ] Is the pristine phone mockup placed *directly* and symmetrically below the hero text?
* [ ] Are all lower sections strictly centered and vertically stacked (avoiding wide multi-column grids)?
* [ ] Have all gradients and decorative/non-functional graphics been completely eliminated from the design?
* [ ] Do navigation and floating labels utilize a proper glassmorphism effect (`backdrop-blur` with low-opacity white)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-quality, full-bleed photographic backgrounds.
* Centered, mobile-constrained layout widths for lower sections.
* Pure dark charcoal buttons for calls to action.
* Frosted glass UI elements (`backdrop-blur`).
* Pale-gray and near-white soft-radius containers.
* Generous vertical spacing between stacked sections.

### ✗ Not Allowed

* Gradients of any kind (no linear fading backgrounds or text gradients).
* Decorative background shapes, blobs, or abstract illustrations.
* Multi-column grid layouts in the lower sections that break the centered flow.
* Sharp, right-angled buttons or structural cards.
* Brightly colored buttons or multi-colored typographic hierarchies.