Soft Studio Capsule Stack

/softStudioCapsuleStack
A warm, editorial design system for boutique creator-economy platforms, using tactile neutrals, capsule shapes, curated layouts, and carefully paired typography to evoke calm, exclusivity, and a physical studio atmosphere.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Soft Studio Capsule Stack

A design language for highly curated, boutique creator-economy interfaces.

---

## Philosophy

> "Curation over clutter; warmth over sterility."

This system creates interfaces that feel like a contemporary physical design studio or a beautifully bound editorial magazine. It steps away from the stark, clinical coldness of traditional SaaS and embraces a warm, breathable, and highly focused environment. The aesthetic relies on perfectly constrained widths, rich tactile tones, and the precise juxtaposition of elegant sans-serifs with technical monospaced details. 

### Core Beliefs

1. **The Centered Canvas** — Content is a curated exhibition. Layouts remain strictly narrow and center-aligned, forcing focus and eliminating peripheral noise.
2. **Generous Atmospheric Padding** — Negative space is a physical material. Massive top padding and wide gaps between modules create a sense of calm and premium exclusivity.
3. **Warmth in the Base** — Pure, digital white (`#FFFFFF`) and absolute black (`#000000`) are forbidden. The world is built on chalk, greige, and graphite.
4. **The Capsule Silhouette** — Interactive elements, links, and buttons favor perfectly rounded pill shapes (capsules) that feel inherently touchable and approachable.
5. **The Lacquer Accent** — A single, highly saturated accent—Persimmon Lacquer—acts as a vibrant stamp of intent against the muted, earthy canvas.

### Strict Rules

* **Narrow Viewports Only** — Text blocks and primary interactive modules should never stretch beyond 680px. 
* **Monospace for Metadata** — Handles, timestamps, and tiny technical data must always use a subtle monospaced font to contrast with the editorial primary typeface.
* **Low-Contrast Dividers** — Gridlines and separators should be nearly invisible, relying instead on spatial grouping and elegant, diffused shadows.
* **No Hard Corners** — Everything from profile modules to overarching containers must possess a calculated border radius.
* **Restrained Motion** — Animations should mimic the gentle slide of physical paper or the soft fade of ink drying. No bouncy, hyper-elastic springs.

---

## Color Palette

### The Studio Base

The foundation replaces clinical grayscale with organic, highly sophisticated warm neutrals. The text palette uses deep graphite rather than pure black to reduce eye strain and maintain a softer editorial feel.

```css
/* Backgrounds (Lightest to Darkest) */
bg-warm-white         /* The absolute base canvas (#FCFCFB) */
bg-chalk              /* Secondary panels, floating profile modules (#F7F7F5) */
bg-greige-50          /* Subtle hover states, nested card backgrounds (#F0EFEA) */
bg-greige-100         /* Active selection backgrounds, form input bases */
bg-taupe-200/50       /* Disabled states, skeleton loaders */
bg-taupe-300          /* Solid inactive pills, structural tags */

/* Borders & Dividers */
border-greige-100     /* Ultra-low contrast structural dividers */
border-taupe-200      /* Input borders, focused subtle boundaries */
border-taupe-300      /* Hover states for secondary outlines */

/* The Stamp: Persimmon Lacquer (Accent) */
text-persimmon-600    /* Text links, active tab labels (#E04E39) */
bg-persimmon-600      /* Primary capsule CTAs, notification dots */
border-persimmon-600  /* Active input rings */
bg-persimmon-50       /* Ultra-light tint for active row selections */

/* Text Hierarchy (Graphite Scale) */
text-graphite-900     /* Primary headings, profile names, core statistics (#1C1B1A) */
text-graphite-700     /* Primary body copy, article text, descriptions */
text-taupe-600        /* Subtitles, secondary editorial notes */
text-taupe-500        /* Monospaced metadata, @handles, timestamps */
text-taupe-400        /* Placeholders, disabled text */
```

### Destructive Actions

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

---

## Typography

The typography creates tension by pairing a lush, modern sans-serif (e.g., Söhne, Plus Jakarta Sans, or ABC Diatype) with an engineered, subtle monospaced font for all secondary data. 

### Font Families

```css
font-sans        /* Söhne / Plus Jakarta Sans: For all headings, body, and primary UI */
font-mono        /* Subtle Monospace: For @handles, timestamps, tags, and small metadata */
```

### Font Weights

```css
font-normal      /* Core body copy, long-form editorial text */
font-medium      /* Interactive capsule links, profile names, standard buttons */
font-semibold    /* Section headers, emphasized data points */
/* font-light is avoided to maintain physical presence; font-bold is rarely used */
```

### Font Size Scale

```css
text-[11px]      /* Monospaced timestamps, tags, tiny metadata */
text-xs          /* @handles, localized secondary links (12px) */
text-sm          /* Standard capsule links, body copy in dense modules (14px) */
text-base        /* Editorial paragraph text, primary list items (16px) */
text-lg          /* Subsection titles, prominent profile names (18px) */
text-2xl         /* Content titles, core module headers */
text-4xl         /* Landing page editorial statements, profile hero names */
```

### Letter Spacing & Transforms

```css
tracking-tight   /* Large profile names, display headers */
tracking-normal  /* Default reading text */
tracking-wide    /* Monospaced @handles, tiny metadata */
uppercase        /* Monospaced system tags, small structural metadata */
```

### Hierarchy Examples

| Element | Size | Family | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- | --- |
| Profile Header | 4xl | sans | medium | graphite-900 | tight | none |
| Main Body | base | sans | normal | graphite-700 | normal | none |
| Creator @Handle | xs | mono | medium | taupe-500 | wide | lowercase |
| Capsule Link | sm | sans | medium | graphite-900 | normal | none |
| Timestamp | [11px] | mono | normal | taupe-400 | wide | uppercase |

---

## Animation System

### Core Philosophy: The Editorial Glide

Motion should feel like sliding heavy, high-quality cardstock across a smooth table. No harsh snaps or bouncy overshoots. Transitions are governed by smooth, high-friction easing.

### Page Transitions (Fade and Rise)

```tsx
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }} /* Custom Expo Out */
```

### Micro-Interactions (The Soft Press)

Buttons and capsule links subtly scale down and drop their shadow to emulate a physical press, rather than dramatically shifting colors.

```tsx
whileHover={{ scale: 0.985, y: -1 }}
whileTap={{ scale: 0.97, y: 0, opacity: 0.9 }}
transition={{ duration: 0.2, ease: "easeOut" }}
```

---

## UI Components

### The Narrow Wrapper

Every primary layout must sit within this strictly constrained, center-aligned container with generous vertical breathing room.

```tsx
<main className="max-w-2xl mx-auto px-6 pt-32 pb-24 w-full">
  {children}
</main>
```

### The Profile Module

A signature element for creator identity. Highly rounded, relying on a beautiful, diffused shadow rather than a hard border.

```tsx
<div className="bg-chalk rounded-[2rem] p-8 shadow-[0_8px_30px_rgb(0,0,0,0.03)] flex flex-col items-center text-center mb-12">
  <Avatar className="w-24 h-24 rounded-full mb-4" />
  <h1 className="text-2xl font-medium text-graphite-900 tracking-tight">Studio Name</h1>
  <p className="text-xs font-mono text-taupe-500 mt-2 tracking-wide">@studioname</p>
</div>
```

### Elegant Shadows

Instead of sharp, muddy drop shadows, use expansive, low-opacity ambient shadows to lift profile modules and content blocks softly off the warm white canvas.

```css
shadow-editorial /* shadow-[0_12px_40px_-12px_rgba(28,27,26,0.08)] */
```

---

## Component Catalog

### Capsule Links (Buttons)

Perfectly aligned, fully rounded pill shapes. Used for all primary navigation and external links.

```tsx
// Primary CTA (Persimmon Lacquer)
"w-full bg-persimmon-600 text-warm-white font-medium text-sm rounded-full px-6 py-3.5 hover:bg-persimmon-700 transition-all shadow-sm"

// Standard Link Capsule
"w-full bg-chalk text-graphite-900 font-medium text-sm rounded-full px-6 py-3.5 border border-greige-100 hover:border-taupe-200 hover:shadow-editorial transition-all flex items-center justify-between"
```

### Inputs

Soft, inviting, and spacious. No harsh focus rings; instead, a gentle shift in border tone.

```tsx
// Newsletter / Contact Input
"w-full px-5 py-3.5 rounded-2xl bg-greige-50 border border-transparent text-graphite-900 placeholder-taupe-400 focus:outline-none focus:bg-chalk focus:border-taupe-200 transition-all text-sm"
```

### Tags & Metadata Pills

Used for categories, statuses, or technical platform labels.

```tsx
// Monospaced Category Tag
"px-3 py-1 text-[11px] font-mono tracking-wide rounded-full bg-greige-100 text-taupe-600 border border-greige-200"

// Highlighted Tag (Using Accent)
"px-3 py-1 text-[11px] font-mono tracking-wide rounded-full bg-persimmon-50 text-persimmon-600 border border-persimmon-100"
```

### Dividers & List Spacing

Lines are kept to an absolute minimum. Separation is achieved through white space. When a line is necessary, it is incredibly faint.

```tsx
// Ultra-faint separator
<hr className="w-full border-t border-greige-100 my-8" />
```

---

## Quality Checklist

* [ ] Is the primary layout container strictly constrained (e.g., `max-w-2xl`) and center-aligned?
* [ ] Is there massive, generous padding at the top of the viewport (minimum `pt-24` or `pt-32`)?
* [ ] Are all @handles, timestamps, and tiny UI labels strictly utilizing the secondary `font-mono` typeface?
* [ ] Are all buttons and external links styled as perfectly rounded capsules (`rounded-full`)?
* [ ] Are the backgrounds using the warm base (`bg-warm-white`, `bg-chalk`) instead of absolute `#FFFFFF`?
* [ ] Is **Persimmon Lacquer** the only highly saturated color on the screen?
* [ ] Are the shadows exceptionally soft, diffused, and low-opacity (`rgba(..., 0.04 to 0.08)`)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm whites, chalks, and greige for all canvas backgrounds.
* High-friction, slow-easing animations that feel heavy and editorial.
* Generous vertical spacing (`gap-6`, `gap-8`) between capsule links.
* Monospaced typography for all secondary metadata.
* Fully rounded radii (`rounded-full`) for interactive elements and deep radii (`rounded-[2rem]`) for profile modules.

### ✗ Not Allowed

* Pure black (`#000000`) or pure white (`#FFFFFF`) backgrounds.
* Edge-to-edge full-width containers for text or primary links.
* Sharp square corners (`rounded-none`) on cards, buttons, or images.
* Generic blue or green CTAs (stick strictly to Persimmon Lacquer).
* Multiple typefaces fighting for attention (restrict strictly to one clean sans and one mono).