Soft Bitmoji Build Diary

/softBitmojiBuildDiary
A playful, narrative-first design system for indie builder portfolios, blending iOS-native warmth, avatar-driven presence, and tactile softness in a centered, diary-like digital journal aesthetic.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Soft Bitmoji Build Diary Design System

A design language for playful, indie-builder portfolios with iOS-native warmth.

---

## Philosophy

> "Warmth invites connection; softness builds empathy."

This system creates interfaces that feel like a highly curated, deeply personal digital journal. It blends the approachable, narrative-driven energy of an indie maker with the immaculate, tactile softness of native iOS components. The design should feel incredibly welcoming, relying on generous border radii, gentle contact shadows, and avatar-driven presence rather than cold, clinical architecture.

### Core Beliefs

1. **Hierarchy through centering and flow** — A centered, vertical column mimics a social feed or personal diary, guiding the user chronologically through the maker's journey.
2. **Tactile softness over sharp edges** — Interfaces should feel physically safe to touch. Large border radii and pill-shaped elements dominate the structural language.
3. **Restrained joy** — The canvas and core typography remain highly muted and structured, allowing tiny bursts of pastel color in micro-components to provide moments of delight.
4. **Avatar-led presence** — The creator is physically present in the UI through subtle avatar reactions, floating heads, and human-centric framing.
5. **Depth through contact, not elevation** — Shadows mimic objects resting intimately against a surface, utilizing tight, diffuse contact blurs rather than wide, floating drop shadows.

### Strict Rules

* **Pastels for Microchips Only** — Mint, sky, lemon, blush, and lavender are strictly reserved for tiny contextual tags and chips. Never use them for large backgrounds or primary buttons.
* **Maximum Radii** — Sharp corners (`rounded-none` or `rounded-sm`) are forbidden on structural elements. Everything from cards to imagery must utilize generous curvature.
* **Warmth in the Whitespace** — Pure white (`#ffffff`) and cold grays are prohibited. The canvas must always carry a subtle, warm stone or off-white undertone.
* **Native iOS Frosting** — Overlays and floating badges must utilize high-quality, translucent background blurs to maintain context with underlying content.
* **Graphite over Black** — Pure black (`#000000`) is too harsh for this aesthetic. All primary text must be a rich, approachable graphite or dark slate.

---

## Color Palette

### The Warm Canvas & Pale Modules

The core palette relies on a comforting, temperature-warm off-white foundation, stacking soft, pale gray modules on top. 

```css
/* Backgrounds (Warm & Tactile) */
bg-stone-50           /* Main canvas background, warm off-white (#faf9f8) */
bg-slate-100/60       /* Default card modules, pale gray rounded sections */
bg-slate-200/50       /* Interactive card hover states, accordion rows */
bg-white/80           /* Frosted floating badges, sticky headers (requires backdrop-blur) */
bg-slate-800          /* Primary solid CTAs, graphite buttons */

/* Soft Borders & Dividers */
border-slate-200/60   /* Tidy accordion separators, inner card borders */
border-slate-300/40   /* Hover boundaries, focused state rings */
border-white/50       /* Inner highlights for frosted glass components */

/* Text Hierarchy (Friendly & Muted) */
text-slate-800        /* Graphite headings, primary project titles, hero text */
text-slate-600        /* Muted slate copy, secondary descriptions, project notes */
text-slate-500        /* Lightweight metrics, timestamps, tiny accordion labels */
text-slate-400        /* Placeholder text, disabled interactions */

```

### The Restrained Pastels (Microchips Only)

Color is treated as metadata. These pastel pairings are exclusively for "currently building" chips, status tags, and avatar-reaction borders.

```css
/* Sky (Active/Building) */
bg-sky-100 text-sky-700 ring-sky-200

/* Mint (Launched/Live) */
bg-emerald-100 text-emerald-700 ring-emerald-200

/* Lemon (Ideation/Notes) */
bg-amber-100 text-amber-700 ring-amber-200

/* Blush (Personal/Milestone) */
bg-rose-100 text-rose-700 ring-rose-200

/* Lavender (Experimental) */
bg-indigo-100 text-indigo-700 ring-indigo-200
```

---

## Typography

Headlines are bold, punchy, and highly approachable, utilizing modern grotesques like Plus Jakarta Sans or Geist. Body copy relies on the utilitarian cleanliness of Inter or Roboto to ground the playfulness.

### Font Families

```css
font-sans       /* Plus Jakarta Sans, Manrope, or Geist for all headings/titles */
font-mono       /* Inter or Roboto strictly for body paragraphs and micro-metrics */
```

### Font Weights

```css
font-regular     /* Standard supporting text, tiny notes, accordion body */
font-medium      /* CTA labels, 'currently building' chips, lightweight metrics */
font-semibold    /* Project card titles, secondary subheadings, avatar names */
font-bold        /* Hero headings, primary intro statements - MANDATORY for heroes */
```

### Font Size Scale

```css
text-[11px]      /* Tiny notes, avatar reaction timestamps, lightweight metrics */
text-xs          /* App screenshot captions, launch moments (12px) */
text-sm          /* Muted slate copy, secondary accordion text (14px) */
text-base        /* Standard project descriptions, CTA text (16px) */
text-lg          /* Card headings, sub-section introductions (18px) */
text-xl          /* Primary stacked project titles (20px) */
text-2xl         /* Subsection diary dates */
text-4xl-5xl     /* Bold hero intro statements */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Hero headings, bold approachable titles */
tracking-normal  /* All body copy and muted slate paragraphs */
lowercase        /* Optional: playful stylization for tiny tags (e.g., "currently building") */
```

---

## Animation System

### Core Philosophy: The iOS Spring

Movements should feel physical, playful, and responsive, utilizing spring physics with medium bounce to mimic modern native mobile operating systems.

### Avatar & Card Hover (Tactile Lift)

Elements don't just change color; they physically respond to interaction with a gentle scale and deepened contact shadow.

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

### Accordion Expansion (Tidy Reveal)

```tsx
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ type: "spring", bounce: 0, duration: 0.4 }}
```

---

## UI Components

### Soft Contact Shadows

Instead of wide, blurry drop shadows, use tight, multi-layered shadows that ground the rounded modules against the warm off-white canvas.

```css
/* Primary Card Shadow */
"shadow-[0_2px_8px_-2px_rgba(0,0,0,0.05),0_1px_2px_-1px_rgba(0,0,0,0.02)]"

/* Floating Badge/CTA Shadow */
"shadow-[0_8px_16px_-4px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.04)]"
```

### Frosted Avatar Badges

Used for floating reactions or contextual maker notes overlapping app screenshots.

```tsx
<div className="absolute -bottom-3 -right-3 flex items-center gap-2 rounded-full bg-white/70 backdrop-blur-md border border-white/50 p-1.5 shadow-sm">
  <img src="/avatar.png" className="w-6 h-6 rounded-full" />
  <span className="text-[11px] font-medium text-slate-600 pr-2">Just shipped! 🚀</span>
</div>
```

---

## Component Catalog

### Modules & Cards

Cards must have exceptionally large border radii. They serve as pale, quiet containers for vibrant app screenshots and bold typography.

```tsx
// Stacked Project Card
"relative w-full max-w-2xl bg-slate-100/60 rounded-[32px] p-6 md:p-8 flex flex-col gap-4 border border-slate-200/50"

// App Screenshot Container
"w-full overflow-hidden rounded-[24px] bg-slate-200/50 shadow-inner"
```

### Buttons & CTAs

Structured as a centered, rounded pair directly beneath the intro diary section.

```tsx
// Primary CTA Pair Container
"flex items-center justify-center gap-4 w-full"

// Primary Pill CTA (Graphite)
"px-6 py-3 rounded-full bg-slate-800 text-white font-medium text-base hover:bg-slate-700 transition-colors shadow-sm"

// Secondary Pill CTA (Soft Outline)
"px-6 py-3 rounded-full bg-transparent border-2 border-slate-200 text-slate-800 font-medium text-base hover:bg-slate-100/50 transition-colors"
```

### Microchips & Tags

The only elements allowed to utilize the pastel palette.

```tsx
// 'Currently Building' Chip (Mint Variant)
"inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-100 text-emerald-700 text-xs font-medium ring-1 ring-inset ring-emerald-200/50"

// Tiny Note Accordion Row
"w-full flex items-center justify-between py-3 border-b border-slate-200/60 last:border-0 text-sm text-slate-600 hover:text-slate-800 transition-colors"
```

---

## Quality Checklist

* [ ] Is the page structured strictly as a centered vertical diary flow?
* [ ] Are hero headings utilizing `font-bold` and a grotesque sans-serif (e.g., Plus Jakarta Sans)?
* [ ] Is the background a warm off-white (`bg-stone-50` or similar) rather than clinical pure white?
* [ ] Did you restrict all pastel colors exclusively to small microchips and badges?
* [ ] Are all structural elements, cards, and buttons using large border radii (`rounded-3xl` to `rounded-full`)?
* [ ] Are overlapping elements using native iOS-style `backdrop-blur` with subtle white inner borders?
* [ ] Have you included avatar-driven presence (faces, reactions, floating tiny notes)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm, stone-tinted canvases and pale gray card backgrounds.
* Bold, punchy headings paired with neutral, highly legible body copy.
* Pastel accents (blush, mint, sky) applied exclusively to small data chips.
* Playful spring animations on hover and tap interactions.
* Floating frosted-glass elements overlapping imagery.

### ✗ Not Allowed

* Pure black (`#000000`) text or pure white (`#ffffff`) background canvases.
* Sharp corners (`rounded-none`, `rounded-sm`) on cards, buttons, or images.
* Large blocks of pastel colors (e.g., no pastel backgrounds for entire project cards).
* Harsh, dark drop shadows or flat, un-blurred transparent overlays.
* Multi-column grid architectures that break the centered, vertical diary layout.