Founder Pearl Bento Column Design System

/founderPearlBentoColumnDesignSystem
A premium, mobile-first portfolio design language using warm pearl tones, exacting column layouts, bold typography, and ultra-tactile bento containers for curated, high-end digital showcases.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Founder Pearl Bento Column Design System

A design language for premium, mobile-first portfolio interfaces.

---

## Philosophy

> "Form follows focus; warmth invites interaction."

This system creates interfaces that feel like a curated, high-end digital exhibition. Built around a strict, centered mobile-first column, it relies on warm pearl surfaces, immense tactile softness, and Framer-level spatial discipline. The design should feel personal yet highly engineered, relying on generous radii, immaculate iOS-style card treatments, and perfectly weighted typography rather than sprawling, full-screen complexity.

### Core Beliefs

1. **The Centered Column is Sacred** — The entire experience is contained within a max-width, mobile-first pillar. Horizontal sprawl dilutes focus.
2. **Warm Tactility over Cold Utility** — Backgrounds use pearl and soft stone values rather than pure clinical whites, making the interface feel human and approachable.
3. **Immaculate Containment** — Bento modules act as pristine, standalone ecosystems. Every metric, testimonial, and screenshot lives in perfect harmony within iOS-inspired, heavy-radius containers.
4. **Graphite Weighting** — Instead of bright, flashy accents, primary actions are grounded in fully rounded, deep graphite to create confident, undeniable anchor points.
5. **Framer-Level Discipline** — Margins, padding, and gaps are mathematically rigorous. There are no accidental spaces.

### Strict Rules

* **Bold Hero Typography** — Primary headings must strictly use Manrope or Geist in bold weights (4xl/5xl). 
* **Pill-Shaped CTAs Only** — Primary actions must be fully rounded (`rounded-full`). No boxy buttons.
* **Aggressive Radii** — Bento panels must utilize generous iOS-style corners (e.g., `rounded-3xl`). Sharp corners are forbidden.
* **No Full-Width Sprawl** — Content must never exceed the central column boundaries (typically `max-w-2xl` or `max-w-3xl`).
* **Delicate Boundaries** — Use ultra-thin, translucent borders to define shapes instead of heavy shadows. 

---

## Color Palette

### The Pearl & Graphite Scale

The palette replaces clinical whites and cool grays with warm, inviting pearls and soft grays. The deepest value is a rich graphite rather than absolute black, ensuring high contrast without harshness.

```css
/* Surfaces (Warm Pearls to Soft Grays) */
bg-pearl-50           /* Main background canvas (#FCFBF9) */
bg-pearl-100          /* Primary bento card surfaces, default containers (#F6F5F2) */
bg-pearl-200/60       /* Subtle internal panels, metric blocks, inactive states */
bg-pearl-200          /* Hover states for secondary interactive elements (#EBEAE6) */
bg-pearl-300          /* Tags, small chip backgrounds, structural pills */

/* Borders (Delicate & Translucent) */
border-black/5        /* Ultra-delicate bento panel dividers */
border-black/10       /* Default bento card borders, frosted nav bottom line */
border-black/15       /* Hover states on cards, focused input rings */

/* The Anchor: Confident Graphite */
bg-graphite-900       /* Primary call-to-action buttons, fully rounded pills (#1A1A1A) */
text-graphite-900     /* Hero headings, primary value statements, deep text */
border-graphite-900   /* Focused states, selected toggle outlines */

/* Text Hierarchy (Warm Neutrals) */
text-graphite-900     /* Bold hero headings, primary data metrics */
text-graphite-700     /* Standard body copy, launch notes, subheadings */
text-graphite-500     /* Tiny tech chips, UI labels, testimonial snippets */
text-graphite-400     /* Muted timestamps, metadata, disabled labels */

```

### Destructive Actions (Portfolio Context)

```css
hover:bg-rose-50/50
hover:text-rose-700
hover:border-rose-200

```

---

## Typography

Typography drives the personality of the portfolio. It contrasts highly expressive, bold display fonts with ultra-clean, legible utility fonts for the UI and body copy.

### Font Families

```css
font-display     /* Manrope or Geist. Reserved strictly for Hero headings and primary bento titles. */
font-sans        /* Inter or Roboto. Used for all concise body copy, metrics, and UI labels. */
```

### Font Weights

```css
font-normal      /* Inter/Roboto: Body copy, testimonial snippets, standard UI */
font-medium      /* Inter/Roboto: Tech chips, UI buttons, launch notes */
font-semibold    /* Inter/Roboto: Metric values, outcome highlights */
font-bold        /* Manrope/Geist: Hero value statements (text-4xl/5xl), project titles */
```

### Font Size Scale

```css
text-[10px]      /* Tiny tech chips, micro-labels, status indicators */
text-xs          /* Testimonial snippets, avatar chip labels (12px) */
text-sm          /* Concise body copy, launch notes, secondary button labels (14px) */
text-base        /* Standard UI text, outcome metrics descriptions (16px) */
text-lg          /* Bento project titles, subtitle intro text (18px) */
text-2xl         /* Prominent outcome metric numbers */
text-4xl         /* Compact hero value statements (mobile focus) */
text-5xl         /* Primary hero headings (desktop column view) */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Manrope/Geist hero headings to emphasize blocky, confident aesthetic */
tracking-normal  /* All Inter/Roboto body copy */
tracking-wide    /* Tiny tech chips and uppercase micro-labels */

uppercase        /* Tech chips, metric labels, 'NEW' launch note badges */
```

### Hierarchy Examples

| Element | Font | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- | --- |
| Hero Heading | Display | 4xl/5xl | bold | graphite-900 | tight | none |
| Body / Intro | Sans | sm/base | normal | graphite-700 | normal | none |
| Graphite CTA | Sans | base | medium | pearl-50 | normal | none |
| Tech Chip | Sans | [10px] | medium | graphite-500 | wide | uppercase |
| Metric Value | Sans | 2xl | semibold | graphite-900 | tight | none |

---

## Animation System

### Core Philosophy: The Physical Spring

Interactions should feel like touching physical, well-oiled hardware. Hover states scale elements down slightly (iOS-style press) rather than lifting them up.

### Page Transitions (The Centered Slide)

```tsx
initial={{ opacity: 0, y: 15, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 0.4, type: "spring", bounce: 0.2 }}
```

### Micro-Interactions (The iOS Press)

When pressing bento cards or graphite pills, elements slightly compress to acknowledge touch.

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

---

## UI Components

### The Frosted Navbar

Stays pinned to the top of the centered column, utilizing heavy backdrop blurs to maintain context while keeping navigation clean.

```tsx
<nav className="sticky top-0 z-50 w-full max-w-2xl mx-auto px-4 py-3 bg-pearl-50/70 backdrop-blur-xl border-b border-black/5 flex justify-between items-center rounded-b-2xl">
  {/* Nav Content */}
</nav>
```

### The Subtle Proof Row / Avatar Chips

A delicate horizontal stack of tiny overlapping avatars to establish trust in the hero section.

```tsx
<div className="flex items-center gap-2 p-1.5 pr-3 bg-pearl-100 rounded-full border border-black/5 w-max">
  <div className="flex -space-x-2">
    <img src="..." className="w-6 h-6 rounded-full ring-2 ring-pearl-50" />
    <img src="..." className="w-6 h-6 rounded-full ring-2 ring-pearl-50" />
  </div>
  <span className="text-xs font-medium text-graphite-500">Trusted by founders</span>
</div>
```

### Bento Project Module (The Stack)

A highly structured, stacked bento card. Generous radii, soft gray panels, screenshot hero, and structured data below.

```tsx
<article className="w-full bg-pearl-100 rounded-[32px] p-2 border border-black/5 flex flex-col gap-2">
  {/* Top: Screenshot Hero */}
  <div className="w-full h-48 bg-pearl-200 rounded-[24px] overflow-hidden relative">
    <img src="..." className="w-full h-full object-cover" />
    {/* Launch Note Badge */}
    <div className="absolute top-4 left-4 bg-white/90 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-semibold uppercase tracking-wide text-graphite-900 shadow-sm">
      Shipped 2024
    </div>
  </div>

  {/* Bottom: Bento Details Layout */}
  <div className="grid grid-cols-2 gap-2">
    {/* Info Panel */}
    <div className="col-span-2 md:col-span-1 bg-pearl-50 rounded-[24px] p-5 border border-black/5">
      <h3 className="font-display font-bold text-lg text-graphite-900 mb-1">Project Name</h3>
      <p className="font-sans text-sm text-graphite-500 mb-4">Concise outcome-driven body copy goes here.</p>
      
      {/* Tiny Tech Chips */}
      <div className="flex flex-wrap gap-1.5">
        <span className="px-2 py-1 bg-pearl-200 rounded-md text-[10px] uppercase tracking-wide font-medium text-graphite-500">React</span>
        <span className="px-2 py-1 bg-pearl-200 rounded-md text-[10px] uppercase tracking-wide font-medium text-graphite-500">Tailwind</span>
      </div>
    </div>

    {/* Metrics & Testimonial Stack */}
    <div className="col-span-2 md:col-span-1 flex flex-col gap-2">
      {/* Outcome Metrics */}
      <div className="bg-pearl-50 rounded-[24px] p-4 border border-black/5 flex items-center justify-between">
        <span className="font-sans text-sm font-medium text-graphite-500">Conversion</span>
        <span className="font-sans text-xl font-semibold text-graphite-900">+42%</span>
      </div>
      {/* Testimonial Snippet */}
      <div className="bg-pearl-50 rounded-[24px] p-4 border border-black/5 flex-1">
        <p className="font-sans text-xs italic text-graphite-700 leading-relaxed">"Immaculate delivery and incredible spatial awareness."</p>
      </div>
    </div>
  </div>
</article>
```

---

## Component Catalog

### Hero Elements

```tsx
// Confident Value Statement (Hero Heading)
"font-display font-bold text-4xl md:text-5xl tracking-tight text-graphite-900 text-center leading-[1.1]"

// Short Intro Text
"font-sans text-sm md:text-base text-graphite-700 text-center max-w-sm mx-auto mt-4"
```

### Buttons

```tsx
// Fully Rounded Graphite CTA (Primary)
"bg-graphite-900 text-pearl-50 font-sans font-medium text-base rounded-full px-6 py-3 hover:scale-[0.98] transition-transform duration-200 shadow-sm"

// Secondary Action Button (Soft Pearl)
"bg-pearl-100 border border-black/5 text-graphite-900 font-sans font-medium text-base rounded-full px-6 py-3 hover:bg-pearl-200 transition-colors"
```

### Cards & Panels

```tsx
// Soft Gray Panel (Internal Bento Sections)
"bg-pearl-50 rounded-[24px] p-5 border border-black/5"

// Tech Chip
"px-2 py-1 bg-pearl-200 rounded-md text-[10px] uppercase tracking-wide font-medium text-graphite-500"
```

---

## Quality Checklist

* [ ] Is the entire layout strictly confined to a centered mobile-first column (e.g., `max-w-2xl`)?
* [ ] Do primary hero headings use `font-bold` Manrope/Geist?
* [ ] Are all primary buttons pill-shaped (`rounded-full`) and colored in deep graphite?
* [ ] Are background surfaces warm (pearls/soft grays) rather than pure clinical `#FFFFFF`?
* [ ] Does every bento card use generous radii (minimum `rounded-2xl`, ideally `rounded-3xl` or `rounded-[32px]`)?
* [ ] Is spacing handled with Framer-level precision (strict 4px/8px incremental gaps)?
* [ ] Does the project module stack feature distinct internal panels for screenshots, metrics, and testimonials?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm, creamy pearl surfaces and soft grays.
* Deep graphite for high contrast without the clinical edge of pure black.
* Generous, extreme radii on all bento containers.
* Stacked internal bento layouts (grids within grids).
* Subtractive interaction models (scaling down on press).
* Frosted glassmorphism strictly limited to the sticky navbar.

### ✗ Not Allowed

* Horizontal sprawl (elements breaking out of the centered column).
* Sharp corners (`rounded-none` or `rounded-sm`) on cards or main buttons.
* Pure whites (`#FFFFFF`) as massive page backgrounds (lacks tactility).
* Light-weight fonts for hero headings (must be bold).
* Heavy drop shadows (rely on delicate `border-black/5` instead).
* System colors for primary branding (no blue/purple primary buttons—keep it graphite).