Soft Graphite B2C Capsule Landing

/softGraphiteB2cCapsuleLanding
A friendly-yet-authoritative design system for high-conversion B2C landing pages, using floating capsules, graphite CTAs, and tactile glassy layers to create a clean, inviting, and credible digital environment.
0 likes
0 bookmarks
Jun 16, 2026
Design System Content
# Soft Graphite B2C Capsule Landing Design System

A design language for approachable, high-conversion consumer landing pages that balance friendly warmth with mature structural authority.

---

## Philosophy

> "Warmth invites interaction; mature structure drives conversion."

This system creates digital environments that feel simultaneously welcoming and highly credible. By combining the soft, inviting aesthetics of consumer applications with the striking contrast of graphite-dark conversion elements, it guides the user effortlessly. The page architecture relies on oversized, floating "capsules" rather than full-bleed background bands, creating a contained, tactile storytelling experience.

### Core Beliefs

1. **The Capsule Architecture** — Content doesn't touch the edges. Sections exist as massive, generously padded, rounded islands floating on a subtle canvas.
2. **High-Contrast Conversion** — While the canvas is soft and warm, interactive conversion touchpoints (CTAs, critical hierarchy) demand attention through mature, near-black graphite styling.
3. **Tactile & Frosted Layers** — Depth is achieved not through harsh lines, but through soft, diffused shadows and frosted glass overlays that create a premium, tactile feel.
4. **The Device Anchor** — Hardware mockups anchor the digital narrative. The product must be visualized directly within the user's anticipated context (the phone).
5. **Legibility as Hospitality** — Clean, compact typography ensures that consuming information feels effortless and respectful of the user's time.

### Strict Rules

* **Fully Rounded Primary Actions** — All main conversion buttons must be pill-shaped (`rounded-full`). No harsh corners on critical interactions.
* **Strict Type Pairing** — Manrope is exclusively for headings; DM Sans is exclusively for body and UI. Never mix their roles.
* **No Full-Bleed Content Bands** — Page sections must remain contained within their respective capsule panels.
* **Frosted Over Solid** — Floating elements (navigation, sticky badges) must utilize backdrop blurring rather than flat opacity to maintain environmental connection.
* **Graphite is for Action** — Near-black tones are reserved for primary hierarchy, hero text, and CTAs.

---

## Color Palette

### The Capsule & Graphite Scale

The palette relies on soft, atmospheric whites and grays for the foundation, punctuated by deep, mature graphite for typography and interactive states.

```css
/* Environmental Backgrounds (The Canvas & Capsules) */
bg-slate-50           /* Base page canvas (Mist-gray) */
bg-white              /* Primary capsule background (Chalk-white) */
bg-zinc-50            /* Secondary capsule background (Near-white) */
bg-white/70           /* Frosted navigation and glass badge bases */

/* Borders & Dividers */
border-zinc-200/50    /* Delicate capsule boundaries */
border-white/40       /* Inner highlights for glass elements */
border-zinc-100       /* FAQ row dividers and tidy grid separators */

/* The Conversion Engine: Graphite (Near-Black) */
bg-zinc-900           /* Primary call-to-action buttons */
bg-zinc-800           /* CTA hover states */
ring-zinc-900/20      /* Focus rings for form inputs */

/* Text Hierarchy */
text-zinc-900         /* Hero headlines, primary section titles, CTA text */
text-zinc-700         /* Feature subheads, emphasized body points */
text-zinc-500         /* Compact body copy, FAQ descriptions, subtle metadata */
text-zinc-400         /* Disabled states, placeholder text */
```

---

## Typography

The typographic system pairs the structural, geometric confidence of **Manrope** with the warm, highly readable compactness of **DM Sans**.

### Font Families & Weights

```css
/* Manrope: Headlines & Structural Anchors */
font-manrope
font-semibold    /* Mandatory weight for all primary headings */

/* DM Sans: Body & UI */
font-dmsans
font-normal      /* Standard body paragraphs */
font-medium      /* Badges, interactive UI labels, secondary nav */
```

### Font Size Scale & Implementation

```css
/* Hero & Display (Manrope) */
text-4xl         /* Hero primary headline (Anchored standard) */
text-3xl         /* Oversized capsule section titles */
text-2xl         /* Feature block headers, alternating layout titles */

/* UI & Body (DM Sans) */
text-lg          /* Subtitles positioned directly beneath the hero */
text-base        /* Standard benefit copy, FAQ questions */
text-sm          /* Compact body copy, feature grid descriptions, navigation links */
text-xs          /* Glass badge labels, micro-disclaimers */
```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Formatting |
| --- | --- | --- | --- | --- | --- |
| Hero Title | Manrope | 4xl | semibold | zinc-900 | Centered, tight leading |
| Section Title | Manrope | 3xl | semibold | zinc-900 | Centered or left-aligned |
| Glass Badge | DM Sans | xs | medium | zinc-700 | Uppercase, wide tracking |
| Main Body | DM Sans | sm | normal | zinc-500 | Compact, relaxed line-height |
| FAQ Question| DM Sans | base | medium | zinc-800 | Sentence case |

---

## UI Components & Shapes

### The Oversized Capsule

The foundational building block of the page layout. Replaces traditional horizontal section bands.

```tsx
<section className="mx-auto max-w-6xl my-12 bg-white rounded-[2.5rem] p-16 md:p-24 shadow-[0_8px_40px_rgb(0,0,0,0.03)] border border-zinc-200/50">
  {/* Capsule Content */}
</section>
```

### Frosted Navigation

Minimal, non-intrusive, and floating.

```tsx
<nav className="fixed top-6 left-1/2 -translate-x-1/2 px-6 py-3 bg-white/70 backdrop-blur-md border border-white/40 shadow-sm rounded-full flex items-center gap-8 z-50">
  {/* Nav Links */}
</nav>
```

### Glass Badges

Used to introduce sections or highlight micro-benefits above headlines.

```tsx
<div className="inline-flex items-center px-4 py-1.5 rounded-full bg-white/60 backdrop-blur-md border border-white/80 shadow-[0_2px_10px_rgb(0,0,0,0.02)] text-xs font-medium text-zinc-700 uppercase tracking-wide">
  {/* Badge Text */}
</div>
```

---

## Component Catalog

### Buttons (Mature Graphite CTAs)

```tsx
// Primary Conversion CTA
"bg-zinc-900 text-white font-dmsans font-medium text-base rounded-full px-8 py-3.5 hover:bg-zinc-800 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200 shadow-md"

// Secondary Capsule CTA
"bg-zinc-100 text-zinc-900 font-dmsans font-medium text-base rounded-full px-8 py-3.5 hover:bg-zinc-200 transition-all duration-200"
```

### The Centered Hero + Device Anchor

A strict structural requirement for the top of the landing page.

```tsx
<header className="flex flex-col items-center text-center pt-32 pb-0 px-6">
  <GlassBadge>Introducing</GlassBadge>
  <h1 className="mt-6 font-manrope font-semibold text-4xl text-zinc-900 max-w-2xl">
    {/* Hero Headline */}
  </h1>
  <p className="mt-6 font-dmsans text-lg text-zinc-500 max-w-xl">
    {/* Compact Subtitle */}
  </p>
  <div className="mt-10">
    {/* Near-Black CTA */}
  </div>
  
  {/* Staged Phone Mockup */}
  <div className="mt-16 relative w-full max-w-sm mx-auto shadow-[0_20px_60px_rgb(0,0,0,0.08)] rounded-[3rem] overflow-hidden border-4 border-zinc-900">
    <img src="/phone-ui.png" alt="App Interface" className="w-full h-auto" />
  </div>
</header>
```

### Alternating Device & Copy Block

Inside a capsule, feature storytelling alternates horizontally.

```tsx
<div className="flex flex-col md:flex-row items-center gap-16 py-12">
  <div className="flex-1 order-2 md:order-1 text-left">
    <h3 className="font-manrope font-semibold text-2xl text-zinc-900">Feature Title</h3>
    <p className="mt-4 font-dmsans text-sm text-zinc-500 leading-relaxed">
      {/* Benefit Copy */}
    </p>
  </div>
  <div className="flex-1 order-1 md:order-2 flex justify-center">
    {/* Contained Phone Mockup */}
  </div>
</div>
```

### Tidy Feature Grid

For secondary benefits, utilizing soft shadow cards within the larger capsule context.

```tsx
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
  {/* Grid Cell */}
  <div className="p-8 rounded-3xl bg-zinc-50 border border-zinc-100/50 hover:shadow-sm transition-shadow">
    <div className="w-10 h-10 rounded-full bg-white shadow-sm flex items-center justify-center mb-6" />
    <h4 className="font-manrope font-semibold text-lg text-zinc-900">Grid Item</h4>
    <p className="mt-2 font-dmsans text-sm text-zinc-500">
      {/* Concise Grid Copy */}
    </p>
  </div>
</div>
```

### Spacious FAQ Rows

```tsx
<div className="max-w-3xl mx-auto divide-y divide-zinc-100 mt-16">
  <details className="group py-6 cursor-pointer">
    <summary className="flex justify-between items-center font-dmsans font-medium text-base text-zinc-800 list-none">
      {/* Question */}
      <span className="group-open:rotate-45 transition-transform duration-300 text-zinc-400">+</span>
    </summary>
    <p className="mt-4 font-dmsans text-sm text-zinc-500 leading-relaxed pr-8">
      {/* Answer */}
    </p>
  </details>
</div>
```

---

## Animation System

### Core Philosophy: B2C Bounce & Glide

Interactions should feel friendly, highly responsive, and physically grounded. No harsh snaps; rely on gentle spring physics.

```tsx
// Entrances (Float Up & Fade)
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ type: "spring", bounce: 0.2, duration: 0.8 }}

// Phone Mockup Parallax (On Scroll)
style={{ y: useTransform(scrollYProgress, [0, 1], [0, -40]) }}
```

---

## Quality Checklist

* [ ] Is the hero heading explicitly styled as `font-manrope font-semibold text-4xl`?
* [ ] Is all paragraph text utilizing compact `font-dmsans text-sm` or `text-base`?
* [ ] Are the primary buttons fully pill-shaped (`rounded-full`) and set in near-black graphite?
* [ ] Is the primary phone mockup staged directly beneath the hero copy and CTA?
* [ ] Are major page sections wrapped in generous, oversized rounded capsules (`rounded-[2.5rem]`) rather than touching the screen edges?
* [ ] Does the top navigation use frosted blur effects (`backdrop-blur-md`) with a delicate border?
* [ ] Do floating badges utilize glassmorphism rather than solid fills?
* [ ] Is the feature grid tidy, and are the FAQ rows properly spaced with minimal dividers?

---

## Allowed vs Not Allowed

### ✓ Allowed

* High-contrast graphite (`zinc-900`) strictly for primary typography and major conversion buttons.
* Soft, dispersed shadows to lift phone mockups and structural capsules off the mist-gray canvas.
* Extremely generous internal padding (`p-16`, `p-24`) within capsules.
* Alternating left-right arrangements for phone-and-copy storytelling.
* Delicate inner white borders to enhance the "glass" look of badges and navigation.

### ✗ Not Allowed

* Sharp, 90-degree square corners on buttons, cards, or page sections.
* Standard system UI fonts (Inter, Roboto) or overly decorative serif fonts.
* Dark mode backgrounds (the aesthetic relies entirely on light B2C warmth).
* Harsh, opaque, high-opacity black drop shadows.
* Full-bleed background color changes that break the "floating capsule" architecture.