Sprout Pearl App Column

/sproutPearlAppColumn
A warm, mobile-centered design system for light interfaces. Emphasizes a centered column, pearl backgrounds, friendly radii, and tightly controlled gradients to mimic the inviting tactility of native iOS environments.
0 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Sprout Pearl App Column Design System

A design language for pristine, mobile-centered, light-themed product interfaces.

---

## Philosophy

> "Warmth invites interaction; focused columns drive conversion."

This system creates app landing pages and feature showcases that feel like a seamless extension of native iOS environments—tactile, inviting, and highly focused. The aesthetic relies on warm pearl surfaces rather than harsh sterile whites, anchoring the user's attention down a strictly centered, narrow vertical column.

### Core Beliefs

1. **The Mobile Core** — Everything flows from a perfectly centered, narrow column structure. Desktop layouts are simply an elegant framing of the mobile experience, never expanding to wide-screen chaos.
2. **Warmth & Clarity** — Pearl white surfaces create a welcoming canvas. The contrast is soft but distinct, feeling friendly and premium.
3. **Contained Radiance** — Vibrancy is heavily restricted. Sprout tones and green-yellow gradients are strictly trapped inside bento tiles, screenshot backplates, or as subtle product halos. They never flood the background.
4. **Friendly Native Physics** — Large border radii, delicate borders, and soft shadows mimic the tactile environment of an iOS story panel. 
5. **Graphite Anchors** — Primary actions and typography use deep graphite tones to ground the airy layout without resorting to the harshness of pure black.

### Strict Rules

* **Narrow Desktop Layouts** — Main content columns must remain horizontally centered and narrow (max-width `2xl` or `3xl`). Never stretch content to fill wide desktop screens.
* **Confined Gradients** — Green-yellow "sprout" gradients are forbidden as full-page backgrounds. They may only exist within rounded-square backplates, bento tiles, and subtle halos behind the central phone mockup.
* **Pill-Shaped CTAs** — All primary calls-to-action must be fully rounded (`rounded-full`), rendered in solid graphite. 
* **Dual Typography Rigor** — Headlines exclusively use geometric/grotesque fonts (Manrope or Geist); body copy is strictly reserved for compact, neutral sans-serifs (Inter or Roboto).
* **Soft Corners Only** — Sharp corners are prohibited. Containers, panels, and images must use large native iOS-style radii (`rounded-2xl` to `rounded-3xl`).

---

## Color Palette

### The Pearl & Graphite Scale

The foundational palette avoids pure `#FFFFFF` and `#000000`. Backgrounds use a warm, pearlescent off-white, while text and primary buttons rely on a rich, soft graphite.

```css
/* Backgrounds (Pearl Surfaces) */
bg-[#FCFBF9]          /* Main canvas background (Warm Pearl) */
bg-white/80           /* Frosted navbars, translucent hovering panels */
bg-stone-50           /* Secondary contained zones, calm FAQ bodies */
bg-stone-100/50       /* Ultra-subtle hover states for list items */
bg-[#F4F3F0]          /* Solid backdrop for native iOS story panels */

/* Structural Borders & Shadows */
border-stone-200/60   /* Delicate structural panel borders */
border-stone-300/50   /* Input borders and subtle separators */
shadow-[0_8px_30px_rgb(0,0,0,0.04)] /* Soft iOS story panel shadow */

/* Graphite Anchors (Text & CTAs) */
bg-zinc-800           /* Primary graphite CTA pill */
hover:bg-zinc-700     /* Primary CTA hover state */
text-zinc-900         /* Hero headlines, intense focal points */
text-zinc-700         /* Body copy, compact descriptions */
text-zinc-500         /* Muted meta-text, FAQ collapsed states */

/* The Sprout Tone (Strictly Contained Gradients & Accents) */
from-lime-300 to-emerald-400    /* Vibrant backplate gradient for phone mockups */
from-green-200 to-yellow-100    /* Subtle bento tile background */
bg-lime-400/20                  /* Subtle product halo glow */
text-emerald-700                /* Success/Highlight text on sprout backgrounds */
```

---

## Typography

Typography establishes an immediate hierarchy. Manrope or Geist provides architectural structure to the centered headings, while Inter or Roboto acts as the highly legible, compact, and friendly workhorse for all interface details.

### Font Families

```css
font-display     /* Manrope or Geist - STRICTLY for Hero and H1/H2/H3 */
font-sans        /* Inter or Roboto - STRICTLY for body copy, buttons, FAQs */
```

### Font Weights

```css
font-semibold    /* Hero headline (Mandatory), Story panel titles */
font-medium      /* Graphite CTA pills, Avatar chips, active navigation */
font-normal      /* Compact friendly body copy, short descriptions */
```

### Font Size Scale

```css
text-xs          /* Avatar chip roles, micro-labels (12px) */
text-sm          /* Standard friendly body copy, FAQ answers (14px) */
text-base        /* Primary CTA pills, short hero description (16px) */
text-lg          /* Subheadings inside bento grids (18px) */
text-xl          /* Native iOS story panel headers (20px) */
text-4xl         /* The primary Hero Headline (Mandatory starting size) */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Shape/Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope / Geist | 4xl | semibold | zinc-900 | tight |
| Value Prop/Desc | Inter / Roboto | base | normal | zinc-700 | normal |
| Graphite CTA | Inter / Roboto | base | medium | white | fully rounded |
| Story Panel Title | Manrope / Geist | xl | semibold | zinc-900 | tight |
| FAQ Answer | Inter / Roboto | sm | normal | zinc-500 | normal |

---

## Animation System

### Core Philosophy: Native iOS Fluidity

Movements should feel rubber-band smooth, mirroring native iOS interactions. Focus on spring physics, calm reveals, and soft expanding accordions.

### Page Load & The Central Column Reveal

The hero sequence loads top-to-bottom with a subtle drift, establishing the centered layout instantly.

```tsx
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: "spring", bounce: 0.2, duration: 0.8 }}
```

### The Phone Mockup Staging (Floating Halo)

The centered polished phone mockup sits cleanly in its sprout backplate, featuring a continuous, calm, floating levitation.

```tsx
animate={{ y: [0, -8, 0] }}
transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }}
```

---

## UI Components

### The Slim Frosted Navbar

Sits perfectly centered at the top of the column. It does not stretch full-bleed on desktop; it maintains the narrow constraint of the main column.

```tsx
<nav className="mx-auto max-w-2xl w-full h-14 bg-white/70 backdrop-blur-md border border-stone-200/50 rounded-full px-6 flex items-center justify-between shadow-sm sticky top-4 z-50">
  {/* Nav Content */}
</nav>
```

### The Contained Sprout Backplate

Used exclusively behind the polished phone mockup. It traps the green-yellow vibrancy inside a beautifully rounded square.

```tsx
<div className="relative w-full max-w-md mx-auto aspect-square rounded-[2.5rem] bg-gradient-to-br from-lime-300 to-emerald-400 p-8 shadow-inner overflow-hidden">
  {/* Polished Phone Mockup Center-Aligned Here */}
  <img src="/phone-mockup.png" className="w-full h-auto drop-shadow-2xl" />
</div>
```

### Native iOS Story Panels (Feature Bento)

Features are displayed in calm, card-like native panels with large radii, delicate borders, and soft shadows.

```tsx
<div className="bg-[#FCFBF9] border border-stone-200/60 rounded-3xl p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] flex flex-col gap-4">
  <h3 className="font-display text-xl font-semibold text-zinc-900">Seamless Sync</h3>
  <p className="font-sans text-sm font-normal text-zinc-600">
    Your content updates flawlessly across all devices.
  </p>
</div>
```

---

## Component Catalog

### Buttons & Chips

```tsx
// Primary Graphite CTA Pill (Hero)
"bg-zinc-800 text-white font-sans font-medium text-base rounded-full px-8 py-3.5 hover:bg-zinc-700 transition-colors shadow-md"

// Secondary Action Button (Frosted Pearl)
"bg-white/80 border border-stone-200/60 text-zinc-800 font-sans font-medium text-sm rounded-full px-6 py-2.5 backdrop-blur-sm hover:bg-white transition-all shadow-sm"

// Avatar Chip (Testimonial / Author)
<div className="inline-flex items-center gap-2 bg-stone-100/80 border border-stone-200/50 rounded-full p-1.5 pr-4">
  <img src="/avatar.jpg" className="w-6 h-6 rounded-full" />
  <span className="font-sans text-xs font-medium text-zinc-800">Sarah Jenkins</span>
</div>
```

### The Calm FAQ Accordion

Stripped back, zero-box styling. Relies on horizontal lines and soft text colors to keep the visual weight light.

```tsx
// FAQ Item Container
"border-b border-stone-200/60 py-4"

// FAQ Question
"font-display text-base font-semibold text-zinc-800 flex justify-between items-center w-full"

// FAQ Answer Panel
"font-sans text-sm text-zinc-500 pt-2 pb-4 leading-relaxed"
```

---

## Quality Checklist

* [ ] Is the desktop layout restricted to a narrow, horizontally centered column (e.g., `max-w-2xl` or `max-w-3xl`)?
* [ ] Does the Hero use Manrope or Geist at exactly `text-4xl` and `font-semibold`?
* [ ] Is the body copy and description utilizing Inter or Roboto?
* [ ] Are the primary CTA buttons fully pill-shaped (`rounded-full`) and deep graphite in color?
* [ ] Are the Sprout green-yellow gradients strictly confined to backplates, halos, or bento tiles (no full-page sprout backgrounds)?
* [ ] Does the polished phone mockup sit directly beneath the centralized hero text/CTA?
* [ ] Do all story panels and containers utilize large, friendly native radii (`rounded-2xl` to `rounded-3xl`)?
* [ ] Is the background a warm pearl tone rather than absolute stark white?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm pearl (`#FCFBF9` or similar) and off-white backgrounds.
* Centered text alignments for hero, value props, and descriptions.
* Generous border radii mimicking native iOS widgets.
* Avatar chips with tiny, perfectly rounded profile pictures to add a human touch.
* Delicate, frosted effects on navbars or overlapping elements.
* Soft, highly-diffused shadows that barely register as gray.

### ✗ Not Allowed

* Wide, multi-column desktop layouts that span the full screen width.
* Sharp square corners on any container, button, or image.
* Backgrounds flooded with vibrant greens or yellows.
* Pure `#000000` text or absolute `#FFFFFF` backgrounds.
* Blocky, rigid, or aggressively corporate box shadows.
* Mixing font families incorrectly (e.g., using Inter for the Hero headline or Manrope for the body copy).