Pearl Founder Bento Ledger

/pearlFounderBentoLedger
A mobile-first, minimalist design system showcasing indie makers’ portfolios in pristine, iOS-inspired vertical ledgers. Emphasizes tactile geometry, extreme clarity, and restrained color for a digital museum of shipped work.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Pearl Founder Bento Ledger

A pristine, mobile-first design language for indie makers presenting a vertical ledger of shipped work.

---

## Philosophy

> "Proof over promise; execution framed in pure clarity."

This system creates interfaces that feel like a curated digital museum of an indie maker's life work. It draws heavy inspiration from the tactile, premium feel of iOS widgets—utilizing expansive soft corner radii, deliberate structural centering, and a highly restrained color palette. The aesthetic strips away excessive branding to let the sheer volume and quality of shipped projects stand as the ultimate focal point.

### Core Beliefs

1. **The Ledger is the Product** — The interface exists solely to frame shipped work. Every project is an oversized, self-contained widget.
2. **Mobile-First Inevitability** — The layout operates on a strict, centered vertical axis. What works flawlessly on a phone simply scales elegantly on a desktop.
3. **Contrast over Color** — Trust is built through the stark contrast of near-black graphite typography and capsule buttons against pearl white canvases. Colorful UI elements are distractions.
4. **Tactile Geometry** — Everything interactive feels like a physical object. Fully rounded capsules for actions, large continuous curves for cards, and diffuse, ambient shadows to create physical depth.

### Strict Rules

* **Zero Colorful Buttons** — Primary actions are always near-black graphite capsules. Color is reserved exclusively for project screenshots or native app icons within the cards.
* **Strict Vertical Centering** — The hero section must flow symmetrically: Avatar → Founder Statement → CTA Pair → Proof Chips → Project Ledger.
* **One Project Per Row** — Bento grids do not wrap into multi-column masonry on desktop. They remain a focused, single-column vertical timeline of widgets.
* **Maximum Corner Radii** — Buttons are perfectly pill-shaped (`rounded-full`). Project cards use extreme iOS-style rounding (`rounded-3xl` or `rounded-[32px]`).

---

## Color Palette

### The Pearl & Graphite Scale

The palette eschews traditional primary brand colors for a sophisticated foundation of warm whites, chalky structural grays, and deep graphite text.

```css
/* Backgrounds (The Canvas & The Widgets) */
bg-stone-50/50        /* Main application background (Warm Ivory/Off-white tint) */
bg-white              /* Primary project card backgrounds (Pearl White) */
bg-slate-50           /* Secondary metric blocks inside cards */
bg-slate-100          /* Hover states for secondary actions */
bg-stone-100          /* Neutral proof chip backgrounds */

/* Borders (Chalk Grays) */
border-slate-100      /* Ultra-soft internal dividers */
border-slate-200      /* Default widget borders, secondary button outlines */
border-slate-300      /* Focused or active boundaries */

/* Primary Actions (The Anti-Color) */
bg-slate-950          /* Primary CTA Capsules (Near-black) */
text-white            /* Text strictly inside Primary CTAs */
bg-slate-800          /* Hover state for Primary CTA Capsules */

/* Text Hierarchy (Graphite & Slate) */
text-slate-950        /* Primary text, hero headlines, project titles (Graphite) */
text-slate-700        /* Secondary copy, founder statements */
text-slate-500        /* Supporting copy, stack labels, timestamps (Muted Slate) */
text-slate-400        /* Placeholder text, subtle data units */

```

---

## Typography

A high-contrast pairing system. Headlines are bold, geometric, and authoritative, while supporting copy prioritizes supreme legibility in dense, compact spaces.

### Font Families

* **Primary (Headlines):** Manrope or Geist. Delivers a punchy, technical, yet polished presence.
* **Secondary (Body & Metrics):** DM Sans or Inter. Clean, neutral, and highly readable at small sizes.

### Font Weights

```css
font-normal      /* Long-form project descriptions, stack labels */
font-medium      /* CTA buttons, proof chips, launch badges */
font-semibold    /* Project titles, key metrics */
font-bold        /* EXCLUSIVELY for Hero headlines and high-impact numerical data */

```

### Font Size Scale

```css
text-[11px]      /* Stack labels, version numbers, minor tags */
text-xs          /* Launch badges, metadata */
text-sm          /* Project descriptions, proof chips, secondary buttons */
text-base        /* Primary CTA capsules, founder statement body */
text-xl          /* Project card titles */
text-4xl         /* Hero headline (Mobile) */
text-5xl         /* Hero headline (Desktop) */

```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | Geist | 4xl/5xl | bold | slate-950 | tight |
| Founder Statement | Inter | base | normal | slate-700 | normal |
| CTA Capsule | Inter | base | medium | white | normal |
| Project Title | Geist | xl | semibold | slate-950 | tight |
| Stack Label | Inter | [11px] | medium | slate-500 | wide |

---

## Layout Architecture

The structural flow is sacred. The entire interface operates as a central spine.

### The Hero Stack
1. **Avatar:** 80x80px to 96x96px, perfectly circular, subtle border. Centered.
2. **Headline:** 4xl/5xl, max-width of `ch-15` to force elegant text wrapping. Centered.
3. **Founder Statement:** Concise, max-width of `max-w-md`. Centered.
4. **CTA Pair:** Inline flex, usually "View Ledger" (Primary) and "Contact" (Secondary). Centered.
5. **Proof Chips:** Horizontal scrolling row of social proof (e.g., "Product Hunt #1", "10k MRR"). Centered.

### The Ledger Stack
* **One Card Per Row:** A vertical `flex-col` stack with `gap-6` or `gap-8`.
* **Width:** Cards max out at `max-w-2xl`. They never expand to fill an ultra-wide desktop.

---

## Animation System

### Core Philosophy: iOS Spring Dynamics
Interactions should feel heavy but fluid, mimicking native operating system widgets rather than lightweight web DOM elements.

### Widget Hover State

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

```

### Ledger Reveal (Staggered Vertical Fade)

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, staggerChildren: 0.1, ease: "easeOut" }}

```

---

## UI Components

### Ambient iOS Shadows

Unlike flat interfaces, the Pearl Ledger uses exceptionally soft, widely diffused shadows to lift widgets off the Warm Ivory canvas.

```css
/* Ambient Widget Shadow */
shadow-[0_8px_30px_rgb(0,0,0,0.04)]
/* Hover State Depth (Pushes down, less shadow) */
hover:shadow-[0_4px_15px_rgb(0,0,0,0.02)]

```

### The Primary CTA Capsule

Fully rounded. Near-black. No exceptions.

```tsx
<button className="px-6 py-3 rounded-full bg-slate-950 text-white font-medium text-base hover:bg-slate-800 transition-colors shadow-sm active:scale-95">
  Action
</button>

```

### Proof Chips

Tiny, pill-shaped credibility markers that sit below the hero actions.

```tsx
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-stone-50 border border-slate-200 text-slate-600 text-sm font-medium">
  <Icon className="w-4 h-4" />
  <span>Shipped 12 Apps</span>
</div>

```

### The iOS-Style Project Card (Widget)

The core unit of the ledger. Features sweeping radii, soft internal borders, and discrete zones for imagery and data.

```tsx
<article className="w-full max-w-2xl bg-white border border-slate-200 rounded-[32px] p-2 shadow-[0_8px_30px_rgb(0,0,0,0.04)] transition-all flex flex-col group">
  
  {/* Rounded Screenshot Container */}
  <div className="relative w-full aspect-video rounded-[24px] overflow-hidden bg-slate-50 border border-slate-100 mb-4">
    <Image src="..." className="object-cover group-hover:scale-105 transition-transform duration-700" />
    
    {/* Launch Badge (Floating) */}
    <div className="absolute top-4 right-4 px-3 py-1 bg-white/90 backdrop-blur-md rounded-full text-xs font-medium text-slate-950 border border-slate-200 shadow-sm">
      Jan 2024
    </div>
  </div>

  {/* Card Body */}
  <div className="px-4 pb-4">
    <div className="flex justify-between items-start mb-2">
      <h3 className="text-xl font-semibold text-slate-950 tracking-tight font-geist">Project Name</h3>
      
      {/* Metric Callout */}
      <div className="text-right">
        <span className="block text-sm font-semibold text-slate-950">$5.2k</span>
        <span className="block text-[11px] text-slate-500 uppercase tracking-wide">MRR</span>
      </div>
    </div>
    
    <p className="text-sm text-slate-500 font-inter mb-4 max-w-[85%]">
      Concise description of the product and its primary value proposition.
    </p>

    {/* Stack Labels */}
    <div className="flex flex-wrap gap-2">
      <span className="px-2.5 py-1 rounded-md bg-slate-50 text-slate-600 text-[11px] font-medium border border-slate-100">Next.js</span>
      <span className="px-2.5 py-1 rounded-md bg-slate-50 text-slate-600 text-[11px] font-medium border border-slate-100">Supabase</span>
    </div>
  </div>
</article>

```

---

## Quality Checklist

* [ ] Is the entire layout strictly centered horizontally at all breakpoints?
* [ ] Are the hero headlines set in `font-bold` Manrope or Geist?
* [ ] Are the CTA buttons perfectly pill-shaped (`rounded-full`) and colored near-black (`bg-slate-950`)?
* [ ] Did you avoid using brand colors (blues, greens, purples) for interface buttons or text?
* [ ] Are project cards using a highly rounded corner radius (`rounded-3xl` or `rounded-[32px]`) to mimic iOS widgets?
* [ ] Do the project cards utilize the specific subtle, highly diffused ambient drop shadow?
* [ ] Is there precisely one project card rendered per row, even on ultra-wide desktop monitors?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Strict vertical alignment and rigid centering.
* Expansive white space between the hero stack and the ledger stack.
* Deep graphite/near-black elements for maximum contrast.
* Extreme corner radiuses for interface elements.
* High-fidelity, edge-to-edge imagery within the internal card screenshot wrappers.

### ✗ Not Allowed

* Colorful primary buttons, colorful tags, or vibrant background sections.
* Masonry grids or side-by-side project cards on desktop.
* Sharp corners (`rounded-none` or `rounded-sm`) on large structural containers.
* Dark, heavy, low-spread drop shadows that look like traditional web modals.
* Left-aligned hero sections on desktop (everything must remain centered).