Lightbox Smoothie Gallery Design System

/lightboxSmoothieGalleryDesignSystem
A contemporary, minimalist UI system treating vibrant food imagery as gallery art with bold type, flat colors, and precise layouts for a high-end, structured, and visually dramatic experience.
0 likes
0 bookmarks
Jul 10, 2026
Design System Content
# Lightbox Smoothie Gallery Design System

A design language for minimalist, gallery-inspired contemporary food and beverage interfaces.

---

## Philosophy

> "Ingredients as art; the canvas must be immaculate."

This system creates interfaces that treat colorful drinks, bowls, and raw ingredients like sculptural objects in a high-end contemporary art gallery. The aesthetic is bright, highly structured, and restrained, using refined typography and solid color blocking to elevate the vibrant photography. It relies on precise spatial arrangements rather than heavy decorative elements.

### Core Beliefs

1. **The product is the exhibit** — Photography of the food and drinks takes absolute center stage. The UI acts only as the architectural framing and mounting hardware.
2. **Solid geometry over atmospheric blends** — Color fields must be absolute and solid. Gradients muddy the visual clarity and are strictly prohibited.
3. **Refined neutrality** — A highly controlled palette of warm whites, off-whites, and stone grays provides the foundation, allowing controlled bursts of pale citrus, soft clay, and cucumber green to pop.
4. **Cinematic rhythm** — Scrolling should feel like walking through an exhibition—starting with a monumental hero installation, moving through curated horizontal carousels, and settling into alternating panels of imagery and structured text.
5. **Scale as impact** — Typography scales up dramatically to command attention, while secondary elements remain deeply restrained to maintain gallery-level elegance.

### Strict Rules

* **No Gradients** — Backgrounds, buttons, and overlays must be flat, solid color blocks.
* **Restrained Typography** — Strictly use *Neue Haas Grotesk* or *Geist*. No decorative, rounded, or serif typefaces.
* **Monumental Hero Type** — Primary hero headlines must sit squarely in the 76–100px range.
* **Dramatic Cutouts & Sharp Photography** — Images must be sharp, highly staged, and visually dramatic, often utilizing clean cutouts on solid color fields.
* **Flat Dimensionality** — Depth is achieved through scale, color blocking, and sharp image contrasts. Heavy drop shadows are banned.

---

## Color Palette

### The Gallery & Botanical Scale

The palette contrasts pure, warm gallery walls with striking, botanical-inspired solid tones. Charcoal acts as the anchoring pigment for all primary typography and critical boundaries.

```css
/* Gallery Backgrounds (Structural Foundations) */
bg-warm-white         /* Main canvas, pure but not stark (#FAFAF9) */
bg-stone-50           /* Alternating text block backgrounds (#F5F5F4) */
bg-stone-100          /* Subtle structural boundaries, image plinths (#E7E5E4) */

/* Botanical Blocks (Solid Fields Only) */
bg-pale-citrus        /* Bright, acidic solid backgrounds (#FDE047) */
bg-soft-clay          /* Earthy, grounded hero fields (#D6C9C3) */
bg-cucumber-green     /* Fresh, vibrant accents and CTA backdrops (#A7F3D0) */

/* Structural Borders */
border-charcoal-100   /* Razor-thin gallery dividers (#E4E4E7) */
border-charcoal-900   /* High-contrast framing, active inputs (#27272A) */

/* Text Hierarchy (High Legibility Focus) */
text-charcoal-950     /* Hero text, absolute focus items (#09090B) */
text-charcoal-900     /* Body text, highly legible descriptions (#18181B) */
text-charcoal-500     /* Restrained captions, precise navigation links (#71717A) */
text-warm-white       /* Inverted text on dark/colored solid blocks */

```

### Destructive Actions

```css
hover:bg-charcoal-900
hover:text-warm-white
border-charcoal-900

```

---

## Typography

Typography acts as gallery signage—neutral, highly legible, and varying vastly in scale to indicate hierarchy. *Neue Haas Grotesk* or *Geist* ensures an uncompromising modernist edge.

### Font Weights

```css
font-normal      /* Dominant weight for Hero blocks (76-100px) and Body text */
font-medium      /* Precise navigation, Direct CTAs, section markers */
font-light       /* Rarely used, restricted to massive background numerals */
/* font-bold is heavily restricted — impact is driven by pixel size, not weight */

```

### Font Size Scale

```css
text-[11px]      /* Restrained captions, ultra-fine metadata */
text-[13px]      /* Refined navigation items, secondary metadata */
text-base        /* Highly legible body text (16px) */
text-lg          /* Alternating panel introductions (18px) */
text-2xl         /* Carousel card headers, distinct ingredient titles */
text-5xl         /* Secondary page headers */
text-[76px]      /* Minimum Hero type - baseline monumental scale */
text-[100px]     /* Maximum Hero type - high impact focal point */

```

### Letter Spacing & Transforms

```css
tracking-tight   /* Mandatory for 76-100px Hero blocks */
tracking-normal  /* Highly legible body text and carousels */
tracking-wide    /* Navigational elements and precise CTA labels */

uppercase        /* Restricted to tiny 11px captions or specific nav markers */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Focus | 76-100px | normal | charcoal-950 | tight | none |
| Nav Links | 13px | medium | charcoal-500 | wide | uppercase |
| Main Body | base | normal | charcoal-900 | normal | none |
| Direct CTAs | 13px | medium | warm-white | wide | none |
| Captions | 11px | normal | charcoal-500 | wide | uppercase |

---

## Animation System

### Core Philosophy: The Physical Slide

Movement mimics physically sliding canvases or walking past a plinth. No bouncy, elastic springs; motion is absolute, smooth, and linear.

### Carousel Snap (Horizontal Flow)

```tsx
/* Strict horizontal scrolling with physical snap points */
scroll-snap-type: x mandatory;
scroll-behavior: smooth;

/* Card wrapper snapping */
className="snap-start shrink-0 transition-transform duration-500 ease-out"

```

### Image Reveals (Cinematic Panels)

When scrolling down into alternating panels, images do not fade; they unmask structurally from bottom to top, like a curtain rising.

```tsx
initial={{ clipPath: 'inset(100% 0 0 0)' }}
animate={{ clipPath: 'inset(0 0 0 0)' }}
transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}

```

---

## UI Components

### Hero Composition Array

A strict structural requirement for the top of the page. It features a single color field, 76-100px type, one dramatic image, and exactly two direct CTAs.

```tsx
<header className="min-h-screen bg-soft-clay flex items-center justify-between px-12">
  <div className="flex flex-col gap-8 max-w-2xl">
    <h1 className="text-[88px] text-charcoal-950 tracking-tight leading-none font-normal">
      Botanical Clarity
    </h1>
    <div className="flex gap-4 mt-4">
      <PrimaryCTA label="Order Now" />
      <SecondaryCTA label="Explore Gallery" />
    </div>
  </div>
  <div className="relative w-1/2 h-full flex justify-end">
    {/* Dramatic Cutout Image Composition */}
    <img src="/hero-smoothie-cutout.png" className="object-contain drop-shadow-none" />
  </div>
</header>

```

### Horizontal Item Carousel

Designed to display cards like framed prints in a row. Relies on clean cards and sharp photography.

```tsx
<section className="flex overflow-x-auto snap-x snap-mandatory gap-8 px-12 py-24 hide-scrollbar">
  <CarouselCard 
    image="/bowl-01.jpg" 
    title="Acai Obsidian" 
    caption="WILD BERRY & CHARCOAL" 
  />
  {/* Additional structural cards follow */}
</section>

```

### Alternating Cinematic Panels

Used for deep-dive sections. Exactly 50% image, 50% centered text block on stone/off-white backgrounds.

```tsx
<div className="flex w-full h-[80vh]">
  <div className="w-1/2 bg-stone-50 flex items-center justify-center p-24">
    <div className="max-w-md text-center flex flex-col gap-6">
      <h2 className="text-5xl tracking-tight text-charcoal-950">Pure Extraction</h2>
      <p className="text-base text-charcoal-900 font-normal leading-relaxed">
        Ingredients isolated and blended at peak cellular density.
      </p>
    </div>
  </div>
  <div className="w-1/2 relative">
    <img src="/ingredients-overhead.jpg" className="absolute inset-0 w-full h-full object-cover" />
  </div>
</div>

```

---

## Component Catalog

### Cards

Clean framing, sharp photography. Cards should feel like unmounted photographic prints.

```tsx
// Gallery Carousel Card
"flex flex-col gap-4 w-[400px] shrink-0 group cursor-pointer"

// Card Image Container
"w-full aspect-[4/5] bg-stone-100 overflow-hidden relative"

// Image Behavior
"w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 group-hover:brightness-95"

// Card Typography Block
"flex flex-col gap-1"
// Title: "text-2xl text-charcoal-950 tracking-tight"
// Caption: "text-[11px] text-charcoal-500 uppercase tracking-wide"

```

### Buttons (Direct CTAs)

```tsx
// Primary Direct CTA
"bg-charcoal-950 text-warm-white font-medium text-[13px] tracking-wide px-8 py-4 hover:bg-charcoal-800 transition-colors"

// Secondary Direct CTA
"bg-transparent border border-charcoal-950 text-charcoal-950 font-medium text-[13px] tracking-wide px-8 py-4 hover:bg-charcoal-50 transition-colors"

```

### Navigation

Precise spacing with architectural alignment.

```tsx
// Global Nav Container
"flex items-center justify-between px-12 py-8 bg-transparent absolute top-0 w-full z-50"

// Nav Links Array
"flex gap-12"

// Individual Link
"text-[13px] font-medium text-charcoal-950 tracking-wide uppercase hover:opacity-60 transition-opacity"

```

---

## Quality Checklist

* [ ] Is the Hero typography sized between 76px and 100px with `tracking-tight`?
* [ ] Are all backgrounds and colored blocks 100% solid, containing absolutely zero gradients?
* [ ] Does the Hero section strictly contain exactly one dramatic image composition and two direct CTAs?
* [ ] Do later sections strictly follow the 50/50 alternating cinematic image and centered text block format?
* [ ] Is the typography strictly utilizing *Neue Haas Grotesk* or *Geist* without rounded or decorative alternatives?
* [ ] Have all drop shadows been eliminated in favor of flat color fields and sharp cutouts?
* [ ] Is the navigation spacing precise, generous, and highly aligned?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Flat, solid color blocking using the strict botanical and gallery palette.
* Monumental typographic scale (up to 100px) to command hierarchy.
* Extreme, sharp photographic cutouts acting as architectural elements on the page.
* Generous padding acting as literal gallery whitespace.
* Horizontal scrolling formats with strict snap points.

### ✗ Not Allowed

* Gradients, soft blends, or blurred color background meshes of any kind.
* Drop shadows, outer glows, or artificial 3D depth techniques.
* Typefaces outside of the specified geometric grotesque family.
* Cluttered or overlapping text elements.
* Heavy borders or boxed-in text containers that trap whitespace.