No preview available
Friendly Porcelain Launch System

/friendlyPorcelainLaunchSystem
A warmly structured, pastel-focused design system for approachable, world-class landing pages. Features restraint in typography, pill-shaped elements, soft gradients for image framing, and an inviting, conversion-optimized aesthetic.
Jul 24, 2026
Design System Content
# Friendly Porcelain Launch System

A classic, approachable light-theme design language for quick, world-class landing pages.

---

## Philosophy

> "Warmth invites; structure converts."

This system creates interfaces that feel like a beautifully curated modern living space—inviting, impeccably clean, and instantly comfortable. The design relies on a restrained typography scale and a soothing palette of pastels and warm neutrals to build trust rapidly without overwhelming the user. It is highly structured yet undeniably human.

### Core Beliefs

1. **Restraint is approachable** — We do not shout with massive typography. A restrained scale creates a conversational, unpretentious environment.
2. **The CTA is an anchor** — The deep roasted-plum call-to-action is the heaviest element on the page, pulling the user's eye naturally without aggressive neon alerts.
3. **Softness dictates interaction** — Fully rounded interactive elements and pill-shaped navigation bars mimic natural, tactile objects.
4. **Visual framing elevates context** — Pastels are not used as vast background fills; they are deployed specifically as padded gradients to frame screenshots and device mockups like fine art.
5. **Rhythm through alternation** — Feature sections strictly alternate left-right balance to establish a predictable, calming reading cadence.

### Strict Rules

* **Two Families Only** — Manrope for headings (strictly Semibold) and DM Sans for body/UI copy. No exceptions.
* **Strict Sizing** — Anchor to the defined scale (e.g., 4xl for hero, 17px for paragraphs). Do not arbitrarily size text to fill space.
* **Pastel Gradients are for Framing Only** — Gradients belong exclusively behind device mockups and screenshots. UI backgrounds remain flat.
* **Fully Rounded Touch Targets** — All buttons and primary navigation containers must utilize fully rounded (`rounded-full`) geometries. Sharp edges are prohibited on interactive states.
* **No Heavy Shadows** — Depth is achieved through soft borders (`border-neutral-200`) and the gentle contrast of pale ash against porcelain white.

---

## Color Palette

### Base, Canvas & Accents

The palette avoids stark, clinical whites and abrasive blacks. Instead, it leans into warm porcelain, soothing botanical and mineral undertones, and a deeply grounded plum for critical actions.

```css
/* Canvas & Containers */
bg-porcelain          /* Main canvas background (#FDFDFD) */
bg-pale-ash           /* Secondary bento cards, FAQ backgrounds (#F4F5F6) */
bg-blush-cream        /* Subtle highlight panels, testimonial cards (#FFF9F7) */
bg-lavender-gray      /* Unobtrusive dividers, inactive structural borders (#E8E9ED) */
bg-powder-blue        /* Soft accent backing, tertiary icon circles (#E6F0F9) */

/* Structural Borders */
border-lavender-gray  /* Standard bento and card borders */
border-pale-ash       /* Extremely subtle dividers within cards */
border-powder-blue    /* Active input rings, gentle focus states */

/* The Anchor: Deep Roasted-Plum (Primary CTA) */
bg-plum-900           /* Primary action buttons, critical conversions (#3B1C32) */
text-plum-900         /* Active navigation links, high-emphasis interactive text */
border-plum-900       /* Focused critical input rings */
bg-plum-800           /* Hover state for primary actions (#4A233F) */

/* Text Hierarchy */
text-graphite-900     /* Primary headings, deep text contrast (#2A2C30) */
text-graphite-700     /* Standard paragraphs, FAQs (#4C5158) */
text-graphite-500     /* Metadata, secondary nav labels (#767C85) */
text-graphite-400     /* Disabled states, subtle placeholders */

```

### Pastel Framing Gradients (Mockups Only)

```css
/* Applied ONLY to padded containers holding screenshots/devices */
bg-gradient-to-br from-blush-cream to-powder-blue
bg-gradient-to-br from-powder-blue to-lavender-gray

```

---

## Typography

The system relies on a strictly controlled typographic pairing. Headings are exclusively Manrope Semibold for a geometric but friendly structure, while DM Sans handles paragraphs with warm legibility.

### Font Families & Weights

```css
font-manrope     /* Headings, Section Titles (Strictly font-semibold) */
font-dmsans      /* Body copy, Nav labels, Meta (font-normal to font-medium) */

```

### Strict Font Size Scale

We avoid massive scaling. The hero is restrained, keeping the page grounded.

```css
text-[13px]      /* Compact nav labels, footer links, small metadata */
text-[15px]      /* Secondary descriptions, bento card subtext */
text-[17px]      /* Core paragraph text, FAQ answers, primary body copy */
text-xl          /* Small bento card headers (20px) */
text-[34px]      /* Standard section titles, secondary page headers */
text-4xl         /* Hero headline (36px) - The absolute ceiling for text size */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Standard for Manrope headings (4xl, 34px) */
tracking-normal  /* Standard for all DM Sans body text */
tracking-wide    /* Nav labels (13px) for enhanced legibility */

capitalize       /* Nav labels and small buttons */
/* Uppercase is rarely used to maintain an approachable, conversational feel */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl | semibold | graphite-900 | tight |
| Section Title | Manrope | [34px]| semibold | graphite-900 | tight |
| Paragraph Copy | DM Sans | [17px]| normal | graphite-700 | normal |
| Nav Labels | DM Sans | [13px]| medium | graphite-500 | wide |
| Bento Headers | Manrope | xl | semibold | graphite-900 | tight |

---

## Animation System

### Core Philosophy: Gentle Elevation

Animations should feel like a deep breath—smooth, unhurried, and welcoming. Elements drift into place softly rather than snapping aggressively.

### Page Transitions (Soft Fade & Drift)

```tsx
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}

```

### Micro-Interactions (The Soft Lift)

Buttons and cards elevate slightly on hover without resorting to heavy drop shadows, utilizing a gentle scale and border color shift.

```tsx
whileHover={{ scale: 1.02 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}

```

---

## UI Components

### Floating Rounded Navbar

A pill-shaped container that sits below the absolute top of the viewport, signaling a modern but contained environment.

```tsx
<nav className="mx-auto mt-4 flex items-center justify-between bg-porcelain/90 backdrop-blur-md border border-lavender-gray rounded-full px-6 py-3 max-w-4xl shadow-sm">
  {/* Nav Content */}
</nav>

```

### Centered Hero Structure

The hero section strictly stacks in a centered column, leading the eye straight down the page.

```tsx
<header className="flex flex-col items-center text-center max-w-2xl mx-auto pt-24 pb-16">
  <h1 className="font-manrope font-semibold text-4xl text-graphite-900 tracking-tight mb-4">
    Value Proposition
  </h1>
  <p className="font-dmsans text-[17px] text-graphite-700 mb-8 max-w-lg">
    Short, supportive descriptive text.
  </p>
  <button className="bg-plum-900 text-porcelain font-dmsans font-medium text-[15px] rounded-full px-8 py-3.5 hover:bg-plum-800 transition-colors">
    Start Journey
  </button>
  
  {/* Immediately Followed By */}
  <PhoneMockup className="mt-16" />
</header>

```

### Padded Pastel Gradient Frames (Mockup Enclosures)

Screenshots and device mockups are never placed naked on the canvas. They are ensconced in soft gradients with generous padding.

```tsx
<div className="p-8 rounded-3xl bg-gradient-to-br from-blush-cream to-powder-blue border border-lavender-gray/50 shadow-sm flex justify-center">
  <img src="/device-mockup.png" className="rounded-xl shadow-md" alt="Interface" />
</div>

```

---

## Component Catalog

### Calm Bento Cards

Light, airy containers used for features and value points. 

```tsx
// Standard Bento Card
"bg-pale-ash rounded-2xl p-8 border border-lavender-gray transition-transform duration-300 hover:scale-[1.02]"

// Highlighted Bento Card
"bg-blush-cream rounded-2xl p-8 border border-lavender-gray transition-transform duration-300 hover:scale-[1.02]"

```

### Buttons

```tsx
// Primary CTA (Deep Roasted-Plum)
"bg-plum-900 text-porcelain font-dmsans font-medium text-[15px] rounded-full px-8 py-3.5 hover:bg-plum-800 transition-all shadow-sm"

// Secondary Outline Pill
"bg-transparent text-graphite-900 font-dmsans font-medium text-[15px] rounded-full px-8 py-3.5 border border-lavender-gray hover:border-graphite-400 hover:bg-pale-ash transition-all"

```

### Clean FAQs

Simple accordion structures utilizing the established typography scale.

```tsx
<div className="border-b border-lavender-gray py-4">
  <button className="flex w-full justify-between items-center text-left">
    <span className="font-manrope font-semibold text-xl text-graphite-900">Question goes here?</span>
    <ChevronDownIcon className="text-graphite-500 w-5 h-5" />
  </button>
  <p className="font-dmsans text-[17px] text-graphite-700 mt-3 pr-8">
    Clear, warm, paragraph explanation.
  </p>
</div>

```

---

## Quality Checklist

* [ ] Is the hero heading exactly `text-4xl` and utilizing Manrope Semibold?
* [ ] Is the main body text exactly `17px` (`text-[17px]`) in DM Sans?
* [ ] Are the primary call-to-action buttons styled in the deep roasted-plum color?
* [ ] Are all buttons and the main navigation bar completely pill-shaped (`rounded-full`)?
* [ ] Do all screenshots and device mockups sit inside heavily padded pastel gradient frames?
* [ ] Are feature sections strictly alternating (Left Copy / Right Device → Right Copy / Left Device)?
* [ ] Is the navigation container floating slightly below the top of the viewport?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Strict adherence to 4xl, 34px, 17px, and 13px typographic anchors.
* Soft pastel gradients (`blush-cream` to `powder-blue`), but *only* as backdrop frames for images.
* Pill-shaped buttons and navigation bars.
* Alternating layout blocks for feature pacing.
* Soft, warm borders (`border-lavender-gray`) for defining bento sections.

### ✗ Not Allowed

* Large, shouting typography (No 5xl, 6xl, or bold hero fonts).
* Sharp corners on buttons or interactive UI elements (No `rounded-sm` or `rounded-none`).
* Dark mode or heavy, contrasting section background strips.
* Using the deep roasted-plum color for large backgrounds or borders (it is exclusively for primary CTAs).
* Dropping raw screenshots onto the canvas without a pastel gradient padding frame.
Preview