Porcelain Launch

/porcelainLaunch
A serene, monochrome design system for app landing pages featuring porcelain tones, grounded photography, generous whitespace, and calm editorial typography—crafted for an ultra-premium, inviting launch experience.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Porcelain App Launch System

A refined, light-themed design language for premium app landing pages and calm conversion experiences.

---

## Philosophy

> "Stillness drives action; context reveals value."

This system creates landing pages that feel less like software marketing and more like high-end editorial features. It rejects the hyper-vibrant, gradient-heavy SaaS aesthetic in favor of grounding the product in reality. By relying on full-height contextual photography, calm typography, and stark monochrome interfaces, the design cultivates an environment of quiet confidence. 

### Core Beliefs

1. **Calm Conversion Hierarchy** — Calls to action should feel like a natural, unforced next step rather than a desperate plea. High contrast, not high color, draws the eye.
2. **Context is King** — The interface must be anchored by premium photography. Showing the app in a realistic, aspirational setting (workspace, wellness, travel) creates an immediate emotional baseline.
3. **Immediate Device Reveal** — Users should never have to scroll to see what they are buying or downloading. The app interface must break the hero plane instantly.
4. **Absolute Flatness** — Depth is created strictly through photography, device mockups, and layout spacing. The UI canvas itself is completely flat, rejecting all gradients.
5. **Generous Pacing** — Wide, sprawling whitespace allows features to breathe. Information density should be remarkably low.

### Strict Rules

* **No Gradients** — Backgrounds, buttons, and text must be solid. Transparency is only allowed via uniform frosted blurs.
* **Strict Font Pairing** — *Manrope* is reserved exclusively for headings; *DM Sans* is reserved exclusively for body copy and navigational elements.
* **Charcoal over Color** — There are no primary brand colors like blue, red, or green for buttons. Primary CTAs are exclusively Deep Charcoal.
* **Monochrome Iconography** — All system icons must be stark, single-color vectors (Graphite or Charcoal).
* **The Ivory Rule** — All hero photography must sit beneath a subtle, solid ivory overlay to guarantee perfect typographical contrast without muddling the image.

---

## Color Palette

### The Porcelain Scale

The palette eschews harsh clinical white for "Porcelain," moving through a sophisticated scale of cool off-whites and ashes, culminating in absolute Deep Charcoal for action points.

```css
/* Backgrounds & Canvas */
bg-porcelain          /* Main canvas background (#ffffff to #fcfcfc) */
bg-off-white          /* Cool off-white for rounded feature blocks (#f4f5f6) */
bg-ivory-overlay      /* Subtle warm overlay for hero photography (#faf9f6 with 40-60% opacity) */
bg-nav-frosted        /* Slim navbar backdrop (porcelain/70 with blur) */

/* Structural & Borders */
border-ash            /* Pale ash for subtle feature boundaries, mockups (#e2e4e7) */
border-limestone      /* Soft limestone for active input states (#d1d5db) */

/* Typography & Icons */
text-limestone        /* Soft limestone for disabled states, secondary icons (#9ca3af) */
text-graphite         /* Graphite for 17-18px paragraph copy, muted descriptions (#4b5563) */
text-charcoal         /* Deep charcoal for headings, hero text (#111827) */

/* Primary Interaction (The Pill CTA) */
bg-charcoal           /* Deep charcoal primary buttons (#111827) */
hover:bg-graphite     /* Hover state for primary buttons (#4b5563) */

```

---

## Typography

The typographic system relies on a rigid two-family structure. Headings command attention with geometric, semi-bold authority, while paragraph text reads smoothly in an approachable, human-scale sans-serif.

### Font Families

```css
font-manrope          /* Exclusively for Headings and Titles */
font-dmsans           /* Exclusively for Body, Navigation, and Buttons */
```

### Font Weights

```css
font-normal      /* DM Sans: Default paragraph copy */
font-medium      /* DM Sans: Nav labels, Pill buttons */
font-semibold    /* Manrope: ALL headings, section titles, hero text */
/* font-bold, font-light, and font-black are strictly forbidden to maintain a calm, even texture */
```

### Font Size Scale

```css
text-[13px]      /* Compact nav labels, footer links, micro-copy */
text-[15px]      /* Mobile paragraph fallback, tertiary labels */
text-[17px]      /* Standard paragraph copy (17-18px range) */
text-[18px]      /* Large paragraph copy, centered hero descriptions */
text-[22px]      /* Feature block titles, mockup captions */
text-[32px]      /* Standard section headings (32-38px range) */
text-[38px]      /* Large section headings, final CTA banners */
text-4xl         /* Centered Hero Headline (approx 36-40px depending on viewport) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Section headings, Hero headlines */
tracking-normal  /* All paragraph copy, buttons */
tracking-wide    /* Pre-headers (if absolutely necessary, though discouraged) */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Alignment |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl | semibold | charcoal | centered |
| Hero Description | DM Sans | [18px] | normal | graphite | centered |
| Section Heading | Manrope | [32px]-[38px] | semibold | charcoal | left or center |
| Paragraph Copy | DM Sans | [17px]-[18px] | normal | graphite | left or center |
| Nav Labels | DM Sans | [13px] | medium | graphite | left / inline |
| Primary CTA | DM Sans | [15px] | medium | porcelain | center |

---

## Animation System

### Core Philosophy: Gentle Arrival

Elements do not snap, bounce, or spring. They glide into place with measured ease, mimicking the quiet sliding of physical glass or paper.

### Device Reveal

The mobile mockup row at the bottom of the hero section glides upward as the user lands, establishing immediate product context.

```tsx
initial={{ y: 80, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
```

### Frosted Nav Lock

The slim navbar begins transparent over the hero, transitioning smoothly to a frosted porcelain blur once the user scrolls past the top 10px.

```tsx
style={{ 
  backdropFilter: isScrolled ? 'blur(12px)' : 'blur(0px)',
  backgroundColor: isScrolled ? 'rgba(255, 255, 255, 0.7)' : 'transparent' 
}}
```

---

## Component Catalog

### Navigation

```tsx
// Slim Frosted Navbar
"fixed top-0 w-full h-14 flex items-center justify-between px-6 z-50 transition-all duration-300"
// Nav Link
"font-dmsans text-[13px] font-medium text-graphite hover:text-charcoal transition-colors"
```

### The Hero Setup

A full-height section featuring a high-quality contextual background image, a centered typography block, and a row of mobile mockups breaking the bottom bound.

```tsx
// Photographic Container
"relative w-full min-h-screen flex flex-col items-center pt-32 overflow-hidden bg-center bg-cover"

// The Ivory Overlay (Mandatory for text readability)
"absolute inset-0 bg-[#FDFCF8]/60 z-0"

// Centered Hero Content
"relative z-10 flex flex-col items-center text-center max-w-2xl px-6"

// Mobile Mockup Row (Emerging from bottom)
"relative z-20 flex gap-6 mt-auto translate-y-12"
```

### Buttons

Buttons strictly use the Pill geometry (fully rounded ends) to contrast against the rigid, un-shadowed structural blocks.

```tsx
// Primary CTA (Dark Pill)
"rounded-full bg-charcoal text-porcelain font-dmsans text-[15px] font-medium px-7 py-3.5 hover:bg-graphite transition-colors"

// Secondary CTA (Outline Pill)
"rounded-full bg-transparent border border-ash text-charcoal font-dmsans text-[15px] font-medium px-7 py-3.5 hover:border-limestone transition-colors"
```

### Feature Blocks

Rounded, solid, gray blocks housing monochrome icons and concise descriptions. They sit completely flat on the porcelain canvas.

```tsx
// Rounded Gray Feature Block
"bg-off-white rounded-3xl p-10 flex flex-col items-start gap-4"

// Monochrome Icon Container
"w-12 h-12 flex items-center justify-center text-charcoal"
```

### Final CTA Section

A massive, uncluttered expanse of porcelain white at the bottom of the page, leading to a singular, inevitable action point.

```tsx
// Clean Final CTA Wrapper
"py-40 flex flex-col items-center justify-center text-center gap-8 bg-porcelain"
```

---

## Quality Checklist

* [ ] Does the hero section utilize a solid lifestyle, workspace, or wellness image?
* [ ] Is the "Ivory Overlay" applied to the hero to ensure the text-4xl Charcoal headline is perfectly legible?
* [ ] Are all headings strictly rendered in Manrope Semibold?
* [ ] Is the body copy exactly 17px or 18px DM Sans?
* [ ] Are the nav labels compact at exactly 13px?
* [ ] Are all CTAs shaped as fully rounded dark pills (Deep Charcoal)?
* [ ] Is the mobile device mockup row immediately visible without scrolling?
* [ ] Have you ensured there are absolutely zero gradients on the page?
* [ ] Are the feature blocks flat `bg-off-white` with generous padding and no drop shadows?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-quality, authentic photographic backgrounds (workspace, travel, lifestyle).
* Uniform frosted glass blurs (`backdrop-blur`) strictly for the slim navbar or sticky elements.
* Large, uninterrupted swaths of Porcelain canvas.
* Monochrome, flat vector icons.
* Intersecting the hero bounds with physical device mockups.

### ✗ Not Allowed

* Gradients of any kind (linear, radial, mesh, text clipping).
* Colored buttons (no blue, green, or red CTAs).
* Drop shadows on cards, buttons, or feature blocks.
* Multi-weight typography (stick exclusively to normal/medium for body, semibold for headings).
* Abstract 3D illustration graphics in place of real photography or interface mockups.