Pastel Smoothie Bar Minimalism

/pastelSmoothieBarMinimalism
A fresh, vibrant design system for premium food brands, combining oversized Satoshi typography, a continuous pastel canvas, and bold charcoal anchors to make product photography the clear focal point for effortless B2C user journeys.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Pastel Smoothie Bar Minimalism Design System

A design language for clean, high-impact, and appetizing B2C food interfaces.

---

## Philosophy

> "Freshness requires no filter; flavor speaks through color."

This system creates digital environments that feel like a modern, high-end juice bar—refreshing, vibrant, and effortlessly uncluttered. The design relies on a single, unbroken pastel canvas to make vibrant product photography pop, utilizing bold, approachable geometry to guide the user from discovery to purchase without friction.

### Core Beliefs

1. **The Continuous Canvas** — The entire interface lives on a single pastel background. No section breaks, no alternating background bands, and absolute continuity.
2. **Impact Through Scale** — Oversized, confident typography creates structure without needing boxes, lines, or borders.
3. **Product as the Hero** — Visual noise is eliminated entirely so that highly styled, fresh fruit and smoothie photography becomes the sole focal point. 
4. **Friendly but Polished** — The design feels premium but accessible. Sharp contrast grounds the soft aesthetic.
5. **Bold Anchors** — Interactions are grounded by very dark, weighty charcoal elements that provide a tactile grounding to the floaty pastel world.

### Strict Rules

* **Satoshi Only** — Satoshi is the exclusive typeface. Its polished, friendly geometry defines the brand's visual structure.
* **No Gradients** — Backgrounds must be pure, solid color fields. Shadows and gradients are strictly forbidden on UI elements.
* **Charcoal over Black** — Pure black (#000000) is too harsh. Use off-black/very dark charcoal for all primary typography and primary buttons.
* **Inverted Button Text** — Primary charcoal buttons must always use the canvas's pastel color for their text, tying the component back to the environment.
* **No UI Drop Shadows** — The only element permitted to cast a shadow is isolated product photography to create depth against the flat canvas.

---

## Color Palette

### The Continuous Canvas & Anchors

The palette relies on a base pastel canvas (Mango, Mint, or Peach) anchored by heavy charcoal UI elements. There are no secondary accent colors; the product photography provides all necessary chromatic variety.

```css
/* The Continuous Canvas (Choose One per theme/page) */
bg-mango-100          /* Soft Mango Cream (#FFEFD6) */
bg-mint-100           /* Mint Milk (#E0F4E8) */
bg-peach-100          /* Blush Peach (#FFE4DE) */

/* Structural Anchors (Buttons & UI Elements) */
bg-charcoal-900       /* Primary call-to-action buttons, heavy UI blocks (#1A1C1E) */
bg-charcoal-800       /* Hover states for primary buttons (#2A2C2E) */
bg-charcoal-900/10    /* Subtle active states, quiet hover backdrops */

/* Borders & Dividers */
border-charcoal-900/10 /* Extremely subtle dividers (if absolutely necessary) */
border-charcoal-900    /* High-contrast structural lines */

/* Text Hierarchy */
text-charcoal-900     /* Hero headlines, primary navigation, strong labels */
text-charcoal-700     /* Menu card text, reviews, secondary information */
text-charcoal-500     /* Muted metadata, business hours sub-text */

/* Button Text (Inverted Canvas Colors) */
text-mango-100        /* Used inside bg-charcoal-900 when on Mango canvas */
text-mint-100         /* Used inside bg-charcoal-900 when on Mint canvas */
text-peach-100        /* Used inside bg-charcoal-900 when on Peach canvas */

```

---

## Typography

Satoshi is utilized for its perfect blend of geometric clarity and approachable warmth. The hierarchy relies on massive size contrasts, from giant hero headlines to compact, crisp labels.

### Font Weights

```css
font-medium      /* Hero headlines (76-104px), large spacious navigation */
font-normal      /* Menu card text, review paragraphs, descriptive text */
font-bold        /* Compact labels, primary CTA buttons, price tags */

```

### Font Size Scale

```css
text-[11px]      /* Compact labels, dietary tags (Vegan, GF), map pins */
text-sm          /* Button text, menu item descriptions (14px) */
text-base        /* Standard review text, location details (16px) */
text-lg          /* Crisp menu card titles, form inputs (18px) */
text-3xl         /* Secondary section headers (Reviews, Locations) */
text-5xl         /* Large spacious navigation links */
text-[76px]      /* Minimum hero headline size */
text-[104px]     /* Maximum hero headline size */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Hero headlines, tight and impactful */
tracking-normal  /* Menu text, standard reading copy */
tracking-wide    /* Compact labels, button text */

uppercase        /* Compact labels, UI tags, Button text */
lowercase        /* Optional stylistic treatment for large navigation items */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 76-104px | medium | charcoal-900 | tighter | none |
| Large Navigation| 5xl | medium | charcoal-900 | normal | lowercase |
| Menu Card Title | lg | bold | charcoal-900 | normal | none |
| Crisp Menu Text | sm | normal | charcoal-700 | normal | none |
| Compact Labels | [11px] | bold | charcoal-900 | wide | uppercase |
| CTA Button | sm | bold | mango-100 | wide | uppercase |

---

## Animation System

### Core Philosophy: Fluid & Fresh

Movements should feel organic and snappy, mimicking the physical weight of fresh fruit dropping into a blender. No slow, lingering fades.

### Page Transitions (Snap & Reveal)

```tsx
initial={{ opacity: 0, y: 40, scale: 0.98 }}
animate={{ opacity: 1, y: 0, scale: 1 }}
transition={{ type: "spring", stiffness: 260, damping: 20 }}

```

### The Menu Carousel (Drag & Snap)

The carousel relies on physics-based drag interactions rather than click-arrows, providing a tactile browsing experience.

```tsx
<motion.div 
  drag="x" 
  dragConstraints={{ left: -1000, right: 0 }}
  whileTap={{ cursor: "grabbing" }}
  className="flex gap-6 overflow-x-visible cursor-grab"
/>
```

---

## Structural Layout Sequence

The architecture of the page must follow this exact linear flow to maintain the high-impact narrative:

1. **Hero Section:** Solid pastel field, oversized Satoshi copy (76–104px), prominent isolated smoothie photography with fresh fruit styling.
2. **Menu Carousel:** Horizontal scroll of menu cards directly underneath the hero.
3. **Location Imagery:** High-quality, edge-to-edge lifestyle/shop photography.
4. **Dine-In / Order Options:** Two clear, oversized interaction zones.
5. **Reviews:** Clean typographic quotes.
6. **Hours & Map:** Grid-aligned, highly functional text and minimalistic map block.
7. **Minimal Final CTA:** A solitary charcoal button resting in massive whitespace.

---

## Component Catalog

### Buttons

Buttons are heavy, dark, and pill-shaped, creating maximum contrast against the pastel canvas.

```tsx
// Primary CTA (Dark Charcoal with Pastel Text)
"bg-charcoal-900 text-mango-100 font-bold text-sm uppercase tracking-wide rounded-full px-8 py-4 hover:bg-charcoal-800 hover:scale-105 transition-all duration-300"

// Secondary Option (Outline)
"bg-transparent border-2 border-charcoal-900 text-charcoal-900 font-bold text-sm uppercase tracking-wide rounded-full px-8 py-4 hover:bg-charcoal-900/10 transition-colors"
```

### Navigation

Spacious, uncluttered, and massive. Navigation acts as a structural element rather than just utility.

```tsx
// Large Spacious Navigation Link
"text-5xl font-medium text-charcoal-900 hover:text-charcoal-700 transition-colors py-4 block"
```

### Menu Carousel Cards

Cards have no background color. They rely on the continuous pastel canvas, utilizing whitespace and crisp text alignment to create boundaries.

```tsx
// Crisp Menu Card Container
<div className="flex flex-col w-[280px] flex-shrink-0 group">
  <div className="w-full aspect-[4/5] mb-4 relative">
    {/* Product Photography with subtle drop shadow for depth */}
    <img src="..." className="object-contain drop-shadow-2xl group-hover:scale-105 transition-transform duration-500 ease-out" />
  </div>
  <div className="flex justify-between items-baseline mb-1">
    <h3 className="text-lg font-bold text-charcoal-900">Mango Dream</h3>
    <span className="text-sm font-bold text-charcoal-900">$8</span>
  </div>
  <p className="text-sm font-normal text-charcoal-700 leading-relaxed">
    Fresh mango, coconut milk, agave, and lime squeeze.
  </p>
</div>
```

### Compact Labels

Used for dietary information, tags, and small UI indicators.

```tsx
// Compact Dietary Tag
"px-3 py-1 text-[11px] font-bold uppercase tracking-wide rounded-full border border-charcoal-900/20 text-charcoal-900"
```

---

## Quality Checklist

* [ ] Is the background exactly one continuous pastel color (Mango, Mint, or Peach) with absolutely zero gradients?
* [ ] Is Satoshi the only font used across the entire interface?
* [ ] Does the hero headline measure between 76px and 104px?
* [ ] Do the primary charcoal buttons use the canvas's pastel color for their text?
* [ ] Are the menu cards crisp, lacking heavy background boxes, and relying entirely on proximity?
* [ ] Is the smoothie photography isolated and styled with fresh fruit, utilizing a drop shadow to pop off the flat background?
* [ ] Does the layout rigidly follow the structure: Hero → Carousel → Location → Order Options → Reviews → Hours/Map → Final CTA?

---

## Allowed vs Not Allowed

### ✓ Allowed

* A single, unbroken pastel background (mango cream, mint milk, blush peach).
* Satoshi font exclusively.
* Massive, oversized headlines and typography.
* Very dark charcoal (#1A1C1E) for primary buttons and text.
* Soft, realistic drop shadows on *product photography only*.
* Generous whitespace between all sections.

### ✗ Not Allowed

* Gradients of any kind (backgrounds, buttons, or text).
* White or gray background boxes for cards/containers (disrupts the continuous canvas).
* Secondary fonts or serif typefaces.
* Pastel-colored text on the pastel canvas (fails contrast).
* Standard pure black (#000000).
* Borders or drop shadows on UI elements (buttons, inputs, cards).