Porcelain Frame

/porcelainFrame
A mobile-focused landing page design system blending full-screen lifestyle photography with minimal, flat, high-contrast UI and precise typography for immediate, conversion-optimized product reveals.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Porcelain Frame Mobile Launch Design System

A design language for polished, high-conversion landing pages centered on photographic context and immediate product unveils.

---

## Philosophy

> "Context creates desire; clarity drives action."

This system is engineered to frame a mobile product within the context of real life. It balances the lush, aspirational quality of full-screen photography with a crisp, highly structured UI layer. The aesthetic is incredibly clean, relying on rounded forms, solid contrasting buttons, and precise typographic scaling rather than artificial depth or color gradients.

### Core Beliefs

1. **The Image is the Canvas** — The interface lives in harmony with high-quality lifestyle, workspace, or wellness photography, never fighting it for attention.
2. **Immediate Tangibility** — Moving straight from a centered conversion stack into a tangible row of mobile mockups grounds the digital product in reality.
3. **Contrast is King** — Deep charcoal buttons against porcelain white and cool off-white canvases provide unmissable, distraction-free conversion paths.
4. **Soft Geometry** — Rounded feature blocks and pill-shaped buttons create a tactile, welcoming environment that softens the crispness of the photography.
5. **Absolute Flatness** — No gradients. Volume and depth are achieved purely through photographic context, frosted glass blurs, and distinct solid color blocking.

### Strict Rules

* **No Gradients** — Backgrounds, buttons, and text must utilize solid colors. Dimensionality comes from the mockups, not CSS gradients.
* **Strict Two-Font System** — Manrope is exclusively for headings; DM Sans is exclusively for body copy and navigational elements.
* **The Ivory Veil** — Hero photography must always be tempered with a subtle ivory overlay to ensure flawless typographic legibility.
* **Centered Gravity** — The primary conversion stack (headline, description, CTA) remains perfectly center-aligned to anchor the sweeping hero photography.
* **Pill CTAs Only** — Primary actions must use fully rounded (`rounded-full`) geometries. No sharp corners on actionable touchpoints.

---

## Color Palette

### The Refined Base Scale

The palette is highly restrained, mimicking a minimalist photography gallery. It relies on extremely subtle temperature shifts in the whites and grays, punctuated by deep, solid charcoal.

```css
/* Canvas & Foundations */
bg-white              /* Porcelain White: The absolute core background (#ffffff) */
bg-slate-50           /* Cool Off-White: Appears on feature blocks and alternating sections (#f8fafc) */
bg-[#FFFFF0]/40       /* Subtle Ivory: The mandatory photographic overlay for legibility */

/* Structural & Boundaries */
bg-gray-100           /* Pale Ash Gray: Secondary containers, mockup backdrops (#f3f4f6) */
border-stone-200      /* Soft Limestone: Crisp but gentle borders for icon grids and dividers (#e7e5e4) */
bg-gray-200           /* Hover states for secondary actions, subtle highlights */

/* Text & Actions (Graphite & Charcoal) */
text-gray-950         /* Deep Charcoal: Primary headings, hero text (#030712) */
bg-gray-950           /* Deep Charcoal: Primary CTA pill buttons */
text-gray-600         /* Graphite: Body paragraphs, descriptions, secondary text (#4b5563) */
text-gray-400         /* Muted elements, inactive icon grid labels, placeholders */

```

### Destructive Actions

```css
bg-red-50
text-red-900
border-red-200
```

---

## Typography

The typography system pairs the geometric, confident structure of Manrope with the highly legible, approachable curves of DM Sans. Sizes are locked to exact specifications to maintain the editorial layout.

### Font Families

```css
font-sans             /* DM Sans: Base font for body copy, nav labels, and metadata */
font-display          /* Manrope: Exclusive to headings, large numerals, and major callouts */
```

### Font Weights

```css
font-normal      /* DM Sans: Standard body paragraphs and descriptions */
font-medium      /* DM Sans: Navigation labels, secondary buttons, interactive micro-copy */
font-semibold    /* Manrope: ALL headings, hero titles, and section dividers - MANDATORY */
```

### Exact Sizing Scale

```css
text-[13px]      /* Navigation labels, crisp top-bar links, micro-metadata */
text-[15px]      /* Minor labels, tertiary feature descriptions */
text-[17px]      /* Base paragraph text, standard body copy (Responsive: 17-18px) */
text-lg          /* Lead descriptions under the hero headline (18px) */
text-xl          /* Sub-feature headers inside grid blocks */
text-[32px]      /* Standard Section Headings (Responsive: 32-38px) */
text-4xl         /* The Hero Headline (36px), major page titles */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color |
| --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl (36px) | semibold | gray-950 |
| Section Title | Manrope | 32-38px | semibold | gray-950 |
| Hero Description | DM Sans | 18px | normal | gray-600 |
| Standard Body | DM Sans | 17px | normal | gray-600 |
| Navbar Labels | DM Sans | 13px | medium | gray-600 |
| Pill Button | DM Sans | 15px | medium | white |

---

## Animation System

### Core Philosophy: The Immediate Reveal

Animations focus on grounding the digital product in physical space. Elements don't float; they slide securely into place, mimicking the smooth unboxing of a premium device.

### Mobile Mockup Cascade

As the user scrolls past the hero, the row of mobile mockups reveals via a staggered upward shift, locking firmly into their grid.

```tsx
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.6, staggerChildren: 0.15, ease: "easeOut" }}
```

### Navbar Frosted Transition

The navbar starts transparent over the photographic hero and solidifies into a frosted bar upon scrolling.

```tsx
// Scroll trigger toggles these classes
"transition-all duration-300 ease-in-out"
// Scrolled state:
"backdrop-blur-md bg-white/80 border-b border-stone-200/50 shadow-sm"
```

---

## UI Components

### Full-Height Photographic Hero

The anchor of the entire system. A pristine, context-rich background image perfectly balanced by the ivory overlay to support the centered conversion stack.

```tsx
<header className="relative w-full min-h-[100vh] flex items-center justify-center">
  {/* Photography Layer */}
  <img src="lifestyle-context.jpg" className="absolute inset-0 object-cover w-full h-full" />
  
  {/* The Ivory Veil */}
  <div className="absolute inset-0 bg-[#FFFFF0]/30 mix-blend-multiply" />
  <div className="absolute inset-0 bg-white/10 backdrop-blur-[2px]" />
  
  {/* Centered Conversion Stack */}
  <div className="relative z-10 flex flex-col items-center text-center max-w-2xl px-6">
    <h1 className="font-display font-semibold text-4xl text-gray-950 mb-4">...</h1>
    <p className="font-sans text-[18px] text-gray-800 mb-8">...</p>
    <button className="bg-gray-950 text-white rounded-full px-8 py-3.5">...</button>
  </div>
</header>
```

### Slim Frosted Navbar

Sits completely flush at the top, extremely minimal, allowing the hero image to breathe.

```tsx
<nav className="fixed top-0 w-full z-50 h-16 flex items-center justify-between px-8 backdrop-blur-lg bg-white/60 border-b border-stone-200/40">
  <Logo className="h-5 text-gray-950" />
  <ul className="flex gap-8 font-sans font-medium text-[13px] text-gray-600">...</ul>
</nav>
```

### Mobile Mockup Row

Immediately follows the hero. A horizontal gallery of phones showcasing the app interface.

```tsx
<section className="w-full bg-white py-24 overflow-hidden">
  <div className="flex gap-6 justify-center items-center px-4">
    {/* Device Mockup Wrapper */}
    <div className="relative w-[280px] h-[580px] rounded-[3rem] border-[8px] border-gray-100 shadow-xl overflow-hidden bg-white">
      <img src="app-screen-1.jpg" className="w-full h-full object-cover" />
    </div>
    {/* Additional devices... */}
  </div>
</section>
```

---

## Component Catalog

### Rounded Gray Feature Blocks

Used to break up the porcelain white canvas. Soft, expansive, and highly structured.

```tsx
// Feature Block Container
"bg-slate-50 rounded-[2rem] p-12 md:p-16 w-full max-w-6xl mx-auto flex flex-col items-center text-center"

// Clean Icon Grid Container (Inside Feature Block)
"grid grid-cols-1 md:grid-cols-3 gap-12 mt-16 w-full"
```

### Primary Pill Buttons (CTAs)

Solid, dark, unmissable.

```tsx
// Deep Charcoal CTA (Hero & Spacious CTA Panel)
"font-sans font-medium text-[15px] bg-gray-950 text-white rounded-full px-8 py-4 hover:bg-gray-800 transition-colors duration-200 flex items-center justify-center gap-2"

// Secondary Pill Button (Cool Off-White)
"font-sans font-medium text-[15px] bg-slate-100 text-gray-950 rounded-full px-8 py-4 hover:bg-gray-200 transition-colors duration-200"
```

### Clean Icon Grid

Icons are sparse, strictly line-based, and housed inside the pale ash gray or soft limestone bounding boxes.

```tsx
// Grid Item Wrapper
"flex flex-col items-center text-center gap-4"

// Icon Container
"w-14 h-14 rounded-2xl bg-white border border-stone-200 flex items-center justify-center text-gray-950 shadow-sm"

// Grid Text
<h3 className="font-display font-semibold text-xl text-gray-950">Feature Title</h3>
<p className="font-sans text-[17px] text-gray-600 leading-relaxed">Feature description.</p>
```

### Spacious CTA Panel

The final block of the landing page before the footer. Massive padding, singular focus.

```tsx
<section className="w-full bg-slate-50 py-32 flex flex-col items-center text-center px-6">
  <h2 className="font-display font-semibold text-[32px] md:text-[38px] text-gray-950 max-w-2xl mb-6">...</h2>
  <p className="font-sans text-[17px] md:text-[18px] text-gray-600 max-w-xl mb-10">...</p>
  <button className="bg-gray-950 text-white rounded-full px-10 py-4 font-sans text-[15px]">...</button>
</section>
```

---

## Quality Checklist

* [ ] Is the hero image grounded in reality (lifestyle, workspace, wellness) rather than abstract vectors?
* [ ] Does the hero image have the subtle ivory overlay applied to ensure text contrast?
* [ ] Are absolutely **zero gradients** used on buttons, backgrounds, or text?
* [ ] Are all headings explicitly set in **Manrope Semibold**?
* [ ] Is all paragraph copy explicitly set in **DM Sans** at 17-18px?
* [ ] Are all nav items exactly 13px?
* [ ] Do all primary buttons utilize the `rounded-full` pill geometry and Deep Charcoal color?
* [ ] Does the layout immediately transition from the hero into the tangible mobile mockup row?
* [ ] Is the primary conversion stack (heading, subtext, button) perfectly center-aligned?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-resolution, crisp photographic backgrounds featuring real-world environments.
* Solid background sections alternating strictly between Porcelain White and Cool Off-White.
* Deep Charcoal (`bg-gray-950`) as the exclusive primary button color.
* Generous padding (`py-24` to `py-32`) to separate distinct sections.
* Frosted glass (`backdrop-blur`) specifically for the slim top navigation.

### ✗ Not Allowed

* Linear, radial, or mesh gradients of any kind.
* Sharp square corners on primary buttons or major feature containers.
* Left-aligned text within the primary hero or final CTA panel.
* Colored text (e.g., blue links or green metrics). All typography must be grayscale (Graphite to Charcoal).
* Heavy drop shadows; use subtle borders (`border-stone-200`) or the natural depth of the mobile mockups instead.