Pearl Bitmoji Centerline Classic

/pearlBitmojiCenterlineClassic
A design system for highly converting, warm, and personal web interfaces, blending iOS-inspired elegance with playful avatars and a strictly centered, mobile-first layout for maximum clarity and interaction.
1 likes
0 bookmarks
Jun 17, 2026
Design System Content
# Pearl Bitmoji Centerline Classic

A design language for friendly, highly converting, and personal web interfaces.

---

## Philosophy

> "Warmth invites interaction; absolute alignment drives conversion."

This system creates interfaces that feel like a premium, highly polished iOS app effortlessly floating within a browser. It relies on a hyper-focused, vertically centered layout to guide the user seamlessly from headline to call-to-action. By leveraging warm pearl backgrounds, soft diffuse shadows, and playful avatar-driven elements, the aesthetic disarms the user while maintaining pristine structural integrity.

### Core Beliefs

1. **The Center is Sacred** — A strict, narrow vertical column defines the experience. Desktop layouts do not sprawl; they center the mobile-first reality.
2. **Personality via Presence** — Interfaces feel alive. Avatar chips, tiny green presence dots, and subtle notification bubbles provide a human touch.
3. **Pill-Shaped Perfection** — Action items are never rigid squares. Fully rounded forms communicate approachability and tactile ease.
4. **Warmth over Sterility** — Stark, blinding whites are replaced by soft pearl surfaces and warm off-whites, reducing eye strain and feeling inviting.
5. **Soft Spatial Depth** — We rely on beautiful, diffuse iOS-style drop shadows rather than harsh borders to lift centered panels off the background canvas.

### Strict Rules

* **Mobile-First Desktop** — Content must be constrained to a narrow, horizontally centered maximum width (e.g., `max-w-md` or `max-w-lg`). No edge-to-edge desktop spanning.
* **No Sharp Actions** — All primary CTAs and interactive chips must utilize `rounded-full`.
* **No Harsh True Black** — Typography and primary elements must use rich Graphite or Deep Navy to soften contrast while maintaining legibility.
* **Direct Visual Anchors** — Every major section (Hero, Features) must anchor its text to a pristine, perfectly aligned phone mockup.

---

## Color Palette

### Pearl & Graphite Scale

The palette replaces stark whites and grays with warm, welcoming pearl tones. Deep navies and graphites anchor the typography and actions, creating a high-end but accessible contrast.

```css
/* Backgrounds & Surfaces (Warm & Tactile) */
bg-stone-50           /* Main canvas background - Warm Pearl (#FAFAF9) */
bg-white              /* Primary elevated surfaces, cards, and panels */
bg-stone-100/80       /* Subtle secondary zones, inactive toggles */
bg-stone-200/50       /* Soft interactive hover states for list items */

/* Shadows & Depth */
shadow-soft-sm        /* 0 2px 8px rgba(0,0,0,0.04) - Avatar chips, tiny inputs */
shadow-soft-md        /* 0 8px 24px rgba(0,0,0,0.06) - Floating navbars, active panels */
shadow-soft-lg        /* 0 16px 40px rgba(0,0,0,0.08) - Centered feature panels, mockups */

/* The Anchors: Graphite & Deep Navy */
bg-slate-900          /* Primary CTA Pills (Deep Navy) */
bg-zinc-800           /* Alternative Primary CTA (Graphite) */
border-slate-900      /* Focused interactive rings */

/* Presence & Notification Accents */
bg-green-500          /* Active presence dots, online indicators */
bg-rose-500           /* Rounded notification pills, unread indicators */
bg-blue-500           /* Subtle active states for verified badges or links */

/* Text Hierarchy (Graphite Scale) */
text-slate-900        /* Hero headings, primary data anchors */
text-slate-700        /* Standard body copy, readable descriptions */
text-slate-500        /* Timestamps, secondary labels, FAQ collapsed states */
text-white            /* Text inside primary CTA pills */
```

---

## Typography

A strictly paired dual-font system. Headings are expressive and semi-bold, while body copy prioritizes ultra-compact legibility.

### Font Families

* **Display/Headings:** Manrope (or Geist) — Geometric, friendly, pristine.
* **Body/UI:** Inter (or Roboto) — Neutral, compact, highly legible at small sizes.

### Font Weights

```css
font-normal      /* Core body copy (Inter) */
font-medium      /* Avatar chip names, pill button labels */
font-semibold    /* Hero headings (Manrope), active FAQ titles - MANDATORY for emphasis */
```

### Font Size Scale

```css
text-[10px]      /* Notification badge counts */
text-xs          /* Tiny system labels, timestamp metadata (12px) */
text-sm          /* Body copy, compact descriptions, FAQ content (14px) */
text-base        /* Primary button text, avatar chip names (16px) */
text-lg          /* Subheadings inside centered panels (18px) */
text-xl          /* Standard section titles (20px) */
text-4xl         /* Hero headline - MANDATORY size for top conversion focus (36px) */
```

### Hierarchy Examples

| Element | Font Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Manrope | 4xl | semibold | slate-900 | tight |
| Body Description| Inter | sm/base| normal | slate-700 | normal |
| Primary CTA | Inter | base | medium | white | normal |
| Avatar Name | Inter | base | medium | slate-900 | normal |
| FAQ Title | Manrope | base | semibold | slate-900 | normal |

---

## Animation System

### Core Philosophy: The Friendly Spring

Motion should feel tactile, responsive, and organic—mimicking the fluid, bouncy physics of a polished iOS interface.

### Page Load & Component Entrance (Upward Spring)

```tsx
initial={{ opacity: 0, y: 20, scale: 0.96 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: "spring", stiffness: 260, damping: 20 }}
```

### Presence & Notification (The Pop)

Avatar dots and notification badges should pop in with a playful overshoot.

```tsx
initial={{ scale: 0 }}
animate={{ scale: 1 }}
transition={{ type: "spring", stiffness: 400, damping: 15 }}
```

---

## UI Components

### Minimal Frosted Navbar

Floats at the top of the canvas, highly blurred, keeping the focus strictly centered.

```tsx
<nav className="fixed top-4 left-1/2 -translate-x-1/2 w-full max-w-md mx-auto rounded-full bg-white/70 backdrop-blur-xl border border-white/20 shadow-soft-sm px-6 py-3 flex items-center justify-between z-50">
  {/* Content */}
</nav>
```

### The Conversion Hero

The paramount layout of this aesthetic. A tight vertical stack: Headline, short description, Pill CTA, and the pristine phone mockup.

```tsx
<section className="flex flex-col items-center text-center max-w-md mx-auto pt-32 px-4">
  <h1 className="font-manrope text-4xl font-semibold text-slate-900 tracking-tight mb-4">
    Headline Text
  </h1>
  <p className="font-inter text-slate-700 text-base mb-8 max-w-sm">
    Compact, readable description text goes here.
  </p>
  <button className="bg-slate-900 text-white font-inter font-medium text-base px-8 py-4 rounded-full hover:scale-105 transition-transform active:scale-95 shadow-soft-md mb-12">
    Call to Action
  </button>
  <div className="w-full relative shadow-soft-lg rounded-[3rem] overflow-hidden">
    {/* Pristine Phone Mockup */}
  </div>
</section>
```

### Centered Feature Panels

Single rounded panels that alternate short copy blocks with phone mockups, constrained entirely to the center column.

```tsx
<div className="w-full max-w-md mx-auto bg-white rounded-3xl p-6 shadow-soft-md mb-6 flex flex-col items-center text-center">
  <h3 className="font-manrope text-xl font-semibold text-slate-900 mb-2">Feature Name</h3>
  <p className="font-inter text-sm text-slate-700 mb-6">Short description of the feature.</p>
  <div className="w-[280px] bg-stone-50 rounded-[2rem] p-2 shadow-inner">
    {/* Alternating Phone Mockup Content */}
  </div>
</div>
```

---

## Component Catalog

### Buttons & Chips

```tsx
// Primary CTA Pill
"bg-slate-900 text-white font-medium text-base rounded-full px-8 py-4 shadow-soft-sm hover:shadow-soft-md transition-all active:scale-95"

// Avatar Chip (Personality Injector)
"flex items-center gap-3 bg-white rounded-full p-1.5 pr-4 shadow-soft-sm border border-stone-100"

// Unread Notification Pill
"absolute -top-1 -right-1 bg-rose-500 text-white text-[10px] font-semibold px-1.5 py-0.5 rounded-full min-w-[18px] text-center"
```

### Presence Indicators

```tsx
// Active Status Dot (Placed bottom-right of an Avatar)
"absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"
```

### Clean FAQs

```tsx
// FAQ Row
"w-full max-w-md mx-auto bg-white rounded-2xl p-4 shadow-soft-sm mb-3 flex items-center justify-between cursor-pointer hover:bg-stone-50 transition-colors"
```

---

## Quality Checklist

* [ ] Is the entire interface constrained to a narrow, horizontally centered container (`max-w-md` or `max-w-lg`)?
* [ ] Are all hero headings specifically set to `text-4xl`, `font-semibold`, using Manrope or Geist?
* [ ] Are all buttons and interactive chips fully pill-shaped (`rounded-full`)?
* [ ] Are drop shadows strictly soft, diffuse, and large (`shadow-soft-md/lg`), avoiding any harsh lines?
* [ ] Is there a pristine phone mockup immediately beneath the Hero CTA?
* [ ] Do avatar chips or profile pictures feature a tiny green presence dot to add personality?
* [ ] Is the background a warm pearl/off-white rather than a stark, blinding `#FFFFFF`?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Strict center alignment for all primary text and imagery.
* Soft, diffuse drop shadows that mimic iOS depth.
* Generous border radiuses (pills, fully rounded panel corners).
* Playful micro-interactions (bouncy scales on click/hover).
* Friendly, humanizing elements like avatars, emojis in profile states, and status dots.
* Frosted glass (`backdrop-blur`) effects on floating navigation elements.

### ✗ Not Allowed

* Wide, edge-to-edge multi-column desktop layouts. Content must remain a strict centered conversion column.
* Sharp corners (`rounded-none` or small radiuses) on primary action buttons.
* Flat, border-only panel designs (this system requires soft shadows for elevation).
* Harsh true blacks (`#000000`) for backgrounds or text.
* Small, tightly cramped touch targets. Padding must be generous and mobile-friendly.