Clean Smoothie Studio System

/cleanSmoothieStudioSystem
A minimal, gallery-inspired design system treating wellness products as premium art objects. Its airy, pastel foundation, high-contrast type, and curated structure evoke a serene, high-end digital studio experience.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Clean Smoothie Studio System

A design language for minimal, studio-style interfaces where products are treated like premium wellness objects.

---

## Philosophy

> "Nourishment as an art form; simplicity as the ultimate sophistication."

This system creates digital environments that feel like high-end wellness studios or modern physical galleries. The design is airy, immaculate, and highly curated, utilizing expansive pastel canvases to elevate smoothies and ingredients into premium lifestyle objects. 

### Core Beliefs

1. **Architecture over decoration** — Massive typographic scale and dramatic product photography create structure. We do not use bounding boxes or decorative elements.
2. **Products are sculptures** — Ingredients and beverages are isolated or presented in high-fidelity full-bleed imagery, demanding attention and respect.
3. **Purity of canvas** — The background remains a flat, soothing pastel. Shadows, gradients, and overlapping clutter are strictly prohibited.
4. **Confident rhythm** — The page flows like a curated exhibition: dramatic entrance, fluid carousel browsing, and alternating gallery walls of imagery and centered text.
5. **Grounded interactions** — Primary actions are anchored by heavy, dark charcoal elements that provide visual weight and grounding against the floating pastel canvas.

### Strict Rules

* **Single Pastel Foundation** — The core background is consistently "Oat-Pink" (or alternating Melon Cream/Pale Pineapple). Gradients are never used.
* **Avenir Next Only** — The entire typographic system relies on the pristine, balanced geometry of Avenir Next. No secondary typefaces.
* **Charcoal Anchors** — Buttons and interactive endpoints must use dark charcoal to create a definitive endpoint for the eye.
* **No Visual Noise** — Drop shadows, complex borders, and overlapping translucent layers are forbidden. Separation is achieved through soft gray/off-white alternating panels.
* **Generous Spacing** — Navigation items and layout blocks must possess massive breathing room. 

---

## Color Palette

### The Studio Environment Scale

The palette relies on a singular, soothing pastel base ("Oat-Pink") contrasted with alternating pure neutrals and punctuated by stark, Off-Black typography and Charcoal interactive anchors.

```css
/* Core Canvas (The Studio Background) */
bg-oat-pink           /* Primary environmental canvas (#F9F3F1) */
bg-melon-cream        /* Secondary pastel variant for isolated carousels (#FDF6E3) */
bg-pale-pineapple     /* Tertiary pastel highlight for specific seasonal items (#FBF9E6) */

/* Alternating Structural Panels */
bg-off-white          /* Clean alternating sections, text-heavy blocks (#FAFAFA) */
bg-soft-gray          /* Muted alternating sections, testimonial backdrops (#F0F0F0) */

/* Borders & Dividers */
border-soft-gray      /* Ultra-thin structural lines when absolutely necessary */
border-charcoal-900   /* High-contrast framing for select editorial images */

/* The Anchor: Dark Charcoal (Primary Interactive) */
bg-charcoal-900       /* Primary call-to-action buttons, footer anchors (#1A1A1A) */
text-oat-pink         /* Button labels resting inside Charcoal buttons */
text-melon-cream      /* Button label alternative for secondary CTAs */

/* Text Hierarchy (High Contrast Off-Blacks) */
text-off-black        /* Hero headlines, primary section titles (#0A0A0A) */
text-charcoal-800     /* Body copy, centered text sections (#222222) */
text-charcoal-500     /* Precise captions, form descriptions, metadata (#666666) */
text-charcoal-300     /* Disabled form inputs, subtle location hints (#A3A3A3) */

```

### Destructive Actions

```css
/* Kept minimal and grounded */
bg-off-white
border-charcoal-900
text-off-black
hover:bg-soft-gray

```

---

## Typography

The system exclusively utilizes **Avenir Next** to maintain a balanced, professional, and highly legible aesthetic. The hierarchy relies on extreme shifts in scale, contrasting oversized, dramatic headlines with precise, technical captions.

### Font Weights

```css
font-light       /* Generous navigation links, large architectural quotes */
font-normal      /* Core body copy, clean form typography, precise captions */
font-medium      /* Section titles, primary navigation active states, button labels */
/* Demi/Bold weights are excluded to maintain the studio's airy aesthetic */

```

### Font Size Scale

```css
text-[10px]      /* Precise captions beneath product images, fine print */
text-[12px]      /* Clean form input labels, opening hours metadata */
text-[14px]      /* Standard body copy, location details, testimonial text */
text-[16px]      /* Button labels (always pastel colored inside charcoal) */
text-[24px]      /* Medium section titles, carousel item names */
text-[32px]      /* Testimonial quotes, centered text callouts */
text-[80px]      /* Hero headlines (mobile/tablet fallback) */
text-[104px]     /* Hero headlines (desktop) - oversized, architectural */

```

### Letter Spacing & Alignment

```css
tracking-tight   /* Exclusively for the 80-104px hero headlines */
tracking-normal  /* All body copy and form typography */
tracking-wide    /* Navigational spacing and precise captions */
text-center      /* Mandatory for alternating text-only gallery sections */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Spacing |
| --- | --- | --- | --- | --- |
| Hero Headline | 80-104px | normal | text-off-black | tight |
| Section Titles | 24px | medium | text-off-black | normal |
| Navigation Links| 14px | light | text-charcoal-800| wide (gap-12)|
| Captions | 10px | normal | text-charcoal-500| wide |
| Button Labels | 16px | medium | text-oat-pink | normal |

---

## Animation System

### Core Philosophy: The Unhurried Gallery

Movement should feel like walking through a calm, premium studio. Transitions are fluid, slow, and heavily eased. No fast snaps or bouncy springs.

### Page Flow & Scroll (Smooth Reveal)

```tsx
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
viewport={{ once: true, margin: "-100px" }}

```

### Carousel Glide

Menu items slide with a heavy, physical momentum, settling softly into place without rubber-banding.

```tsx
drag="x"
dragConstraints={{ left: -1000, right: 0 }}
transition={{ type: "tween", ease: "circOut", duration: 0.6 }}

```

---

## Page Architecture & Layout

The structural flow of the page is strictly defined to ensure a rhythmic, editorial experience.

### 1. The Architectural Hero

Spacious and dramatic. A massive typographic value proposition on one side, perfectly counter-balanced by a standalone, high-fidelity product image on the other.

```tsx
<section className="min-h-screen bg-oat-pink flex items-center justify-between px-12 lg:px-24">
  <div className="w-1/2">
    <h1 className="font-avenir text-[80px] lg:text-[104px] tracking-tight text-off-black leading-[0.9]">
      Pure. Form.
    </h1>
  </div>
  <div className="w-1/2 flex justify-end">
    <img src="smoothie-hero.webp" className="h-[80vh] object-contain drop-shadow-none" />
  </div>
</section>

```

### 2. Polished Carousel (Menu)

Follows immediately after the hero. A horizontal gallery of wellness objects.

```tsx
<section className="py-32 bg-off-white overflow-hidden">
  <h2 className="font-avenir font-medium text-[24px] text-off-black px-12 mb-16">
    The Collection
  </h2>
  <Carousel className="flex gap-16 px-12 overflow-x-auto snap-x">
    {/* Product Cards */}
  </Carousel>
</section>

```

### 3. Alternating Sections Array

The rest of the experience follows a strict alternating rhythm:
1. **Full-Bleed Photography:** Immersive lifestyle or ingredient close-up.
2. **Centered Text Sections:** Highly spacious, philosophical brand statements.
3. **Operational Modules:** Location, Dine-in/Order options, Testimonials, Opening Hours.
4. **Final CTA:** Massive Charcoal grounding block.

---

## Component Catalog

### Navigation

Generous spacing, practically invisible until needed.

```tsx
<nav className="w-full flex justify-between items-center px-12 py-8 absolute top-0 z-50">
  <div className="text-off-black font-medium text-[24px]">Brand</div>
  <ul className="flex gap-12 text-[14px] font-light tracking-wide text-charcoal-800">
    <li className="hover:text-off-black transition-colors">Menu</li>
    <li className="hover:text-off-black transition-colors">Studio</li>
    <li className="hover:text-off-black transition-colors">Visit</li>
  </ul>
</nav>

```

### Buttons

Heavy, grounding anchors. The only dark objects on the canvas.

```tsx
// Primary CTA (Dark Charcoal with Pastel Label)
"bg-charcoal-900 text-oat-pink font-avenir font-medium text-[16px] px-8 py-4 rounded-full hover:bg-off-black transition-colors"

// Secondary Outline (Minimal)
"border border-charcoal-900 text-off-black font-avenir font-medium text-[16px] px-8 py-4 rounded-full hover:bg-soft-gray transition-colors"

```

### Menu Cards (Carousel Items)

Treated as premium objects. No visible card boundaries; the product sits directly on the background canvas.

```tsx
<article className="flex flex-col items-center min-w-[300px] snap-center">
  <div className="h-[400px] w-full bg-soft-gray mb-8 flex items-center justify-center overflow-hidden">
    <img src="product.webp" className="h-[90%] object-contain hover:scale-105 transition-transform duration-700 ease-out" />
  </div>
  <h3 className="font-avenir font-medium text-[24px] text-off-black mb-2">Melon Matcha</h3>
  <p className="font-avenir font-normal text-[10px] text-charcoal-500 tracking-wide uppercase">
    Antioxidant • 16oz
  </p>
</article>

```

### Clean Form Typography

Used for dine-in/order options and contact sections. Utilitarian, sharp, and flat.

```tsx
// Input Wrapper
"w-full border-b border-charcoal-300 bg-transparent py-4 text-[14px] font-avenir text-off-black placeholder:text-charcoal-300 focus:outline-none focus:border-charcoal-900 transition-colors"

// Form Label
"font-avenir font-normal text-[12px] text-charcoal-500 mb-1 block uppercase tracking-wide"

```

---

## Quality Checklist

* [ ] Is the primary typeface strictly Avenir Next across the entire application?
* [ ] Does the hero headline hit the 80–104px size range with tight tracking?
* [ ] Are the primary buttons Dark Charcoal with Oat-Pink/Pastel labels?
* [ ] Is the navigation spacing exceptionally generous (e.g., minimum 48px/gap-12 between links)?
* [ ] Does the page structure rigorously alternate between full-bleed imagery and centered text?
* [ ] Are all drop shadows, opaque overlays, and gradients completely removed?
* [ ] Are precise captions mapped correctly to the 10px size with wide tracking?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Singular, flat pastel backgrounds (Oat-Pink, Melon Cream).
* Off-black typography for pure legibility and high contrast.
* Generous, almost excessive whitespace surrounding typography.
* Full-bleed, edge-to-edge structural photography.
* Soft gray or off-white solid panels for section differentiation.

### ✗ Not Allowed

* Gradients of any kind (radial, linear, or mesh).
* Bounding boxes or structural cards with borders for products.
* Drop shadows on products, buttons, or text.
* Secondary typefaces or serif fonts.
* Vibrant, highly saturated UI accent colors (e.g., system reds, blues, or greens).