Pearl Frame

/pearlFrame
A design system for photography-driven app landing pages, blending tactile realism with structured typography and a warm, organic light palette for inviting, editorial-style digital experiences.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Pearl Frame App Launch

A design language for polished, photography-driven app landing experiences with an organic, warm-light aesthetic.

---

## Philosophy

> "Warmth invites engagement; framing focuses intent."

This system creates digital environments that feel like flipping through a high-end lifestyle editorial. It balances the tactile realism of full-viewport contextual photography with immaculate, structural typography. The aesthetic relies on the interplay between expansive visual contexts and highly concentrated, centered conversion funnels rooted in soft, natural contrast. 

### Core Beliefs

1. **Centered Gravity** — The core conversion stack (headline, description, action) sits dead center, anchoring the user amidst sweeping photographic backgrounds.
2. **Context is King** — Apps exist in the real world. We use lifestyle, workspace, travel, or wellness imagery as the foundational layer, brought into harmony via subtle overlays.
3. **Organic Structure** — Say goodbye to sharp, clinical edges. Interfaces employ off-white rounded panels, soft glass refractions, and pill-shaped elements to feel human and approachable.
4. **Warmth over Sterility** — Pure screen-white is replaced with pearl and porcelain. Pure black is replaced with graphite and charcoal-brown. The interface should feel gently sunlit.
5. **The Layered Reveal** — Information cascades downward from the immersive hero, smoothly transitioning into grounded, tangible phone mockups and spacious feature grids.

### Strict Rules

* **Two-Typeface Rule** — Manrope is strictly for headings to provide geometric stability; DM Sans is strictly for body copy to ensure approachable legibility.
* **The Ivory Veil** — Text must never compete with raw photography. All photographic backgrounds must use a subtle, warm ivory readability veil.
* **Pill-Shaped Actions** — Primary interactive targets (buttons, primary tags) must utilize fully rounded pill shapes to contrast with the rectangular phone mockups.
* **Deep CTAs Only** — The deepest color in the system (Charcoal-Brown) is reserved exclusively for primary conversion elements and critical focus states.
* **Muted Glass Over Solids** — Floating elements over the hero (like the slim navbar) must utilize background blur and subtle translucency, never harsh solid blocks.

---

## Color Palette

### The Warm Light Scale

The palette replaces stark tech-monochromes with organic, natural minerals and textiles. Transitions move from bright pearl down through limestone, anchoring on graphite for text and charcoal-brown for action.

```css
/* Backgrounds & Canvas (Lightest to Darkest) */
bg-pearl-white          /* Main structural canvas below hero (#FDFCFB) */
bg-warm-porcelain       /* Secondary rounded panels, feature cards (#F5F3F0) */
bg-pale-limestone       /* Hover states, subtle panel insets, pill bases (#EBE8E3) */

/* Structural & Boundaries */
border-ash-gray         /* Dividers, subtle borders, inactive ring states (#E2DFDB) */
border-ash-gray/50      /* Micro-borders for muted glass cards */

/* The Ivory Veil (Hero Readability) */
bg-ivory-veil           /* Overlay for hero photography (#FDFCFB/60) */
bg-glass-nav            /* Navbar backing (#FDFCFB/80 + backdrop blur) */

/* Typography & Content */
text-graphite           /* Primary headings, high-contrast text (#2C2927) */
text-graphite/80        /* Body paragraphs, secondary descriptions */
text-graphite/50        /* Metadata, subtle nav labels, disabled states */

/* The Anchor: Deep Charcoal-Brown (CTAs & Accents) */
bg-charcoal-brown       /* Primary CTA buttons, focused elements (#38312E) */
text-charcoal-brown     /* Active text highlights, localized emphasis */
border-charcoal-brown   /* Active form inputs, selected interactive states */
bg-charcoal-brown/5     /* Extremely subtle hover backdrop for text links */

```

### Destructive Actions

```css
hover:bg-amber-900/10   /* Warm, muted warning states */
hover:text-amber-900    /* Destructive text actions */
hover:border-amber-900/30

```

---

## Typography

The typography system relies on a strict pairing: the structural, geometric presence of **Manrope** for all headings, paired with the highly legible, geometric humanist **DM Sans** for all body content.

### Font Families & Weights

```css
font-manrope     /* Headings, large numbers, section titles */
font-dmsans      /* Paragraphs, nav labels, inputs, accordions */

font-normal      /* Default for paragraphs, nav labels */
font-medium      /* Emphasized body text, secondary buttons */
font-semibold    /* STRICTLY ENFORCED for all headings, section titles, and primary CTAs */

```

### Font Size Scale

The scale is highly specific to create an editorial rhythm, bypassing standard utility sizes for exact pixel targets.

```css
text-[11px]      /* Micro-tags, footnote disclaimers */
text-[13px]      /* Primary nav labels (13-14px target) */
text-[14px]      /* Mobile nav labels, button text, standard tags */
text-[17px]      /* Primary body paragraphs, FAQ answers (17-18px target) */
text-[20px]      /* Card titles, accordion triggers */
text-[24px]      /* Sub-section callouts, quote blocks */
text-[34px]      /* Section headings (32-38px target) */
text-[40px]      /* Primary hero headline (36-42px target) */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large hero headlines, section headings (-0.02em) */
tracking-normal  /* All body text and paragraphs */
tracking-wide    /* Navigation labels, pill tags (+0.05em) */

capitalize       /* Nav items, standard UI actions */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 40px | semibold | graphite | tight |
| Section Headings| Manrope | 34px | semibold | graphite | tight |
| Main Paragraph | DM Sans | 17px | normal | graphite/80 | normal |
| Nav Labels | DM Sans | 13px | normal | graphite/80 | wide |
| CTA Buttons | DM Sans | 14px | semibold | pearl-white | normal |

---

## Animation System

### Core Philosophy: The Cinematic Rise

Elements do not snap; they breathe into view. The hallmark interaction is the smooth, grounded upward reveal of the phone mockups directly beneath the centered copy.

### The Mockup Reveal

```tsx
initial={{ opacity: 0, y: 80, scale: 0.96 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-10%" }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}

```

### Glass Layer Interactions

Hovering over muted glass cards gently lifts the blur and increases opacity, making the element feel as though it's moving closer to the lens.

```tsx
whileHover={{ 
  y: -4,
  backgroundColor: "rgba(253, 252, 251, 0.95)", 
  backdropFilter: "blur(12px)" 
}}
transition={{ duration: 0.3, ease: "easeOut" }}

```

---

## UI Components

### The Ivory Veil

Applied as a pseudo-element or absolute layer over the full-viewport hero photograph to ensure the graphite typography remains perfectly readable without losing the photographic context.

```tsx
<div className="absolute inset-0 bg-gradient-to-b from-pearl-white/60 via-pearl-white/40 to-pearl-white/80 backdrop-blur-[2px] mix-blend-overlay" />

```

### Slim Glass Navbar

A highly compact, floating navigation bar that sits slightly below the very top edge of the viewport.

```tsx
<nav className="mx-auto mt-4 h-12 max-w-fit px-6 rounded-full bg-pearl-white/80 backdrop-blur-md border border-ash-gray/50 flex items-center gap-6 shadow-sm">
  {/* Nav items */}
</nav>

```

### Spacious FAQ Accordion

High padding, soft lines, and warm backgrounds. No harsh borders between rows.

```tsx
<div className="w-full bg-warm-porcelain rounded-2xl p-6 transition-all data-[state=open]:bg-pale-limestone">
  {/* Accordion trigger text-[20px] Manrope */}
  {/* Accordion content text-[17px] DM Sans */}
</div>

```

---

## Component Catalog

### Panels & Cards

Soft, off-white panels with generous border radii (24px - 32px for main panels).

```tsx
// Primary Feature Panel
"bg-warm-porcelain rounded-[32px] p-10 md:p-14 overflow-hidden relative"

// Muted Glass Card (Overlaying imagery or mockups)
"bg-pearl-white/70 backdrop-blur-lg border border-ash-gray/40 rounded-2xl p-6 shadow-[0_8px_30px_rgb(44,41,39,0.04)]"

```

### Buttons

Strictly pill-shaped to differentiate from architectural app elements.

```tsx
// Primary CTA (Deep Charcoal-Brown)
"bg-charcoal-brown text-pearl-white font-dmsans font-semibold text-[14px] px-8 py-3.5 rounded-full hover:bg-graphite transition-colors shadow-md"

// Secondary/Ghost Action
"bg-pale-limestone/50 text-graphite font-dmsans font-medium text-[14px] px-8 py-3.5 rounded-full hover:bg-pale-limestone transition-colors"

```

### Phone Mockup Container

The structural anchor of the lower sections, sitting directly beneath the hero copy stack.

```tsx
<div className="relative mx-auto w-full max-w-[320px] rounded-[48px] border-[8px] border-graphite bg-pearl-white shadow-2xl overflow-hidden aspect-[19.5/9]">
  {/* App UI injected here */}
  <div className="absolute top-0 inset-x-0 h-6 bg-graphite rounded-b-3xl w-1/2 mx-auto" /> {/* Notch */}
</div>

```

### Tags & Nav Labels

```tsx
// Nav Label
"font-dmsans text-[13px] tracking-wide text-graphite/80 hover:text-graphite transition-colors capitalize cursor-pointer"

// Feature Tag
"px-4 py-1.5 rounded-full bg-pale-limestone text-graphite font-dmsans text-[13px] font-medium"

```

---

## Quality Checklist

* [ ] Is the hero typography layered securely over an **Ivory Veil** rather than raw photography?
* [ ] Are all headings using **Manrope Semibold** at the precise pixel sizes (e.g., 40px hero, 34px section)?
* [ ] Is all paragraph text set in **DM Sans** at exactly 17px or 18px?
* [ ] Are the primary conversion calls-to-action utilizing the deep **Charcoal-Brown**?
* [ ] Do all buttons feature fully rounded, **pill-shaped** geometry?
* [ ] Does the UI transition from the full-bleed photographic hero into a grounded **phone mockup reveal** below the fold?
* [ ] Are secondary feature sections using **off-white rounded panels** (Warm Porcelain) rather than pure white borders?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-quality, lifestyle, travel, wellness, or workspace photography filling the entire hero viewport.
* Warm, organic background tones (porcelain, limestone, pearl).
* Slim, floating glass navigation bars with backdrop filters.
* Alternating grid layouts showcasing crisp phone mockups paired with DM Sans paragraphs.
* Spacious, highly padded accordions for FAQs.

### ✗ Not Allowed

* Pure screen whites (`#FFFFFF`) or pure hex blacks (`#000000`).
* Sharp, 0px or 4px square corners on primary containers or buttons.
* Opaque, solid-color overlays on the hero image (must use the translucent veil).
* Vibrant, saturated accent colors (e.g., neon blue, electric purple).
* Left-aligned hero conversion stacks (must be centered gravity).