Boutique Juice Atelier Design System

/boutiqueJuiceAtelierDesignSystem
A highly disciplined design system for premium culinary commerce, blending editorial elegance with rigorous minimalism—centered on typographic hierarchy, cinematic photography, and restrained color for a refined, gallery-like digital experience.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Boutique Juice Atelier Design System

A design language for premium, editorial-grade culinary commerce interfaces.

---

## Philosophy

> "Ingredients are artifacts; the interface is their gallery."

This system creates digital environments that frame beverages and raw ingredients as curated lifestyle objects. The design bridges the gap between a high-end editorial magazine and a precise, contemporary commerce platform. It relies on severe typographic discipline, austere color fields, and deliberate rhythmic pacing rather than decorative clutter.

### Core Beliefs

1. **Hierarchy through typographic scale** — Massive, precise Geist typography acts as the structural anchor, contrasted against highly legible, restrained ordering modules.
2. **Photography over ornamentation** — Visual interest is generated entirely through cinematic, hyper-focused photographic crops. We do not use abstract vector shapes, squiggles, or decorative patterns.
3. **Rhythmic layout pacing** — The scroll experience breathes deeply, alternating predictably between immersive, full-bleed image panels and centered, generous story sections.
4. **Restraint as luxury** — Elements are given massive amounts of whitespace. If a module feels dense, it loses its premium atelier status.
5. **Solid, calm canvases** — Backgrounds remain strictly flat and matte. Thin, elegant dividers define space where whitespace alone cannot.

### Strict Rules

* **No Decorative Elements** — Visual weight belongs exclusively to the photography and the typography.
* **Strict Palette Adherence** — Only the five core colors may be used. No stark black (#000000) or pure primary colors.
* **No Gradients or Drop Shadows** — Depth is implied through photographic composition and strict grid alignment, never through CSS shadows or gradient overlays.
* **Dual Hero CTAs Only** — The hero section is mathematically structured: one calm color field, one cinematic product composition, and exactly two direct calls-to-action.
* **Absolute Grid Alignment** — Everything aligns to a strict column structure. Floating elements are forbidden.

---

## Color Palette

### The Atelier Scale

The palette is highly controlled, earthy yet sophisticated. It avoids harsh digital contrasts in favor of organic, matte finishes. 

```css
/* Core Canvas & Structure */
bg-chalk-white        /* Main background, pure gallery space (#FCFCFA) */
bg-pale-oat           /* Secondary canvas, subtle grouping backgrounds (#F4F1EC) */
border-pale-oat       /* Thin dividers, ordering module boundaries */
border-chalk-white    /* Inverse borders over colored panels */

/* Curated Tints (Used strictly as solid background fields) */
bg-soft-pear          /* Subdued, organic green-yellow for botanical framing (#E6E9DC) */
bg-blush-citrus       /* Warm, desaturated pink-orange for fruit-based framing (#F6E4DE) */

/* The Anchor */
text-deep-graphite    /* Primary typography, buttons, critical borders (#2A2A2A) */
bg-deep-graphite      /* Primary CTA background, footer blocks */
border-deep-graphite  /* Active inputs, precise hover states */

/* Typography & Interactive States (Opacities of Graphite) */
text-deep-graphite         /* Hero type, section titles, primary data */
text-deep-graphite/70      /* Secondary descriptions, ingredients lists */
text-deep-graphite/40      /* Restrained nav links, inactive states, meta-information */

```

### Destructive Actions (Deletions Only)

```css
/* Handled with graceful typographic shifts rather than harsh reds */
hover:text-deep-graphite/30
hover:line-through
transition-all

```

---

## Typography

Built entirely on **Geist**—a precise, contemporary sans-serif. The system contrasts massive, tight hero text with hyper-legible, airy micro-typography for ordering modules.

### Font Weights

```css
font-light       /* Massive hero type (76-100px), secondary editorial quotes */
font-regular     /* Core body copy, long-form story sections, ingredient lists */
font-medium      /* Elegant section titles, primary CTAs, active nav links */
font-semibold    /* Price tags, precise ordering module metrics, button labels */

```

### Font Size Scale

```css
text-xs          /* Restrained nav links, tertiary footer links (12px) */
text-sm          /* Ingredient breakdowns, secondary button text (14px) */
text-base        /* Standard ordering modules, story body copy (16px) */
text-lg          /* Elegant section titles, large product subtitles (18px) */
text-2xl         /* Checkout totals, mid-sized editorial highlights */
text-4xl         /* Secondary page headers */
text-[76px]      /* Hero type minimum (desktop) */
text-[100px]     /* Hero type maximum (desktop) - Absolute precision */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Exclusively for 76-100px hero typography */
tracking-tight   /* Section titles, product names */
tracking-normal  /* Legible ordering modules, story body */
tracking-wide    /* Restrained nav links, micro-labels */

uppercase        /* Navigation links, CTA labels, ingredient categories */
lowercase        /* Used occasionally in editorial quotes for aesthetic softness */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Type | 76-100px | light | deep-graphite | tighter | none |
| Section Titles | text-lg | medium | deep-graphite | tight | none |
| Nav Links | text-xs | medium | deep-graphite/70 | wide | uppercase |
| Story Body | text-base | regular | deep-graphite/70 | normal | none |
| Order Modules | text-sm | semibold | deep-graphite | normal | none |

---

## Animation System

### Core Philosophy: Editorial Pacing

Motion should mimic the unhurried flipping of a heavy-stock magazine page. No bouncing, no elastic springs. Just smooth, cinematic glides and deliberate fades.

### Page & Image Reveals (Slow Fade-Up)

```tsx
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }} // Elegant, frictionless ease-out

```

### Micro-Interactions (The Photographic Zoom)

Hovering over a curated lifestyle object strictly scales the image *within* its cropped bounding box, maintaining the structural grid while drawing the user in.

```tsx
className="overflow-hidden bg-pale-oat"
// Image child:
className="transition-transform duration-700 ease-out hover:scale-105"

```

---

## UI Components

### The Cinematic Crop Frame

Images are never placed loosely on the canvas. They are cropped heavily to abstract the ingredients, placed within a rigid container with zero border-radius.

```tsx
<div className="relative w-full aspect-[4/5] overflow-hidden bg-pale-oat">
  <img 
    src={lifestyleObject} 
    className="object-cover w-full h-full object-center"
    alt="Curated ingredient" 
  />
</div>

```

### Rhythmic Story Module

Alternating layout structures that enforce the premium pacing of the atelier.

```tsx
<section className="w-full max-w-4xl mx-auto py-32 px-8 flex flex-col items-center text-center">
  <h3 className="text-lg font-medium text-deep-graphite tracking-tight mb-6">
    Section Title
  </h3>
  <p className="text-base text-deep-graphite/70 max-w-xl leading-relaxed">
    Centered story content goes here, allowing for massive breathing room around the text block.
  </p>
</section>

```

### Thin Structural Dividers

Used sparingly to separate ordering modules without adding visual weight.

```tsx
<hr className="w-full border-t border-pale-oat my-12" />

```

---

## Component Catalog

### The Hero Module

A calm, split composition.

```tsx
<header className="min-h-screen bg-soft-pear flex flex-col justify-between p-8">
  <Nav className="text-xs uppercase tracking-wide text-deep-graphite/70" />
  
  <div className="grid grid-cols-2 gap-8 items-center h-full">
    <div className="flex flex-col justify-center">
      <h1 className="text-[88px] font-light tracking-tighter leading-none text-deep-graphite">
        Cold Pressed.
      </h1>
      <div className="flex gap-4 mt-12">
        {/* Strictly two CTAs */}
        <button className="bg-deep-graphite text-chalk-white px-8 py-4 text-xs uppercase tracking-wide font-semibold">Shop Collection</button>
        <button className="bg-transparent border border-deep-graphite text-deep-graphite px-8 py-4 text-xs uppercase tracking-wide font-semibold hover:bg-deep-graphite/5 transition-colors">Our Process</button>
      </div>
    </div>
    <div className="h-[80vh] w-full bg-chalk-white overflow-hidden">
      {/* Cinematic Product Composition */}
    </div>
  </div>
</header>

```

### Ordering Modules

Highly legible, utilitarian structures sitting seamlessly on the canvas.

```tsx
// Product Row
"flex justify-between items-center py-6 border-b border-pale-oat hover:bg-pale-oat/50 transition-colors px-4 group"

// Product Details
"text-lg font-medium tracking-tight text-deep-graphite group-hover:text-deep-graphite/70"

// Price / Action
"text-sm font-semibold text-deep-graphite"

```

### Buttons

```tsx
// Primary Action (Solid Graphite)
"bg-deep-graphite text-chalk-white font-semibold text-xs uppercase tracking-wide px-8 py-4 hover:bg-deep-graphite/90 transition-colors"

// Secondary Action (Ghost/Bordered)
"border border-deep-graphite text-deep-graphite font-semibold text-xs uppercase tracking-wide px-8 py-4 hover:bg-pale-oat transition-colors"

```

### Inputs

Restrained, borderless until focused, resembling physical ledger lines.

```tsx
// Atelier Input
"w-full bg-transparent border-b border-pale-oat py-4 text-base text-deep-graphite placeholder-deep-graphite/40 focus:outline-none focus:border-deep-graphite transition-colors rounded-none"

```

---

## Quality Checklist

* [ ] Is the primary hero typography set to Geist, between 76px and 100px, with `tracking-tighter`?
* [ ] Does the hero section rigidly feature exactly two CTAs?
* [ ] Is the interface completely devoid of drop shadows, gradients, and rounded corners?
* [ ] Does the layout rhythmically alternate between full-bleed cinematic imagery and centered, high-whitespace story sections?
* [ ] Are all backgrounds limited to solid Chalk White, Pale Oat, Soft Pear, or Blush Citrus?
* [ ] Are all nav links and secondary buttons strictly restrained (text-xs, uppercase, tracking-wide)?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Flat, matte background fields in the strict 5-color palette.
* Cinematic, extreme close-up photography of drinks and raw ingredients.
* Massive, generous padding (e.g., `py-32`) between sections.
* Razor-thin dividers (`border-pale-oat`) to organize highly legible ordering data.
* Geist typography used at extreme scales (76-100px for headers, 12px for nav).

### ✗ Not Allowed

* Decorative vectors, abstract blobs, or illustrated icons.
* Drop shadows, glows, or glassmorphism (blurs).
* Rounded corners on product imagery or buttons.
* Any text color other than Deep Graphite (or its opacity variants) and Chalk White.
* Cluttered nav bars; navigation must remain highly restrained and minimal.