Soft Studio Maker Bento

/softStudioMakerBento
A minimal, monochromatic design system for indie maker portfolios. Focuses on soft tactility, perfect spacing, centered layouts, and neutral palettes to elevate project work with premium, gallery-like presence.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Soft Studio Maker Bento Design System

A design language for minimal, world-class indie maker portfolios.

---

## Philosophy

> "The canvas is quiet; the craft speaks volumes."

This system creates portfolios that feel like a high-end, independent design studio. It is stripped of visual clutter and colorful distractions, serving as a pristine gallery for digital craftsmanship. The design relies on soft tactility, impeccable spacing, and monochromatic depth to convey premium quality without shouting.

### Core Beliefs

1. **The Work is the Color** — The interface itself remains entirely neutral. Any vibrant color comes strictly from the project imagery.
2. **Soft Tactility** — Unlike rigid brutalism or hyper-crisp corporate UI, this system uses fully rounded geometry, delicate borders, and soft shadows to feel human and inviting.
3. **Centered Confidence** — Layouts flow down a central axis, embracing a mobile-first philosophy that scales effortlessly to desktop without losing its focused, single-column strength.
4. **Impeccable Spacing** — Elements breathe. The relationship between an image, its title, and its description is governed by perfect rhythmic spacing.

### Strict Rules

* **No Colorful Buttons** — Actions are defined by contrast and shape, never by bright colors. Call-to-actions are strictly charcoal capsules.
* **No Sharp Corners on Interactivity** — Buttons, avatars, and focus states must be fully rounded (capsules or circles). Project cards feature large, gentle border radii.
* **Typographic Contrast is Structural** — Headlines must be bold and geometric; body text must be calm and open. 
* **Centered By Default** — The primary narrative (Nav → Avatar → Hero → CTAs) must remain perfectly center-aligned to command attention.

---

## Color Palette

### The Studio Scale

The palette abandons harsh pure blacks and clinical grays, favoring natural, warm, and pearl-like neutral tones.

```css
/* Backgrounds (Canvas & Containers) */
bg-white              /* Main global canvas backdrop (#ffffff) */
bg-pearl              /* Subtle card backgrounds, isolated bento zones (#fcfcfc) */
bg-pale-gray          /* Avatar backdrops, image placeholders, hover zones (#f3f4f6) */
bg-warm-stone/20      /* Delicate dividers, inactive structural lines (#d6d3d1 opacity) */

/* Borders & Shadows */
border-warm-stone/30  /* Delicate card borders, minimal nav separation */
border-pale-gray      /* Inner image borders, subtle structural highlights */
shadow-soft-studio    /* 0 4px 20px -2px rgba(24, 24, 27, 0.05) — airy, barely-there depth */

/* Interactive & Actions (The Capsules) */
bg-charcoal           /* Primary CTA capsules, active state pills (#18181b) */
bg-deep-graphite      /* Hover states for primary CTAs (#27272a) */
bg-white              /* Secondary CTA capsules (paired with charcoal border) */

/* Text Hierarchy */
text-deep-graphite    /* Bold hero statements, main project titles (#27272a) */
text-charcoal         /* Secondary headings, active navigation text (#18181b) */
text-warm-stone-dark  /* Calm explanatory text, short project descriptions (#78716c) */
text-pale-gray-dark   /* Metadata, footer links, passive elements (#9ca3af) */
text-white            /* Text inside primary charcoal capsules */

```

---

## Typography

The typographic system relies on a high-contrast pairing: a bold, assertive geometric sans for headings, supported by a highly legible, calm sans for descriptions.

### Font Families

```css
font-headline    /* Manrope or Geist — Used strictly for Hero and Project Titles */
font-body        /* DM Sans or Inter — Used strictly for explanatory text and navigation */
```

### Font Weights

```css
font-normal      /* DM Sans/Inter: Calm explanatory text, short descriptions */
font-medium      /* DM Sans/Inter: Capsule text, minimal nav links, metadata */
font-bold        /* Manrope/Geist: Confident hero statements, project names */
/* font-light and font-black are intentionally omitted to maintain studio balance */

```

### Font Size Scale & Line Height

```css
/* Body & UI (DM Sans / Inter) */
text-sm leading-relaxed     /* Secondary descriptions, footer links (14px) */
text-base leading-relaxed   /* Calm explanatory text under project names (16px) */
text-base leading-none      /* CTA Capsule text, centered perfectly */

/* Headlines (Manrope / Geist) */
text-xl leading-snug        /* Project names in the bento rows */
text-3xl leading-tight      /* Mobile hero statement */
text-5xl leading-[1.1]      /* Desktop confident hero statement — balanced line-height */

```

---

## Layout Structure

The architecture of the Soft Studio Maker Bento is strictly defined. Across all breakpoints, the page flows in a continuous, perfectly centered vertical rhythm.

1. **Slim Minimal Nav:** Floating or fixed at the top. Simple text links.
2. **Maker Avatar:** Perfectly circular, resting directly above the hero statement.
3. **Confident Hero Statement:** Large, bold, centered text. Restricted max-width for perfect line wrapping.
4. **CTA Pair:** Side-by-side capsules (Primary Charcoal, Secondary White).
5. **Bento-like Project Rows:** Stacked elegant cards, growing to a balanced grid on desktop.

---

## Animation System

### Core Philosophy: Gentle Elevation

Animations should feel like physical objects being gently picked up or settling into place. No sudden snaps or frantic bouncing.

### Initial Load (The Calm Reveal)

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1], staggerChildren: 0.1 }}

```

### Hover States (Soft Lift)

Hovering a project card gently lifts it while slightly deepening the soft shadow.

```tsx
whileHover={{ y: -4, scale: 0.995 }}
transition={{ duration: 0.4, ease: "easeOut" }}
className="hover:shadow-[0_12px_30px_-4px_rgba(24,24,27,0.08)]"

```

---

## UI Components

### Soft Shadows & Delicate Borders

Components rely on the interplay between a 1px soft border and a barely perceptible shadow, creating a container that looks etched into the pearl background.

```tsx
className="bg-white rounded-[24px] border border-warm-stone/20 shadow-[0_4px_24px_-4px_rgba(24,24,27,0.04)]"

```

### The CTA Pair

Actions are fully rounded capsules. They sit perfectly centered below the hero.

```tsx
<div className="flex items-center justify-center gap-4 mt-8">
  <button className="bg-charcoal text-white font-body font-medium text-base px-6 py-3 rounded-full hover:bg-deep-graphite transition-colors">
    View Projects
  </button>
  <button className="bg-white text-charcoal font-body font-medium text-base px-6 py-3 rounded-full border border-warm-stone/40 shadow-sm hover:bg-pearl transition-all">
    About Me
  </button>
</div>

```

---

## Component Catalog

### The Avatar

```tsx
// Maker Avatar
"w-20 h-20 rounded-full border border-pale-gray shadow-sm mx-auto mb-6 object-cover bg-pale-gray"

```

### Project Bento Card

A minimal, elegant enclosure. Text rests at the bottom with impeccable spacing.

```tsx
<div className="bg-white rounded-[28px] border border-warm-stone/20 shadow-[0_8px_30px_-6px_rgba(24,24,27,0.04)] overflow-hidden transition-all duration-400 hover:-translate-y-1 hover:shadow-[0_12px_40px_-8px_rgba(24,24,27,0.08)] p-3">
  {/* Single large rounded image */}
  <div className="w-full aspect-[4/3] rounded-[20px] bg-pale-gray overflow-hidden mb-5">
    <img src="/project.jpg" alt="Project" className="w-full h-full object-cover" />
  </div>
  
  {/* Project Typography */}
  <div className="px-3 pb-3 text-left">
    <h3 className="font-headline font-bold text-xl text-deep-graphite mb-1">
      Project Name
    </h3>
    <p className="font-body font-normal text-base text-warm-stone-dark leading-relaxed line-clamp-2">
      A short, calm explanatory text detailing the project's core value and scope.
    </p>
  </div>
</div>

```

### Slim Minimal Nav

```tsx
<nav className="w-full max-w-max mx-auto px-6 py-3 rounded-full border border-warm-stone/20 bg-white/80 backdrop-blur-md shadow-sm flex items-center gap-6 mt-6 text-sm font-body font-medium text-charcoal">
  <a href="#" className="hover:text-warm-stone-dark transition-colors">Work</a>
  <a href="#" className="hover:text-warm-stone-dark transition-colors">Profile</a>
  <a href="#" className="hover:text-warm-stone-dark transition-colors">Contact</a>
</nav>

```

---

## Quality Checklist

* [ ] Are all buttons and interactive tabs fully rounded (capsule/pill shape)?
* [ ] Is the hero headline using bold Manrope or Geist with a balanced line-height?
* [ ] Are the project cards utilizing a single large image with generous internal padding before the image begins?
* [ ] Have you completely removed all vibrant UI colors (blue, purple, green, etc.) in favor of charcoal, graphite, and warm stone?
* [ ] Is the main layout architecture strictly centered and mobile-first?
* [ ] Do the project descriptions use DM Sans or Inter with `font-normal` and `text-warm-stone-dark` to create a calm reading experience?
* [ ] Are the box-shadows soft and delicate rather than harsh, dark, or muddy?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Fully rounded pills for all buttons, tags, and interactive chips.
* Warm white, pearl, and pale gray layered backgrounds.
* Deep charcoal and graphite for emphasis and high-contrast actions.
* Generous padding (e.g., `p-3` or `p-4` inside a card *before* the inner image).
* Perfectly centered narrative flow from top to bottom.

### ✗ Not Allowed

* Standard slightly-rounded buttons (e.g., 4px or 8px border-radius). CTAs must be fully round.
* Colorful CTA buttons (no bright blue "Hire Me" buttons).
* Harsh 1px solid black borders. Always use a softened warm stone or pale gray.
* Complex grids with tiny metadata cells. The bento layout should feature large, breathable images.
* Left-aligned hero sections on desktop. The spine of the layout must remain centered.