Tomato Cream Gallery Minimalism

/tomatoCreamGalleryMinimalism
A warm, culinary-focused design system for premium hospitality, uniting confident typography, generous negative space, and vibrant food imagery for interfaces that feel like a refined gallery dining experience.
0 likes
0 bookmarks
Jun 24, 2026
Design System Content
# Tomato Cream Gallery Minimalism

A culinary-focused design language for premium, warm, and highly visual hospitality interfaces.

---

## Philosophy

> "Ingredients shine when the canvas is warm and the plating is precise."

This system creates interfaces that feel like an acclaimed culinary gallery or a high-end dining experience—inviting, vibrant, and structurally impeccable. The design relies on perfect spatial harmony, framing world-class culinary photography with confident typography and warm, luxurious negative space.

### Core Beliefs

1. **Warmth through negative space** — Generous expanses of cream and porcelain white create an inviting but elevated canvas, rejecting the sterility of pure white.
2. **Imagery is the hero** — Vibrant, consistent culinary photography leads the eye; the UI exists entirely to frame and elevate the food.
3. **Confident hierarchy** — Semibold sans typography creates immediate focal points and clear pacing without shouting.
4. **Tactile softness** — Simple rounded CTAs, quiet borders, and translucent overlays mimic the refined, approachable touch of modern luxury hospitality.
5. **Sequential pacing** — Like a curated multi-course menu, the page flows rhythmically using smooth fade-up motion, horizontal gallery strips, and clear modular boundaries.

### Strict Rules

* **No Pure White or Pure Black** — Use Porcelain or Cream for backgrounds and Charcoal or Black-Olive for typography to reduce harsh contrast and maintain warmth.
* **Photography Dictates Layout** — Strict adherence to consistent image ratios. Images must never be squashed, warped, or arbitrarily cropped outside of defined grid modules.
* **Restrained Accent Usage** — "Tomato Red" is used exclusively for primary calls to action (reservations, primary purchases). It is a beacon, not a decorative wash.
* **No Heavy Drop Shadows** — Depth is achieved through layering (translucent cream overlays) and ultra-thin structural rules, never through muddy gray shadows.
* **Minimal Metadata** — Cards and menu strips should display only essential information. Secondary data is revealed on interaction or deeper navigation.

---

## Color Palette

### The Warm Canvas & Earthy Accents

The palette transitions from warm porcelain canvases up through deep charcoal typography. Tomato Red drives primary interaction, while Basil and Soft Peach offer subtle, organic framing.

```css
/* Backgrounds (Warm & Tactile) */
bg-porcelain          /* Main canvas background (#FAFAF9) */
bg-cream              /* Secondary panels, hero overlays, carousels (#F5F4F0) */
bg-peach/30           /* Super subtle hover states, soft highlights (#FDF3ED) */
bg-cream/80           /* Translucent hero overlays (combined with backdrop blur) */

/* Structural Borders (Quiet & Thin) */
border-cream-dark     /* Ultra-subtle divider lines, quiet card borders (#E8E6E1) */
border-stone-200      /* Thin rules separating lower page modules */
border-peach          /* Focused input rings, active carousel borders */

/* Primary & Secondary Accents */
bg-tomato             /* Primary call-to-action buttons, reservation prompts (#DE3E3E) */
text-tomato           /* Critical interactions, active navigational states */
bg-basil/10           /* Dietary tags, fresh status indicators (#4A7C59) */
text-basil            /* Success states, subtle organic highlights */

/* Text Hierarchy (Earthy & Grounded) */
text-black-olive      /* Primary hero headlines, deep accent typography (#2C2C2A) */
text-charcoal         /* Core body copy, supporting text, menu items (#3E3E3C) */
text-charcoal/70      /* Minimal metadata, operating hours, secondary locations */
text-charcoal/40      /* System hints, disabled states, quiet captions */
```

### Destructive Actions

```css
hover:bg-tomato/10
hover:text-tomato
hover:border-tomato/30
```

---

## Typography

Confident, premium sans-serif typography (e.g., Suisse Works Sans, Roobert, Untitled Sans) dominates the layout. Headlines are semibold with tight line-heights for immediate impact, while body copy is crisp and generously spaced.

### Font Weights

```css
font-normal      /* Core body copy, minimal metadata, story paragraphs */
font-medium      /* Simple rounded CTAs, navigational links, menu highlights */
font-semibold    /* Hero headlines - MANDATORY for premium/immediate feel */
/* font-light and font-extrabold are avoided to maintain a solid, confident middle-ground */
```

### Font Size & Line Height Scale

```css
text-xs          /* Minimal metadata, image captions, dietary tags */
text-sm          /* Button labels, reviews, footer links */
text-base        /* Standard supporting copy, concise descriptions */
text-lg          /* Menu item titles, gallery card headers */
text-2xl         /* Section headers (Story, Menu Highlights, Location) */
text-5xl-7xl     /* Hero headlines (Immediate, premium impact) */

leading-tight    /* Applied to all headlines (text-2xl and above) */
leading-relaxed  /* Applied to all body copy for airy reading */
```

### Letter Spacing

```css
tracking-tight   /* Large hero headlines to create solid typographic blocks */
tracking-normal  /* Default paragraph flow text, menu items */
tracking-wide    /* Navigational headers, thin metadata labels */
```

### Hierarchy Examples

| Element | Size | Weight | Color | Leading | Tracking |
| --- | --- | --- | --- | --- | --- |
| Hero Headline | 6xl | semibold | black-olive | tight | tight |
| Section Titles | 2xl | semibold | charcoal | tight | normal |
| Menu Item Title | lg | medium | black-olive | normal | normal |
| Supporting Copy | base | normal | charcoal | relaxed | normal |
| CTAs & Prompts | sm | medium | porcelain | normal | normal |
| Image Metadata | xs | normal | charcoal/70 | normal | wide |

---

## Animation System

### Core Philosophy: Smooth Fade-Up Motion

Elements load and transition with the grace of a well-choreographed dining service. Motion is smooth, upward, and ease-out heavy.

### Module Fade-Up (Scroll Reveal)

```tsx
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
```

### Gallery Carousel Scroll

Horizontal scrolling should feel tactile, utilizing native scroll snapping or a fluid drag friction.

```css
/* Scroll container behavior */
snap-x snap-mandatory overflow-x-auto scroll-smooth hide-scrollbar
```

### Image Hover Interactions

Culinary photography utilizes a highly restrained, slow-motion scale effect to feel alive without disrupting the layout.

```tsx
whileHover={{ scale: 1.03 }}
transition={{ duration: 0.8, ease: "easeOut" }}
```

---

## UI Components

### Translucent Cream Hero Overlay

Essential for ensuring the semibold hero headline remains legible over vibrant culinary photography.

```tsx
<div className="absolute inset-0 bg-cream/70 backdrop-blur-[2px] z-10" />
<div className="relative z-20 flex flex-col items-center text-center">
  <h1 className="text-6xl font-semibold text-black-olive leading-tight tracking-tight">
    {headline}
  </h1>
  {/* Concise supporting copy and CTAs */}
</div>
```

### Curated Menu Strip (Horizontal Showcase)

A wide, horizontally scrollable gallery card layout. Images maintain strict ratios (e.g., 4:5 or 1:1) with quiet borders.

```tsx
<div className="flex gap-6 overflow-x-auto snap-x snap-mandatory py-8 px-4">
  <div className="min-w-[280px] snap-center flex flex-col gap-3">
    <div className="aspect-[4/5] bg-cream rounded-sm overflow-hidden border border-cream-dark">
      <img src={image} className="w-full h-full object-cover" />
    </div>
    <div className="flex justify-between items-baseline">
      <h3 className="text-lg font-medium text-black-olive">{title}</h3>
      <span className="text-xs text-charcoal/70 tracking-wide">{price}</span>
    </div>
  </div>
</div>
```

### Thin Structural Rules

Used to divide lower page sections (Story, Reviews, Location) seamlessly.

```tsx
<hr className="w-full border-t border-stone-200 my-16" />
```

---

## Component Catalog

### Buttons & CTAs

Simple, rounded, and tactile.

```tsx
// Primary CTA (Reservation Prompt - Tomato Red)
"bg-tomato text-porcelain font-medium text-sm rounded-full px-6 py-3 hover:bg-tomato/90 transition-colors"

// Secondary Action (Menu Highlights - Quiet)
"bg-transparent border border-black-olive text-black-olive font-medium text-sm rounded-full px-6 py-3 hover:bg-cream-dark transition-colors"
```

### Image-Led Modules

For Story and Review sections, images sit flush with warm background blocks.

```tsx
// Story Section Container
"grid grid-cols-1 md:grid-cols-2 gap-12 items-center bg-porcelain p-8 md:p-16"

// Image Wrapper (Quiet Border)
"rounded-sm overflow-hidden border border-stone-200 aspect-square"
```

### Tags & Minimal Metadata

```tsx
// Dietary/Status Tag (Basil)
"px-2 py-1 text-xs font-normal tracking-wide rounded-sm bg-basil/10 text-basil"

// Location/Hours Metadata
"text-xs text-charcoal/70 font-normal tracking-wide uppercase"
```

---

## Quality Checklist

* [ ] Are all background canvases using warm Porcelain or Cream rather than stark pure white?
* [ ] Does the Hero section utilize a translucent cream overlay to balance the photography and typography?
* [ ] Are large headlines using `font-semibold` and `leading-tight` to feel premium and immediate?
* [ ] Is Tomato Red reserved strictly for primary interactive actions and CTAs?
* [ ] Do featured carousel images follow a strict, consistent aspect ratio (e.g., 4:5)?
* [ ] Are section dividers utilizing ultra-thin rules (`border-stone-200`) instead of heavy blocks or shadows?
* [ ] Do interactive elements utilize simple rounded geometries?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Warm cream, porcelain, and soft peach backgrounds.
* Vibrant, high-resolution, un-tinted culinary photography.
* Tomato Red and Basil for critical CTAs and specific food-status tags.
* Smooth, slow fade-up and slow-scale hover animations.
* Tight line-heights on large, semibold headers.
* Wide horizontal gallery scrolling.

### ✗ Not Allowed

* Pure black (`#000000`) or pure white (`#FFFFFF`) anywhere in the interface.
* Heavy drop shadows, elevated cards, or floating opaque panels.
* Complex data visualization, pie charts, or progress bars.
* Gradients (other than imperceptible translucent photographic overlays).
* Thin or Light font weights for primary headlines.