Porcelain Glass App Conversion Frame

/porcelainGlassAppConversionFrame
A minimal, tactile design language for premium mobile app landing experiences, merging matte porcelain surfaces with glassmorphism to focus attention, maximize conversion, and evoke physical product quality—anchored by structural purity and authentic imagery.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Porcelain Glass App Conversion Frame

A design language for high-conversion, premium mobile product landing environments.

---

## Philosophy

> "Clarity drives action; texture builds desire."

This system creates conversion-focused interfaces that feel like holding a perfectly manufactured piece of hardware. By combining the matte, ultra-smooth surfaces of porcelain with the precise depth of glassmorphic accents, the interface removes all friction between the user and the product. It relies entirely on structural purity, relying on crisp typography, generous whitespace, and authentic image tones rather than decorative clutter.

### Core Beliefs

1. **The Product is the Core** — The interface is merely the pedestal. High-fidelity phone mockups and product imagery hold the absolute center of gravity.
2. **Contrast as an Anchor** — Dark theme call-to-action pairs against bright, porcelain canvases draw the eye with magnetic force, driving conversion naturally.
3. **Tactile Dimension** — We use glassmorphism not for decoration, but to create spatial awareness. Translucent chips and blurred navbars establish a clear z-axis.
4. **Architectural Rhythm** — Classic mobile-product structure dictates the flow: high-impact centered heroes followed by rhythmic, alternating left-right feature layouts.
5. **Absolute Minimalism** — Zero blobs, zero opaque gradients, zero decorative shapes. Whitespace and structural frames do all the heavy lifting.

### Strict Rules

* **Two-Typeface System** — Manrope is exclusively for centered headlines and structural framing; DM Sans is exclusively for descriptive and body content.
* **No Artificial Gradients** — Backgrounds are either pure solid off-whites (porcelain) or high-quality full-bleed photographic tones.
* **Dark-Theme Anchors** — Primary interactive elements (like CTAs) must utilize absolute high-contrast dark tones, never bright neon colors.
* **No Floating Clutter** — Information must be contained within rounded, meticulously padded off-white or mist-gray frames.
* **Delicate Boundaries** — Borders exist only as hairline definitions, never as heavy framing mechanisms.

---

## Color Palette

### Porcelain, Mist, & Onyx Scale

The palette eschews bright, saturated primary colors in favor of a sophisticated interplay between warm, matte off-whites (Porcelain), cool subtle grays (Mist), and deep, grounding blacks (Onyx).

```css
/* Porcelain Backgrounds (Matte Surfaces) */
bg-porcelain-50       /* Main canvas background (#fcfcfb) */
bg-porcelain-100      /* Feature cards, alternating layout panels (#f5f5f4) */
bg-porcelain-200      /* Hover states on light cards, calm accordion backgrounds */

/* Mist Grays (Structural & UI Borders) */
bg-mist-100           /* Secondary UI blocks, compact feature cards (#ededec) */
border-mist-200       /* Delicate borders for cards and framing */
border-mist-300       /* Focused input boundaries, active card borders */

/* Glassmorphic Accents (Translucent) */
bg-white/70           /* Primary glass surfaces (combined with backdrop-blur-md) */
bg-white/40           /* Translucent caption chips, secondary floating elements */
border-white/50       /* Inner highlights on glassmorphic elements */

/* Onyx (The Conversion Anchor & Text) */
bg-onyx-900           /* Primary CTA buttons, dark theme elements (#121212) */
bg-onyx-800           /* CTA hover states */
text-onyx-950         /* Manrope hero headlines, primary metric data */
text-onyx-800         /* Manrope section titles, active states */
text-onyx-600         /* DM Sans body description, short paragraphs */
text-onyx-400         /* DM Sans micro-copy, footer links, subtle hints */

/* Image Tone Dependence */
/* No brand accent color is defined—the photographic tone of the full-bleed hero 
   and phone mockups provides the only necessary localized color. */
```

### Destructive / Error States

```css
/* Subtle, muted error states to maintain the calm aesthetic */
bg-red-50/50
text-red-700
border-red-200/50
```

---

## Typography

A strict dual-font system. Manrope provides geometric precision and modern architectural structure for all headings. DM Sans offers exceptional legibility and approachable warmth for all short-form descriptions.

### Font Families & Weights

```css
font-manrope     /* Headings, CTA labels, structural numbers */
font-dmsans      /* Short descriptions, body content, tooltips, FAQ text */

font-medium      /* Default for DM Sans body, Manrope subheadings */
font-semibold    /* Default for Manrope hero headlines, CTA buttons */
font-bold        /* Reserved strictly for crucial numerical data points */
```

### Font Size Scale

```css
text-[11px]      /* Caption chips, image attribution, mockup labels */
text-xs          /* FAQ micro-copy, secondary footer links (12px) */
text-sm          /* Navigation links, compact feature card descriptions (14px) */
text-base        /* Standard DM Sans body copy, input text (16px) */
text-lg          /* Short DM Sans hero description, large buttons (18px) */
text-2xl         /* Calm FAQ accordion headers, compact card titles (24px) */
text-4xl         /* Alternating left-right layout section headers (36px) */
text-6xl-8xl     /* Centered Manrope hero headlines (responsive) */
```

### Letter Spacing & Transforms

```css
tracking-tighter /* Manrope hero headlines (creates cohesive blocks) */
tracking-tight   /* Manrope section headers */
tracking-normal  /* DM Sans body text (prioritizes readability) */
tracking-wide    /* Translucent caption chips */

uppercase        /* Exclusively for tiny translucent caption chips */
```

### Hierarchy Examples

| Element | Typeface | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 7xl | semibold | onyx-950 | tighter |
| Hero Description | DM Sans | lg | medium | onyx-600 | normal |
| L/R Feature Title| Manrope | 4xl | semibold | onyx-900 | tight |
| Body Content | DM Sans | base | medium | onyx-600 | normal |
| Primary CTA | Manrope | base | semibold | white | normal |
| Caption Chip | Manrope | 11px | semibold | onyx-800 | wide |

---

## Animation System

### Core Philosophy: Physical Settling

Animations should feel like physical objects (glass and porcelain) settling onto a premium desk. Gravity and friction are key. No aggressive bouncing.

### Hero Sequence (The Reveal)

1. Full-bleed background fades in smoothly.
2. Centered Manrope headline emerges with a slow, rising reveal.
3. Polished phone mockup slides up from the bottom edge, settling into place.

```tsx
// Mockup Levitation Entry
initial={{ opacity: 0, y: 80, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
```

### Scroll-Triggered Alternating Layouts

As the user scrolls, left/right text blocks and mockups fade and drift slightly toward the center, acting as a natural progression deeper into the product.

```tsx
// Scroll Reveal (Left or Right dependent)
initial={{ opacity: 0, x: isLeft ? -30 : 30 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.6, ease: "easeOut" }}
```

---

## UI Components

### Glass Navbar (Minimal)

Sits at the absolute top edge, completely transparent until scroll, then adopting a blurred glassmorphic shell to maintain context of the full-bleed hero.

```tsx
<nav className="fixed top-0 w-full z-50 bg-white/60 backdrop-blur-lg border-b border-white/20 transition-all duration-300">
  {/* Logo, minimal links, secondary CTA */}
</nav>
```

### Translucent Caption Chips

Used to tag mockups or label features without covering the product photography. 

```tsx
<div className="inline-flex items-center px-3 py-1.5 rounded-full bg-white/40 backdrop-blur-md border border-white/50 text-[11px] font-manrope font-semibold uppercase tracking-wide text-onyx-800 shadow-[0_2px_10px_rgba(0,0,0,0.02)]">
  <Icon className="w-3 h-3 mr-1.5 opacity-70" />
  {label}
</div>
```

### Calm FAQ Accordions

Completely borderless until hover. Relies on the mist-gray background shift to indicate interactivity.

```tsx
<details className="group p-6 rounded-2xl hover:bg-porcelain-100 transition-colors duration-200 cursor-pointer">
  <summary className="font-manrope text-2xl font-semibold text-onyx-900 list-none flex justify-between items-center">
    {question}
    <PlusIcon className="w-6 h-6 text-onyx-400 group-open:rotate-45 transition-transform" />
  </summary>
  <p className="font-dmsans text-base text-onyx-600 mt-4 leading-relaxed">
    {answer}
  </p>
</details>
```

---

## Component Catalog

### Conversion Pairs (CTAs)

Always presented as a dark-theme pair placed beneath the hero copy, drawing immediate attention.

```tsx
// Primary CTA (Dark Theme Anchor)
"bg-onyx-900 text-white font-manrope font-semibold text-base rounded-full px-8 py-3.5 hover:bg-onyx-800 transition-transform hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-onyx-900/20"

// Secondary CTA (Glass / Outline)
"bg-white/50 backdrop-blur-sm border border-mist-200 text-onyx-900 font-manrope font-semibold text-base rounded-full px-8 py-3.5 hover:bg-white/80 transition-all duration-200"
```

### Alternating Feature Frames

```tsx
// Standard Off-White Frame
"bg-porcelain-50 border border-mist-200 rounded-3xl p-10 flex flex-col justify-center relative overflow-hidden"

// Compact Feature Card (Inside Grids)
"bg-mist-100 rounded-2xl p-6 hover:bg-porcelain-100 transition-colors duration-300 border border-transparent hover:border-mist-200"
```

### Mockup Wrappers

High-fidelity device frames must always have realistic inner shadows to simulate screen depth, placed against the pure porcelain background.

```tsx
<div className="relative rounded-[3rem] border-[8px] border-onyx-900 bg-onyx-950 shadow-2xl overflow-hidden">
  <Image src="/app-screen.jpg" className="w-full h-auto" />
  {/* Absolute positioned glass chips go here */}
</div>
```

---

## Quality Checklist

* [ ] Does the hero section feature a true full-bleed background image with a centered Manrope headline?
* [ ] Is the primary CTA high-contrast Onyx (near black) to act as a conversion anchor?
* [ ] Are all long-form descriptions and short paragraphs strictly set in DM Sans?
* [ ] Are there absolutely zero decorative blobs, vector illustrations, or colored opaque gradients?
* [ ] Do the alternating left-right sections rely solely on generous whitespace and authentic mobile mockups?
* [ ] Do all overlays (navbars, chips) use true `backdrop-blur` rather than solid color opacity?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast dark buttons on light backgrounds for maximum conversion visibility.
* Authentic, high-fidelity phone mockups with realistic screen glow.
* Glassmorphic elements (`backdrop-blur`) specifically for floating UI like navbars and caption chips.
* Matte off-white (Porcelain) and subtle gray (Mist) structural backgrounds.
* Alternating layout structures strictly guided by large padding and whitespace.
* Full-bleed photographic background integration.

### ✗ Not Allowed

* Linear or radial opaque color gradients anywhere in the background or UI.
* Organic "blob" shapes, decorative swooshes, or abstract vector art.
* Vivid or neon primary colors as the core brand palette (imagery provides the color).
* Heavy drop shadows on text or basic cards (shadows are reserved only for realistic mockups and primary CTAs).
* Mixing typography rules (never use DM Sans for main headlines, never use Manrope for body copy).