Pastel Product Atelier

/pastelProductAtelier
A soft, editorial design system treating UI as crafted objects—favoring art-directed whitespace, pastel atmospheres, and tactile layering for world-class, indie-inspired digital products.
0 likes
0 bookmarks
Jul 9, 2026
Design System Content
# Pastel Product Atelier

A design language for friendly, world-class indie interfaces that blur the line between digital product and crafted physical object.

---

## Philosophy

> "Interface as a crafted studio object; soft in presence, precise in function."

This system rejects generic SaaS clutter in favor of a highly art-directed, editorial approach. Interfaces are treated as beautifully framed product compositions. It relies on generous negative space, soft pastel atmospheres, and tactile surface layering to create an environment that feels inviting, premium, and meticulously crafted.

### Core Beliefs

1. **Art-Directed Whitespace** — Negative space is not an absence of content; it is a physical material that frames the product. The hero should feel incredibly airy and impressive.
2. **Tactile Softness** — Elements should feel like they have mass and physical softness. We use subtle depth, large corner radii, and diffused shadows rather than harsh borders.
3. **Headline Rhythm over Noise** — Minimal navigation allows for large, confident headlines that dictate the pacing of the page, paired with deliberately compact supporting copy.
4. **Studio Lighting** — Color and depth act as environmental lighting. Pastels don't just indicate state; they tint the atmosphere of the canvas.
5. **The Object in Focus** — Product visuals are treated as crafted studio objects—utilizing cropped close-ups, subtle depth of field, and refined framing.

### Strict Rules

* **No Generic SaaS Clutter** — Eliminate heavy sidebars, excessive divider lines, and dense metric dashboards in marketing or framing contexts.
* **No Pure Black or Pure White** — Harsh contrast breaks the illusion of a physical studio space. Use tinted off-whites and deep organic charcoals.
* **No Default UI Shadows** — Shadows must be highly diffused and color-tinted to mimic soft ambient studio lighting, never harsh gray drops.
* **No System-Default Typefaces** — Typography must carry distinct contemporary character (e.g., ABC Diatype, Matter, Roobert, or Untitled Sans).

---

## Color Palette

### Atmospheric Canvas & Ink Scale

The palette replaces stark whites with warm, breathable foundations and deep, softened inks for typography. 

```css
/* Canvas Backgrounds (Warm & Breathable) */
bg-stone-50           /* Primary canvas, warm alabaster (#FAFAF9) */
bg-stone-100/70       /* Secondary surface, editorial feature blocks */
bg-stone-200/50       /* Tactile interactive zones, card bases */
bg-white/60           /* Glass-like surface layers floating above the canvas */

/* Soft Environmental Borders */
border-stone-200/60   /* Gentle structural separation */
border-white/80       /* Inner highlights to simulate physical edge thickness */
border-blush-200      /* Hovered boundary, inviting interaction */

/* The Atmosphere: Pastel Accent Scale */
/* Used for glows, environmental tints, and primary actions */
bg-blush-100          /* Soft surface highlight, secondary interactive state */
bg-blush-400          /* Primary CTA, confident but soft organic action */
text-blush-600        /* Inline links, active localized hooks */

bg-sage-100           /* Success states, calm workflow sequences */
bg-lilac-100          /* Interface detail panels, abstract product backdrops */
bg-dusk-100           /* Proof modules, quiet metadata containment */

/* Ink Hierarchy (Rich, Organic Darks) */
text-stone-900        /* Primary confident headlines, dark espresso/charcoal */
text-stone-700        /* Compact supporting copy, interface labels */
text-stone-500        /* Muted editorial notes, timestamps, subtle captions */
text-stone-400        /* Disabled states, underlying structural hints */

```

### Destructive Actions (Gentle but Clear)

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

```

---

## Typography

Typography drives the emotional resonance of the Atelier. We rely on less-common contemporary typefaces (such as **Roobert**, **Matter**, **ABC Diatype**, or **Untitled Sans**) to create a recognizable indie aesthetic. Headlines are unapologetically large, while supporting text is compact and precisely tuned.

### Font Weights

```css
font-medium      /* Standard body copy, giving it slight physical presence */
font-semibold    /* Interface labels, buttons, precise final CTAs */
font-bold        /* Confident hero headlines, strong editorial rhythm */
/* font-light is avoided — text must feel grounded and physical, not wispy */

```

### Font Size Scale

```css
text-[11px]      /* Tiny editorial captions, workflow sequence steps */
text-xs          /* Compact metadata, subtle interface detail panels (12px) */
text-sm          /* Compact supporting copy, form inputs (14px) */
text-base        /* Generous reading copy, narrative feature blocks (16px) */
text-lg          /* Subdued section headers, introductory lead-ins (18px) */
text-2xl         /* Feature block titles, proof module callouts */
text-4xl         /* Secondary page headlines, bold workflow headers */
text-5xl-7xl     /* Primary airy hero headlines (tightly tracked, rhythmic) */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Massive hero headlines (creates structural unity) */
tracking-tight   /* Large feature titles */
tracking-normal  /* Compact supporting body copy */
tracking-wide    /* Small buttons, gentle UI labels */

normal-case      /* Almost exclusively used to maintain a friendly, human feel */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 6xl | bold | text-stone-900 | tighter | none |
| Supporting Copy | sm | medium | text-stone-700 | normal | none |
| Precise CTA | sm | semibold | text-stone-50 | wide | none |
| Workflow Step | [11px] | semibold | text-stone-500 | wide | uppercase |

---

## Animation System

### Core Philosophy: The Tactile Object

Animations shouldn't feel digital; they should feel like crafted physical objects being placed, pressed, or revealed under a studio light.

### Page Transitions (Soft Float & Focus)

```tsx
initial={{ opacity: 0, scale: 0.98, filter: 'blur(4px)' }}
animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
transition={{ duration: 0.6, ease: [0.32, 0.72, 0, 1] }}

```

### Micro-Interactions (The Physical Press)

Buttons and cards physically compress under interaction rather than shifting colors aggressively.

```tsx
whileHover={{ scale: 1.02, y: -2 }}
whileTap={{ scale: 0.97, opacity: 0.8 }}
transition={{ type: "spring", mass: 0.5, stiffness: 400, damping: 25 }}

```

---

## UI Components

### Studio Diffused Shadow

Cards don't have borders; they float in the pastel atmosphere using a massive, heavily blurred shadow that mimics a softbox light.

```tsx
className="shadow-[0_20px_40px_-15px_rgba(210,200,195,0.4)]"

```

### The Surface Layer (Frosting)

Used for interface detail panels floating over product visuals. It applies a soft frosted glass effect over the pastel background.

```tsx
className="bg-white/40 backdrop-blur-xl border border-white/60 shadow-sm rounded-3xl"

```

### Close-up Product Framing

Product images are treated as art, cropped aggressively inside soft, rounded containers to focus on tactile details.

```tsx
<div className="relative overflow-hidden rounded-[2.5rem] bg-stone-100 aspect-[4/3]">
  <img 
    src="product-detail.jpg" 
    className="absolute inset-0 w-full h-full object-cover scale-110 hover:scale-105 transition-transform duration-1000 ease-out"
  />
</div>

```

---

## Component Catalog

### Cards & Editorial Blocks

Containers are extremely soft, utilizing large corner radii and subtle internal padding to create an airy, uncrowded feel.

```tsx
// Interface Detail Panel
"bg-stone-50/80 backdrop-blur-md rounded-[2rem] p-8 shadow-[0_20px_40px_-15px_rgba(210,200,195,0.4)] border border-white/80"

// Calm Workflow Sequence Card
"bg-sage-50/50 rounded-3xl p-6 transition-all duration-300 hover:bg-sage-50"

```

### Buttons

```tsx
// Primary CTA (Carefully Tuned Scale)
"bg-blush-400 text-stone-900 font-semibold text-sm rounded-full px-6 py-3 shadow-[0_8px_16px_-6px_rgba(244,163,171,0.5)] hover:bg-blush-500 transition-all"

// Secondary Calm Action
"bg-white/60 backdrop-blur-sm text-stone-700 font-semibold text-sm rounded-full px-6 py-3 border border-stone-200/60 hover:bg-white hover:shadow-sm transition-all"

```

### Inputs

```tsx
// Friendly Studio Input
"w-full px-5 py-3.5 rounded-2xl bg-stone-100/50 border-2 border-transparent text-stone-900 placeholder-stone-400 focus:outline-none focus:bg-white focus:border-blush-200 focus:ring-4 focus:ring-blush-50/50 transition-all"

```

### Badges & Proof Modules

```tsx
// Proof Module Pill
"inline-flex items-center gap-2 px-3 py-1 text-xs font-semibold rounded-full bg-dusk-100 text-dusk-800"

// Status Indicator (Soft Glow)
"relative flex h-2 w-2 rounded-full bg-sage-400 shadow-[0_0_8px_2px_rgba(167,203,184,0.6)]"

```

### Layout Sequences

Sections designed for editorial pacing rather than data density.

```tsx
// Minimal Navigation Wrapper
<nav className="flex items-center justify-between px-8 py-6 max-w-6xl mx-auto">
  <div className="font-bold text-xl tracking-tight text-stone-900">Atelier.</div>
  <div className="flex gap-6 items-center text-sm font-medium text-stone-600">
    <a href="#" className="hover:text-stone-900 transition-colors">Studio</a>
    <a href="#" className="hover:text-stone-900 transition-colors">Journal</a>
    <button className="bg-stone-900 text-stone-50 px-5 py-2.5 rounded-full">Get Access</button>
  </div>
</nav>

```

---

## Quality Checklist

* [ ] Is the hero completely devoid of generic dashboard mockups, using instead beautifully framed, cropped studio-style product imagery?
* [ ] Do headlines use heavy, bold weights (`font-bold`) and tight tracking to establish rhythm?
* [ ] Is the supporting text intentionally compact (`text-sm`, `font-medium`) to maximize negative space around it?
* [ ] Are all drop shadows large, diffused, and color-tinted (avoiding default gray/black)?
* [ ] Is the corner radius universally soft (`rounded-2xl`, `rounded-3xl`, `rounded-full`)?
* [ ] Does the page background use a warm off-white or subtle pastel instead of stark `#FFFFFF`?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Heavily rounded corners for all structural elements and imagery.
* Large, confident contemporary typography dictating page structure.
* Soft pastel background zones (`blush`, `sage`, `lilac`) to differentiate workflow sequences.
* Extremely generous padding (e.g., `p-12` or `p-16` inside feature blocks).
* Physical interaction animations (spring scaling, soft opacity fades).

### ✗ Not Allowed

* Stark, thin borders defining complex data tables.
* Primary blue/red/green status colors (always use the pastel atmosphere equivalents).
* `font-light` or wispy typography.
* Widescreen, edge-to-edge complex SaaS interface mockups (always crop, frame, and abstract).
* Sharp `rounded-sm` or square corners on primary containers.