No preview available
Porcelain B2C Phone Launch Design System

/porcelainB2cPhoneLaunchDesignSystem
A premium, light-themed, mobile-first design system focused on immersive product launches, featuring restrained elegance, architectural neutrals, and center-aligned, high-conversion layouts.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Porcelain B2C Phone Launch Design System

A premium, light-themed design language for high-converting, mobile-first product reveals.

---

## Philosophy

> "Clarity elevates the product; composition drives the action."

This system creates fast, immersive landing pages that feel like a highly anticipated consumer tech launch. The aesthetic is polished, restrained, and inherently physical. By stripping away artificial gradients and hyper-vibrant colors, the interface steps back, allowing premium lifestyle and product photography to take absolute center stage.

### Core Beliefs

1. **Mobile-First Rhythm** — Every section is designed around a vertical scroll. Center-aligned layouts create a predictable, highly readable cascade down the screen.
2. **The Hero as Canvas** — The top of the funnel relies on full-bleed, edge-to-edge photography with UI floating effortlessly above it via subtle frosted treatments.
3. **Restrained Elegance** — Luxury is communicated through high-quality materials (glass, ash, porcelain) and stark, high-contrast monochrome call-to-actions, never through loud colors.
4. **Tactile Geometry** — Sharp corners are eliminated. Fully rounded pill buttons and generously radiused cards mimic the industrial design of modern hardware.
5. **Legibility Over Everything** — A strict two-typeface system ensures that marketing hooks are bold and structural, while technical specs and lifestyle copy remain endlessly readable.

### Strict Rules

* **No Gradients** — Backgrounds must be pure flat colors or purely calculated background blurs. No linear, radial, or mesh gradients allowed anywhere.
* **Centered by Default** — Headline stacks, button groupings, and feature grids heavily favor horizontal centering to maintain an effortless scroll path.
* **No Colorful CTAs** — Primary actions use Deep Charcoal. Trust and intent are driven by contrast and shape, not by shouting with bright colors.
* **Photography Drives Color** — The UI remains strictly neutral. Any warmth, coolness, or vibrancy must come exclusively from the underlying product or lifestyle photography.

---

## Color Palette

### The Porcelain Scale (Monochrome)

The palette is a carefully curated spectrum of architectural neutrals. It avoids the harshness of pure black and instead utilizes deep, rich charcoals paired with incredibly soft, warm grays.

```css
/* Backgrounds (Lightest to Darkest) */
bg-white              /* Porcelain White: The core canvas (#ffffff) */
bg-stone-50           /* Soft Ash: Secondary sections, expansive feature zones (#fafaf9) */
bg-stone-100          /* Pale Limestone: Default feature blocks, hover states (#f5f5f4) */
bg-stone-200/50       /* Pearl Gray: Subtle divisions, active tabs, icon tile backgrounds */
bg-white/40           /* Ivory Veil: Translucent overlays for text legibility over photos */

/* Borders & Dividers */
border-stone-100      /* Ultra-subtle separations */
border-stone-200      /* Pearl Gray: Standard card borders, accordion dividers */
border-stone-300      /* Hovered borders, active input fields */

/* Text & Foreground */
text-stone-900        /* Deep Charcoal: Primary headings, hero text, CTAs (#1c1917) */
text-stone-600        /* Graphite: Supporting body copy, secondary navigation (#57534e) */
text-stone-400        /* Pale text: Micro-labels, disabled states, placeholders */

/* Interactive Elements */
bg-stone-900          /* Deep Charcoal: The only approved background for primary buttons */
text-white            /* Inverse text for primary pills */
bg-white/70           /* Frosted glass backdrop for navbars and floating elements */
```

---

## Typography

A strict two-font system. **Manrope** provides a geometric, slightly technical but friendly structure for all marketing hooks. **DM Sans** delivers flawless readability for longer prose and interface labels. 

### Font Families & Weights

```css
font-manrope     /* Headings, Section Titles, Hero Text */
font-dmsans      /* Body paragraphs, Navigation, Buttons, Accordions */

font-normal      /* Standard body copy */
font-medium      /* Nav labels, button text, small metadata */
font-semibold    /* EXCLUSIVE weight for all headings and section titles */
```

### Font Size Scale (Mobile-Optimized)

```css
text-[13px]      /* Compact nav labels, footer links, micro-disclaimers */
text-[15px]      /* FAQ accordion content, secondary feature descriptions */
text-[17px]      /* Primary paragraph copy, standard body text (17-18px dynamic) */
text-[18px]      /* Large lead-in paragraphs, subtitle text */
text-xl          /* Small card headings, minor feature titles (20px) */
text-[32px]      /* Default section titles (scales to 36px on desktop) */
text-4xl         /* Hero headline stack (scales cleanly on mobile) */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Alignment |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl | semibold | stone-900 | text-center |
| Section Title | Manrope | 32px-36px | semibold | stone-900 | text-center |
| Body Paragraph | DM Sans | 17px-18px | normal | stone-600 | text-center or left |
| Navbar Label | DM Sans | 13px | medium | stone-600 | none |
| Primary Button | DM Sans | 15px | medium | white | text-center |

---

## Animation System

### Core Philosophy: The Physical Reveal

Animations mimic the deliberate, premium feel of unboxing a high-end device. Easing is smooth, slightly decelerated, and relies on upward motion.

### The Centered Cascade

As the user scrolls down, section titles and paragraphs fade and drift upward into their final centered positions.

```tsx
initial={{ opacity: 0, y: 24 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
```

### Hardware Insertion (Phone Mockup)

The phone mockup appearing directly beneath the hero text relies on a slightly delayed, heavier spring to give it virtual weight.

```tsx
initial={{ opacity: 0, y: 80, scale: 0.95 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: "spring", damping: 25, stiffness: 120, delay: 0.2 }}
```

---

## UI Components

### The Ivory Veil

Used exclusively over the full-width, full-height lifestyle or product hero photo to ensure the 4xl Manrope text remains perfectly crisp without muddying the photograph with dark shadows.

```tsx
<div className="absolute inset-0 bg-white/40 backdrop-blur-[2px] pointer-events-none" />
```

### Slim Frosted Navbar

A razor-thin, glassmorphic header that stays out of the way, housing only the product logo and compact 13px navigation labels.

```tsx
<header className="fixed top-0 left-0 right-0 h-14 bg-white/70 backdrop-blur-md border-b border-stone-200/50 flex items-center justify-between px-6 z-50">
  {/* Content */}
</header>
```

### The Phone Mockup Anchor

Directly beneath the centered hero headline stack and pill button, the phone mockup is positioned with negative top margin to bridge the hero canvas and the first content section.

```tsx
<div className="relative w-full max-w-sm mx-auto -mt-12 z-10 drop-shadow-2xl">
  <img src="/phone-mockup.png" alt="Device Reveal" className="w-full h-auto" />
</div>
```

---

## Component Catalog

### Buttons

Strictly pill-shaped (`rounded-full`). No rectangles. 

```tsx
// Primary CTA (Deep Charcoal Pill)
"inline-flex items-center justify-center bg-stone-900 text-white font-dmsans font-medium text-[15px] rounded-full px-8 py-3.5 hover:bg-stone-800 transition-colors"

// Secondary Action (Outline Pill)
"inline-flex items-center justify-center bg-transparent border border-stone-200 text-stone-900 font-dmsans font-medium text-[15px] rounded-full px-8 py-3.5 hover:bg-stone-50 transition-colors"
```

### Glass Cards & Feature Blocks

Sections are heavily rounded (`rounded-3xl` or `rounded-2xl`) and rely on the Soft Ash and Pale Limestone colors to contrast against the pure Porcelain background.

```tsx
// Glass Feature Card (Overlapping photographic sections)
"bg-white/60 backdrop-blur-lg border border-white/40 rounded-3xl p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)]"

// Soft Gray Feature Block (Standard layout)
"bg-stone-50 border border-stone-100 rounded-2xl p-8 flex flex-col items-center text-center"
```

### Monochrome Icon Tiles

Minimalist, squarely proportional tiles used for specs (battery life, camera megapixels, etc.).

```tsx
<div className="h-16 w-16 bg-stone-100 rounded-2xl flex items-center justify-center text-stone-900 mb-4">
  <CameraIcon className="w-6 h-6 stroke-1.5" />
</div>
```

### FAQ Accordions

Clean, typography-driven lists. Borders only appear on the bottom of the items, expanding to reveal 15px DM Sans prose.

```tsx
// Accordion Container
"w-full max-w-2xl mx-auto divide-y divide-stone-200"

// Accordion Header (Trigger)
"w-full py-5 flex items-center justify-between text-left text-[17px] font-manrope font-semibold text-stone-900"

// Accordion Body
"pb-5 text-[15px] font-dmsans text-stone-600 leading-relaxed"
```

---

## Quality Checklist

* [ ] Is the hero image full-bleed (full-width and full-height), pushing the rest of the content down?
* [ ] Is the "Ivory Veil" applied correctly to the hero image to make the 4xl text highly legible?
* [ ] Are all headlines using **Manrope Semibold**?
* [ ] Is all paragraph and supporting copy using **DM Sans** at 17–18px?
* [ ] Are all nav labels exactly 13px?
* [ ] Is the entire layout dominantly center-aligned (especially hero text, section headers, and CTAs)?
* [ ] Are all buttons perfectly rounded pills (`rounded-full`) in Deep Charcoal?
* [ ] Are there absolutely zero gradients (linear, radial, or otherwise) in the CSS?
* [ ] Do feature sections utilize soft gray/limestone backgrounds with large rounded corners?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-resolution, edge-to-edge product and lifestyle photography.
* Subtle background blurs (`backdrop-blur-md`) and frosted glass surfaces.
* Deep Charcoal (`stone-900`) for emphasis and primary actions.
* Generous vertical padding (e.g., `py-24`) between centered layout blocks.
* Massive border radii (`rounded-2xl`, `rounded-3xl`, `rounded-full`) to match physical hardware.

### ✗ Not Allowed

* Gradients of any kind (no text gradients, no background gradients, no button gradients).
* Brightly colored buttons (e.g., no blue, red, or green CTAs).
* Left-aligned multi-column layouts at the top of the funnel (hero and intro must be centered).
* Hard, unrounded corners on cards or inputs.
* Multiple font weights for headings (strictly `semibold` only).