Porcelain Bitmoji Project OS

/porcelainBitmojiProjectOs
A premium, avatar-driven iOS design system blending porcelain minimalism, pastel micro-interactions, and tactile warmth through constrained, mobile-first, single-column layouts.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Porcelain Bitmoji Project OS

A design language for friendly, premium light interfaces combining porcelain minimalism with avatar-led warmth and native iOS polish.

---

## Philosophy

> "Warmth through human presence; premium polish through porcelain constraint."

This system creates interfaces that feel like a pristine, high-end iOS application centered entirely around the user. It balances a hyper-clean, minimal canvas with bursts of human personality through avatars, presence indicators, and pastel micro-interactions. It avoids sprawling web-app layouts in favor of a tidy, mobile-native, single-column architecture, even on desktop displays.

### Core Beliefs

1. **Mobile-Native Center of Gravity** — Desktop layouts are treated as expansive canvases for centered, slim, single-column bento modules. Width is constrained; focus is absolute.
2. **Avatar-Led Warmth** — Personality comes from human elements (avatars, presence dots, friendly proof pills) rather than heavy interface styling. 
3. **Porcelain Minimalism** — Backgrounds and primary containers rely on warm whites, pale mist-grays, and heavily rounded, soft boundaries. 
4. **Pastel Restraint** — Color is highly regulated. Sky, mint, lemon, blush, and lavender exist exclusively for tiny UI states, notification labels, and badges.
5. **Tactile & Frosted** — Depth is achieved through iOS-style backdrop blurs, translucent materials, and soft, highly diffused contact shadows rather than harsh geometric drop-shadows.

### Strict Rules

* **No Sprawling Grids** — Layouts must remain single-column, stacked, and centrally anchored.
* **Graphite, Not Black** — Typography must use deep, rich graphite to maintain softness. Pure `#000000` is forbidden.
* **Restricted Color Application** — Pastels cannot be used for large backgrounds, hero text, or primary structural elements.
* **Fully Rounded Geometry** — Sharp corners are prohibited. Everything from buttons to project cards to screenshots must feature continuous, smooth radiuses (iOS squirrel-inspired).

---

## Color Palette

### The Porcelain Foundation & Graphite Scale

The core palette relies on warm, pristine whites and mist-grays to build the architecture, grounded by soft, highly legible graphite typography.

```css
/* Backgrounds (Porcelain & Mist) */
bg-stone-50/50        /* The warm white master canvas (#fafaf9) */
bg-white              /* Elevated project cards and primary bento modules */
bg-slate-50/80        /* Pale mist-gray rounded sections */
bg-slate-100/60       /* Subtle interactive hover zones */
bg-zinc-800           /* Dark rounded CTA buttons */

/* Borders & Dividers */
border-slate-100      /* Whisper-thin section dividers */
border-slate-200/50   /* Card borders, avatar rings */
ring-slate-900/5      /* Soft iOS-style focus rings */

/* Text Hierarchy (Graphite Scale) */
text-zinc-800         /* Hero headings, primary project titles (#27272a) */
text-zinc-600         /* Readable paragraphs, secondary body copy (#52525b) */
text-zinc-400         /* Timestamps, subtle metadata, muted presence text */
text-white            /* Text inside the dark rounded CTA pair */

```

### The Pastel UI Details

Pastels inject joy and status but are strictly quarantined to chips, badges, presence dots, and notification labels.

```css
/* Sky (Information / Default Active) */
bg-sky-100 text-sky-700 border-sky-200
bg-sky-400 /* Presence dots only */

/* Mint (Success / Verified / Online) */
bg-emerald-100 text-emerald-700 border-emerald-200
bg-emerald-400 /* Presence dots only */

/* Lemon (Warning / In-Progress / Highlights) */
bg-amber-100 text-amber-700 border-amber-200

/* Blush (Notifications / Heat / Destructive) */
bg-rose-100 text-rose-700 border-rose-200
bg-rose-400 /* Notification badge dots */

/* Lavender (New Features / Premium / Magic) */
bg-fuchsia-100 text-fuchsia-700 border-fuchsia-200

```

---

## Typography

The system contrasts highly expressive, relaxed-line-height hero fonts against hyper-readable, neutral body paragraphs.

### Typefaces
* **Headings:** Geist or Manrope (Personality, structure, strong weight).
* **Body:** Inter or Roboto (Utility, readability, neutrality).

### Font Weights

```css
font-bold        /* Hero headings, primary user names, bold statements (Geist/Manrope) */
font-extrabold   /* Emphasized hero metrics, strong project titles (Geist/Manrope) */
font-medium      /* Readable paragraphs, CTA button text (Inter/Roboto) */
font-normal      /* Sub-labels, secondary descriptions (Inter/Roboto) */

```

### Font Size & Line Height Scale

```css
/* Micro UI */
text-[11px] leading-none    /* Presence labels, tiny notification counts */
text-xs leading-tight       /* Pastel badges, proof pill metadata */

/* Content */
text-sm leading-relaxed     /* Secondary paragraphs, card descriptions */
text-base leading-relaxed   /* Primary body paragraphs, input fields */

/* Structure */
text-lg leading-snug        /* Stacked project card titles, bento headers */
text-2xl leading-snug       /* Section highlights, user profiles */
text-4xl-5xl leading-relaxed /* Bold hero statements, large conversational headers */

```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Line-Height |
| --- | --- | --- | --- | --- | --- |
| Hero Statement | Geist | 5xl | extrabold | zinc-800 | relaxed |
| Card Title | Manrope | lg | bold | zinc-800 | snug |
| Paragraph | Inter | base | medium | zinc-600 | relaxed |
| Dark CTA | Inter | sm | medium | white | tight |
| Pastel Badge | Roboto | xs | bold | sky-700 | none |

---

## Animation System

### Core Philosophy: The iOS Spring

Movements should feel physical, fluid, and bouncy. Elements don't just appear; they scale up smoothly with a subtle overshoot.

### Page Transitions (Scale & Fade)

```tsx
initial={{ opacity: 0, scale: 0.96, y: 15 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ type: "spring", bounce: 0.3, duration: 0.6 }}

```

### Micro-Interactions (Avatar & Pill Pops)

Avatars and proof pills gently float and scale on interaction, indicating life and presence.

```tsx
whileHover={{ scale: 1.04, y: -2 }}
whileTap={{ scale: 0.97 }}
transition={{ type: "spring", stiffness: 400, damping: 25 }}

```

---

## UI Components

### Slim Frosted Nav

Anchored at the top, perfectly centered on desktop, utilizing a heavy iOS-style backdrop blur to merge seamlessly with the warm white canvas.

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

```

### Avatar Bubbles & Presence Dots

Avatars are perfectly round, often clustered or overlapping, accompanied by tiny pastel presence dots wrapped in a white stroke to cut out the background.

```tsx
<div className="relative inline-block">
  <img src="avatar.jpg" className="w-10 h-10 rounded-full border-2 border-white shadow-sm" />
  <span className="absolute bottom-0 right-0 w-3 h-3 bg-emerald-400 border-2 border-white rounded-full"></span>
</div>

```

### Soft Contact Shadows

Instead of sprawling gray drop shadows, elements sit on highly localized, colored contact shadows to emulate physical lighting in a bright room.

```tsx
<div className="relative group">
  {/* Soft Contact Shadow beneath */}
  <div className="absolute -inset-1 bg-slate-200/50 rounded-3xl blur-xl opacity-0 group-hover:opacity-100 transition duration-500"></div>
  
  {/* Foreground Element */}
  <div className="relative bg-white rounded-3xl p-6 border border-slate-100">
     {/* Content */}
  </div>
</div>

```

---

## Component Catalog

### Stacked Project Cards

Tidy, heavily rounded single-column components meant to be stacked vertically. 

```tsx
// Mist-Gray Project Card
"bg-slate-50/80 rounded-[2rem] p-6 border border-slate-100 transition-transform hover:scale-[1.02] cursor-pointer"

// Image/Screenshot Wrapper inside Card
"rounded-2xl overflow-hidden border border-slate-200/50 shadow-[0_8px_30px_rgb(0,0,0,0.04)]"

```

### Buttons

```tsx
// Rounded Dark CTA Pair (Primary)
"bg-zinc-800 text-white font-medium text-sm rounded-full px-6 py-3 hover:bg-zinc-700 active:scale-95 transition-all shadow-sm"

// Rounded Light CTA Pair (Secondary)
"bg-white text-zinc-800 border border-slate-200 font-medium text-sm rounded-full px-6 py-3 hover:bg-slate-50 active:scale-95 transition-all shadow-sm"

```

### Proof Pills & Badges

Friendly, pill-shaped tags utilizing the restrained pastel palette.

```tsx
// Friendly Proof Pill (e.g., "Joined by 4 others")
"flex items-center gap-2 px-3 py-1.5 bg-white border border-slate-200 rounded-full text-xs font-medium text-zinc-600 shadow-sm"

// Notification-style Label (Mint)
"px-2.5 py-1 text-xs font-bold rounded-full bg-emerald-100 text-emerald-700 border border-emerald-200/50"

```

### Single-Column Bento Modules

A mobile-native grid layout applied to desktop. The container has a strict maximum width, relying on vertical stacking.

```tsx
<div className="w-full max-w-lg mx-auto flex flex-col gap-4">
  <HeroStatement />
  <div className="flex gap-3 justify-center">
    <DarkCTAPair />
  </div>
  <ProjectCardStack />
  <ProjectCardStack />
</div>

```

---

## Quality Checklist

* [ ] Is the primary layout heavily constrained to a centered, single-column, mobile-native width?
* [ ] Are you exclusively using Geist/Manrope for heavy, relaxed heroes and Inter/Roboto for body copy?
* [ ] Are all avatars fully rounded and accompanied by proper presence dots (with a white cutout border)?
* [ ] Have you verified that pastels (lemon, sky, mint, blush, lavender) are ONLY used for micro-UI states, chips, and badges?
* [ ] Do all interactive cards feature an iOS-style heavy border-radius (e.g., `rounded-[2rem]` or `rounded-3xl`)?
* [ ] Is the primary typography deep graphite (`zinc-800`) rather than pure harsh black?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm whites (`stone-50`) and pale mist-grays for all major backgrounds.
* Heavily rounded screenshots and container boundaries.
* Stacking avatars in "proof pills" to create community warmth.
* Native iOS backdrop blurs on navigations and sticky headers.
* Bouncy, spring-based hover and reveal animations.

### ✗ Not Allowed

* Multi-column, expansive dashboard layouts on desktop.
* Using pastels as the background color for entire sections or large project cards.
* Pure black (`#000000`) text or heavily weighted geometric backgrounds.
* Sharp, unrounded corners on any UI element, card, or image.
* Harsh, dark drop shadows that extend far beyond the element (use tight contact shadows instead).