Maker Bitmoji Pearl Stack Design System

/makerBitmojiPearlStackDesignSystem
A mobile-first design system radiating warmth and indie-maker spirit, emphasizing vertical flow, tactile elements, human-centric avatars, and soft, approachable palettes for inviting and trustworthy B2C interfaces.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Maker Bitmoji Pearl Stack Design System

A design language for warm, mobile-first interfaces that radiate indie-maker credibility and B2C charm.

---

## Philosophy

> "Trust is built in public; interfaces should feel like a warm handshake."

This system creates interfaces that feel like a direct, personal channel to the creator. It rejects the coldness of enterprise software and the hyper-polish of luxury brands, opting instead for a highly tactile, approachable, and human-centric aesthetic. The structural rhythm is strictly vertical and mobile-first, guiding the user through a personal narrative rather than a complex dashboard.

### Core Beliefs

1. **The Maker is the Brand** — Interfaces should be led by the human behind them. Avatar chips, presence dots, and personalized signatures are structural anchors, not decorations.
2. **Warmth through Roundness** — Sharp edges are eliminated. Generous border radii on cards, squircle app icons, and fully rounded pills create inherent friendliness.
3. **Calm Contrast** — Instead of blinding whites and stark blacks, we use soothing pearl whites, chalk grays, and warm graphite. 
4. **Vertical Rhythm (The Stack)** — The layout is uncompromisingly stacked. A user should be able to scroll vertically with one thumb, encountering one clear idea or project per section. Side-by-side complexity is avoided.
5. **Restrained Accents** — Color is minimized to keep the focus on the content and the avatars. Accents are strictly low-saturation blue-grays, used only for micro-states and subtle interactive hints.

### Strict Rules

* **No Multi-Column Grids** — Everything collapses into a centered, vertically stacked flow. One project card per horizontal plane.
* **No Harsh Colors** — Primary accents are low-saturation blue-gray. Emojis and avatars provide the primary bursts of color.
* **Fully Rounded Interactive Elements** — All primary buttons and chips must be heavily rounded (pill shapes).
* **Avatars as UI** — Bitmoji-style avatars or personal headshots must be integrated into the navigation and social proof rows.

---

## Color Palette

### The Pearl & Stone Scale

The palette replaces clinical digital whites and grays with tactile, earthy analogs. The text relies on a soft graphite rather than pure black, ensuring high readability without the harsh contrast of a corporate terminal.

```css
/* Backgrounds (Warm & Tactile) */
bg-pearl              /* Main canvas background (#FDFCFB) */
bg-chalk              /* Secondary sections, subtle card backgrounds (#F5F4F1) */
bg-stone-100          /* Component hover states, accordion backgrounds (#EBEAE6) */
bg-stone-200          /* Pressed states, borders for interactive elements (#DFDDD8) */

/* Borders & Dividers */
border-stone-100      /* Soft dividers within cards */
border-stone-200      /* Structural outlines for project cards and screenshot frames */
border-stone-300      /* Hovered borders, active input outlines */

/* The Restraint: Low-Saturation Blue-Gray (Accent) */
text-slate-500        /* Interactive micro-states, secondary links (#64748B) */
bg-slate-100          /* Subtle active states, micro-badges */
border-slate-300      /* Focused form elements */
ring-slate-200        /* Soft focus rings */

/* Text Hierarchy (Graphite Scale) */
text-graphite-900     /* Hero typography, maker statements, primary buttons (#292929) */
text-graphite-700     /* Subheadings, project titles, FAQ questions (#4A4A4A) */
text-graphite-500     /* Body copy, short supporting text (#737373) */
text-graphite-400     /* Launch labels, metadata, timestamps (#A3A3A3) */

/* Status (Organic & Restrained) */
bg-emerald-400        /* Presence dots (online indicator) ONLY */
```

---

## Typography

Typography pairs a bold, highly approachable display face with a clean, warm sans-serif for reading. Heavy weights are celebrated in headlines to create a punchy, confident maker vibe.

### Font Families

```css
font-display     /* Primary: Manrope (Alternatives: Geist, Helvetica, Roboto) */
font-sans        /* Supporting: DM Sans (Alternative: Inter) */
```

### Font Weights

```css
font-normal      /* Short supporting copy, FAQ body */
font-medium      /* Badges, launch labels, secondary buttons */
font-semibold    /* Project titles, CTA buttons, accordion headers */
font-extrabold   /* Hero typography, maker statements — MANDATORY for primary focus */
```

### Font Size Scale

```css
text-xs          /* Presence labels, timestamp metadata (12px) */
text-sm          /* Launch labels, avatar proof text, accordion body (14px) */
text-base        /* Standard supporting copy, project descriptions (16px) */
text-lg          /* Button text, calm accordion titles (18px) */
text-2xl         /* Standard project card headers (24px) */
text-4xl-5xl     /* Centered maker statements, hero headers (responsive) */
```

### Letter Spacing & Transforms

```css
tracking-tighter /* Hero headers to increase punchiness and block-weight */
tracking-tight   /* Project titles and button text */
tracking-normal  /* All body copy to ensure legible mobile reading */

capitalize       /* Launch labels and friendly micro-tags */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Maker Statement | Manrope | 5xl | extrabold | graphite-900 | tighter |
| Supporting Copy | DM Sans | base | normal | graphite-500 | normal |
| Project Title | Manrope | 2xl | semibold | graphite-900 | tight |
| Graphite CTA | DM Sans | lg | semibold | pearl | tight |
| Launch Label | DM Sans | sm | medium | graphite-400 | normal |

---

## Animation System

### Core Philosophy: The Friendly Spring

Motion should feel physical, lightweight, and optimistic. We use spring physics that have a slight, playful bounce rather than rigid, linear corporate easing.

### Component Reveal (Upward Float)

Elements gently float up into the vertical stack as the user scrolls down.

```tsx
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-40px" }}
transition={{ type: "spring", stiffness: 260, damping: 20 }}
```

### Tactile Button Press (Squish)

Interactive elements physically compress when tapped, reinforcing the mobile-first B2C charm.

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

---

## UI Components

### Compact Frosted Nav

A highly compact, sticky navigation bar that relies on blur to maintain context of the scrolling stack beneath it. 

```tsx
<nav className="sticky top-4 z-50 mx-auto max-w-fit px-4 py-2 bg-pearl/70 backdrop-blur-md border border-stone-200 rounded-full shadow-sm flex items-center gap-3">
  {/* Nav contents */}
</nav>
```

### The Polished Screenshot Frame

Project imagery is never just dropped on the page. It is wrapped in a soft, rounded frame that implies an application window or mobile screen.

```tsx
<div className="rounded-2xl p-2 bg-chalk border border-stone-200 shadow-[inset_0_1px_4px_rgba(0,0,0,0.02)]">
  <img className="rounded-xl border border-stone-100 overflow-hidden" src="..." />
</div>
```

### Presence & Avatar Chips

The core unit of maker identity. Used in headers, next to text, or floating in the UI.

```tsx
<div className="relative inline-flex items-center justify-center p-1 bg-white border border-stone-200 rounded-full shadow-sm">
  <img src="/bitmoji.png" className="w-10 h-10 rounded-full bg-chalk" />
  <span className="absolute bottom-0 right-0 w-3 h-3 bg-emerald-400 border-2 border-white rounded-full"></span>
</div>
```

---

## Component Catalog

### Rounded Graphite CTA Pair

The primary conversion mechanism. Always presented as a pair (Primary / Secondary) and fully rounded.

```tsx
// Primary Maker CTA
"w-full sm:w-auto px-8 py-4 bg-graphite-900 text-pearl font-semibold text-lg rounded-full shadow-sm hover:bg-graphite-700 transition-transform active:scale-95"

// Secondary Calm CTA
"w-full sm:w-auto px-8 py-4 bg-chalk text-graphite-700 font-semibold text-lg rounded-full border border-stone-200 hover:bg-stone-100 transition-transform active:scale-95"
```

### Avatar Proof Row

A horizontally overlapping stack of friendly faces to establish immediate B2C trust, placed directly below the CTA pair.

```tsx
<div className="flex items-center justify-center gap-3 mt-6">
  <div className="flex -space-x-3">
    {[1, 2, 3, 4].map((user) => (
      <img className="w-8 h-8 rounded-full border-2 border-pearl bg-chalk" src={user.avatar} />
    ))}
  </div>
  <p className="text-sm font-medium text-graphite-500">Joined by 1,200+ others</p>
</div>
```

### App-Icon Rows & Launch Labels

Small metadata clusters used above project cards to denote what the project is and where it lives.

```tsx
// Launch Label
"inline-flex items-center px-3 py-1 bg-chalk border border-stone-200 rounded-full text-sm font-medium text-graphite-500 capitalize mb-3"

// App Icon Squircle
"w-12 h-12 rounded-[1rem] bg-white border border-stone-100 shadow-sm flex items-center justify-center overflow-hidden"
```

### Calm Accordion FAQs

No harsh lines or high-contrast toggles. Soft background expansions that feel like unwrapping a folded piece of paper.

```tsx
// Accordion Item Container
"border-b border-stone-200 last:border-0 py-4"

// Accordion Header
"flex justify-between items-center w-full text-left font-semibold text-lg text-graphite-700 hover:text-graphite-900 transition-colors"

// Accordion Body
"pt-2 text-base text-graphite-500 font-normal leading-relaxed"
```

### Single Project Card

A vertically stacked container that holds an entire maker endeavor.

```tsx
"flex flex-col gap-4 p-6 bg-white border border-stone-200 rounded-[2rem] shadow-sm mb-8 w-full max-w-2xl mx-auto"
```

---

## Quality Checklist

* [ ] Is the entire page layout vertically stacked with a single focal point per scroll depth?
* [ ] Does the hero section feature `font-extrabold` typography with tight tracking?
* [ ] Are all primary buttons heavily rounded pills (`rounded-full`)?
* [ ] Is the primary accent exclusively a low-saturation blue-gray (`slate`)?
* [ ] Are avatars or presence dots visible within the first viewport?
* [ ] Do all project screenshots sit inside a `p-2 bg-chalk rounded-2xl` inner-shadow frame?
* [ ] Have you entirely avoided sharp corners (`rounded-none` or `rounded-sm`) on major interactive elements?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm, off-white backgrounds (Pearl, Chalk, Stone).
* Heavy, chunky headings that feel conversational and bold.
* Spring-based animations for hover and tap states.
* Bitmojis, stylized avatars, and friendly emojis used as icons.
* Prominent, centered maker statements.
* Fully rounded corners on buttons and navigation bars.

### ✗ Not Allowed

* High-contrast enterprise blues, alert reds, or success greens (except the presence dot).
* Pure `#000000` black or `#FFFFFF` stark white as primary structural colors.
* Complex multi-column masonry grids or side-by-side dense data tables.
* Sharp, 0px border-radius containers.
* Dropdowns or modals with harsh, opaque black overlays (use soft blur instead).
* Light-weight, thin typography for primary headings.