Founder Shelf Capsule Portfolio

/founderShelfCapsulePortfolio
A curation-first design system for portfolio sites, modeling each project as a physical object on a soft studio shelf through single-column layouts, capsule cards, graphite accents, and stone-toned neutrals.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Founder Shelf Capsule Portfolio Design System

A design language for curated, object-oriented portfolio interfaces.

---

## Philosophy

> "Projects are not mere data; they are crafted objects resting on a soft studio shelf."

This system treats digital interfaces as physical exhibitions. By utilizing a strictly single-column, center-aligned layout, each project commands total attention like a physical product displayed on a premium studio shelf. The design relies on soft ambient lighting, sophisticated stone-toned neutrals, and sweeping capsule geometries rather than harsh lines or aggressive grid structures.

### Core Beliefs

1. **Curation over Density** — A single-column layout enforces narrative pacing. Projects are stacked vertically, allowing the user to examine one masterpiece at a time without peripheral distraction.
2. **Subtle Tactility** — Depth is achieved through delicate, diffuse shadows and fine, barely-there borders that mimic the soft edge of an object catching studio light.
3. **Graphite as Gravity** — In the absence of loud accent colors, near-black graphite serves as the visual anchor. Call-to-actions draw the eye through high contrast and perfect curvature rather than saturated hues.
4. **Capsule Geometry** — Sharp corners are eliminated. Fully rounded pills and large-radius cards create an approachable, highly polished aesthetic that feels good to "touch."
5. **Editorial Quietness** — Metadata, dates, and categories exist as whispered editorial labels—present when inspected, but never competing with the hero visuals.

### Strict Rules

* **Single Column Only** — Even on ultra-wide desktop displays, the layout remains a centered, stacked column. No split-screen grids, no masonry layouts.
* **No Loud Colors** — Buttons and interactive states rely strictly on the graphite/near-black palette. No blue, green, or red accents.
* **Large Radii Only** — Primary cards must use large, sweeping border radii (e.g., 24px+). CTAs must be perfectly fully rounded capsules.
* **Inner Highlights for CTAs** — Dark buttons must feature a subtle, semi-transparent white inner top-border to mimic a light reflection on a physical resin object.
* **Headline Weight Restraint** — Hero headlines must be set in a confident Semibold. Avoid ultra-thin or ultra-black weights.

---

## Color Palette

### The Studio Stone Scale

The palette is entirely devoid of saturated colors, drawing inspiration from raw materials: pearl, chalk, warm stone, and graphite. 

```css
/* Canvas & Containers (Lightest to Darkest) */
bg-stone-50           /* Off-white: Main canvas/shelf background (#fafaf9) */
bg-white/80           /* Pearl: Translucent project card backgrounds */
bg-stone-100          /* Chalk Gray: Subtle hover states, secondary zones (#f5f5f4) */
bg-stone-200/50       /* Warm Stone: Inactive badge backgrounds, structural chips */
bg-stone-300          /* Deep Stone: Active chip states, borders for emphasis */

/* Borders & Dividers */
border-stone-100      /* Ultra-fine card boundaries */
border-stone-200/60   /* Default structural capsule borders */
border-stone-300      /* Focused form inputs, hover borders */

/* The Anchor: Graphite & Near-Black (Accent Replacement) */
bg-stone-900          /* Primary call-to-action capsules, dark tooltips (#1c1917) */
text-stone-900        /* Hero headlines, primary interactive focus */
bg-black              /* Deepest contrast moments, alternate CTA hovers */
border-stone-900      /* High-contrast active states */

/* Text Hierarchy (Editorial Contrast) */
text-stone-900        /* Primary headings, active project titles (Graphite) */
text-stone-700        /* Secondary body copy, project descriptions */
text-stone-500        /* Warm stone metadata, launch dates, minimal labels */
text-stone-400        /* Ghosted text, placeholders, subtle metric titles */
text-stone-50         /* Near-white text reserved strictly for inside Graphite CTAs */

```

### Inner Highlights (The Resin Effect)

```css
/* Applied to Near-Black CTAs */
shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]
```

---

## Typography

The system utilizes a dual-font approach. Headings require a highly structured, confident neo-grotesque (Helvetica, Geist, or Manrope), while small metadata and descriptions use a softer, highly legible sans-serif (DM Sans or Inter).

### Font Families

```css
font-sans-hero        /* Helvetica, Geist, or Manrope (Headings only) */
font-sans-body        /* DM Sans or Inter (Descriptions, metrics, labels) */
```

### Font Weights

```css
font-normal      /* DM Sans/Inter: Standard descriptions, editorial captions */
font-medium      /* DM Sans/Inter: Capsule buttons, testimonial names, metrics */
font-semibold    /* Helvetica/Geist: Hero headlines, project titles - MANDATORY */
/* font-light and font-bold are forbidden to maintain an even, curated texture */
```

### Font Size Scale

```css
text-[10px]      /* Tiny category badges, micro editorial labels */
text-xs          /* Launch dates, compact metric titles (12px) */
text-sm          /* Project descriptions, testimonial copy, CTA text (14px) */
text-base        /* Standard paragraph blocks, secondary panel titles (16px) */
text-xl          /* Sub-project titles, testimonial highlights (20px) */
text-2xl         /* Standard project module headlines */
text-4xl-5xl     /* Page-level Hero headlines (Centered) */
```

### Hierarchy Examples

| Element | Family | Size | Weight | Color | Formatting |
| --- | --- | --- | --- | --- | --- |
| Page Hero | Geist | 5xl | semibold | stone-900 | tight tracking |
| Project Title | Geist | 2xl | semibold | stone-900 | tight tracking |
| Description | DM Sans | sm | normal | stone-700 | normal tracking |
| CTA Capsule | DM Sans | sm | medium | stone-50 | rounded-full |
| Launch Date | DM Sans | xs | medium | stone-500 | uppercase, wide |

---

## Animation System

### Core Philosophy: The Gentle Placement

Movements should emulate setting a physical object down onto a felt-lined studio shelf. Animations are slow, soft, and weighted.

### Module Reveal (Soft Lift)

```tsx
initial={{ opacity: 0, y: 24, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }} /* Custom spring-like easing */
```

### Micro-Interactions (The Tactile Press)

Buttons do not change color violently; they physically depress into the canvas while maintaining their inner highlight.

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

---

## UI Components

### Layout Container (The Studio Shelf)

The layout must strictly prevent components from stretching horizontally. It acts as a pedestal.

```tsx
<div className="w-full max-w-2xl mx-auto flex flex-col items-center space-y-12 py-24">
  {/* Stacked capsules go here */}
</div>
```

### The Primary CTA Capsule

Fully rounded, near-black, with a subtle top inner reflection.

```tsx
<button className="rounded-full bg-stone-900 text-stone-50 font-sans-body font-medium text-sm px-6 py-2.5 shadow-[inset_0_1px_1px_rgba(255,255,255,0.18),0_2px_4px_rgba(0,0,0,0.05)] hover:bg-black transition-colors">
  View Live Project
</button>
```

### The Project Module (Capsule Panel)

A large-radius card that houses the screenshot and editorial data. Features a delicate ambient shadow and a fine border.

```tsx
<article className="w-full bg-white rounded-[32px] p-2 border border-stone-100 shadow-[0_8px_32px_-12px_rgba(0,0,0,0.04)]">
  {/* Internal screenshot wrapper */}
  <div className="w-full aspect-[4/3] bg-stone-50 rounded-[24px] overflow-hidden">
    <img src="..." className="object-cover w-full h-full" />
  </div>
  
  {/* Metadata Row */}
  <div className="px-6 py-5 flex flex-col gap-4">
    {/* Module Content */}
  </div>
</article>
```

---

## Component Catalog

### Editorial Chips & Badges

Minimal, deeply rounded chips for metadata without drawing focus away from the main project screenshot.

```tsx
// Tiny Category Badge
"px-2.5 py-1 rounded-full bg-stone-100 text-stone-600 font-sans-body text-[10px] font-medium tracking-wide uppercase"

// Testimonial Chip (Floating avatar + quote)
"flex items-center gap-3 p-1.5 pr-4 rounded-full bg-stone-50 border border-stone-200/50"

// Compact Metric Row Item
"flex flex-col items-start gap-0.5"
// Metric Value: "font-sans-hero font-semibold text-stone-900 text-base"
// Metric Label: "font-sans-body font-normal text-stone-400 text-xs uppercase"
```

### Structure Hierarchy (Inside Project Module)

1.  **Header:** Launch Date (xs) + Category Badge ([10px]).
2.  **Media:** Edge-to-edge (within its inner padding) screenshot with subtle inner rounding.
3.  **Body:** Project Title (2xl, Semibold) + Project Description (sm, Normal).
4.  **Footer:** Compact Metric Row + Testimonial Chip + CTA Capsule aligned centrally or balanced at the bottom.

---

## Quality Checklist

* [ ] Is the layout strictly a single centered column on all screen sizes?
* [ ] Are there zero loud colors (no blues, greens, reds) used for buttons or badges?
* [ ] Do primary CTA buttons have fully rounded pill shapes (`rounded-full`) and an inner white highlight shadow?
* [ ] Are all hero headlines set in Helvetica, Geist, or Manrope at a `semibold` weight?
* [ ] Do the project cards use exceptionally large border radii (e.g., `rounded-[32px]`) with delicate, hyper-diffused shadows?
* [ ] Are dates, categories, and metrics treated as tiny, muted editorial labels rather than dominant UI elements?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm off-whites, chalk grays, pearls, and pure graphite.
* Fully rounded buttons and extremely large-radius container cards.
* Centered, single-column vertical stacking with generous `space-y` gaps.
* Subtle inner top-shadows on dark buttons to mimic physical lighting.
* Mixing a confident grotesque heading font with a soft, legible sans-serif body font.

### ✗ Not Allowed

* Split grids, masonry layouts, or side-by-side bento boxes on desktop.
* Colored CTAs, colored status dots, or saturated background highlights.
* Thin/Light or Black/ExtraBold font weights for main headlines.
* Sharp corners (`rounded-sm` or `rounded-none`) on structural panels or interactive buttons.
* Heavy, dark, or sharp drop shadows. Depth must be ambient and soft.